readme

Change time format

.gitignore

@@ -0,0 +1,8 @@
+# Directories
+node_modules/
+.vscode/
+build/
+
+# Files
+package-lock.json
+yarn.lock

README.md

@@ -15,7 +15,7 @@ Fast, open and free-to-use new tab page for most modern browsers.
 * Fast and free
 * Supports multiple browsers
 * Actively developed and opensource
-* Automatically updating API (with no tracking!) with new photos and offline mode
+* Automatically updating API (with no tracking!) with new photos, quotes and offline mode
 * ~~Multiple language support~~
 * ~~Settings feature - enable/disable features!~~
 * Search bar, ~~update modal, copy button and more!~~
@@ -51,23 +51,28 @@ Development/Other: Read the [Development](#development) section.
   <li> <code>git clone https://github.com/ohlookitsderpy/Mue</code> (If you don't have Git just go to <b>Clone or
       download</b> and click <b>Download ZIP</b>)
   <li> Open a terminal and run these commands: (in the Mue directory)
-  <li> <code>yarn</code> (or <code>npm install</code>)
-  <li> <code>yarn start</code> (or <code>npm start</code>)
+  <li> <code>yarn</code> (or <code>npm i</code>)
+  <li> <code>yarn run all</code> (or <code>npm run all</code>)
   <li> Start developing! (See the sections below for how to set up a developer copy of the extension.)
 </ol>
+<h2>Building</h5>
+<i>This section is a work in progress, and doesn't include the manual edits you are required to do to get it working without errors. 
+Once I find a method to do it automatically, I will update this section accordingly.</li>
 <details>
   <summary><b>Chrome</b> (Click to expand)</summary>
   <ol>
-    <li> Rename <code>manifest-chrome.json</code> to <code>manifest.json</code>
+    <li> <code>yarn run build</code> (or <code>npm run build</code>)
+    <li> Rename <code>manifest-chrome.json</code> in the "manfiest" folder to <code>manifest.json</code> in "build" (replace the one created by React)
     <li> Visit <code>chrome://extensions</code> in Chrome
     <li> Click <b>Load unpacked</b> (Make sure <b>Developer Mode</b> is on)
-    <li> Go to the directory containing Mue and click <b>ok</b>
+    <li> Go to the directory containing the built copy of Mue and click <b>ok</b>
     <li> Enjoy your new tab!
 </details>
 <details>
   <summary><b>Opera</b> (Click to expand)</summary>
   <ol>
-    <li> Rename <code>manifest-opera.json</code> to <code>manifest.json</code>
+    <li> <code>yarn run build</code> (or <code>npm run build</code>)
+    <li> Rename <code>manifest-opera.json</code> in the "manfiest" folder to <code>manifest.json</code> in "build" (replace the one created by React)
     <li> Visit <code>about://extensions</code> in Opera
     <li> Click <b>Load unpacked extension...</b> (Make sure <b>Developer Mode</b> is on)
     <li> Go to the directory containing Mue and click <b>ok</b>
