Skip to content

Commit cb7feb6

Browse files
Furkan-GulsenFurkan-Gulsen
committed
html, css and js
1 parent 2aa696d commit cb7feb6

File tree

6 files changed

+462
-0
lines changed

6 files changed

+462
-0
lines changed

‎Pomodora Timer/License.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 Codeblogger
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎Pomodora Timer/css/style.css

+101
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Pomodora Timer/css/style.css.map

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Pomodora Timer/css/style.scss

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
$backgroundColor: rgb(240,128,128);
2+
$white_color: #efeaea;
3+
$white_color_2: rgba(239, 234, 234,.7);
4+
$timeTextFontSize: 30px;
5+
$timeFontSize: 100px;
6+
$clock_text_line_height: 60px;
7+
8+
@mixin position($top,$left) {
9+
position: absolute;
10+
top: $top;
11+
left: $left;
12+
transform: translate(-50%,-50%);
13+
};
14+
15+
body{
16+
background-color: $backgroundColor;
17+
width: 100%;
18+
height: 100vh;
19+
20+
.container{
21+
position: relative;
22+
23+
.clock_box{
24+
position: relative;
25+
top: 5rem;
26+
width: 500px;
27+
height:700px;
28+
margin: 0 auto;
29+
30+
.clock{
31+
width: 500px;
32+
height: 500px;
33+
background:transparent;
34+
position: relative;
35+
margin-bottom: 20px;
36+
37+
.back_circle{
38+
width: 460px;
39+
height: 460px;
40+
background: transparent;
41+
border: 10px solid rgb(225, 81, 81);
42+
@include position(50%,50%);
43+
border-radius: 50%;
44+
z-index: -1;
45+
}
46+
47+
.clock_circle{
48+
transition: 0.35s stroke-dashoffset;
49+
-webkit-transform: rotate(-90deg);
50+
transform: rotate(-90deg);
51+
-webkit-transform-origin: 50% 50%;
52+
transform-origin: 50% 50%;
53+
}
54+
55+
.clock_text{
56+
@include position(50%,50%);
57+
text-align: center;
58+
line-height: $clock_text_line_height;
59+
color: $white_color;
60+
61+
.pomodoro_name{
62+
font-size: $timeTextFontSize;
63+
background: none;
64+
border: none;
65+
text-align: center;
66+
color: $white_color;
67+
outline: none;
68+
::placeholder{
69+
color: $white_color;
70+
}
71+
}
72+
73+
.timer{
74+
font-size: $timeFontSize;
75+
}
76+
}
77+
78+
}
79+
.clock_button{
80+
position: relative;
81+
82+
.smallCircle{
83+
width: 75px;
84+
height: 75px;
85+
background: transparent;
86+
border-radius: 50%;
87+
border: 5px solid $white_color_2;
88+
cursor: pointer;
89+
i{
90+
font-size: 25px;
91+
transition: .5s;
92+
}
93+
&:hover{
94+
i{
95+
font-size: 30px;
96+
}
97+
}
98+
}
99+
.reload{
100+
position: absolute;
101+
left: 15%;
102+
103+
&:hover{
104+
border: 5px solid $white_color;
105+
}
106+
}
107+
.info{
108+
position: absolute;
109+
left: 70%;
110+
}
111+
.bigCircle{
112+
position: absolute;
113+
width: 100px;
114+
height: 100px;
115+
top: 30px;
116+
left: 50%;
117+
transform: translateX(-50%);
118+
background: transparent;
119+
border-radius: 50%;
120+
border: 5px solid $white_color_2;
121+
cursor: pointer;
122+
i{
123+
margin-left: 5px;
124+
font-size: 34px;
125+
transition: .5s;
126+
}
127+
&:hover{
128+
i{
129+
font-size: 39px;
130+
}
131+
}
132+
}
133+
.fas{
134+
position: relative;
135+
top: 50%;
136+
left: 50%;
137+
transform: translate(-50%,-50%);
138+
color: $white_color;
139+
}
140+
141+
}
142+
143+
144+
}
145+
}
146+
147+
}

‎Pomodora Timer/index.html

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="author" content="codeblogger">
7+
<meta name="keywords" content="pomodoro timer,pomodoro,work timer">
8+
<meta name="description" content="Free Pomodoro Timer">
9+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
10+
<title>Pomodoro</title>
11+
12+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <!-- Fontawesome -->
13+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Bootstrap -->
14+
<script src="https://code.jquery.com/jquery-3.4.1.js"></script> <!-- JQuery -->
15+
16+
<link rel="stylesheet" href="./css/style.css">
17+
18+
19+
</head>
20+
<body>
21+
22+
<div class="container">
23+
<div class="clock_box">
24+
<div class="clock">
25+
26+
<svg
27+
class="progress-ring"
28+
width="500"
29+
height="500">
30+
<circle
31+
class="clock_circle"
32+
stroke="#EFEAEA"
33+
stroke-width="10"
34+
fill="transparent"
35+
r="225"
36+
cx="250"
37+
cy="250"
38+
/>
39+
<circle />
40+
</svg>
41+
<div class="back_circle"></div>
42+
<div class="clock_text" >
43+
<input class="pomodoro_name" placeholder="pomodoro name"/>
44+
<p class="timer"></p>
45+
</div>
46+
47+
</div>
48+
<div class="clock_button">
49+
<div class="smallCircle reload">
50+
<i class="fas fa-redo-alt"></i>
51+
</div>
52+
<div id="play_stop" class="bigCircle play_stop">
53+
<i style="display:block; margin-left: 22px" id="play" class="fas fa-play"></i>
54+
<i style="display:none; margin-left: 20px" id="stop" class="fas fa-pause"></i>
55+
</div>
56+
<div class="smallCircle info" data-toggle="modal" data-target=".bd-example-modal-sm">
57+
<i class="fas fa-info info "></i>
58+
</div>
59+
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
60+
<div class="modal-dialog modal-sm">
61+
<div class="modal-content p-3 text-center">
62+
This application is under development. <br>
63+
You can improve it by going to github at truecodes.org.<br>
64+
©codeblogger
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
72+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
73+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
74+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
75+
<script src="./js/main.js"></script>
76+
77+
</body>
78+
</html>

0 commit comments

Comments
 (0)