diff --git a/src/App.jsx b/src/App.jsx index 52a5c4cf..5a57c7c6 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,6 +8,7 @@ import Search from './components/Search'; import Credit from './components/Credit'; import Navbar from './components/Navbar'; import Settings from './components/Settings'; +import Update from './components/Update'; import Modal from 'react-modal'; import './scss/index.scss'; @@ -17,16 +18,10 @@ export default class App extends React.Component { constructor(props) { super(props); - this.state = { modal: false }; - this.openModal = this.onOpenModal.bind(this); - } - - onOpenModal() { - this.setState({ modal: true }); - } - - onCloseModal() { - this.setState({ modal: false }); + this.state = { + settingsModal: false, + updateModal: false + }; } // Render all the components @@ -40,16 +35,20 @@ export default class App extends React.Component { } return ( +
- this.onOpenModal()}/> + this.setState({ settingsModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} /> - - this.onCloseModal()} /> + + this.setState({ settingsModal: false })} /> + + + this.setState({ updateModal: false })} />
diff --git a/src/components/Background.jsx b/src/components/Background.jsx index 3b1c9f19..a7a5e598 100644 --- a/src/components/Background.jsx +++ b/src/components/Background.jsx @@ -7,38 +7,22 @@ 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 document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon + let photographer; // Photographer credit let pixabayNumbers = [2, 3, 9, 11, 13, 14, 15]; // As there are a lot of Pixabay photos, we shorten the code a bit here if (pixabayNumbers.includes(photo)) photographer = 'Pixabay'; else switch (photo) { - default: { - photographer = 'Unknown'; - break; - } - case 1: { - photographer = 'Tirachard Kumtanom'; - break; - } - case 4: { - photographer = 'Sohail Na'; - break; - } - case 7: { - photographer = 'Miriam Espacio'; - break; - } - case 10: { - photographer = 'NO NAME'; - break; - } - case 20: { - photographer = 'Fabian Wiktor'; - break; - } + case 1: photographer = 'Tirachard Kumtanom'; break; + case 4: photographer = 'Sohail Na'; break; + case 7: photographer = 'Miriam Espacio'; break; + case 10: photographer = 'NO NAME'; break; + case 20: photographer = 'Fabian Wiktor'; break; + default: photographer = 'Unknown'; break; } + document.getElementById('photographer').innerText = `Photo by ${photographer} (Pexels)`; // Set the credit - document.getElementById('root').style.backgroundImage = `url(../offline-images/${photo}.jpeg)`; // Set the background - } + document.getElementById('backgroundImage').style.backgroundImage = `url(../offline-images/${photo}.jpeg)`; // Set the background + } async setBackground() { const enabled = localStorage.getItem('offlineMode'); @@ -46,12 +30,13 @@ export default class Background extends React.Component { try { // First we try and get an image from the API... let requestURL; - if (await supportsWebP) requestURL = 'https://api.muetab.xyz/getImage?webp=true'; + const enabled = localStorage.getItem('webp'); + if (await supportsWebP && enabled === 'true') requestURL = 'https://api.muetab.xyz/getImage?webp=true'; else requestURL = 'https://api.muetab.xyz/getImage?category=Outdoors'; let data = await fetch(requestURL); data = await data.json(); - document.getElementById('root').style.backgroundImage = `url(${data.file})`; // Set the background + document.getElementById('backgroundImage').style.backgroundImage = `url(${data.file})`; // Set the background 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 diff --git a/src/components/Clock.jsx b/src/components/Clock.jsx index 773d4f23..9424719c 100644 --- a/src/components/Clock.jsx +++ b/src/components/Clock.jsx @@ -8,27 +8,44 @@ export default class Clock extends React.Component { date: '', ampm: '', }; + this.timer = undefined; } + + startTime(time) { + this.timer = setTimeout(() => { + this.startTime(); + const t = new Date(); // Get the current date + const a = t.getHours(); + let h = t.getHours(); // Get hours + + // Seconds + let s = ''; + const enabled = localStorage.getItem('seconds'); + if (enabled === 'true') s = ':' + ('0' + t.getSeconds()).slice(-2); + + const twentyfour = localStorage.getItem('24hour'); + if (twentyfour === 'true') { + // this.date = `${('0' + h).slice(-2)}:${('0' + t.getMinutes()).slice(-2)}${s}`; + return this.setState({ + date: `${('0' + h).slice(-2)}:${('0' + t.getMinutes()).slice(-2)}${s}` + }); + } else { + if (h > 12) h = h - 12; // 12 hour support + // this.date = `${('0' + h).slice(-2)}:${('0' + t.getMinutes()).slice(-2)}${s}`; - startTime() { - const t = new Date(); // Get the current date - const a = t.getHours(); - let h = t.getHours(); // Get hours - // const s = today.getSeconds(); - - if (h > 12) h = h - 12; // 12 hour support - - this.setState({ - date: `${('0' + h).slice(-2)}:${('0' + t.getMinutes()).slice(-2)}`, ampm: a >= 12 ? 'PM' : 'AM' - }); // Set time - - this.timeout = setTimeout(() => this.startTime(), 750); // Update the clock every 750 milliseconds + this.setState({ + date: `${('0' + h).slice(-2)}:${('0' + t.getMinutes()).slice(-2)}${s}`, ampm: a >= 12 ? 'PM' : 'AM' + }); // Set time + } + + + }, (1000 - Date.now() % 1000)); } componentDidMount() { const enabled = localStorage.getItem('time'); if (enabled === 'false') return; - this.startTime(); + this.startTime(0); } render() { diff --git a/src/components/Greeting.jsx b/src/components/Greeting.jsx index 8a3f7795..c035f045 100644 --- a/src/components/Greeting.jsx +++ b/src/components/Greeting.jsx @@ -9,6 +9,22 @@ export default class Greeting extends React.Component { }; } + doEvents(t, g) { + const enabled = localStorage.getItem('events'); + if (enabled === 'false') return; + + const m = t.getMonth(); // Current month + const d = t.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 + } + } + getGreeting() { const t = new Date(); // Current date object @@ -20,12 +36,7 @@ export default class Greeting extends React.Component { else if (h < 18) g = 'Good afternoon'; // If it's before 6pm, set the greeting string to "Good afternoon" // Events - const m = t.getMonth(); // Current month - const d = t.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" + this.doEvents(t, g); this.setState({ greeting: g diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 7520c74b..2e6aac09 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,6 +1,7 @@ //* Imports import RefreshIcon from '@material-ui/icons/Refresh'; import Gear from '@material-ui/icons/Settings'; +import NewReleases from '@material-ui/icons/NewReleases'; import React from 'react'; export default class Navbar extends React.Component { @@ -8,11 +9,14 @@ export default class Navbar extends React.Component { return (
- +
window.location.reload()} />
+
+ +
); } diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx index 6611c5cc..49a04036 100644 --- a/src/components/Settings.jsx +++ b/src/components/Settings.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import ExpandMore from '@material-ui/icons/ExpandMore'; export default class Settings extends React.Component { setItem(key, value) { @@ -15,93 +16,131 @@ export default class Settings extends React.Component { console.log(`[DEBUG] setItem(${key}, ${old} -> ${val})`); } + toggleExtra(element, element2) { + (element.style.display === 'none' || !element.style.display) ? element.style.display = 'block' : element.style.display = 'none'; + (element2.style.transform === 'rotate(-180deg)') ? element2.style.transform = 'rotate(0)' : element2.style.transform = 'rotate(-180deg)'; + } + + componentDidMount() { + for (const key of Object.keys(localStorage)) { + let value = localStorage.getItem(key); + const tag = document.getElementById(`${key}Status`); + + if (tag) { + switch (value) { + case 'true': value = true; break; + case 'false': value = false; break; + default: value = true; + } + + tag.checked = value; + } + } + } + render() { return
- × + ×

Settings

Edit different components to make Mue your new tab.

-
-
-

Time

-
; } diff --git a/src/components/Update.jsx b/src/components/Update.jsx new file mode 100644 index 00000000..5b477c97 --- /dev/null +++ b/src/components/Update.jsx @@ -0,0 +1,11 @@ +import React from 'react'; + +export default class Update extends React.Component { + render() { + return
+ × +

Update

+

Edit different components to make Mue your new tab.

+
; + } +} \ No newline at end of file diff --git a/src/scss/index.scss b/src/scss/index.scss index 2e71897c..e632ccc7 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -8,3 +8,13 @@ @import 'modules/modal'; @import 'modules/settings'; @import 'modules/miscellaneous'; + +#backgroundImage { + height:100vh; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-attachment: fixed; + z-index: 0; + border: none; +} \ No newline at end of file diff --git a/src/scss/modules/_greeting.scss b/src/scss/modules/_greeting.scss index be917bb5..2984b472 100644 --- a/src/scss/modules/_greeting.scss +++ b/src/scss/modules/_greeting.scss @@ -1,5 +1,5 @@ .greeting { margin: 0; font-size: 1.6em; - text-shadow: 0 0 25px rgba(0,0,0,0.3); + text-shadow: 250px 250px 250px rgba(0, 0, 0, 0.3); } \ No newline at end of file diff --git a/src/scss/modules/_miscellaneous.scss b/src/scss/modules/_miscellaneous.scss index 8922282c..3c439448 100644 --- a/src/scss/modules/_miscellaneous.scss +++ b/src/scss/modules/_miscellaneous.scss @@ -15,6 +15,12 @@ body { justify-content: center; font-size: calc(10px + 2vmin); text-align: center; + position:absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; } ::placeholder { diff --git a/src/scss/modules/_modal.scss b/src/scss/modules/_modal.scss index 9311ca12..92548cdc 100644 --- a/src/scss/modules/_modal.scss +++ b/src/scss/modules/_modal.scss @@ -71,4 +71,23 @@ .slider.round:before { border-radius: 50%; } + + ::-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; +} diff --git a/src/scss/modules/_navbar.scss b/src/scss/modules/_navbar.scss index 50cd14f3..ab724e87 100644 --- a/src/scss/modules/_navbar.scss +++ b/src/scss/modules/_navbar.scss @@ -15,4 +15,10 @@ @extend %navbar; top: 50px; right: 50px; +} + +.navbar3 { + @extend %navbar; + top: 50px; + right: 100px; } \ No newline at end of file diff --git a/src/scss/modules/_quote.scss b/src/scss/modules/_quote.scss index d6dca20d..c0aba859 100644 --- a/src/scss/modules/_quote.scss +++ b/src/scss/modules/_quote.scss @@ -14,10 +14,11 @@ font-size: 0.9em; letter-spacing: 0.5px; margin: 0; - text-shadow: 0 0 25px rgba(0, 0, 0, 0.3); + 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); } \ No newline at end of file diff --git a/src/scss/modules/_settings.scss b/src/scss/modules/_settings.scss index b72cb481..357f103b 100644 --- a/src/scss/modules/_settings.scss +++ b/src/scss/modules/_settings.scss @@ -4,6 +4,7 @@ background-color: #fff; max-width: 500px; box-shadow: 0 0 200px rgba(0, 0, 0, 0.3); + z-index: 4; } .Modal:focus { @@ -75,15 +76,21 @@ input:checked + .slider:before { } -h4, .switch { +h4, .switch, .expandIcons { display: inline; font-size: 1.4em; + font-weight: 100; +} + +h4, #engines { + display: inline; } .section { margin-bottom: 20px; } + .apply { height: 45px; width: 130px; @@ -122,4 +129,67 @@ h4, .switch { &:active { outline: none; } +} + +.expandIcons { + position: relative; + font-size: 25px; + vertical-align: middle; + display: inline-flex; + cursor: pointer; + transition-duration: 0.5s; +} + +$gradient: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%); + +.extraSettings { + display: none; + border-left: 10px solid; + border-image-slice: 1; + border-width: 5px; + border-image-source: linear-gradient(to bottom, #ffb032 0%, #dd3b67 100%); +} + +ul { + padding-left: 5px; + margin: 0; +} + +li { + margin-top: 1px; +} + +.extraSettings > p { + margin: 0; + padding: 0; +} + +.range { + -webkit-appearance: none; + width: 200px; + height: 15px; + background: #ccc; + border-radius: 12px; + outline: none; + background: #ecf0f1; + border-radius: 12px; + box-shadow: 0 0 100px rgba(0, 0, 0, 0.3); +} + +.range::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 25px; + height: 25px; + border-radius: 12px; + background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);; + cursor: pointer; +} + +.range::-moz-range-thumb { + width: 25px; + height: 25px; + border-radius: 12px; + background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);; + cursor: pointer; } \ No newline at end of file