franjsco/tomadoro
1
0
Fork 0
mirror of https://github.com/franjsco/tomadoro synced 2025-03-20 03:10:03 +01:00
Code Issues Releases Wiki Activity

Merge pull request #6 from frab1t/v1.3.0

Browse Source 
V1.3.0
This commit is contained in:
Francesco Esposito 2019-04-03 23:25:54 +02:00 committed by GitHub
commit 06366fc12c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 146 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -7,6 +7,7 @@ Technologies:
* HTML5 and CSS * HTML5 and CSS
* JavaScript * JavaScript
* React.js * React.js
* Bootstrap (reactstrap)
## Demo ## Demo
Try tomadoro: https://tomadoro.herokuapp.com/ Try tomadoro: https://tomadoro.herokuapp.com/

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 15 KiB

2
public/index.html
View File

@ -3,11 +3,11 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="theme-color" content="#ffffff">
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" content="width=device-width, initial-scale=1, shrink-to-fit=no"
/> />
<meta name="theme-color" content="#000000" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a 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/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

BIN
screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 167 KiB

After

Width:  |  Height:  |  Size: 141 KiB

24
src/App.css
View File

@ -1,10 +1,17 @@
@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
body { body {
background-color: #db4f4a; background-color: #f04d3b; /* e74c3c */
user-select: none; user-select: none;
font-family: 'Fredoka One', cursive;
color: white;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
.title { .title {
font-size: 60px;
font-weight: bold; font-weight: bold;
} }
@ -14,17 +21,17 @@ body {
} }
.App-header { .App-header {
background-color: #c34944; background-color: #c94233; /*c0392b*/
display: flex; display: flex;
min-height: 10vh; min-height: 5vh;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: calc(40px + 2vmin); font-size: calc(25px + 2vmin);
color: white; color: white;
text-shadow: 0 0 1px #ce2e2e, 0 0 10px rgb(193, 194, 190); text-shadow: 0 0 1px #2b0f0f, 0 0 2px rgb(193, 194, 190);
margin-bottom: 25px; margin-bottom: 20px;
box-shadow: 0 0 2px #cf4242, 0 0 8px #2B2D1F; box-shadow: 0 0 2px #cf4242, 0 0 6px #2B2D1F;
} }
@ -37,6 +44,7 @@ a:hover {
} }
.footer { .footer {
font-family: Arial, Helvetica, sans-serif;
margin-top: 15px; margin-top: 15px;
color: #ffffff; color: #ffffff;
text-shadow: 0 0 2px #cf4242, 0 0 3px rgb(193, 194, 190); text-shadow: 0 0 2px #cf4242, 0 0 3px rgb(193, 194, 190);

3
src/App.js
View File

@ -1,6 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import Timer from './components/Timer'; import Timer from './components/Timer';
import ButtonBox from './components/ButtonBox';
import './App.css'; import './App.css';
class App extends Component { class App extends Component {
@ -8,7 +7,7 @@ class App extends Component {
return ( return (
<div className="App"> <div className="App">
<div <div
className="App-header title" className="App-header"
> >
tomadoro tomadoro
</div> </div>

26
src/components/Box.css Normal file
View File

@ -0,0 +1,26 @@
.button {
font-size: 16px;
font-weight: lighter;
height: 50px;
border-radius: 40px;
width: 100%;
margin: 5px 0px 5px 0px;
transition: all .2s ease-in-out;
box-shadow:0 0 1px #111110, 0 0 10px rgb(193, 194, 190);
}
.box {
padding: 10px;
background-color: white;
border-radius: 10px;
box-shadow:0 0 1px #111010, 0 0 10px rgb(193, 194, 190);
}
.button:hover {
transform: scale(1.01);
}
.button:focus {
transform: scale(1.01);
box-shadow:0 0 5px #111010, 0 0 10px rgb(193, 194, 190);
}

22
src/components/ButtonBox.js → src/components/Box.js
View File

@ -1,18 +1,19 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Button, Row, Col } from 'reactstrap'; import { Button, Row, Col } from 'reactstrap';
import './ButtonBox.css'; import './Box.css';
class ButtonBox extends Component { class Box extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {};
} }
render() { render() {
return ( return (
<div className="button-box"> <div className="box">
<Row> <Row>
<Col> <Col xs="12">
<Button <Button
className="button" className="button"
block block
@ -25,13 +26,10 @@ class ButtonBox extends Component {
</Button> </Button>
</Col> </Col>
</Row> </Row>
<Row <Row>
className="top-margin" <Col xs="6" md="6">
>
<Col>
<Button <Button
className="button" className="button"
block
color="danger" color="danger"
size="lg" size="lg"
onClick={this.props.stopTimer} onClick={this.props.stopTimer}
@ -40,11 +38,9 @@ class ButtonBox extends Component {
STOP STOP
</Button> </Button>
</Col> </Col>
<Col xs="6" md="6">
<Col>
<Button <Button
className="button" className="button"
block
color="secondary" color="secondary"
size="lg" size="lg"
onClick={this.props.resetTimer} onClick={this.props.resetTimer}
@ -59,4 +55,4 @@ class ButtonBox extends Component {
} }
} }
export default ButtonBox; export default Box;

19
src/components/ButtonBox.css
View File

@ -1,19 +0,0 @@
.button {
font-size: 20px;
font-weight: bold;
height: 60px;
border-radius: 25px;
box-shadow: 0 0 1px #161616, 0 0 10px rgb(133, 133, 133);
}
.button-box {
background-color: rgba(255, 255, 255, 1.0);
padding: 20px;
margin-top: 5px;
border-radius: 25px;
box-shadow:0 0 1px #111010, 0 0 10px rgb(193, 194, 190);
}
.top-margin {
margin-top: 18px;
}

9
src/components/LogoSpin.css → src/components/Logo.css
View File

@ -1,17 +1,18 @@
.App-logo { .App-logo {
height: 25vmin; height: 130px;
filter: drop-shadow(0 0 0.50rem #f8ff9c); filter: drop-shadow(0 0 0.30rem #f8ff9c);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
transition: all .3s ease-in-out;
} }
.App-logo:hover { transform: scale(1.2); }
.App-logo-rotation { .App-logo-rotation {
animation: App-logo-spin infinite 5s linear; animation: App-logo-spin infinite 5s linear;
} }
@keyframes App-logo-spin { @keyframes App-logo-spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);

10
src/components/LogoSpin.js → src/components/Logo.js
View File

@ -1,8 +1,8 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import logo from '../logo.svg'; import logoSVG from '../logo.svg';
import './LogoSpin.css'; import './Logo.css';
class LogoSpin extends Component { class Logo extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.defaultClassName = 'App-logo-rotation'; this.defaultClassName = 'App-logo-rotation';
@ -12,7 +12,7 @@ class LogoSpin extends Component {
return ( return (
<img <img
className={`App-logo ${this.props.isStarted ? this.defaultClassName: ''}`} className={`App-logo ${this.props.isStarted ? this.defaultClassName: ''}`}
src={logo} src={logoSVG}
alt="Tomato" alt="Tomato"
title="Click on the tomato to change modes" title="Click on the tomato to change modes"
onClick={this.props.switchMode} onClick={this.props.switchMode}
@ -22,4 +22,4 @@ class LogoSpin extends Component {
} }
export default LogoSpin; export default Logo;

24
src/components/Timer.css
View File

@ -1,24 +1,6 @@
.timer { .timer {
font-size: 120px; font-size: 100px;
font-weight: 600; font-weight: normal;
text-shadow: 0 0 1px #ce2e2e, 0 0 8px rgb(193, 194, 190); text-shadow: 0 0 1px #4b4b4b, 0 0 5px rgb(193, 194, 190);
color: white; color: white;
} }
.buttons {
font-size: 20px;
font-weight: bold;
height: 60px;
border-radius: 25px;
box-shadow: 0 0 1px #161616, 0 0 10px rgb(133, 133, 133);
}
.button-box {
background-color: rgba(255, 255, 255, 1.0);
padding: 20px;
margin-top: 5px;
border-radius: 25px;
box-shadow:0 0 1px #111010, 0 0 10px rgb(193, 194, 190);
}

12
src/components/Timer.js
View File

@ -1,8 +1,8 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Container, Row, Col } from 'reactstrap'; import { Container, Row, Col } from 'reactstrap';
import Notification from './Notification'; import Notification from './Notification';
import ButtonBox from './ButtonBox'; import Box from './Box';
import LogoSpin from './LogoSpin'; import Logo from './Logo';
import './Timer.css'; import './Timer.css';
class Timer extends Component { class Timer extends Component {
@ -119,13 +119,12 @@ class Timer extends Component {
<Container> <Container>
<Row> <Row>
<Col> <Col>
<LogoSpin <Logo
isStarted={this.state.started} isStarted={this.state.started}
switchMode={this.switchMode} switchMode={this.switchMode}
/> />
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col> <Col>
<p <p
@ -135,10 +134,9 @@ class Timer extends Component {
</p> </p>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col> <Col md={{ size: 6, offset: 3 }}>
<ButtonBox <Box
startTimer={this.startTimer} startTimer={this.startTimer}
stopTimer={this.stopTimer} stopTimer={this.stopTimer}
isStarted={this.state.started} isStarted={this.state.started}

14
src/index.css
View File

@ -1,14 +0,0 @@
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

1
src/index.js
View File

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App'; import App from './App';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';

73
src/logo.svg
View File

@ -1 +1,72 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" enable-background="new 0 0 64 64"><path d="M62,31.6C62.8,47,48.9,60,32.1,60S0.4,46.2,2.1,30.9C4.5,9.4,20.4,8,32.1,8C39.2,8,60.2,1.8,62,31.6z" fill="#ef4d3c"/><path d="m11 27c6.2-9.6 16.8-6.8 19.6-10.4 0 6.9 5 3.5 7.5 6.6 3.2 4 4.4 11.1 8.2 12.5-3.7-7.9 2.3-7.6-6.1-18.2 4.5 2.8 6.8 0 12.9 2.5-5.3-8.4-13.6-6-13.6-6s5.2-4.8 9.6-2.3c-4.6-6.8-17.9 1.8-17.9 1.8s-5.5-9.4-17.3.5c6.9-2.8 14.5 0 14.5 0s-12.5-3.1-17.4 13" fill="#8cc63e"/><g fill="#64892f"><path d="M11,27c0,0,7.3-13.5,19.9-12.3C19.8,9.6,11,20.4,11,27z"/><path d="m13.9 14c0 0 9.2-6.9 17.3 0-2.4-8.4-14.7-4.5-17.3 0"/><path d="m33.2 14.9c12.2 5.6 8.1 12 13.1 21-3.4-7.5 5-21-13.1-21"/><path d="m28.4 14c0 0 2.8-4.2 3.8-9.4.1-.7 3.1-.6 3 .1-1 6.7 1.7 10.4 1.7 10.4s-2.1.7-4.7.7c-2.6.1-3.8-1.8-3.8-1.8"/></g><ellipse cx="33.7" cy="4.6" rx="1.5" ry=".6" fill="#8cc63e"/></svg> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="32"
height="32"
version="1"
id="svg3860"
sodipodi:docname="logo4.svg"
inkscape:version="0.92.4 (unknown)">
<metadata
id="metadata3866">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3864" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="992"
id="namedview3862"
showgrid="false"
inkscape:zoom="29.5"
inkscape:cx="16"
inkscape:cy="10.576271"
inkscape:window-x="0"
inkscape:window-y="41"
inkscape:window-maximized="1"
inkscape:current-layer="svg3860" />
<circle
fill="#e74c3c"
cx="16"
cy="16.95"
r="14"
id="circle3850" />
<path
fill-rule="evenodd"
opacity=".2"
d="m13.256 2.0009c-0.09394 0.00385-0.18954 0.019853-0.28418 0.049257-0.50472 0.15683-0.78473 0.63217-0.62781 1.0657l0.39381 1.0881c-5.7081 0.5335-8.738 6.373-8.738 6.373s1.9099 0.3483 6.5164-2.119c1.2799-0.68554 2.0178-1.4224 2.4389-2.0892-0.08704 0.68781-0.07428 1.5696 0.12891 2.6943 0.511 2.8249 2.643 4.9369 2.643 4.9369s2.5807-4.1555-0.18663-8.2285c4.082 2.6885 10.46 1.5201 10.46 1.5201s-2.8573-2.6286-5.8908-3.2838c-2.2636-0.48891-4.3475-0.16954-5.431 0.078611-0.000637-0.080285-0.01444-0.16151-0.04331-0.24121l-0.469-1.2956c-0.128-0.3522-0.503-0.5653-0.91-0.5487z"
id="path3852" />
<path
fill="#a6ef4d"
fill-rule="evenodd"
d="m13.256 1.0009c-0.09394 0.00385-0.18954 0.019853-0.28418 0.049257-0.50472 0.15683-0.78473 0.63217-0.62781 1.0657l0.39381 1.0881c-5.7081 0.5335-8.738 6.3734-8.738 6.3734s1.9099 0.3483 6.5164-2.119c1.2799-0.68554 2.0178-1.4224 2.4389-2.0892-0.08704 0.68781-0.07428 1.5696 0.12891 2.6943 0.511 2.8245 2.643 4.9365 2.643 4.9365s2.5807-4.1555-0.18663-8.2285c4.082 2.6885 10.46 1.5201 10.46 1.5201s-2.8573-2.6286-5.8908-3.2838c-2.2636-0.48891-4.3475-0.16954-5.431 0.078611-0.000637-0.080285-0.01444-0.16151-0.04331-0.24121l-0.469-1.2956c-0.128-0.3522-0.503-0.56529-0.91-0.5487z"
id="path3854" />
<path
fill="#fff"
fill-rule="evenodd"
opacity=".1"
d="m13.256 1c-0.09394 0.00385-0.19052 0.021377-0.28516 0.050781-0.50472 0.15683-0.78388 0.63093-0.62695 1.0645l0.11328 0.31055c0.11682-0.16601 0.28726-0.30465 0.51367-0.375 0.094-0.0294 0.191-0.047 0.285-0.0508 0.407-0.0166 0.783 0.1966 0.91 0.5488l0.46875 1.2969c0.02887 0.079702 0.04233 0.15995 0.04297 0.24023 1.0835-0.24815 3.168-0.56704 5.4316-0.078125 1.935 0.41794 3.7109 1.5964 4.8066 2.4258 0.674-0.0681 1.084-0.1426 1.084-0.1426s-2.8571-2.628-5.8906-3.2832c-2.2636-0.48891-4.3482-0.17002-5.4316 0.078125-0.000637-0.080285-0.0141-0.16053-0.04297-0.24023l-0.46875-1.2969c-0.127-0.3522-0.503-0.56539-0.91-0.5488zm-0.861 2.2559c-5.4817 0.7328-8.395 6.3222-8.395 6.3222s0.21657 0.026413 0.62305-0.00391c1.1505-1.6912 3.8959-4.9766 8.1152-5.3711l-0.34375-0.94727zm3.1465 2.5156c0.836 1.2321 1.179 2.4697 1.257 3.5996 0.061-0.9607-0.048-2.0381-0.492-3.1523-0.263-0.1358-0.518-0.2843-0.766-0.4473zm-2.5859 0.59766c-0.01247 0.019738-0.03189 0.040689-0.04492 0.060547 0.0025 0.099971 0.0093 0.20483 0.01563 0.31055 0.0086-0.12658 0.01469-0.25567 0.0293-0.37109z"
id="path3858" />
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 892 B

After

Width:  |  Height:  |  Size: 3.9 KiB