Add files via upload

This commit is contained in:
David Ralph 2019-09-29 17:46:53 +01:00 committed by GitHub
parent 665a093e41
commit 379b401d4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 715 additions and 737 deletions

View File

@ -1,43 +1,43 @@
{
"name": "mue",
"author": "ohlookitsderpy",
"description": "Fast, open and free-to-use new tab page for most modern browsers",
"license": "MIT",
"version": "0.1.0",
"dependencies": {
"@material-ui/core": "^4.4.3",
"@material-ui/icons": "^4.4.3",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1",
"unfetch": "^4.1.0"
},
"devDependencies": {
"eslint": "^6.4.0",
"npm-run-all": "^4.1.5",
"sass": "^1.22.12"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"sass": "sass --watch src/scss:src/css --style compressed",
"start-all": "npm-run-all -p start sass"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
{
"name": "mue",
"author": "ohlookitsderpy",
"description": "Fast, open and free-to-use new tab page for most modern browsers.",
"license": "MIT",
"version": "2.0.0",
"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",
"unfetch": "^4.1.0"
},
"devDependencies": {
"eslint": "^6.5.0",
"npm-run-all": "^4.1.5",
"sass": "^1.22.12"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"sass": "sass --watch src/scss:src/css --style compressed",
"start-all": "npm-run-all -p start sass"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Binary file not shown.

View File

@ -1,39 +1,15 @@
<!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'>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel='manifest' href='%PUBLIC_URL%/manifest.json' />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike '/favicon.ico' or 'favicon.ico', '%PUBLIC_URL%/favicon.ico' will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>New Tab</title>
</head>
<body>
<noscript>You need to enable JavaScript to use Mue.</noscript>
<div id='root'></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
<!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>

View File

@ -1,15 +1,15 @@
{
"short_name": "Mue New Tab",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon-32x32.png",
"sizes": "96x96 64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
{
"short_name": "Mue New Tab",
"name": "Fast, open and free-to-use new tab page for most modern browsers.",
"icons": [
{
"src": "favicon-32x32.png",
"sizes": "96x96 64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

View File

@ -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();
}
}

View File

@ -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 */

View File

@ -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"}

View File

@ -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();

View File

@ -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>;
}
}

View File

@ -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>
);
}
}

View File

@ -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>;
}
}

View File

@ -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>,
];
}
}

View File

@ -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>
);
}
}

View File

@ -1,82 +1,82 @@
{
"1": {
"author": "Robert De Niro",
"quote": "Time goes on. So whatever youre going to do, do it. Do it now. Dont 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, youll see opportunities. If you believe it wont, you will see obstacles."
},
"6": {
"author": "George Addair",
"quote": "Everything youve 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 dont 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": "Dont 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 youre going to do, do it. Do it now. Dont 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, youll see opportunities. If you believe it wont, you will see obstacles."
},
"6": {
"author": "George Addair",
"quote": "Everything youve 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 dont 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": "Dont 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."
}
}

View File

@ -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');
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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);
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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);
}

View File

@ -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();
});
}
}