@@ -77,7 +82,9 @@ Development/Other: Read the [Development](#development) section.
   <summary><b>Firefox</b> (Click to expand)</summary>
   <i>Note: I'm currently trying to find a better method to do this, but this works for now.</i>
   <ol>
-    <li> Rename <code>manifest-firefox.json</code> to <code>manifest.json</code>
+    <li> <code>yarn run build</code> (or <code>npm run build</code>)
+    <li> Rename <code>manifest-firefox.json</code> in the "manfiest" folder to <code>manifest.json</code> in "build" (replace the one created by React) 
+    <li> Move <code>manifest/background-opera.js</code> to <code>build/background-opera.js</code>   
     <li> Visit <code>about:debugging#addons</code> in Firefox
     <li> Click <b>Load Temporary Add-on</b>
     <li> Go to the directory containing Mue and click on the <b>manifest.json</b>
@@ -128,7 +135,7 @@ Candystick - Portuguese (Some Quotes)
 
 [dondish](https://github.com/dondish) - Hebrew and Russian (Messages)
 
-[MrSheldon](https://github.com/MrSheldon) - Arabic and Swedish (Messages)
+[Roee Lupo (MrSheldon)](https://github.com/MrSheldon) - Arabic and Swedish (Messages)
 
 *Feel free to pull request with other translations!*
 

manifest/background-opera.js

@@ -0,0 +1,9 @@
+// Original code sourced from https://forums.opera.com/topic/25046/how-to-disable-completely-the-speed-dial/14
+
+chrome.tabs.onCreated.addListener((tab) => {
+    if (tab.status === 'complete' && tab.url === 'chrome://startpage/') chrome.tabs.update(tab.id, { url: chrome.extension.getURL('index.html') });
+});
+
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { 
+    if (changeInfo.status === 'complete' && tab.url === 'chrome://startpage/') chrome.tabs.update(tabId, { url: chrome.extension.getURL('index.html') });
+});

manifest/chrome.json

@@ -0,0 +1,12 @@
+{
+    "manifest_version": 2,
+    "offline_enabled": true,
+    "name": "Mue",
+    "version": "0.6",
+    "browser_action": {
+        "default_icon": "./android-chrome-512x512.png"
+    },
+    "chrome_url_overrides": {
+        "newtab": "index.html"
+    }
+}

manifest/firefox.json

@@ -0,0 +1,14 @@
+{
+    "manifest_version": 2,
+    "name": "Mue",
+    "version": "0.6",
+    "browser_action": {
+        "default_icon": "./android-chrome-512x512.png"
+    },
+    "chrome_url_overrides": {
+        "newtab": "index.html"
+    },
+    "chrome_settings_overrides": {
+        "homepage": "index.html"
+    }
+}

manifest/opera.json

@@ -0,0 +1,14 @@
+{
+    "manifest_version": 2,
+    "name": "Mue",
+    "version": "0.6",
+    "browser_action": {
+        "default_icon": "./android-chrome-512x512.png"
+    },
+    "background": {
+        "scripts": ["./background-opera.js"]
+    },
+    "permissions": [
+        "tabs"
+    ]
+}

package.json

@@ -3,19 +3,19 @@
   "author": "ohlookitsderpy",
   "description": "Fast, open and free-to-use new tab page for most modern browsers.",
   "license": "MIT",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "dependencies": {
-    "@material-ui/core": "^4.4.3",
-    "@material-ui/icons": "^4.4.3",
-    "react": "^16.10.1",
-    "react-dom": "^16.10.1",
-    "react-scripts": "3.1.2",
+    "@material-ui/core": "^4.5.1",
+    "@material-ui/icons": "^4.5.1",
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2",
+    "react-scripts": "3.2.0",
     "unfetch": "^4.1.0"
   },
   "devDependencies": {
     "eslint": "^6.5.0",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.22.12"
+    "sass": "^1.23.0"
   },
   "scripts": {
     "start": "react-scripts start",

public/index.html

@@ -1,15 +1,17 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset='utf-8' />
-    <meta name='viewport' content='width=device-width, initial-scale=1' />
-    <link rel='apple-touch-icon' sizes='180x180' href='apple-touch-icon.png'>
-    <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
-    <link rel='icon' type='image/png' sizes='16x16' href='favicon-16x16.png'>
-    <title>New Tab</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to use Mue.</noscript>
-    <div id='root'></div>
-  </body>
-</html>
+
+<head>
+  <meta charset='utf-8' />
+  <meta name='viewport' content='width=device-width, initial-scale=1' />
+  <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+  <link rel='icon' type='image/png' sizes='16x16' href='favicon-16x16.png'>
+  <title>New Tab</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to use Mue.</noscript>
+  <div id='root'></div>
+</body>
+
+</html>

src/App.jsx

@@ -1,27 +1,20 @@
 //* Imports
 import React from 'react';
-import Fetch from 'unfetch';
-import Clock from './modules/Clock';
-import Greeting from './modules/Greeting';
-import Quote from './modules/Quote';
-import Search from './modules/Search';
-import Credit from './modules/Credit';
+import Background from './components/Background';
+import Clock from './components/Clock';
+import Greeting from './components/Greeting';
+import Quote from './components/Quote';
+import Search from './components/Search';
+import Credit from './components/Credit';
 import './css/index.css';
 
-//* Functions
-const getCookie = (cookiename) =>  {
-  const cookiestring = RegExp('' + cookiename + '[^;]+').exec(document.cookie);
-  return unescape(!!cookiestring ? cookiestring.toString().replace(/^[^=]+./,'') : '');
-};
-
-const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };
-
 //* App
 export default class App extends React.Component {
-  // Render all the modules
+  // Render all the components
   render() {
     return (
       <React.Fragment>
+        <Background/>
         <Search/>
           <div id='center'>
               <Greeting/>
@@ -32,35 +25,4 @@ export default class App extends React.Component {
       </React.Fragment>
     );
   }
-
-  // Set background: Attempt to get one from the API first, and if that fails then use the offline ones.
-  async getAndSetBackground() {
-    const root = document.getElementById('root');
-    
-    try {
-      let data = await Fetch('https://api.muetab.xyz/getImage?category=Outdoors');
-      data     = await data.json(); 
-
-      const checkRepeat = getCookie('backgroundimageurl');
-      document.getElementById('photographer').innerText = `Photo by ${data.photographer}`;
-      document.getElementById('location').innerText     = `${data.location}`;
-
-      if (checkRepeat !== root.style.backgroundImage) root.style.backgroundImage = `url(${data.file})`;
-      else {
-        /*let data = await Fetch('https://api.muetab.xyz/getImage?category=Outdoors');
-        data = await data.json();*/ 
-        document.cookie            = 'backgroundimageurl; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-        root.style.backgroundImage = `url(${data.file})`;
-        document.cookie            = `backgroundimageurl=${data.file}`;
-      }
-    } catch (e) {
-      document.getElementById('backgroundCredits').style.display = 'none';
-      document.getElementById('photographer').innerText          = 'Photo from Pexels';
-      root.style.backgroundImage = `url(../offline-images/${randomInt(1, 25)}.jpeg)`;
-    }
-  }
-
-  componentDidMount() {
-    this.getAndSetBackground();
-  }
 }

src/components/Background.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import Fetch from 'unfetch';
+
+const getCookie = (cookiename) =>  {
+    const cookiestring = RegExp('' + cookiename + '[^;]+').exec(document.cookie);
+    return unescape(!!cookiestring ? cookiestring.toString().replace(/^[^=]+./,'') : '');
+};
+  
+const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };
+  
+export default class Background extends React.Component {
+  // Set background: Attempt to get one from the API first, and if that fails then use the offline ones.
+  async getAndSetBackground() {
+    const root = document.getElementById('root');
+    
+    try {
+      let data = await Fetch('https://api.muetab.xyz/getImage?category=Outdoors');
+      data     = await data.json(); 
+
+      const checkRepeat = getCookie('backgroundimageurl');
+      document.getElementById('photographer').innerText = `Photo by ${data.photographer}`;
+      document.getElementById('location').innerText     = `${data.location}`;
+
+      if (checkRepeat !== root.style.backgroundImage) root.style.backgroundImage = `url(${data.file})`;
+      else {
+        /*let data = await Fetch('https://api.muetab.xyz/getImage?category=Outdoors');
+        data = await data.json();*/ 
+        document.cookie            = 'backgroundimageurl; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+        root.style.backgroundImage = `url(${data.file})`;
+        document.cookie            = `backgroundimageurl=${data.file}`;
+      }
+    } catch (e) {
+      document.getElementById('backgroundCredits').style.display = 'none';
+      document.getElementById('photographer').innerText          = 'Photo from Pexels';
+      root.style.backgroundImage = `url(../offline-images/${randomInt(1, 25)}.jpeg)`;
+    }
+  }
+
+  componentDidMount() {
+    this.getAndSetBackground();
+  }
+
+  render() {
+    return null;
+  }
+}

src/components/Clock.jsx

@@ -1,48 +1,42 @@
-import React from 'react';
-
-const checkTime = (i) => {
-  if (i < 10) i = '0' + i;
-  return i;
-};
-
-export default class Clock extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      date: ``,
-      ampm: ``,
-    };
-  }
-
-  startTime() {
-    const today = new Date();
-    let h       = today.getHours();
-    const ampm  = h >= 12 ? 'PM' : 'AM';
-    const m     = checkTime(today.getMinutes());
-    // const s = checkTime(today.getSeconds());
-
-    if (h > 12) h = h - 12;
-
-    if (h < 12) this.setState({ date: '0' + h + ':' + m, ampm: ampm });
-    else this.setState({ date: h + ':' + m, ampm: ampm });
-
-    this.timeout = setTimeout(() => this.startTime(), 500);
-  }
-
-  componentDidMount() {
-    this.startTime();
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timeout);
-  }
-
-  render() {
-    return <h1 className='App-clock'>
-      {this.state.date}
-      <span className='App-ampm-specifier'>
-        {this.state.ampm}  
-      </span>
-    </h1>;
-  }
-}
+import React from 'react';
+
+export default class Clock extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      date: ``,
+      ampm: ``,
+    };
+  }
+
+  startTime() {
+    const today = new Date(); // Get the current date 
+    let h = today.getHours(); // Get hours
+    const ampm = h >= 12 ? 'PM' : 'AM'; // Set AM/PM
+    const m = today.getMinutes(); // Get minutes
+    // const s = today.getSeconds();
+
+    if (h > 12) h = h - 12;
+
+    this.setState({ date: `${('0' + h).slice(-2)}:${('0' + m).slice(-2)}`, ampm: ampm });
+
+    this.timeout = setTimeout(() => this.startTime(), 500);
+  }
+
+  componentDidMount() {
+    this.startTime();
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+
+  render() {
+    return <h1 className='App-clock'>
+      {this.state.date}
+      <span className='App-ampm-specifier'>
+        {this.state.ampm}  
+      </span>
+    </h1>;
+  }
+}

