soon

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
Co-authored-by: Wessel Tip <discord@go2it.eu>

src/App.jsx

@@ -33,6 +33,11 @@ export default class App extends React.Component {
       localStorage.setItem('quote', true);
       localStorage.setItem('firstRun', true);
     }
+
+    let modalClassList = 'Modal';
+    const darkTheme = localStorage.getItem('darkTheme');
+    if (darkTheme === 'true') modalClassList = 'Modal dark';
+  
     return (
       <React.Fragment>
         <div id='backgroundImage'></div>
@@ -44,10 +49,10 @@ export default class App extends React.Component {
             <Clock/> 
             <Quote/>
             <Credit/>
-            <Modal isOpen={this.state.settingsModal} className='Modal' overlayClassName="Overlay" ariaHideApp={false}>
+            <Modal isOpen={this.state.settingsModal} className={modalClassList} overlayClassName="Overlay" ariaHideApp={false}>
               <Settings modalClose={() => this.setState({ settingsModal: false })} />
             </Modal>
-            <Modal isOpen={this.state.updateModal} className='Modal' overlayClassName="Overlay" ariaHideApp={false}>
+            <Modal isOpen={this.state.updateModal} className={modalClassList} overlayClassName="Overlay" ariaHideApp={false}>
               <Update modalClose={() => this.setState({ updateModal: false })} />
             </Modal>
         </div>

src/components/Background.jsx

@@ -2,7 +2,6 @@
 import React from 'react';
 import supportsWebP from 'supports-webp';
 
-
 export default class Background extends React.Component {
   doOffline() {
     const photo = Math.floor(Math.random() * (20 - 1 + 1)) + 1; // There are 20 images in the offline-images folder
@@ -20,8 +19,8 @@ export default class Background extends React.Component {
       default: photographer = 'Unknown'; break;
     }
 
+    document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(../offline-images/${photo}.jpeg)`); // Set background and blur etc
     document.getElementById('photographer').innerText = `Photo by ${photographer} (Pexels)`; // Set the credit
-    document.getElementById('backgroundImage').style.backgroundImage = `url(../offline-images/${photo}.jpeg)`; // Set the background
   }
 
   async setBackground() {    
@@ -36,7 +35,7 @@ export default class Background extends React.Component {
       let data = await fetch(requestURL);
       data = await data.json(); 
 
-      document.getElementById('backgroundImage').style.backgroundImage = `url(${data.file})`; // Set the background
+      document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${data.file})`); // Set background and blur etc
       document.getElementById('photographer').innerText = `Photo by ${data.photographer}`; // Set the credit
       document.getElementById('location').innerText = `${data.location}`; // Set the location tooltip
     } catch (e) { // ..and if that fails we load one locally

src/components/Clock.jsx

@@ -1,14 +1,14 @@
-//* Imports
 import React from 'react';
 
 export default class Clock extends React.Component {
   constructor(...args) {
     super(...args);
+
+    this.timer = undefined;
     this.state = {
       date: '',
-      ampm: '',
+      ampm: ''
     };
-    this.timer = undefined;
   }
   
   startTime(time = localStorage.getItem('seconds') === 'true' ? (1000 - Date.now() % 1000) : (60000 - Date.now() % 60000)) {
@@ -25,8 +25,9 @@ export default class Clock extends React.Component {
           date: `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`
         }); 
       } else {
+        // 12 hour support
         let hours = now.getHours();
-        if (hours > 12) hours -= 12; // 12 hour support
+        if (hours > 12) hours -= 12;
 
         this.setState({ 
           date: `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`,

src/components/Greeting.jsx

@@ -1,46 +1,52 @@
-//* Imports
 import React from 'react';
 
 export default class Greeting extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
-        greeting: ''
+      greeting: ''
     };
  }
 
-  doEvents(t, g) {
+  doEvents(time, message) {
     const enabled = localStorage.getItem('events');
-    if (enabled === 'false') return;
+    if (enabled === 'false') return message;
 
-    const m = t.getMonth(); // Current month
-    const d = t.getDate(); // Current Date
+    // Get current month & day
+    const m = time.getMonth(); // Current month
+    const d = time.getDate(); // Current Date
 
-    if (m === 0 && d === 1) g = 'Happy new year'; // If the date is January 1st, set the greeting string to "Happy new year"
-    else if (m === 11 && d === 25) g = 'Merry Christmas'; // If it's December 25th, set the greeting string to "Merry Christmas"
-    else if (m === 9 && d === 31) g = 'Happy Halloween'; // If it's October 31st, set the greeting string to "Happy Halloween"
-    return {
-      g,
-      t
-    }
+    if (m === 11 && d === 25) message = 'Merry Christmas'; // If it's December 25th, set the greeting string to "Merry Christmas"
+    else if (m === 0 && d === 1) message = 'Happy new year'; // If the date is January 1st, set the greeting string to "Happy new year"
+    else if (m === 9 && d === 31) message = 'Happy Halloween'; // If it's October 31st, set the greeting string to "Happy Halloween"
+    
+    return message;
   }
 
   getGreeting() {
-    const t = new Date(); // Current date object
-    
-    // Normal
-    const h = t.getHours(); // Current hour
+    const now = new Date();
+    const hour = now.getHours();
 
-    let g = 'Good evening'; // Set the default greeting string to "Good evening"	
-    if (h < 12) g = 'Good morning'; // If it's before 12am, set the greeting string to "Good morning"
-    else if (h < 18) g = 'Good afternoon'; // If it's before 6pm, set the greeting string to "Good afternoon"
+    let message = 'Good evening'; // Set the default greeting string to "Good evening"	
+    if (hour < 12) message = 'Good morning'; // If it's before 12am, set the greeting string to "Good morning"
+    else if (hour < 18) message = 'Good afternoon'; // If it's before 6pm, set the greeting string to "Good afternoon"
 
     // Events
-    this.doEvents(t, g);
+    message = this.doEvents(now, message);
 
+    // Name
+    let name = '';
+    let data = localStorage.getItem('greetingName');
+
+    if (typeof data === 'string') {
+      data = data.replace(/\s/g, '');
+      if (data.length > 0) name = `, ${data}`;
+    }
+
+    // Set the state to the greeting string
     this.setState({ 
-      greeting: g 
-    }); // Set the state to the greeting string
+      greeting: `${message}${name}`
+    });
   }
 
   componentDidMount() {

src/components/Search.jsx

@@ -1,12 +1,24 @@
 //* Imports
 import React from 'react';
 
-// TODO: Add option to change search engine
 export default class Search extends React.Component {
   render() {
+    const enabled = localStorage.getItem('searchbar');
+    if (enabled === 'false') return (<div></div>);
+
+    const searchEngine = localStorage.getItem('searchEngine');
+    let url;
+
+    switch (searchEngine) {
+      case 'duckduckgo': url = 'https://duckduckgo.com'; break;
+      case 'google': url = 'https://google.com/search'; break;
+      case 'bing': url = 'https://bing.com/search'; break;
+      default: url = 'https://duckduckgo.com'; break;
+    }
+
     return (
       <div id='searchBar' className='searchbar'>
-        <form id='searchBar' className='searchbarform' action='https://duckduckgo.com/'> 
+        <form id='searchBar' className='searchbarform' action={url}> 
             <input type='text' placeholder='Search' name='q' id='searchtext' className='searchtext'/>
             <div className='blursearcbBG'/>
           </form>

src/components/Settings.jsx

@@ -21,6 +21,12 @@ export default class Settings extends React.Component {
     (element2.style.transform === 'rotate(-180deg)') ? element2.style.transform = 'rotate(0)' : element2.style.transform = 'rotate(-180deg)';
   }
 
+  saveStuff() {
+    localStorage.setItem('blur', document.getElementById('blurRange').value); // this is better than inline onChange for performance
+    localStorage.setItem('greetingName', document.getElementById('greetingName').value);
+    window.location.reload();
+  }
+
   componentDidMount() {
     for (const key of Object.keys(localStorage)) {
       let value = localStorage.getItem(key);
@@ -55,17 +61,17 @@ export default class Settings extends React.Component {
           <li className="extraSettings">
             <ul>
             <input id="1" type="checkbox" onClick={()=> this.setItem('seconds')} id='secondsStatus' />
-            <label for="1">Seconds</label>
+            <label htmlFor="1">Seconds</label>
             </ul>
             <ul>
             <input id="2" type="checkbox" onClick={()=> this.setItem('24hour')} id='24hourStatus' />
-            <label for="2">24 Hour</label>
+            <label htmlFor="2">24 Hour</label>
             </ul>
           </li>
         </div>
         </div>
-        <div className='section'>
-          <h4>Greeting</h4>
+        <div style={{ "lineHeight": "1px" }} className='section'>
+          <h4>Greeting</h4>       
           <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[1], document.getElementsByClassName('expandIcons')[1])} />
           <label className="switch">
             <input type="checkbox" onClick={()=> this.setItem('greeting')} id='greetingStatus' />
@@ -74,7 +80,11 @@ export default class Settings extends React.Component {
           <li className="extraSettings">
             <ul>
             <input id="3" type="checkbox" onClick={()=> this.setItem('events')} id='eventsStatus' />
-            <label for="3">Events</label>
+            <label htmlFor="3">Events</label>
+            </ul>
+            <ul>
+              <p>Name for greeting</p>
+              <input type='text' id='greetingName'></input>
             </ul>
           </li>
         </div>
@@ -94,16 +104,10 @@ export default class Settings extends React.Component {
           </label>
           <li className="extraSettings">
             <ul>
-              <p>Adjust Blur</p>
+              <p>Adjust Blur (<span id='blurAmount'></span>%)</p>
             </ul>
             <ul>
-              <input className="range" type="range" min="1" max="100" />
-            </ul>
-            <ul>
-              <p>Adjust Brightness</p>
-            </ul>
-            <ul>
-              <input className="range" type="range" min="1" max="100" />
+              <input className="range" type="range" min="0" max="100" id='blurRange' onInput={() => document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} />
             </ul>
           </li>
         </div>
@@ -116,8 +120,8 @@ export default class Settings extends React.Component {
           </label>
           <li className="extraSettings">
             <ul>
-            <label for="4">Search Engine</label>
-            <select name="4">
+            <label htmlFor="4">Search Engine</label>
+            <select name="4" id='searchBar'>
               <option value="duckduckgo">DuckDuckGo</option>
               <option value="google">Google</option>
               <option value="bing">Bing</option>
@@ -140,8 +144,16 @@ export default class Settings extends React.Component {
             <span className="slider"></span>
           </label>
         </div>
-        <button className="apply" onClick={() => window.location.reload()}>Apply</button>
+        <div className='section'>
+          <h4>Dark Theme (experimental)</h4>
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('darkTheme')} id='darkThemeStatus'  />
+            <span className="slider"></span>
+          </label>
+        </div>
+        <button className="apply" onClick={() => this.saveStuff()}>Apply</button>
       </div>
+      
     </div>;
   }
 }

src/scss/modules/_credit.scss

@@ -28,7 +28,6 @@
   width: 100em;
   height: 100em;
   font-size: 2rem;
-  text-shadow: 0 2px 25px rgba(0, 0, 0, 0.3);
 }
 
 .credits {
@@ -45,6 +44,8 @@
   border-bottom: 1px dotted black;
   bottom: 15px;
   left: 10px;
+  -webkit-filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
+  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
 
   .tooltiptext {
     visibility: hidden;

src/scss/modules/_greeting.scss

@@ -1,5 +1,4 @@
 .greeting {
     margin: 0;
     font-size: 1.6em;
-    text-shadow: 250px 250px 250px rgba(0, 0, 0, 0.3);
 }

src/scss/modules/_miscellaneous.scss

@@ -21,6 +21,7 @@ body {
   left: 0; 
   right: 0;
   margin: auto;
+  text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }
 
 ::placeholder {

src/scss/modules/_modal.scss

@@ -1,93 +1,101 @@
 .Modal {
-    background-color: #fff;
-    width: 600px;
-    margin: 0 auto;
-    margin-top: 40px;
-    border: none;
-    opacity: 1;
-    z-index: -2;
-    height: auto;
-    padding: 20px; 
-    cursor: hand;
+  background-color: #fff;
+  width: 600px;
+  margin: 0 auto;
+  margin-top: 40px;
+  border: none;
+  opacity: 1;
+  z-index: -2;
+  height: auto;
+  padding: 20px;
+  cursor: hand;
 }
 
 .Overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
 .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;
-  }
-
-  .slider.round {
-    border-radius: 34px;
-  }
-  
-  .slider.round:before {
-    border-radius: 50%;
-  }
-
-  ::-webkit-scrollbar {
-    width: 5px;
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
 }
 
-/* Track /
-::-webkit-scrollbar-track {
-    background: #f1f1f1;
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
 }
 
-/ Handle /
-::-webkit-scrollbar-thumb {
-    background: #888;
+.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;
+}
+
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
 }
 
-/ Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-    background: #555;
+  background: #555;
 }
-  
+
+
+.Modal:focus {
+  outline: 0;
+}
+
+.closeModal {
+  float: right;
+  font-size: 2em;
+  cursor: pointer;
+}
+
+.closeModal:hover {
+  color: grey;
+}
+
+.dark {
+  background-color: #2f3542 !important;
+  color: white !important;
+}

src/scss/modules/_navbar.scss

@@ -3,6 +3,8 @@
     text-align: right;
     min-width: 50px;
     cursor: pointer;
+    -webkit-filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
+    filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
 }
 
 .navbar1 {

src/scss/modules/_quote.scss

@@ -14,11 +14,9 @@
   font-size: 0.9em;
   letter-spacing: 0.5px;
   margin: 0;
-  text-shadow: 25px 25px 25px rgba(0, 0, 0, 0.3);
 }
 
 i.material-icons,
 h1.quoteauthor {
   display: inline;
-  text-shadow: 25px 25px 25px rgba(0, 0, 0, 0.3);
 }

src/scss/modules/_settings.scss

@@ -7,20 +7,6 @@
   z-index: 4;
 }
 
-.Modal:focus {
-  outline: 0;
-}
-
-.closeModal {
-  float: right;
-  font-size: 2em;
-  cursor: pointer;
-}
-
-.closeModal:hover {
-  color: grey;
-}
-
 .switch {
   position: relative;
  /* display: inline-block; */
@@ -192,4 +178,14 @@ li {
   border-radius: 12px;
   background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);;
   cursor: pointer;
+}
+
+input[type=text] {
+  width: 200px;
+  padding: 0.5rem 1rem;
+  box-sizing: border-box;
+  border-image-slice: 1;
+  border-image-source: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
+  outline: none;
+  font-family: 'Lexend Deca', sans-serif;
 }