pwa in qcobjects without another library

.gitignore

@@ -0,0 +1,65 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+firebase-debug.log*
+
+# Firebase cache
+.firebase/
+
+# Firebase config
+
+# Uncomment this if you'd like others to create their own Firebase project.
+# For a team working on the same Firebase project(s), it is recommended to leave
+# it commented so all members can deploy to the same project(s) in .firebaserc.
+# .firebaserc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env

css/components/askforquotebutton.css

@@ -0,0 +1,71 @@
+component[name="askforquotebutton"] > .text {
+  color: #fff;
+  font: 16px;
+  line-height: 70px;
+  text-align: center;
+  letter-spacing: .16em;
+  position: absolute;
+  width: auto;
+  text-transform: uppercase;
+  border: none;
+  border-radius: 60px;
+  margin: 0 auto;
+  margin-top: -10%;
+  cursor: pointer;
+}
+
+.color-change-5x {
+	-webkit-animation: color-change-5x 8s linear infinite alternate both;
+	        animation: color-change-5x 8s linear infinite alternate both;
+  background-blend-mode: difference;
+}
+
+/**
+ * ----------------------------------------
+ * animation color-change-5x
+ * ----------------------------------------
+ */
+@-webkit-keyframes color-change-5x {
+  0% {
+    background: #19dcea;
+    border-radius: 10px;
+  }
+  25% {
+    background: #b22cff;
+    border-radius: 20px;
+  }
+  50% {
+    background: #ea2222;
+    border-radius: 30px;
+  }
+  75% {
+    background: #f5be10;
+    border-radius: 40px;
+  }
+  100% {
+    background: #3bd80d;
+    border-radius: 60px;
+  }
+}
+@keyframes color-change-5x {
+  0% {
+    background: #19dcea;
+    border-radius: 10px;
+  }
+  25% {
+    background: #b22cff;
+    border-radius: 20px;
+  }
+  50% {
+    background: #ea2222;
+    border-radius: 30px;
+  }
+  75% {
+    background: #f5be10;
+    border-radius: 40px;
+  }
+  100% {
+    background: #3bd80d;
+    border-radius: 60px;
+  }
+}

css/components/card.css

@@ -0,0 +1,21 @@
+.card {
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    transition: 0.3s;
+    width: 100%;
+    min-height: 300px;
+    height: auto;
+    border-radius: 30px;
+}
+
+.card:hover {
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+
+.card > .container {
+    padding: 2px 16px;
+}
+
+.card > img {
+    border-radius: 30px 30px 0 0px;
+    min-height: 100px;
+}

css/desktop/container.css

@@ -0,0 +1,13 @@
+/* Insert here your custom CSS */
+
+
+/* GRID */
+component[name=grid]{
+    display: grid;
+    grid-template-rows: 50% 50%;
+    grid-template-columns: 30% 30% 30%;
+    padding: 5%;
+    grid-row-gap: 20px;
+    grid-column-gap: 20px;
+    padding-bottom: 15%;
+  }

css/desktop/content.css

@@ -0,0 +1,32 @@
+/* Insert here your custom CSS */
+
+/* LOGIN 2 FORM */
+
+component[name=loginform].login2 input[type=text],
+component[name=loginform].login2 input[type=password] {
+  width: 30%;
+  padding: 15px;
+  margin: 5px 0 22px 0;
+  display: inline-block;
+  border: none;
+  background: #f1f1f1;
+  margin: 7px;
+}
+
+component[name=loginform].login2 input[type=text]:focus,
+component[name=loginform].login2 input[type=password]:focus {
+  background-color: #ddd;
+  outline: none;
+}
+
+component[name=loginform].login2 form{
+    width: 70% !important;
+    margin:0 auto;
+    grid-auto-flow: column;
+  }
+
+  component[name=loginform].login2 form breakline{
+    display: block;
+  }
+
+/* END LOGIN 2 FORM */

css/desktop/footer.css

@@ -0,0 +1 @@
+/* Insert here your custom CSS */

css/desktop/index.css

@@ -0,0 +1,6 @@
+@import url("./navbar.css");
+@import url("./sidebar.css");
+@import url("./footer.css");
+@import url("./container.css");
+@import url("./content.css");
+

css/desktop/navbar.css

@@ -0,0 +1,22 @@
+/* Insert here your custom CSS */
+nav > span.topnav{
+    padding-left: 70px !important;
+}
+nav .topnav .login-container {
+    float: none !important;
+    width: auto;
+    left: 45% !important;
+    height: auto;
+    position: absolute !important;
+}
+
+.topnav a.createaccountlink1 {
+    display: none !important;
+}
+.topnav a.createaccountlink2 {
+    display: block !important;
+}
+
+nav form {
+    width:100% !important;
+}

css/desktop/sidebar.css

@@ -0,0 +1 @@
+/* Insert here your custom CSS */

css/extra/extra.css

@@ -0,0 +1,5 @@
+img.becomepatreon {
+  margin: 0 auto;
+  border-radius: 12px;
+  padding: 0;
+}