src/components/Credit.jsx

@@ -1,17 +1,17 @@
-/* eslint-disable */
-import RoomIcon from '@material-ui/icons/Room';
-import React from 'react';
-
-export default class Search extends React.Component {
-  render() {
-    return (
-      <div className='credits'>
-          {/* <h1 id='location'></h1> */}
-          <h1 id='photographer'></h1>
-          <div id='backgroundCredits' className='tooltip'><RoomIcon className='locationicon'/>
-            <span className='tooltiptext' id='location'></span>
-          </div>
-     </div>
-    );
-  }
+/* eslint-disable */
+import RoomIcon from '@material-ui/icons/Room';
+import React from 'react';
+
+export default class Search extends React.Component {
+  render() {
+    return (
+      <div className='credits'>
+          {/* <h1 id='location'></h1> */}
+          <h1 id='photographer'></h1>
+          <div id='backgroundCredits' className='tooltip'><RoomIcon className='locationicon'/>
+            <span className='tooltiptext' id='location'></span>
+          </div>
+     </div>
+    );
+  }
 }

src/components/Greeting.jsx

@@ -1,26 +1,26 @@
-import React from 'react';
-
-export default class Greeting extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-        greeting: ``
-    };
- }
-
-  getGreeting() {
-    const h            = new Date().getHours();
-    let t              = 'Good evening'; // Set the default time string to "Good evening"	
-    if (h < 12) t      = 'Good morning'; // If it's before 12am, set the time string to "Good morning"
-    else if (h < 18) t = 'Good afternoon'; // If it's before 6pm, set the time string to "Good afternoon"
-    this.setState({ greeting: t }); // Set the state to the time string
-  }
-
-  componentDidMount() {
-    this.getGreeting();
-  }
-  
-  render() {
-    return <h1 className='App-greeting'>{this.state.greeting}</h1>;
-  }
+import React from 'react';
+
+export default class Greeting extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+        greeting: ``
+    };
+ }
+
+  getGreeting() {
+    const h = new Date().getHours();
+    let t = 'Good evening'; // Set the default time string to "Good evening"	
+    if (h < 12) t = 'Good morning'; // If it's before 12am, set the time string to "Good morning"
+    else if (h < 18) t = 'Good afternoon'; // If it's before 6pm, set the time string to "Good afternoon"
+    this.setState({ greeting: t }); // Set the state to the time string
+  }
+
+  componentDidMount() {
+    this.getGreeting();
+  }
+  
+  render() {
+    return <h1 className='App-greeting'>{this.state.greeting}</h1>;
+  }
 }

