mirror of
https://github.com/franjsco/tomadoro
synced 2025-03-19 19:10:02 +01:00
Francesco Esposito
GitHub
commit
06366fc12c
@ -7,6 +7,7 @@ Technologies:
|
||||
* HTML5 and CSS
|
||||
* JavaScript
|
||||
* React.js
|
||||
* Bootstrap (reactstrap)
|
||||
|
||||
## Demo
|
||||
Try tomadoro: https://tomadoro.herokuapp.com/
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 15 KiB |
@ -3,11 +3,11 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<meta
|
||||
name="viewport"
|
||||
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
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
|
||||
BIN
screenshot.png
BIN
screenshot.png
Binary file not shown.
|
Before Width: | Height: | Size: 167 KiB After Width: | Height: | Size: 141 KiB |
24
src/App.css
24
src/App.css
@ -1,10 +1,17 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
|
||||
|
||||
body {
|
||||
background-color: #db4f4a;
|
||||
background-color: #f04d3b; /* e74c3c */
|
||||
user-select: none;
|
||||
font-family: 'Fredoka One', cursive;
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -14,17 +21,17 @@ body {
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #c34944;
|
||||
background-color: #c94233; /*c0392b*/
|
||||
display: flex;
|
||||
min-height: 10vh;
|
||||
min-height: 5vh;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(40px + 2vmin);
|
||||
font-size: calc(25px + 2vmin);
|
||||
color: white;
|
||||
text-shadow: 0 0 1px #ce2e2e, 0 0 10px rgb(193, 194, 190);
|
||||
margin-bottom: 25px;
|
||||
box-shadow: 0 0 2px #cf4242, 0 0 8px #2B2D1F;
|
||||
text-shadow: 0 0 1px #2b0f0f, 0 0 2px rgb(193, 194, 190);
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 0 2px #cf4242, 0 0 6px #2B2D1F;
|
||||
|
||||
}
|
||||
|
||||
@ -37,6 +44,7 @@ a:hover {
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
margin-top: 15px;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 2px #cf4242, 0 0 3px rgb(193, 194, 190);
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { Component } from 'react';
|
||||
import Timer from './components/Timer';
|
||||
import ButtonBox from './components/ButtonBox';
|
||||
import './App.css';
|
||||
|
||||
class App extends Component {
|
||||
@ -8,7 +7,7 @@ class App extends Component {
|
||||
return (
|
||||
<div className="App">
|
||||
<div
|
||||
className="App-header title"
|
||||
className="App-header"
|
||||
>
|
||||
tomadoro
|
||||
</div>
|
||||
|
||||
26
src/components/Box.css
Normal file
26
src/components/Box.css
Normal 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);
|
||||
}
|
||||
@ -1,18 +1,19 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Button, Row, Col } from 'reactstrap';
|
||||
import './ButtonBox.css';
|
||||
import './Box.css';
|
||||
|
||||
class ButtonBox extends Component {
|
||||
class Box extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="button-box">
|
||||
<div className="box">
|
||||
<Row>
|
||||
<Col>
|
||||
<Col xs="12">
|
||||
<Button
|
||||
className="button"
|
||||
block
|
||||
@ -25,13 +26,10 @@ class ButtonBox extends Component {
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row
|
||||
className="top-margin"
|
||||
>
|
||||
<Col>
|
||||
<Row>
|
||||
<Col xs="6" md="6">
|
||||
<Button
|
||||
className="button"
|
||||
block
|
||||
color="danger"
|
||||
size="lg"
|
||||
onClick={this.props.stopTimer}
|
||||
@ -40,11 +38,9 @@ class ButtonBox extends Component {
|
||||
STOP
|
||||
</Button>
|
||||
</Col>
|
||||
|
||||
<Col>
|
||||
<Col xs="6" md="6">
|
||||
<Button
|
||||
className="button"
|
||||
block
|
||||
color="secondary"
|
||||
size="lg"
|
||||
onClick={this.props.resetTimer}
|
||||
@ -59,4 +55,4 @@ class ButtonBox extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
export default ButtonBox;
|
||||
export default Box;
|
||||
@ -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;
|
||||
}
|
||||
@ -1,17 +1,18 @@
|
||||
.App-logo {
|
||||
height: 25vmin;
|
||||
filter: drop-shadow(0 0 0.50rem #f8ff9c);
|
||||
height: 130px;
|
||||
filter: drop-shadow(0 0 0.30rem #f8ff9c);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
.App-logo:hover { transform: scale(1.2); }
|
||||
|
||||
.App-logo-rotation {
|
||||
animation: App-logo-spin infinite 5s linear;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
@ -1,8 +1,8 @@
|
||||
import React, { Component } from 'react';
|
||||
import logo from '../logo.svg';
|
||||
import './LogoSpin.css';
|
||||
import logoSVG from '../logo.svg';
|
||||
import './Logo.css';
|
||||
|
||||
class LogoSpin extends Component {
|
||||
class Logo extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.defaultClassName = 'App-logo-rotation';
|
||||
@ -12,7 +12,7 @@ class LogoSpin extends Component {
|
||||
return (
|
||||
<img
|
||||
className={`App-logo ${this.props.isStarted ? this.defaultClassName: ''}`}
|
||||
src={logo}
|
||||
src={logoSVG}
|
||||
alt="Tomato"
|
||||
title="Click on the tomato to change modes"
|
||||
onClick={this.props.switchMode}
|
||||
@ -22,4 +22,4 @@ class LogoSpin extends Component {
|
||||
|
||||
}
|
||||
|
||||
export default LogoSpin;
|
||||
export default Logo;
|
||||
@ -1,24 +1,6 @@
|
||||
.timer {
|
||||
font-size: 120px;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 0 1px #ce2e2e, 0 0 8px rgb(193, 194, 190);
|
||||
font-size: 100px;
|
||||
font-weight: normal;
|
||||
text-shadow: 0 0 1px #4b4b4b, 0 0 5px rgb(193, 194, 190);
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Container, Row, Col } from 'reactstrap';
|
||||
import Notification from './Notification';
|
||||
import ButtonBox from './ButtonBox';
|
||||
import LogoSpin from './LogoSpin';
|
||||
import Box from './Box';
|
||||
import Logo from './Logo';
|
||||
import './Timer.css';
|
||||
|
||||
class Timer extends Component {
|
||||
@ -119,13 +119,12 @@ class Timer extends Component {
|
||||
<Container>
|
||||
<Row>
|
||||
<Col>
|
||||
<LogoSpin
|
||||
<Logo
|
||||
isStarted={this.state.started}
|
||||
switchMode={this.switchMode}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
<p
|
||||
@ -135,10 +134,9 @@ class Timer extends Component {
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
<ButtonBox
|
||||
<Col md={{ size: 6, offset: 3 }}>
|
||||
<Box
|
||||
startTimer={this.startTimer}
|
||||
stopTimer={this.stopTimer}
|
||||
isStarted={this.state.started}
|
||||
|
||||
@ -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,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import App from './App';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
|
||||
73
src/logo.svg
73
src/logo.svg
@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 892 B After Width: | Height: | Size: 3.9 KiB |
Loading…
x
Reference in New Issue
Block a user