mirror of
https://github.com/mue/mue.git
synced 2026-07-16 05:23:49 +02:00
Add files via upload
This commit is contained in:
David Ralph
135
src/App.jsx
135
src/App.jsx
@@ -1,69 +1,66 @@
|
||||
//* 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 './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() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Search/>
|
||||
<div id='center'>
|
||||
<Greeting/>
|
||||
<Clock/>
|
||||
<Quote/>
|
||||
<Credit/>
|
||||
</div>
|
||||
</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}`;
|
||||
let location = data.location;
|
||||
if (data.location === 'Lake') location = 'Lake District';
|
||||
if (data.location === 'Wetland') location = 'Wetland Park';
|
||||
if (data.location === 'EastYorkshire') location = 'East Yorkshire';
|
||||
document.getElementById('location').innerText = `${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();
|
||||
}
|
||||
}
|
||||
//* 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 './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() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Search/>
|
||||
<div id='center'>
|
||||
<Greeting/>
|
||||
<Clock/>
|
||||
<Quote/>
|
||||
<Credit/>
|
||||
</div>
|
||||
</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();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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}.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("/src/fonts/LexendDeca-Regular.woff2") format("woff2"),url("/src/fonts/LexendDeca-Regular.woff") format("woff"),url("/src/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"),url("/./fonts/LexendDeca-Regular.woff") format("woff"),url("/./fonts/LexendDeca.ttf") format("truetype")}/*# sourceMappingURL=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,mBACI,eACA,aAIA,eAHA,oCACI,oCAIR,6BACI,8BACA,gBACA,sBACA,aACA,WACA,kBACA,mCACA,UAIR,kBACI,YAIJ,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,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"}
|
||||
31
src/index.js
31
src/index.js
@@ -1,16 +1,15 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App.jsx';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
|
||||
ReactDOM.render(
|
||||
<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();
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App.jsx';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
|
||||
ReactDOM.render(
|
||||
<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();
|
||||
@@ -1,48 +1,48 @@
|
||||
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 < 10) this.setState({ date: '0' + h + ':' + m, ampm: ampm });
|
||||
if (h > 10) 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';
|
||||
|
||||
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>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 class='credits'>
|
||||
{/* <h1 id='location'></h1> */}
|
||||
<h1 id='photographer'></h1>
|
||||
<div id='backgroundCredits' class='tooltip'><RoomIcon classname='locationicon'/>
|
||||
<span class='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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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>;
|
||||
}
|
||||
}
|
||||
@@ -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>,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 class='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>
|
||||
);
|
||||
}
|
||||
}
|
||||
162
src/quotes.json
162
src/quotes.json
@@ -1,82 +1,82 @@
|
||||
{
|
||||
"1": {
|
||||
"author": "Robert De Niro",
|
||||
"quote": "Time goes on. So whatever you’re going to do, do it. Do it now. Don’t wait."
|
||||
},
|
||||
"2": {
|
||||
"author": "Walt Disney",
|
||||
"quote": "All our dreams can come true, if we have the courage to pursue them."
|
||||
},
|
||||
"3": {
|
||||
"author": "Confucius",
|
||||
"quote": "It does not matter how slowly you go as long as you do not stop."
|
||||
},
|
||||
"4": {
|
||||
"author": "Roy T. Bennett",
|
||||
"quote": "Believe in yourself. You are braver than you think, more talented than you know, and capable of more than you imagine."
|
||||
},
|
||||
"5": {
|
||||
"author": "Wayne Dyer",
|
||||
"quote": "If you believe it will work out, you’ll see opportunities. If you believe it won’t, you will see obstacles."
|
||||
},
|
||||
"6": {
|
||||
"author": "George Addair",
|
||||
"quote": "Everything you’ve ever wanted is on the other side of fear."
|
||||
},
|
||||
"7": {
|
||||
"author": "Winston Churchill",
|
||||
"quote": "Success is not final, failure is not fatal: it is the courage to continue that counts."
|
||||
},
|
||||
"8": {
|
||||
"author": "Paulo Coelho",
|
||||
"quote": "There is only one thing that makes a dream impossible to achieve: the fear of failure"
|
||||
},
|
||||
"9": {
|
||||
"author": "Brian Tracy",
|
||||
"quote": "Your true success in life begins only when you make the commitment to become excellent at what you do."
|
||||
},
|
||||
"10": {
|
||||
"author": "Chantal Sutherland",
|
||||
"quote": "Believe in yourself, take on your challenges, dig deep within yourself to conquer fears. Never let anyone bring you down. You got to keep going."
|
||||
},
|
||||
"11": {
|
||||
"author": "Les Brown",
|
||||
"quote": "Too many of us are not living our dreams because we are living our fears."
|
||||
},
|
||||
"12": {
|
||||
"author": "Bob Riley",
|
||||
"quote": "Hard times don’t create heroes. It is during the hard times when the ‘hero’ within us is revealed."
|
||||
},
|
||||
"13": {
|
||||
"author": "Jack Canfield",
|
||||
"quote": "If you can tune into your purpose and really align with it, setting goals so that your vision is an expression of that purpose, then life flows much more easily."
|
||||
},
|
||||
"14": {
|
||||
"author": "Napolean Hill",
|
||||
"quote": "Whatever the mind can conceive and believe, it can achieve."
|
||||
},
|
||||
"15": {
|
||||
"author": "Jim Rohn",
|
||||
"quote": "Don’t wish it were easier. Wish you were better."
|
||||
},
|
||||
"16": {
|
||||
"author": "Serena Williams",
|
||||
"quote": "A champion is defined not by their wins but by how they can recover when they fall."
|
||||
},
|
||||
"17": {
|
||||
"author": "Sheryl Sandberg",
|
||||
"quote": "Motivation comes from working on things we care about."
|
||||
},
|
||||
"18": {
|
||||
"author": "Reese Witherspoon",
|
||||
"quote": "With the right kind of coaching and determination you can accomplish anything."
|
||||
},
|
||||
"19": {
|
||||
"author": "Hazrat Inayat Khan",
|
||||
"quote": "Some people look for a beautiful place. Others make a place beautiful."
|
||||
},
|
||||
"20": {
|
||||
"author": "Albert Einstein",
|
||||
"quote": "Life is like riding a bicycle. To keep your balance, you must keep moving."
|
||||
}
|
||||
{
|
||||
"1": {
|
||||
"author": "Robert De Niro",
|
||||
"quote": "Time goes on. So whatever you’re going to do, do it. Do it now. Don’t wait."
|
||||
},
|
||||
"2": {
|
||||
"author": "Walt Disney",
|
||||
"quote": "All our dreams can come true, if we have the courage to pursue them."
|
||||
},
|
||||
"3": {
|
||||
"author": "Confucius",
|
||||
"quote": "It does not matter how slowly you go as long as you do not stop."
|
||||
},
|
||||
"4": {
|
||||
"author": "Roy T. Bennett",
|
||||
"quote": "Believe in yourself. You are braver than you think, more talented than you know, and capable of more than you imagine."
|
||||
},
|
||||
"5": {
|
||||
"author": "Wayne Dyer",
|
||||
"quote": "If you believe it will work out, you’ll see opportunities. If you believe it won’t, you will see obstacles."
|
||||
},
|
||||
"6": {
|
||||
"author": "George Addair",
|
||||
"quote": "Everything you’ve ever wanted is on the other side of fear."
|
||||
},
|
||||
"7": {
|
||||
"author": "Winston Churchill",
|
||||
"quote": "Success is not final, failure is not fatal: it is the courage to continue that counts."
|
||||
},
|
||||
"8": {
|
||||
"author": "Paulo Coelho",
|
||||
"quote": "There is only one thing that makes a dream impossible to achieve: the fear of failure"
|
||||
},
|
||||
"9": {
|
||||
"author": "Brian Tracy",
|
||||
"quote": "Your true success in life begins only when you make the commitment to become excellent at what you do."
|
||||
},
|
||||
"10": {
|
||||
"author": "Chantal Sutherland",
|
||||
"quote": "Believe in yourself, take on your challenges, dig deep within yourself to conquer fears. Never let anyone bring you down. You got to keep going."
|
||||
},
|
||||
"11": {
|
||||
"author": "Les Brown",
|
||||
"quote": "Too many of us are not living our dreams because we are living our fears."
|
||||
},
|
||||
"12": {
|
||||
"author": "Bob Riley",
|
||||
"quote": "Hard times don’t create heroes. It is during the hard times when the ‘hero’ within us is revealed."
|
||||
},
|
||||
"13": {
|
||||
"author": "Jack Canfield",
|
||||
"quote": "If you can tune into your purpose and really align with it, setting goals so that your vision is an expression of that purpose, then life flows much more easily."
|
||||
},
|
||||
"14": {
|
||||
"author": "Napolean Hill",
|
||||
"quote": "Whatever the mind can conceive and believe, it can achieve."
|
||||
},
|
||||
"15": {
|
||||
"author": "Jim Rohn",
|
||||
"quote": "Don’t wish it were easier. Wish you were better."
|
||||
},
|
||||
"16": {
|
||||
"author": "Serena Williams",
|
||||
"quote": "A champion is defined not by their wins but by how they can recover when they fall."
|
||||
},
|
||||
"17": {
|
||||
"author": "Sheryl Sandberg",
|
||||
"quote": "Motivation comes from working on things we care about."
|
||||
},
|
||||
"18": {
|
||||
"author": "Reese Witherspoon",
|
||||
"quote": "With the right kind of coaching and determination you can accomplish anything."
|
||||
},
|
||||
"19": {
|
||||
"author": "Hazrat Inayat Khan",
|
||||
"quote": "Some people look for a beautiful place. Others make a place beautiful."
|
||||
},
|
||||
"20": {
|
||||
"author": "Albert Einstein",
|
||||
"quote": "Life is like riding a bicycle. To keep your balance, you must keep moving."
|
||||
}
|
||||
}
|
||||
@@ -1,36 +1,34 @@
|
||||
@import 'modules/clock';
|
||||
@import 'modules/greeting';
|
||||
@import 'modules/quote';
|
||||
@import 'modules/search';
|
||||
@import 'modules/credit';
|
||||
@import 'modules/miscellaneous';
|
||||
|
||||
#root {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.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'; /* 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 */
|
||||
@import 'modules/clock';
|
||||
@import 'modules/greeting';
|
||||
@import 'modules/quote';
|
||||
@import 'modules/search';
|
||||
@import 'modules/credit';
|
||||
@import 'modules/miscellaneous';
|
||||
|
||||
#root {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.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');
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
.App-clock {
|
||||
font-size: 4em;
|
||||
margin: 0;
|
||||
text-shadow: 0 0 25px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.App-ampm-specifier {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
.App-clock {
|
||||
font-size: 4em;
|
||||
margin: 0;
|
||||
text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.App-ampm-specifier {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
@@ -1,74 +1,75 @@
|
||||
|
||||
#location {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
#location, #photographer {
|
||||
font-size: calc(10px + 1.2vmin);
|
||||
text-shadow: 0 0 25px rgba(0,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,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 black;
|
||||
|
||||
.tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 60px;
|
||||
margin-left: -60px;
|
||||
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
|
||||
opacity: 0;
|
||||
transition: opacity 1s;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
#location {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
#location,
|
||||
#photographer {
|
||||
font-size: calc(10px + 1.2vmin);
|
||||
text-shadow: 0 0 25px rgba(0, 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, 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 black;
|
||||
|
||||
.tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 60px;
|
||||
margin-left: -60px;
|
||||
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
|
||||
opacity: 0;
|
||||
transition: opacity 1s;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
.App-greeting {
|
||||
margin: 0;
|
||||
font-size: 1.6em;
|
||||
text-shadow: 0 0 25px rgba(0,0,0,0.3);
|
||||
.App-greeting {
|
||||
margin: 0;
|
||||
font-size: 1.6em;
|
||||
text-shadow: 0 0 25px rgba(0,0,0,0.3);
|
||||
}
|
||||
@@ -1,18 +1,20 @@
|
||||
#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: #ffffff;
|
||||
opacity: 1; /* Firefox */
|
||||
}
|
||||
|
||||
:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: #ffffff;
|
||||
}
|
||||
#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: #ffffff;
|
||||
opacity: 1;
|
||||
/* Firefox */
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
/* Internet Explorer 10-11 */
|
||||
color: #ffffff;
|
||||
}
|
||||
@@ -1,22 +1,23 @@
|
||||
.App-quote {
|
||||
font-size: 0.8em;
|
||||
text-shadow: 0 0 25px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.App-quote {
|
||||
margin-left: 30%;
|
||||
margin-right: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
.App-quote-author {
|
||||
font-size: 0.9em;
|
||||
letter-spacing: 0.5px;
|
||||
margin: 0;
|
||||
text-shadow: 0 0 25px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
i.material-icons, h1.App-quote-author {
|
||||
display: inline;
|
||||
}
|
||||
.App-quote {
|
||||
font-size: 0.8em;
|
||||
text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.App-quote {
|
||||
margin-left: 30%;
|
||||
margin-right: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
.App-quote-author {
|
||||
font-size: 0.9em;
|
||||
letter-spacing: 0.5px;
|
||||
margin: 0;
|
||||
text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
i.material-icons,
|
||||
h1.App-quote-author {
|
||||
display: inline;
|
||||
}
|
||||
@@ -1,38 +1,42 @@
|
||||
.search-bar {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
display: block;
|
||||
color: #ffff;
|
||||
button {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
i.material-icons {
|
||||
text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
display: inline;
|
||||
}
|
||||
input[type=text] {
|
||||
font-size: calc(5px + 1.2vmin);
|
||||
background: none;
|
||||
border: 2px solid #ffff;
|
||||
padding: 10px;
|
||||
color: #ffff;
|
||||
position: absolute;
|
||||
box-shadow: 0 0 25px rgba(0, 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);
|
||||
.search-bar {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
display: block;
|
||||
color: #ffff;
|
||||
font-family: 'Lexend Deca';
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
i.material-icons {
|
||||
text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
display: inline;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
font-size: calc(5px + 1.2vmin);
|
||||
background: none;
|
||||
border: 2px solid #ffff;
|
||||
padding: 10px;
|
||||
color: #ffff;
|
||||
position: absolute;
|
||||
box-shadow: 0 0 25px rgba(0, 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);
|
||||
}
|
||||
@@ -1,135 +1,135 @@
|
||||
// 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();
|
||||
});
|
||||
}
|
||||
}
|
||||
// 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();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user