src/components/Quote.jsx

@@ -1,37 +1,37 @@
-import React from 'react';
-import Fetch from 'unfetch';
-import quotes from '../quotes.json';
-
-export default class Quote extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-        quote: ``,
-        author: ``
-    };
-  }
-
-  async getQuote() {
-    try {
-      let data = await Fetch('https://api.muetab.xyz/getQuote');
-      data     = await data.json();
-      this.setState({ quote: data.quote, author: data.author });
-    } catch (e) {
-      const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };
-      const num       = randomInt(1, 20);
-      this.setState({ quote: quotes[num].quote, author: quotes[num].author });
-    }
-  }
-
-  componentDidMount() {
-    this.getQuote();
-  }
-
-  render() {
-    return [
-    <h1 className='App-quote'>{`"${this.state.quote}"`}</h1>,
-    // <i class="material-icons">perm_identity</i>,
-    <h1 className='App-quote-author'>{`${this.state.author}`}</h1>,
-    ];
-  }
-}
+import React from 'react';
+import Fetch from 'unfetch';
+import quotes from '../quotes.json';
+
+export default class Quote extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+        quote: ``,
+        author: ``
+    };
+  }
+
+  async getQuote() {
+    try {
+      let data = await Fetch('https://api.muetab.xyz/getQuote');
+      data = await data.json();
+      this.setState({ quote: data.quote, author: data.author });
+    } catch (e) {
+      const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };
+      const num = randomInt(1, 20);
+      this.setState({ quote: quotes[num].quote, author: quotes[num].author });
+    }
+  }
+
+  componentDidMount() {
+    this.getQuote();
+  }
+
+  render() {
+    return [
+    <h1 className='App-quote'>{`"${this.state.quote}"`}</h1>,
+    // <i class="material-icons">perm_identity</i>,
+    <h1 className='App-quote-author'>{`${this.state.author}`}</h1>,
+    ];
+  }
+}

