messed that up

src/assets/css/base.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/modules/_bg.scss","../scss/modules/_misc.scss","../scss/modules/_quote.scss","../scss/modules/_time-greeting.scss","../scss/modules/_settings.scss"],"names":[],"mappings":"CAkBA,gDACA,+CACA,iDACA,8CACA,6CACA,2CACA,6CACA,2CACA,iDACA,6CACA,+CACA,+CACA,+CACA,6CACA,+CACA,+CACA,+CACA,+CACA,+CACA,gDACA,gDACA,8CACA,8CACA,kDACA,8CCzCA,sBACA,KAEC,aACA,sBACA,6BACA,mBAEA,SAEA,sBACA,wBACA,sBAEA,qBACA,WAEA,gBAEG,sBACH,iBAID,WACC,qBACA,kBACA,gBACA,0GAKD,MACC,0BAGD,sBAGC,kFCvBD,OACI,yBAEA,YACA,kBAEA,iBACA,kBAEA,kBACI,oBACA,kBAEA,2BACI,YACA,mBAGJ,0BACI,YACA,kBAIR,YACI,iBCvBR,UACC,uBACA,kBAKD,KACC,uBACA,gBC7BD,gBACI,uBACA,YACA,WACA,kBACA,kBACA,qBACA,eACA,eACA,kBACA,mBAGJ,SACI,kBACA,WACA,SAGJ,iBACI,eACA,eACA,WAGJ,SACI,gBACA,SACA","file":"base.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/modules/_bg.scss","../scss/modules/_font.scss","../scss/modules/_misc.scss","../scss/modules/_quote.scss","../scss/modules/_search.scss","../scss/modules/_buttons.scss","../scss/modules/_settings-modal.scss","../scss/modules/_time-greeting.scss"],"names":[],"mappings":"CAkBA,gDACA,+CACA,iDACA,8CACA,6CACA,2CACA,6CACA,2CACA,iDACA,6CACA,+CACA,+CACA,+CACA,6CACA,+CACA,+CACA,+CACA,+CACA,+CACA,gDACA,gDACA,8CACA,8CACA,kDACA,8CCvBA,WACI,6BACA,kBACA,gBACA,+DAGJ,gBACI,6BACA,mBACA,kBACA,eACA,cACA,sBACA,oBACA,qBACA,mBACA,iBACA,cACA,kCACA,6BACA,kCAGJ,WACI,wBACA,8HAEA,kEAGJ,iBACI,eACA,eACA,WCpDJ,sBACA,KAEC,aACA,sBACA,6BACA,mBAEA,SAEA,sBACA,wBACA,sBAEA,wBACA,WAEA,gBAEG,sBACH,iBAID,MACC,0BAGD,sBAGC,kBACA,kFAID,YACI,mBACA,WCrBJ,OACI,iBAEA,yBAEA,YACA,kBAEA,iBACA,kBAEA,kBACI,oBACA,kBAEA,2BACI,YACA,mBAGJ,0BACI,YACA,kBAIR,YACI,iBC3BR,YACI,kBACA,UACA,SACA,aACA,mBACA,mBACI,cACA,YACA,eACA,gBACA,uBAIA,eAHA,oCACI,oCAIR,6BACI,aACA,eACA,WACA,WACA,WACA,iBACA,gBACA,mBACA,eAIR,kBACI,YACA,YACA,mCAGJ,eACI,aACA,mBCxDJ,4BAEI,uBACA,YACA,WACA,kBACA,kBACA,qBACA,eACA,eACA,kBACA,mBAGJ,SACI,kBACA,WACA,SACA,0BACI,oCACA,cAIR,YACI,kBACA,WACA,QAGJ,kBACI,uBACA,YACA,WACA,kBACA,kBACA,qBACA,eACA,eACA,kBACA,mBCxCJ,gBACI,uBACA,YACA,WACA,kBACA,kBACA,qBACA,eACA,eACA,kBACA,mBAGJ,SACI,kBACA,WACA,SAGJ,iBACI,eACA,eACA,WAGJ,SACI,gBACA,SACA,iBAGJ,OACI,aAIJ,QACI,kBACA,qBACA,WACA,YAEA,cACI,UACA,QACA,SAIR,QACI,kBACA,eACA,MACA,OACA,QACA,SACA,sBACA,uBACA,eAEA,gBACI,kBACA,WACA,YACA,WACA,SACA,WACA,sBACA,uBACA,eAIR,sBACI,yBAGJ,oBACI,2BAGJ,6BACI,mCACA,+BACA,2BAGJ,QACI,kBACA,eACA,MACA,OACA,QACA,SACA,sBACA,uBACA,eACA,mBAGF,eACE,kBACA,WACA,YACA,WACA,SACA,WACA,sBACA,uBACA,eACA,kBAGJ,OACI,WAGJ,YACI,eACA,wBACA,YACA,YACA,kBACA,mBACA,aACA,YAEA,mCACI,wBACA,gBACA,WACA,YACA,kBACA,mBACA,eAGJ,+BACI,WACA,YACA,kBACA,mBACA,eAIR,UACI,kBACA,cACA,YACA,aACA,YACA,mBAGJ,sBAEI,eAGJ,aACI,YAGJ,SACI,gBACA,SACA,iBAGJ,OACI,aAGJ,eACI,iBAGJ,IACI,eACA,gBChKJ,UACC,oCACA,kBACG,oBACA,iBACA,mBAKJ,KACC,oCACA,gBACA,iBAGD,2CACK,wBACE,sBACC,qBACI","file":"base.css"}

src/assets/css/dark.css