src/components/Search.jsx

@@ -1,14 +1,14 @@
-import React from 'react';
-
-export default class Search extends React.Component {
-  render() {
-    return (
-    <div id='searchBar' className='search-bar'>
-    <form id='searchBar' className='searchbarform' action='https://duckduckgo.com/' onSubmit={('search();')}>
-        <input type='text' placeholder='Search' name='q' id='searchText' className='searchText' />
-        <div className='blursearcbBG' />
-      </form>
-      </div>
-    );
-  }
+import React from 'react';
+
+export default class Search extends React.Component {
+  render() {
+    return (
+    <div id='searchBar' className='search-bar'>
+    <form id='searchBar' className='searchbarform' action='https://duckduckgo.com/' onSubmit={('search();')}>
+        <input type='text' placeholder='Search' name='q' id='searchText' className='searchText' />
+        <div className='blursearcbBG' />
+      </form>
+      </div>
+    );
+  }
 }

src/css/index.css

@@ -1 +1 @@
-.App-clock{font-size:4em;margin:0;text-shadow:0 0 25px rgba(0,0,0,.3)}.App-ampm-specifier{font-size:.5em}.App-greeting{margin:0;font-size:1.6em;text-shadow:0 0 25px rgba(0,0,0,.3)}.App-quote{font-size:.8em;text-shadow:0 0 25px rgba(0,0,0,.3)}@media screen and (min-width: 600px){.App-quote{margin-left:30%;margin-right:30%}}.App-quote-author{font-size:.9em;letter-spacing:.5px;margin:0;text-shadow:0 0 25px rgba(0,0,0,.3)}i.material-icons,h1.App-quote-author{display:inline}.search-bar{position:absolute;left:20px;top:20px;display:flex;flex-direction:row;display:block;color:#fff;font-family:"Lexend Deca"}.search-bar button{cursor:pointer;outline:none;display:inline}.search-bar button i.material-icons{text-shadow:0 0 25px rgba(0,0,0,.3)}.search-bar input[type=text]{font-size:calc(5px + 1.2vmin);background:none;border:2px solid #fff;padding:10px;color:#fff;position:absolute;box-shadow:0 0 25px rgba(0,0,0,.3);z-index:1}.input.searchText{border:none}.searchbarform{display:flex;flex-direction:row;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}#location{margin-bottom:-10px}#location,#photographer{font-size:calc(10px + 1.2vmin);text-shadow:0 0 25px rgba(0,0,0,.3);text-overflow:ellipsis}#photographer{position:absolute;bottom:10px;left:50px;width:1000px}.tooltip{position:absolute;bottom:15px;left:10px}.personicon,.locationicon{font-size:calc(10px + 1.2vmin)}.MuiSvgIcon-root{position:absolute;bottom:2px;left:2px;width:100em;height:100em;font-size:2rem;text-shadow:0 2px 25px rgba(0,0,0,.3)}.credits{bottom:2px;left:0px;position:absolute;text-align:left;min-width:50px}.tooltip{position:relative;display:inline-block;border-bottom:1px dotted #000}.tooltip .tooltiptext{visibility:hidden;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:20px;position:absolute;z-index:1;position:absolute;bottom:40px;left:60px;margin-left:-60px;opacity:0;transition:opacity 1s}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}#center{margin-left:2vw;margin-right:2vw;display:flex;flex-direction:column;justify-content:center;font-size:calc(10px + 2vmin);text-align:center}::placeholder{color:#fff;opacity:1}:-ms-input-placeholder{color:#fff}#root{background-size:cover;background-repeat:no-repeat;background-position:center center;background-attachment:fixed;min-height:100vh;display:grid;color:#fff}.App-link{color:#61dafb}body{background:#2f3640;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Lexend Deca";overflow:hidden}@font-face{font-family:"Lexend Deca";src:url("/./fonts/LexendDeca-Regular.woff2") format("woff2"),url("/./fonts/LexendDeca-Regular.woff") format("woff"),url("/./fonts/LexendDeca.ttf") format("truetype")}/*# sourceMappingURL=index.css.map */
+.App-clock{font-size:4em;margin:0;text-shadow:0 0 25px rgba(0,0,0,.3)}.App-ampm-specifier{font-size:.5em}.App-greeting{margin:0;font-size:1.6em;text-shadow:0 0 25px rgba(0,0,0,.3)}.App-quote{font-size:.8em;text-shadow:0 0 25px rgba(0,0,0,.3)}@media screen and (min-width: 600px){.App-quote{margin-left:30%;margin-right:30%}}.App-quote-author{font-size:.9em;letter-spacing:.5px;margin:0;text-shadow:0 0 25px rgba(0,0,0,.3)}i.material-icons,h1.App-quote-author{display:inline}.search-bar{position:absolute;left:20px;top:20px;display:flex;flex-direction:row;display:block;color:#fff;font-family:"Lexend Deca"}.search-bar button{cursor:pointer;outline:none;display:inline}.search-bar button i.material-icons{text-shadow:0 0 25px rgba(0,0,0,.3)}.search-bar input[type=text]{font-size:calc(5px + 1.2vmin);background:none;border:2px solid #fff;padding:10px;color:#fff;position:absolute;box-shadow:0 0 25px rgba(0,0,0,.3);z-index:1}.input.searchText{border:none}.searchbarform{display:flex;flex-direction:row;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}#location{margin-bottom:-10px}#location,#photographer{font-size:calc(10px + 1.2vmin);text-shadow:0 0 25px rgba(0,0,0,.3);text-overflow:ellipsis}#photographer{position:absolute;bottom:10px;left:50px;width:1000px}.tooltip{position:absolute;bottom:15px;left:10px}.personicon,.locationicon{font-size:calc(10px + 1.2vmin)}.MuiSvgIcon-root{position:absolute;bottom:2px;left:2px;width:100em;height:100em;font-size:2rem;text-shadow:0 2px 25px rgba(0,0,0,.3)}.credits{bottom:2px;left:0px;position:absolute;text-align:left;min-width:50px}.tooltip{position:relative;display:inline-block;border-bottom:1px dotted #000}.tooltip .tooltiptext{visibility:hidden;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:20px;position:absolute;z-index:1;position:absolute;bottom:40px;left:60px;margin-left:-60px;opacity:0;transition:opacity 1s}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}#center{margin-left:2vw;margin-right:2vw;display:flex;flex-direction:column;justify-content:center;font-size:calc(10px + 2vmin);text-align:center}::placeholder{color:#fff;opacity:1}:-ms-input-placeholder{color:#fff}#root{background-size:cover;background-repeat:no-repeat;background-position:center center;background-attachment:fixed;min-height:100vh;display:grid;color:#fff}.App-link{color:#61dafb}body{background:#2f3640;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Lexend Deca";overflow:hidden}@font-face{font-family:"Lexend Deca";src:url("/./fonts/LexendDeca-Regular.woff2") format("woff2")}/*# sourceMappingURL=index.css.map */

src/css/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/modules/_clock.scss","../scss/modules/_greeting.scss","../scss/modules/_quote.scss","../scss/modules/_search.scss","../scss/modules/_credit.scss","../scss/modules/_miscellaneous.scss","../scss/index.scss"],"names":[],"mappings":"AAAA,WACI,cACA,SACA,oCAGJ,oBACE,eCPF,cACI,SACA,gBACA,oCCHJ,WACE,eACA,oCAGF,qCACE,WACE,gBACA,kBAIJ,kBACE,eACA,oBACA,SACA,oCAGF,qCACE,eCpBF,YACI,kBACA,UACA,SACA,aACA,mBACA,cACA,WACA,0BACA,mBACI,eACA,aAIA,eAHA,oCACI,oCAIR,6BACI,8BACA,gBACA,sBACA,aACA,WACA,kBACA,mCACA,UAIR,kBACI,YAGJ,eACI,aACA,mBACA,6CCnCJ,UACI,oBAGJ,wBACI,+BACA,oCACA,uBAGJ,cACE,kBACA,YACA,UACA,aAGF,SACE,kBACA,YACA,UAGF,0BACE,+BAGF,iBACE,kBACA,WACA,SACA,YACA,aACA,eACA,sCAGF,SACI,WACA,SACA,kBACA,gBACA,eAGJ,SACI,kBACA,qBACA,8BAEA,sBACI,kBACA,sBACA,WACA,kBACA,kBACA,aACA,kBACA,UACA,kBACA,YACA,UACA,kBAEA,UACA,sBAIR,4BACE,mBACA,UCxEF,QACI,gBACA,iBACA,aACA,sBACA,uBACA,6BACA,kBAGJ,cACE,WACA,UAGF,uBACE,WCTF,MACI,sBACA,4BACA,kCACA,4BACA,iBACA,aACA,WAGJ,UACI,cAGJ,KACI,mBACA,SACA,mCACA,kCACA,0BACA,gBAGJ,WACI,0BACA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/modules/_clock.scss","../scss/modules/_greeting.scss","../scss/modules/_quote.scss","../scss/modules/_search.scss","../scss/modules/_credit.scss","../scss/modules/_miscellaneous.scss","../scss/index.scss"],"names":[],"mappings":"AAAA,WACE,cACA,SACA,oCAGF,oBACE,eCPF,cACI,SACA,gBACA,oCCHJ,WACE,eACA,oCAGF,qCACE,WACE,gBACA,kBAIJ,kBACE,eACA,oBACA,SACA,oCAGF,qCAEE,eCrBF,YACI,kBACA,UACA,SACA,aACA,mBACA,cACA,WACA,0BAEA,mBACI,eACA,aAMA,eAJA,oCACI,oCAMR,6BACI,8BACA,gBACA,sBACA,aACA,WACA,kBACA,mCACA,UAIR,kBACI,YAGJ,eACI,aACA,mBACA,6CCxCJ,UACE,oBAGF,wBAEE,+BACA,oCACA,uBAGF,cACE,kBACA,YACA,UACA,aAGF,SACE,kBACA,YACA,UAGF,0BAEE,+BAGF,iBACE,kBACA,WACA,SACA,YACA,aACA,eACA,sCAGF,SACE,WACA,SACA,kBACA,gBACA,eAGF,SACE,kBACA,qBACA,8BAEA,sBACE,kBACA,sBACA,WACA,kBACA,kBACA,aACA,kBACA,UACA,kBACA,YACA,UACA,kBAEA,UACA,sBAIJ,4BACE,mBACA,UCzEF,QACE,gBACA,iBACA,aACA,sBACA,uBACA,6BACA,kBAGF,cACE,WACA,UAIF,uBAEE,WCXF,MACI,sBACA,4BACA,kCACA,4BACA,iBACA,aACA,WAGJ,UACI,cAGJ,KACI,mBACA,SACA,mCACA,kCACA,0BACA,gBAGJ,WACI,0BACA","file":"index.css"}

src/index.css

@@ -1,16 +0,0 @@
-body {
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-family: 'Lexend Deca';
-  }
-  
-  @font-face {
-    font-family: 'Lexend Deca'; /* IE9 Compat Modes */
-    src: url('/src/fonts/LexendDeca-Regular.woff2') format('woff2'), /* Super Modern Browsers */
-         url('/src/fonts/LexendDeca-Regular.woff') format('woff'), /* Pretty Modern Browsers */
-         url('/src/fonts/LexendDeca.ttf')  format('truetype'); /* Safari, Android, iOS */
-  }
-  code {
-    font-family: 'Lexend Deca';
-  }

src/index.js

@@ -1,15 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.jsx';
-import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-    <App />,
+    <App/>,
     document.getElementById('root')
 );
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-// Was unregister(), now register() - Derpy
-serviceWorker.register();

src/modules/UpdateModal.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-export default class UpdateModal extends React.Component {
-
-  openModal() {
-      
-  }
-
-  componentDidMount() {
-      
-  }
-
-  componentWillUnmount() {
-    if (!this.timeout) return;
-    clearTimeout(this.timeout);
-  }
-
-  render() {
-    return;
-  }
-}

src/quotes.json

@@ -78,5 +78,25 @@
     "20": {
         "author": "Albert Einstein",
         "quote": "Life is like riding a bicycle. To keep your balance, you must keep moving."
+    },
+    "21": {
+        "author": "Walt Disney",
+        "quote": "The way to get started is to quit talking and begin doing."
+    },
+    "22": {
+        "author": "Winston Churchill",
+        "quote": "A pessimist sees the difficulty in every opportunity; an optimist sees the opportunity in every difficulty."
+    },
+    "23": {
+        "author": "Will Rogers",
+        "quote": "Don't let yesterday take up too much of today."
+    },
+    "24": {
+        "author": "Vince Lombardi",
+        "quote": "It's not whether you get knocked down, it's whether you get up."
+    },
+    "25": {
+        "author": "Steve Jobs",
+        "quote": "If you are working on something that you really care about, you don’t have to be pushed. The vision pulls you."
     }
-}
+}

src/serviceWorker.js

@@ -1,135 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
-
-export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
-        });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
-}
-
-function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then(registration => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        if (installingWorker == null) {
-          return;
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              );
-
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
-
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
-}
-
-function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl)
-    .then(response => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
-    })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
-  }
-}