@@ -1,8 +1,4 @@
-body {
-    font-family: 'Noto Sans HK', sans-serif;
-    background: #2d3436;
-    font-size: 20px;
-}
+
 
 a {
     color: #ffffff;
@@ -19,11 +15,6 @@ a {
     overflow: auto; /* Enable scroll if needed */
     background-color: rgb(0,0,0); /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-    font-family: 'Noto Sans HK', sans-serif;
-}
-img {
-    max-width: 100%;
-    margin-top: 20px;
 }
 
 h1, h2, h3, p {
@@ -35,7 +26,7 @@ h1, h2, h3, p {
     margin: auto;
     padding: 30px;
     width: 450px;
-    max-height: 600px;
+    max-height: 800px;
     overflow-y: auto;
 }
 
@@ -67,9 +58,6 @@ p.subtitle {
     font-size: 30px;
     font-weight: bold;
 }
-.title {
-    float: left;
-}
 
 label.switch, p.switch {
   display: inline;
@@ -91,10 +79,6 @@ label.switch {
   font-size: 30px;
   font-weight: bold;
 }
-.title {
-  float: left;
-}
-
 .close2:hover,
 .close2:focus {
   color: #bdc3c7;
@@ -121,62 +105,11 @@ label.switch {
     background: #2c3e50;
 }
 
-.switch {
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 34px;
-  }
-  
-  .switch input { 
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-  
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: .4s;
-    transition: .4s;
-  }
-  
-  .slider:before {
-    position: absolute;
-    content: "";
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .4s;
-  }
-  
-  input:checked + .slider {
-    background-color: #2196F3;
-  }
-  
-  input:focus + .slider {
-    box-shadow: 0 0 1px #2196F3;
-  }
-  
-  input:checked + .slider:before {
-    -webkit-transform: translateX(26px);
-    -ms-transform: translateX(26px);
-    transform: translateX(26px);
-  }
-  
-  /* Rounded sliders */
-  .slider.round {
-    border-radius: 34px;
-  }
-  
-  .slider.round:before {
-    border-radius: 50%;
-  }
+.drop-btn {
+  color: #fff;
+}
+
+.dropdown {
+   background: #2d3436;
+   color: #fff;
+}

src/assets/css/light.css

@@ -1,8 +1,4 @@
-body {
-    font-family: 'Noto Sans HK', sans-serif;
-    background: #ffffff;
-    font-size: 20px;
-}
+
 .modal {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
@@ -15,11 +11,6 @@ body {
     overflow: auto; /* Enable scroll if needed */
     background-color: rgb(0,0,0); /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-    font-family: 'Noto Sans HK', sans-serif;
-}
-img {
-    max-width: 100%;
-    margin-top: 20px;
 }
 
 h1, h2, h3, p {
@@ -31,7 +22,7 @@ h1, h2, h3, p {
     margin: auto;
     padding: 30px;
     width: 450px;
-    max-height: 600px;
+    max-height: 800px;
     overflow-y: auto;
 }
 
@@ -56,13 +47,6 @@ h1, h2, h3, p {
   font-weight: bold;
 }
 
-label.switch, p.switch {
-  display: inline;
-}
-label.switch {
-  float: right;
-}
-
 p.subtitle {
     color: #000000;
     float: left;
@@ -76,9 +60,6 @@ p.subtitle {
     font-size: 30px;
     font-weight: bold;
 }
-.title {
-    float: left;
-}
 
 .close:hover,
 .close:focus {
@@ -121,62 +102,7 @@ p.subtitle {
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
 }
-.switch {
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 34px;
-  }
-  
-  .switch input { 
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-  
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: .4s;
-    transition: .4s;
-  }
-  
-  .slider:before {
-    position: absolute;
-    content: "";
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .4s;
-  }
-  
-  input:checked + .slider {
-    background-color: #2196F3;
-  }
-  
-  input:focus + .slider {
-    box-shadow: 0 0 1px #2196F3;
-  }
-  
-  input:checked + .slider:before {
-    -webkit-transform: translateX(26px);
-    -ms-transform: translateX(26px);
-    transform: translateX(26px);
-  }
-  
-  /* Rounded sliders */
-  .slider.round {
-    border-radius: 34px;
-  }
-  
-  .slider.round:before {
-    border-radius: 50%;
-  }
+
+.drop-btn {
+  color: #555;
+}

src/assets/css/themes/dark.css

@@ -0,0 +1 @@
+a{color:#fff}.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4)}img{max-width:100%;margin-top:20px}h1,h2,h3,p{color:#fff}.modal-content{background-color:#2d3436;margin:auto;padding:30px;width:450px;max-height:600px;overflow-y:auto}.title,.close,.settingsTitle,.close2{display:inline}.title{color:#fff;float:left;font-size:20px;font-weight:bold}.settingsTitle{color:#fff;float:left;font-size:30px;font-weight:bold}p.subtitle{color:#fff;float:left;font-size:10px;font-weight:bold;margin-top:10px}.close{color:#fff;float:right;font-size:30px;font-weight:bold}.title{float:left}label.switch,p.switch{display:inline}label.switch{float:right}.close:hover,.close:focus{color:#bdc3c7;text-decoration:none;cursor:pointer}.close2{color:#fff;float:right;font-size:30px;font-weight:bold}.close2:hover,.close2:focus{color:#bdc3c7;text-decoration:none;cursor:pointer}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#2d3436}::-webkit-scrollbar-thumb{background:#34495e}::-webkit-scrollbar-thumb:hover{background:#2c3e50}/*# sourceMappingURL=dark.css.map */

src/assets/css/themes/dark.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../scss/themes/dark.scss"],"names":[],"mappings":"AAAA,EACI,WAGJ,OACI,aACA,eACA,UACA,kBACA,OACA,MACA,WACA,YACA,cACA,sBACA,gCAGJ,IACI,eACA,gBAGJ,WAII,WAGJ,eACI,yBACA,YACA,aACA,YACA,iBACA,gBAGJ,qCAII,eAGJ,OACI,WACA,WACA,eACA,iBAGJ,eACI,WACA,WACA,eACA,iBAGJ,WACI,WACA,WACA,eACA,iBACA,gBAGJ,OACI,WACA,YACA,eACA,iBAGJ,OACI,WAGJ,sBAEI,eAGJ,aACI,YAGJ,0BAEI,cACA,qBACA,eAGJ,QACI,WACA,YACA,eACA,iBAGJ,4BAEI,cACA,qBACA,eAGJ,oBACI,UAGJ,0BACI,mBAGJ,0BACI,mBAGJ,gCACI","file":"dark.css"}

src/assets/css/themes/light.css

@@ -0,0 +1 @@
+body{font-family:"Noto Sans HK",sans-serif;background:#fff;font-size:20px}.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4);font-family:"Noto Sans HK",sans-serif}img{max-width:100%;margin-top:20px}h1,h2,h3,p{color:#000}.modal-content{background-color:#ecf0f1;margin:auto;padding:30px;width:450px;max-height:600px;overflow-y:auto}.title,.close{display:inline}.settingsTitle,.close2{display:inline}.title{color:#000;float:left;font-size:20px;font-weight:bold}.settingsTitle{color:#000;float:left;font-size:30px;font-weight:bold}label.switch,p.switch{display:inline}label.switch{float:right}p.subtitle{color:#000;float:left;font-size:10px;font-weight:bold;margin-top:10px}.close{color:#aaa;float:right;font-size:30px;font-weight:bold}.title{float:left}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.close2{color:#aaa;float:right;font-size:30px;font-weight:bold}.title{float:left}.close2:hover,.close2:focus{color:#000;text-decoration:none;cursor:pointer}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888}::-webkit-scrollbar-thumb:hover{background:#555}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#2196f3}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}/*# sourceMappingURL=light.css.map */

src/assets/css/themes/light.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../scss/themes/light.scss"],"names":[],"mappings":"AAAA,KACI,sCACA,gBACA,eAEJ,OACI,aACA,eACA,UACA,kBACA,OACA,MACA,WACA,YACA,cACA,sBACA,gCACA,sCAEJ,IACI,eACA,gBAGJ,WACI,WAGJ,eACI,yBACA,YACA,aACA,YACA,iBACA,gBAGJ,cACE,eAEF,uBACE,eAGF,OACI,WACA,WACA,eACA,iBAGJ,eACE,WACA,WACA,eACA,iBAGF,sBACE,eAEF,aACE,YAGF,WACI,WACA,WACA,eACA,iBACA,gBAEJ,OACI,WACA,YACA,eACA,iBAEJ,OACI,WAGJ,0BAEI,WACA,qBACA,eAGJ,QACE,WACA,YACA,eACA,iBAEF,OACE,WAGF,4BAEE,WACA,qBACA,eAEF,oBACI,UAIJ,0BACI,mBAIJ,0BACI,gBAIJ,gCACI,gBAEJ,QACI,kBACA,qBACA,WACA,YAGF,cACE,UACA,QACA,SAGF,QACE,kBACA,eACA,MACA,OACA,QACA,SACA,sBACA,uBACA,eAGF,eACE,kBACA,WACA,YACA,WACA,SACA,WACA,sBACA,uBACA,eAGF,sBACE,yBAGF,oBACE,2BAGF,6BACE,mCACA,+BACA,2BAIF,cACE,mBAGF,qBACE","file":"light.css"}

src/assets/css/yee.css

@@ -0,0 +1,438 @@
+.mountain {
+    background-image: url("../img/1.jpeg")
+}
+
+.sunrise {
+    background-image: url("../img/2.jpeg")
+}
+
+.butterfly {
+    background-image: url("../img/3.jpeg")
+}
+
+.leaves {
+    background-image: url("../img/4.jpeg")
+}
+
+.river {
+    background-image: url("../img/5.jpeg")
+}
+
+.sea {
+    background-image: url("../img/6.jpeg")
+}
+
+.space {
+    background-image: url("../img/7.jpeg")
+}
+
+.ice {
+    background-image: url("../img/8.jpeg")
+}
+
+.waterfall {
+    background-image: url("../img/9.jpeg")
+}
+
+.lake {
+    background-image: url("../img/10.jpeg")
+}
+
+.sunset {
+    background-image: url("../img/11.jpeg")
+}
+
+.desert {
+    background-image: url("../img/12.jpeg")
+}
+
+.canyon {
+    background-image: url("../img/13.jpeg")
+}
+
+.rose {
+    background-image: url("../img/14.jpeg")
+}
+
+.forest {
+    background-image: url("../img/15.jpeg")
+}
+
+.cherry {
+    background-image: url("../img/16.jpeg")
+}
+
+.clouds {
+    background-image: url("../img/17.jpeg")
+}
+
+.winter {
+    background-image: url("../img/18.jpeg")
+}
+
+.autumn {
+    background-image: url("../img/19.jpeg")
+}
+
+.flowers {
+    background-image: url("../img/20.jpeg")
+}
+
+.sunrise {
+    background-image: url("../img/21.jpeg")
+}
+
+.rocks {
+    background-image: url("../img/22.jpeg")
+}
+
+.trees {
+    background-image: url("../img/23.jpeg")
+}
+
+.mountains {
+    background-image: url("../img/24.jpeg")
+}
+
+.beach {
+    background-image: url("../img/25.jpeg")
+}
+
+@font-face {
+    font-family: "Material Icons";
+    font-style: normal;
+    font-weight: 400;
+    src: url("../font/MaterialIcons-Regular.woff2") format("woff2")
+}
+
+.material-icons {
+    font-family: "Material Icons";
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -moz-font-feature-settings: "liga";
+    font-feature-settings: "liga";
+    -moz-osx-font-smoothing: grayscale
+}
+
+@font-face {
+    font-family: "Open Sans";
+    src: url("../font/opensans-regular-webfont.woff2") format("woff2"),
+         url("../font/opensans-regular-webfont.woff") format("woff");
+    src: url("../font/roboto-v18-latin-regular.woff2") format("woff2"),
+  }
+
+html,
+body {
+    height: 100%
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    margin: 0;
+    background-size: cover;
+    background-position: 50%;
+    background-color: #000;
+    font-family: "Open Sans";
+    color: #fff;
+    overflow: hidden;
+}
+
+:root {
+    --shadow-color: #111111CC
+}
+#withSeconds, #withoutSeconds, #greetingText {
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+}
+.greeting,
+time,
+.quote {
+    position: absolute;
+    filter: drop-shadow(var(--shadow-shift) var(--shadow-shift) 0 var(--shadow-color))
+}
+
+.quote {
+    padding-top: 15em;
+    --shadow-shift: 0.125rem;
+    width: 37.5%;
+    max-width: 37.5rem;
+    font-size: 1.5rem;
+    text-align: center
+}
+
+.quote blockquote {
+    margin: 0 0 .25rem 0;
+    line-height: 1.125
+}
+
+.quote blockquote ::before {
+    content: "“";
+    margin-right: .25ch
+}
+
+.quote blockquote ::after {
+    content: "”";
+    margin-left: .25ch
+}
+
+.quote cite {
+    font-size: 83.33%
+}
+
+button.settings,
+button.news {
+    background: transparent;
+    border: none;
+    color: #fff;
+    padding: 20px 20px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    display: table-cell
+}
+
+.buttons {
+    position: absolute;
+    right: 10px;
+    top: 10px
+}
+
+button.news {
+    position: absolute;
+    right: 60px;
+    top: 0px;
+}
+
+.search-bar {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    display: flex;
+    flex-direction: row;
+}
+
+i.material-icons {
+    font-size: 30px;
+    display: inline;
+    color: #fff
+}
+
+li.items {
+    list-style: none;
+    margin: 0;
+    padding-top: 30px
+}
+
+.modal {
+    display: none
+}
+
+.modal-content {
+    max-height: 500px;
+}
+
+.greeting {
+    text-shadow: 0 0 25px rgba(0,0,0,0.3);
+    font-size: 3.25rem;
+    padding-bottom: 10em;
+    font-weight: bold;
+    letter-spacing: 2px;
+}
+
+time {
+    font-size: 12rem;
+    font-weight: bold;
+    text-shadow: 0 0 25px rgba(0,0,0,0.3);
+}
+  
+.search-bar input[type=text] {
+    padding: 10px;
+    font-size: 15px;
+    border: 5px;
+    opacity: 0.5;
+    color: #fff;
+    font-weight: bold;
+    margin-left: 5px;
+    letter-spacing: 1px;
+}
+  
+.search-bar button {
+    font-size: 1px;
+    border: none;
+    cursor: pointer;
+    background: none;
+    --shadow-shift: 0.4rem;
+
+}
+
+.search-bar button i.material-icons {
+    text-shadow: 0 0 25px rgba(0,0,0,0.3);
+}
+
+.buttons i.material-icons {
+    text-shadow: 0 0 20px rgba(0,0,0,0.3);
+    padding-top: 0;
+}
+
+.search-bar input[type=text], .search-bar button {
+    display: inline
+}
+
+.input.searchText {
+    flex-grow:2;
+    border:none;
+    box-shadow: 0 0 20px rgba(0,0,0,0.3);
+}
+
+.searchbarform {
+    display:flex;
+    flex-direction:row;
+}
+  
+  .dropdown {
+    position: relative;
+    display: block;
+    float: right;
+    padding: 10px;
+    border: none;
+    background: #ecf0f1;
+  }
+label.switch, p.switch {
+    display: inline;
+  }
+  label.switch {
+    float: right;
+  }
+
+img {
+    max-width: 100%;
+    margin-top: 20px;
+}
+
+.title {
+    float: left;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+  }
+  
+  .switch input { 
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+  
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+  input:checked + .slider {
+    background-color: #FF4F4E;
+  }
+  
+  input:focus + .slider {
+    box-shadow: 0 0 1px #FF4F4E;
+  }
+  
+  input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+  }
+  
+  /* Rounded sliders */
+  .slider.round {
+    border-radius: 34px;
+  }
+  
+  .slider.round:before {
+    border-radius: 50%;
+  }
+
+  .blurslider {
+    margin-top: 7px;
+    -webkit-appearance: none;
+    width: 200px;
+    height: 15px;
+    border-radius: 5px;
+    background: #d3d3d3;
+    outline: none;
+    float: right;
+  }
+
+  
+  .blurslider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background: #FF4F4E;
+    cursor: pointer;
+  }
+  
+  .blurslider::-moz-range-thumb {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background: #FF4F4E;
+    cursor: pointer;
+  }
+
+::selection {
+    background: #FF4F4E;
+    color: #fff;
+  }
+
+ a {
+    color: #FF4F4E;
+    text-decoration: none;
+    font-weight: bold;
+  }
+  
+ a:hover {
+    text-decoration: underline;
+  }
+    
+/*# sourceMappingURL=base.css.map */

src/assets/js/index.js

@@ -16,7 +16,8 @@
 █████████████████████████████████████████████████████████████
 */
 
-const func = require('./modules/func.js');
+const func     = require('./modules/func.js');
+const settings = require('./modules/settings.js');
 
 const init = () => {
 	// init() gets executed only when the page is fully loaded
@@ -24,8 +25,10 @@ const init = () => {
 	func.setRandBg();
 	func.setRandQuote();
 	func.setTime();
-	// set interval to update time every second
-	setInterval(func.setTime, 1000);
+	func.setWithoutSeconds();
+
+	if (!localStorage.getItem('seconds') === 'on') return setInterval(func.setWithoutSeconds, 60000);
+	else return setInterval(func.setTime, 1000);
 };
 
 // initialize on page load through a listener
@@ -34,6 +37,13 @@ document.addEventListener('DOMContentLoaded', init);
 // Disable right click
 document.oncontextmenu = () => { return false; };
 
+// Update modal
+const modal = document.getElementById('updateModal');
+const btn = document.getElementById('openUpdateModal');
+const span = document.getElementsByClassName('close')[0];
+btn.onclick = () => { modal.style.display = 'block'; };
+span.onclick = () => { modal.style.display = 'none'; };
+window.onclick = (event) => { if (event.target === modal) modal.style.display = 'none'; };
 
 // Copy quote text
 /*const copybtn = document.getElementById('copybtn');
@@ -43,19 +53,36 @@ copybtn.onclick = () => {
     document.execCommand('copy');
 };*/
 
-// News Modal
-/*const btn   = document.getElementById('openModal');
-const span  = document.getElementsByClassName('close')[0];
-const modal = document.getElementById('updateModal');
+function copyQuote() {
+    const quote = document.createRange();
+    quote.selectNode(document.getElementById('quoteText'));
+    window.getSelection().removeAllRanges();
+    window.getSelection().addRange(quote);
+    document.execCommand("copy");
+    window.getSelection().removeAllRanges();
+}
 
-btn.onclick = () => { modal.style.display = 'block'; }
-span.onclick = () => { modal.style.display = 'none'; }
-window.onclick = (event) => { if (event.target === modal) modal.style.display = 'none'; }*/
 
-// Settings Modal
-const modal2 = document.getElementById('settingsModal');
-const btn2 = document.getElementById('openSettingsModal');
-const span2 = document.getElementsByClassName('close2')[0];
-btn2.onclick = () => { modal2.style.display = 'block'; };
-span2.onclick = () => { modal2.style.display = 'none'; };
-window.onclick = (event) => { if (event.target === modal2) modal2.style.display = 'none'; };
+
+// Search bar
+const search = () => {
+	const services = {
+		duckduckgo: 'https://duckduckgo.com/?q=',
+		google: 'https://google.com/search?q=',
+		bing: 'https://bing.com/search?q=',
+		yahoo: 'https://search.yahoo.com/search?p=',
+		ask: 'https://ask.com/web?q=',
+		ecosia: 'https://ecosia.org/search?q='
+	}
+	const searchvalue = document.getElementById('searchText').value;
+	windows.open(services[localStorage.getItem('engine')] + searchvalue, '_self');
+	return false;
+}
+
+var slider = document.getElementById("slider");
+var output = document.getElementById("blurValue");
+output.innerHTML = slider.value;
+
+slider.oninput = function() {
+  output.innerHTML = this.value;
+};

src/assets/js/modules/func.js

@@ -42,34 +42,40 @@ module.exports = class Func {
 
     static setRandBg() {
         document.body.classList.add(util.pickFromArray(bg));
-        /*var getJSON = function(url, callback) {
-            var xhr = new XMLHttpRequest();
-            xhr.open('GET', url, true);
-            xhr.responseType = 'json';
-            xhr.onload = function() {
-              var status = xhr.status;
-              if (status === 200) {
-                callback(null, xhr.response);
-              } else {
-                callback(status, xhr.response);
-              }
-            };
-            xhr.send();
-        };
+        /*util.getJSON(`https://api.muetab.xyz/getImage?category=Outdoors`,
+            (err, data) => {
+                document.body.style.background = `#f3f3f3 url('${data.file}') !important`;
+            });*/
+    }
 
-        getJSON(`https://mueapi.derpyenterprises.org/getImage?category=Outdoors`,
-function(err, data) {
-  document.body.style.background = `url('${data.file}') !important`;
-});*/
+    static setWithoutSeconds() {
+        const dateNoSec = new Date(),
+            time = [
+                util.formatTimeUnit(dateNoSec.getHours()),
+                util.formatTimeUnit(dateNoSec.getMinutes())
+            ];
+        document.getElementById('withoutSeconds').innerHTML = time.join(':');
     }
 
     static setRandQuote() {
         const id = util.getRandIndex(quotes.authors);
-        if (util.contains.call(codes.itcodes, nal)) document.querySelector('blockquote').innerHTML = `"${quotes.it[id]}"`; // Italian
-        if (util.contains.call(codes.ptcodes, nal)) document.querySelector('blockquote').innerHTML = `"${quotes.pt[id]}"` || `"${quotes.eng[id]}"`; // Portuguese
-        if (util.contains.call(codes.spcodes, nal)) document.querySelector('blockquote').innerHTML = `"${quotes.sp[id]}"`; // Spanish
-        else document.querySelector('blockquote').innerHTML = `"${quotes.eng[id]}"`; // English
-        document.querySelector('cite').innerHTML = quotes.authors[id];
+        /*util.getJSON(`https://api.muetab.xyz/getQuote`,
+            (err, data) => {
+                if (err) {
+                    if (util.contains.call(codes.itcodes, nal)) document.querySelector('blockquote').innerHTML = `"${quotes.it[id]}"`; // Italian
+                    if (util.contains.call(codes.ptcodes, nal)) document.querySelector('blockquote').innerHTML = `"${quotes.pt[id]}"` || `"${quotes.eng[id]}"`; // Portuguese
+                    if (util.contains.call(codes.spcodes, nal)) document.querySelector('blockquote').innerHTML = `"${quotes.sp[id]}"`; // Spanish
+                    else document.querySelector('blockquote').innerHTML = `"${quotes.eng[id]}"`; // English
+                    document.querySelector('cite').innerHTML = quotes.authors[id];
+                }
+                document.querySelector('blockquote').innerHTML = `"${data.quote}"`;
+                document.querySelector('cite').innerHTML = data.author;
+            });*/
+            if (util.contains.call(codes.itcodes, nal)) document.querySelector('blockquote').innerHTML = `"${quotes.it[id]}"`; // Italian
+            if (util.contains.call(codes.ptcodes, nal)) document.querySelector('blockquote').innerHTML = `"${quotes.pt[id]}"` || `"${quotes.eng[id]}"`; // Portuguese
+            if (util.contains.call(codes.spcodes, nal)) document.querySelector('blockquote').innerHTML = `"${quotes.sp[id]}"`; // Spanish
+            else document.querySelector('blockquote').innerHTML = `"${quotes.eng[id]}"`; // English
+            document.querySelector('cite').innerHTML = quotes.authors[id];
     }
 
     static setTime() {
@@ -81,6 +87,6 @@ function(err, data) {
             ];
         // Joins all of the array elements into a string using the ':' separator
         // Example: [16, 32, 03] -> "16:32:03"
-        document.querySelector('time').innerHTML = time.join(':');
+        document.getElementById('withSeconds').innerHTML = time.join(':');
     }
-};
+};

src/assets/js/modules/settings.js

@@ -0,0 +1,123 @@
+// Settings Modal
+const modal2 = document.getElementById('settingsModal');
+const btn2 = document.getElementById('openSettingsModal');
+const span2 = document.getElementsByClassName('close2')[0];
+btn2.onclick = () => { modal2.style.display = 'block'; };
+span2.onclick = () => { modal2.style.display = 'none'; };
+window.onclick = (event) => { if (event.target === modal2) modal2.style.display = 'none'; };
+
+// Change theme code
+const changeCSS = (cssFile, cssLinkIndex) => {
+    let oldlink = document.getElementsByTagName('link').item(cssLinkIndex);
+    let newlink = document.createElement('link');
+
+    newlink.setAttribute('rel', 'stylesheet');
+    newlink.setAttribute('type', 'text/css');
+    newlink.setAttribute('href', cssFile);
+
+    document.getElementsByTagName('head').item(0).replaceChild(newlink, oldlink);
+}; 
+
+// Load settings
+changeCSS(`./assets/css/${localStorage.getItem('theme')}.css`);
+if (localStorage.getItem('quotes') === 'off') document.getElementById('quoteText').style.display = 'none', document.getElementById("quoteCheck").checked = true;
+if (localStorage.getItem('greeting') === 'off') document.getElementById('greetingText').style.display = 'none', document.getElementById("greetingCheck").checked = true;
+if (localStorage.getItem('searchbar') === 'off') document.getElementById('searchBar').style.display = 'none', document.getElementById("searchBarCheck").checked = true;
+if (localStorage.getItem('seconds') === 'off') {
+	document.getElementById('withSeconds').style.display = 'block';
+	document.getElementById('withoutSeconds').style.display = 'none';
+}
+if (localStorage.getItem('seconds') === 'on') {
+	document.getElementById('withSeconds').style.display = 'none';
+	document.getElementById('withoutSeconds').style.display = 'block';
+	document.getElementById("secondsCheck").checked = true;
+}
+if (localStorage.getItem('theme') === 'light') {
+	document.getElementById("check").checked = true;
+}
+
+// Settings functions
+
+// Theme Option
+const changeTheme = () => {
+    if (document.getElementById('check').checked === true) {
+        changeCSS('./assets/css/light.css');
+        localStorage.setItem('theme', 'light');
+    } else {
+        changeCSS('./assets/css/dark.css');
+        localStorage.setItem('theme', 'dark');
+    }
+}
+
+window.changeTheme = changeTheme;
+
+// Quotes Option
+const hideQuotes = () => {
+	let quoteText = document.getElementById('quoteText');
+
+	if (document.getElementById('quoteCheck').checked === true) {
+		quoteText.style.display = 'none';
+		localStorage.setItem('quotes', 'off');
+    }
+	else {
+		quoteText.style.display = 'block';
+		localStorage.setItem('quotes', 'on');
+	}
+}
+
+window.hideQuotes = hideQuotes;
+
+// Greeting Option
+const hideGreeting = () => {
+	let greetingText = document.getElementById('greetingText');
+
+	if (document.getElementById('greetingCheck').checked === true) {
+		greetingText.style.display = 'none';
+		localStorage.setItem('greeting', 'off');
+	}
+	else {
+		greetingText.style.display = 'block';
+		localStorage.setItem('greeting', 'on');
+	}
+}
+
+window.hideGreeting = hideGreeting;
+
+// Seconds Option
+const hideSeconds = () => {
+	let withSecondsText = document.getElementById('withSeconds');
+	let withoutSecondsText = document.getElementById('withoutSeconds');
+
+	if (document.getElementById('secondsCheck').checked === false) {
+		withoutSecondsText.style.display = 'none';
+		withSecondsText.style.display = 'block';
+		localStorage.setItem('seconds', 'off');
+	} if (document.getElementById('secondsCheck').checked === true) {
+		withoutSecondsText.style.display = 'block';
+		withSecondsText.style.display = 'none';
+		localStorage.setItem('seconds', 'on');
+	}
+	else console.log();
+}
+
+window.hideSeconds = hideSeconds;
+
+// Search Bar Option
+const hideSearchBar = () => {
+	let searchBar = document.getElementById('searchBar');
+
+	if (document.getElementById('searchBarCheck').checked === true) {
+		searchBar.style.display = 'none';
+		localStorage.setItem('searchbar', 'off');
+	}
+	else {
+		searchBar.style.display = 'block';
+		localStorage.setItem('searchbar', 'on');
+	}
+}
+window.hideSearchBar = hideSearchBar;
+
+// Set Engine
+const setSearchEngine = (engine) => { localStorage.setItem('engine', engine); };
+
+window.setSearchEngine = setSearchEngine;

src/assets/js/modules/util.js

@@ -52,4 +52,16 @@ module.exports = class Util {
         }
         return indexOf.call(this, needle) > -1;
     }
+
+    static getJSON(url, callback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', url, true);
+        xhr.responseType = 'json';
+        xhr.onload = () => {
+          var status = xhr.status;
+          if (status === 200) callback(null, xhr.response);
+          else callback(status, xhr.response);
+        };
+        xhr.send();
+    };
 };

src/assets/scss/base.scss

@@ -17,7 +17,10 @@
 */
 
 @import 'modules/bg';
+@import 'modules/font';
 @import 'modules/misc';
 @import 'modules/quote';
-@import 'modules/time-greeting'; 
-@import 'modules/settings';
+@import 'modules/search'; 
+@import 'modules/buttons';
+@import 'modules/settings-modal';
+@import 'modules/time-greeting'; 

src/assets/scss/modules/_buttons.scss

@@ -0,0 +1,42 @@
+button.settings,
+button.news {
+    background: transparent;
+    border: none;
+    color: #fff;
+    padding: 20px 20px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    display: table-cell
+}
+
+.buttons {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    i.material-icons {
+        text-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+        padding-top: 0;
+    }
+}
+
+button.news {
+    position: absolute;
+    right: 60px;
+    top: 0px;
+}
+
+button.copyButton {
+    background: transparent;
+    border: none;
+    color: #fff;
+    padding: 20px 20px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    display: table-cell
+}

src/assets/scss/modules/_font.scss

@@ -0,0 +1,55 @@
+/*
+█████████████████████████████████████████████████████████████                                                                        
+██                                                         ██
+██           ███    ███ ██    ██ ███████                   ██  
+██           ████  ████ ██    ██ ██                        ██ 
+██           ██ ████ ██ ██    ██ █████                     ██ 
+██           ██  ██  ██ ██    ██ ██                        ██ 
+██           ██      ██  ██████  ███████                   ██ 
+██                                                         ██ 
+██                                                         ██                                                                                                 
+██      Copyright 2018-2019 David Ralph (ohlookitsderpy)   ██
+██                 Licensed under MIT                      ██                    
+██      GitHub: https://github.com/ohlookitsderpy/Mue      ██
+██                                                         ██
+██          Special thanks to contributors! <3             ██
+█████████████████████████████████████████████████████████████
+*/
+
+/* fallback */
+@font-face {
+    font-family: "Material Icons";
+    font-style: normal;
+    font-weight: 400;
+    src: url("../font/MaterialIcons-Regular.woff2") format("woff2")
+}
+
+.material-icons {
+    font-family: "Material Icons";
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -moz-font-feature-settings: "liga";
+    font-feature-settings: "liga";
+    -moz-osx-font-smoothing: grayscale
+}
+
+@font-face {
+    font-family: "Open Sans";
+    src: url("../font/opensans-regular-webfont.woff2") format("woff2"),
+        url("../font/opensans-regular-webfont.woff") format("woff");
+    src: url("../font/roboto-v18-latin-regular.woff2") format("woff2"),
+}
+
+i.material-icons {
+    font-size: 30px;
+    display: inline;
+    color: #fff
+}

src/assets/scss/modules/_misc.scss

@@ -13,7 +13,7 @@ body {
 	background-position: 50%;
 	background-color: black; /* Prevent white flash on page load */
 
-	font-family: 'Roboto';
+	font-family: 'Open Sans';
 	color: white;
 
 	overflow: hidden;
@@ -22,15 +22,6 @@ body {
 	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
 }
 
-/* Font */
-@font-face {
-	font-family: 'Roboto';
-	font-style: normal;
-	font-weight: 400;
-	src: local('Roboto'), local('Roboto-Regular'),
-		 url('../font/roboto-v18-latin-regular.woff2') format('woff2'); 
-}
-
 /* Shadow */
 :root {
 	--shadow-color: #111111CC;
@@ -39,5 +30,12 @@ body {
 .greeting,
 time,
 .quote {
+	position: absolute;
 	filter: drop-shadow(var(--shadow-shift) var(--shadow-shift) 0 var(--shadow-color));
+}
+
+/* Selection */
+::selection {
+    background: #FF4F4E;
+    color: #fff;
 }

src/assets/scss/modules/_quote.scss

@@ -17,6 +17,8 @@
 */
 
 .quote {
+    padding-top: 15em;
+
     --shadow-shift: 0.125rem;
 
     width: 37.5%;

src/assets/scss/modules/_search.scss

@@ -0,0 +1,58 @@
+/*
+█████████████████████████████████████████████████████████████                                                                        
+██                                                         ██
+██           ███    ███ ██    ██ ███████                   ██  
+██           ████  ████ ██    ██ ██                        ██ 
+██           ██ ████ ██ ██    ██ █████                     ██ 
+██           ██  ██  ██ ██    ██ ██                        ██ 
+██           ██      ██  ██████  ███████                   ██ 
+██                                                         ██ 
+██                                                         ██                                                                                                 
+██      Copyright 2018-2019 David Ralph (ohlookitsderpy)   ██
+██                 Licensed under MIT                      ██                    
+██      GitHub: https://github.com/ohlookitsderpy/Mue      ██
+██                                                         ██
+██          Special thanks to contributors! <3             ██
+█████████████████████████████████████████████████████████████
+*/
+
+.search-bar {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    display: flex;
+    flex-direction: row;
+    button {
+        font-size: 1px;
+        border: none;
+        cursor: pointer;
+        background: none;
+        --shadow-shift: 0.4rem;
+        i.material-icons {
+            text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
+        }
+        display: inline;
+    }
+    input[type=text] {
+        padding: 10px;
+        font-size: 15px;
+        border: 5px;
+        opacity: 0.5;
+        color: #fff;
+        font-weight: bold;
+        margin-left: 5px;
+        letter-spacing: 1px;
+        display: inline;
+    }    
+}
+
+.input.searchText {
+    flex-grow: 2;
+    border: none;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+}
+
+.searchbarform {
+    display: flex;
+    flex-direction: row;
+}

src/assets/scss/modules/_settings-modal.scss

@@ -0,0 +1,182 @@
+button.settings {
+    background: transparent;
+    border: none;
+    color: white;
+    padding: 20px 20px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    display: table-cell;
+}
+
+.buttons {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}
+
+i.material-icons {
+    font-size: 30px;
+    display: inline;
+    color: #ffffff;
+}
+
+li.items {
+    list-style: none;
+    margin: 0;
+    padding-top: 30px;
+}
+
+.modal {
+    display: none;
+}
+
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+
+    input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+
+    :before {
+        position: absolute;
+        content: "";
+        height: 26px;
+        width: 26px;
+        left: 4px;
+        bottom: 4px;
+        background-color: white;
+        -webkit-transition: .4s;
+        transition: .4s;
+    }
+}
+
+input:checked+.slider {
+    background-color: #FF4F4E;
+}
+
+input:focus+.slider {
+    box-shadow: 0 0 1px #FF4F4E;
+}
+
+input:checked+.slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 34px;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+  }
+
+.title {
+    float: left;
+}
+
+.blurslider {
+    margin-top: 7px;
+    -webkit-appearance: none;
+    width: 200px;
+    height: 15px;
+    border-radius: 5px;
+    background: #d3d3d3;
+    outline: none;
+    float: right;
+
+    ::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background: #FF4F4E;
+        cursor: pointer;
+    }
+
+    ::-moz-range-thumb {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background: #FF4F4E;
+        cursor: pointer;
+    }
+}
+
+.dropdown {
+    position: relative;
+    display: block;
+    float: right;
+    padding: 10px;
+    border: none;
+    background: #ecf0f1;
+}
+
+label.switch,
+p.switch {
+    display: inline;
+}
+
+label.switch {
+    float: right;
+}
+
+li.items {
+    list-style: none;
+    margin: 0;
+    padding-top: 30px
+}
+
+.modal {
+    display: none
+}
+
+.modal-content {
+    max-height: 500px;
+}
+
+img {
+    max-width: 100%;
+    margin-top: 20px;
+}

src/assets/scss/modules/_time-greeting.scss

@@ -19,13 +19,25 @@
 /* Greeting */
 
 .greeting {
-	--shadow-shift: 0.2rem;
+	text-shadow: 0 0 25px rgba(0,0,0,0.3);
 	font-size: 3.25rem;
+    padding-bottom: 10em;
+    font-weight: bold;
+    letter-spacing: 2px;
 }
 
 /* Time */
 
 time {
-	--shadow-shift: 0.4rem;
+	text-shadow: 0 0 25px rgba(0,0,0,0.3);
 	font-size: 12rem;
+	font-weight: bold;
+}
+
+#withSeconds, #withoutSeconds, #greetingText {
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
 }

src/assets/scss/themes/dark.scss

@@ -0,0 +1,124 @@
+a {
+    color: #ffffff;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    padding-top: 100px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+img {
+    max-width: 100%;
+    margin-top: 20px;
+}
+
+h1,
+h2,
+h3,
+p {
+    color: #ffffff;
+}
+
+.modal-content {
+    background-color: #2d3436;
+    margin: auto;
+    padding: 30px;
+    width: 450px;
+    max-height: 600px;
+    overflow-y: auto;
+}
+
+.title,
+.close,
+.settingsTitle,
+.close2 {
+    display: inline;
+}
+
+.title {
+    color: #ffffff;
+    float: left;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.settingsTitle {
+    color: #ffffff;
+    float: left;
+    font-size: 30px;
+    font-weight: bold;
+}
+
+p.subtitle {
+    color: #ffffff;
+    float: left;
+    font-size: 10px;
+    font-weight: bold;
+    margin-top: 10px;
+}
+
+.close {
+    color: #ffffff;
+    float: right;
+    font-size: 30px;
+    font-weight: bold;
+}
+
+.title {
+    float: left;
+}
+
+label.switch,
+p.switch {
+    display: inline;
+}
+
+label.switch {
+    float: right;
+}
+
+.close:hover,
+.close:focus {
+    color: #bdc3c7;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.close2 {
+    color: #ffffff;
+    float: right;
+    font-size: 30px;
+    font-weight: bold;
+}
+
+.close2:hover,
+.close2:focus {
+    color: #bdc3c7;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+}
+
+::-webkit-scrollbar-track {
+    background: #2d3436;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #34495e;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #2c3e50;
+}

src/assets/scss/themes/light.scss

@@ -0,0 +1,182 @@
+body {
+    font-family: 'Noto Sans HK', sans-serif;
+    background: #ffffff;
+    font-size: 20px;
+}
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    font-family: 'Noto Sans HK', sans-serif;
+}
+img {
+    max-width: 100%;
+    margin-top: 20px;
+}
+
+h1, h2, h3, p {
+    color: #000000;
+}
+
+.modal-content {
+    background-color: #ecf0f1;
+    margin: auto;
+    padding: 30px;
+    width: 450px;
+    max-height: 600px;
+    overflow-y: auto;
+}
+
+.title, .close {
+  display: inline;
+}
+.settingsTitle, .close2 {
+  display: inline;
+}
+
+.title {
+    color: #000000;
+    float: left;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.settingsTitle {
+  color: #000000;
+  float: left;
+  font-size: 30px;
+  font-weight: bold;
+}
+
+label.switch, p.switch {
+  display: inline;
+}
+label.switch {
+  float: right;
+}
+
+p.subtitle {
+    color: #000000;
+    float: left;
+    font-size: 10px;
+    font-weight: bold;
+    margin-top: 10px;
+}
+.close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 30px;
+    font-weight: bold;
+}
+.title {
+    float: left;
+}
+
+.close:hover,
+.close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.close2 {
+  color: #aaaaaa;
+  float: right;
+  font-size: 30px;
+  font-weight: bold;
+}
+.title {
+  float: left;
+}
+
+.close2:hover,
+.close2:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+::-webkit-scrollbar {
+    width: 5px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: #888;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+  }
+  
+  .switch input { 
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+  
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+  
+  input:checked + .slider {
+    background-color: #2196F3;
+  }
+  
+  input:focus + .slider {
+    box-shadow: 0 0 1px #2196F3;
+  }
+  
+  input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+  }
+  
+  /* Rounded sliders */
+  .slider.round {
+    border-radius: 34px;
+  }
+  
+  .slider.round:before {
+    border-radius: 50%;
+  }

src/index.html

@@ -22,47 +22,50 @@
 <head>
 	<meta charset='utf-8'>
 	<meta name='viewport' content='width=device-width'>
-	<link rel='stylesheet' type='text/css' href='./assets/css/light.css' />
-	<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons' />
 
 	<title>New Tab</title>
 
+	<link href='./assets/css/light.css' rel='stylesheet'>
 	<link href='./assets/css/base.css' rel='stylesheet'>
 	<link href='./assets/css/animate.css' rel='stylesheet'>
-	<style>
-		.modal {
-			display: none;
-		}
-	</style>
-
+	<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png">
 
 </head>
 
-<body>
-
-
+<body id="body">
 	<div id='greetingText' class='greeting animate'></div>
 
 	<time id='withSeconds' class='animate'></time>
-	<time id='withoutSeconds' style='display: none;' class='animate'></time>
+	<time id='withoutSeconds'class='animate'></time>
 
 	<div id='quoteText' class='quote animate'>
 
 		<blockquote></blockquote>
 
 		<cite></cite>
+		<button class='copyButton' onclick="copyQuote()" type='submit'><i class="material-icons">link</i></button>
 
 	</div>
 	<div id='updateModal' class='modal animate'>
 
 		<div class='modal-content'>
 			<span class='close'>&times;</span>
-			<span class='title'>UPDATE &#128515;</span>
+			<span id='title' class='title'>UPDATE -  SETTINGS + MORE</span>
 			<br>
-			<p class='subtitle'>BY TEAM MUE</p>
-			<img src='https://cdn.discordapp.com/attachments/252071498397777921/593884018840305854/unknown.png' />
-			<h2>Add some colour!</h2>
-			<p>VIVA LAS VEGASSSS</p>
+			<br>
+			<p class='subtitle'>BY TEAM MUE • 05/07/2019</p>
+			<img src="assets/img/updatenewlogo.png">
+			<p class='subtitle'>New Mue Logo</p>
+			<br>
+			<br>
+			<h2>First Major Update! (Settings, search and more)</h2>
+			<p><b>The Mue feature update is finally here</b> - in this update we have added a lot of features such as settings, search bar, and customization, the latter of which was requested by many users. <br> In the settings, you can now disable or enable features such as the seconds appearing or the custom quotes. To do this just go to the top right of the page and there's a settings icon when you click that will be a popup modal which you can view the settings on. <br> Below is a screenshot of the settings!</p> 
+			<img src="assets/img/muesettings.png">
+			<p class='subtitle'>Picture of settings</p>
+			<br>
+			<br>
+			<p>The next new feature is the search bar; like the name suggests, you can search things using the search bar; currently there is only duckduckgo but soon we'll be adding inferior search engines such as Google, Bing, Yahoo and even Ask Jeeves which no one uses in 2019. <br>Another new feature, now using our brand new API which is on the new <a href="https://muetab.xyz">website</a> at muetab.xyz is the renewed random quotes - you can now get a random quote from the API where if you have an internet connection you will be able to see around the quote every time you refresh the page and will be updated on the clouds even if you never update extension which you should by the way you still get all the brand new quotes.</p>
 		</div>
 	</div>
 	<div id='settingsModal' class='modal animate'>
@@ -70,18 +73,26 @@
 		<div class='modal-content'>
 			<span class='close2'>&times;</span>
 			<span class='settingsTitle'>SETTINGS</span>
+			<br>
+			<br>
 			<li class='items'>
-				<br>
 				<p class='switch'>Theme Switch</p>
 				<label class='switch'>
-					<input id='check' onclick='changeTheme()' type='checkbox'>
+					<input id='check' type='checkbox' onclick='window.changeTheme()'>
+					<span class='slider round'></span>
+				</label>
+			</li>
+			<li class='items'>
+				<p class='switch'>Hide Search Bar</p>
+				<label class='switch'>
+					<input id='searchBarCheck' type='checkbox' onclick='hideSearchBar()'>
 					<span class='slider round'></span>
 				</label>
 			</li>
 			<li class='items'>
 				<p class='switch'>Hide Quotes</p>
 				<label class='switch'>
-					<input id='quoteCheck' type='checkbox' onclick='hideQuotes()'>
+					<input id='quoteCheck' type='checkbox' onclick='hideQuotes()' >
 					<span class='slider round'></span>
 				</label>
 			</li>
@@ -99,18 +110,53 @@
 					<span class='slider round'></span>
 				</label>
 			</li>
+			<!--
 			<li class='items'>
-				<p class='switch'>Custom Background</p>
-				<label class='yeetus'>
-				</label>
-		</div>
+				<div class="sliderContainer">
+					<p class='switch'>Background Blur</p>
+					<input type='range' min='0' max='100' value='0' class="blurslider" id='slider'>
+					<p class='switch'><span id="blurValue"></span>×</p>
+				  </div>
+			</li>
+			 <li class='items'>
+				<p class='switch'>Search Engine</p>
+				<select class="dropdown" id ="searchdropdown">
+					<option value="volvo">DuckDuckGo</option>
+					<option value="saab">Google</option>
+					<option value="mercedes">Ask</option>
+					<option value="audi">Ecosia</option>
+				  </select>
 		</li>
+		<li class='items'>
+			<p class='switch'>Font</p>
+			<select class="dropdown" id="font_dropdown">
+				<option value="opensans" onclick="setFontOP()">Open Sans</option>
+				<option value="roboto" onclick="setFontROB()">Roboto</option>
+			  </select>
+	</li>
+	-->
+	</div>
 	</div>
 	<div class='buttons'>
 		<button class='settings' id='openSettingsModal'><i class='material-icons'>settings</i></button>
-		<button id='openNewsModal' style='display: none;'>Open Update News Module</button>
+		<button class='news' id='openUpdateModal' onclick="setFontROB()"><i class='material-icons'>new_releases</i></button>
+	</div>
+	<div id='searchBar' class='search-bar'>
+		<form id='searchBar' class="searchbarform" action='https://google.com' onsubmit='search()'>
+			<input type='text' placeholder='SEARCH' style='color: #000000;' name='q' id='searchText' class='searchText' />
+			<button class='searchbutton' type='submit'><i class='material-icons'>search</i></button>
+		  </form>
 	</div>
 </body>
+<script>
+function copyQuote() {
+    const quote = document.createRange();
+    quote.selectNode(document.getElementById('quoteText'));
+    window.getSelection().removeAllRanges();
+    window.getSelection().addRange(quote);
+    document.execCommand("copy");
+    window.getSelection().removeAllRanges();
+}
+</script>
 <script src='./assets/js/base.js'></script>
-<script src='./assets/js/stuff.js'></script>
 </html>

src/manifest-chrome.json

@@ -1,5 +1,6 @@
 {
   "manifest_version": 2,
+  "offline_enabled": true,
   "name": "Mue",
   "version": "0.1",
   "browser_action": {