Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor wip (Switch to request animation frame) #2

Open
wants to merge 13 commits into
base: refactor
Choose a base branch
from
Open

Refactor wip (Switch to request animation frame) #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7d8d488
switch to request animation frame WIP
bojandevic Sep 26, 2024
b9cd06d
working requestAnimationFrame animation
bojandevic Sep 26, 2024
222f423
updated example
bojandevic Sep 28, 2024
92765b8
added support for css variables
bojandevic Sep 28, 2024
0105455
make sure that numbers are padded with 0
bojandevic Sep 28, 2024
5276873
make sure initial values are 00
bojandevic Sep 28, 2024
5510b9f
updated dark and light mode colors
bojandevic Sep 28, 2024
aea758a
updated example so that it is not using jquery anymore
bojandevic Sep 28, 2024
fafd7fc
do not flip inital value if it's the same as next update
bojandevic Sep 28, 2024
f483814
addes support for countdownTimer
bojandevic Sep 28, 2024
4c93708
added support for medium size
bojandevic Sep 28, 2024
14f8898
better examples of flipclock
bojandevic Sep 28, 2024
b6cf790
updated wording
bojandevic Sep 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 90 additions & 42 deletions example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,109 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flip Clock Examples</title>
<link rel="stylesheet" href="../src/index.css" media="screen" charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link
rel="stylesheet"
href="../src/index.css"
media="screen"
charset="utf-8"
/>
<link
href="https://fonts.googleapis.com/css?family=Droid+Sans"
rel="stylesheet"
type="text/css"
/>
<style media="screen">
body {
font-family: 'Droid Sans', serif;
font-family: "Droid Sans", sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
}

/* Start of Flip Clock blue CSS */
.flip-clock.flipclock-blue div{
color: white;
background: #05a19f;
-moz-box-shadow: 3px 3px 3px #05616f;
-webkit-box-shadow: 3px 3px 3px #05616f;
box-shadow: 3px 3px 3px #05616f;
.example {
background-color: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* End of Flip Clock blue CSS */

/* Start of Flip Clock linear CSS */
.flipclock-linear .flip-top-animate {
animation-timing-function: linear;
animation-duration: 0.2s;
h1 {
text-align: center;
color: #333;
}

.flipclock-linear .flip-bottom-animate {
animation-timing-function: linear;
animation-duration: 0.2s;
h2 {
color: #555;
}
p {
color: #666;
}
/* End of Flip Clock linear CSS */
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" charset="utf-8"></script>
<script src="../src/index.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
new FlipClockManager('#countdown1').currentTime();

var midnight = new Date();
midnight.setHours(23);
midnight.setMinutes(59);
midnight.setSeconds(59);
new FlipClockManager('#countdown2', 'flipclock-small').countdownToDate(midnight);

// Custom look
new FlipClockManager('#countdown3', 'flipclock-blue flipclock-linear').currentTime();
new FlipClockManager('#countdown4','flipclock-small flipclock-blue').countFromDate(new Date());
});
document.addEventListener("DOMContentLoaded", function () {
new FlipClockManager("#countdown1").currentTime();

const midnight = new Date();
midnight.setHours(23);
midnight.setMinutes(59);
midnight.setSeconds(59);
new FlipClockManager("#countdown2", "flipclock-small").countdownToDate(
midnight
);

// Custom look
new FlipClockManager(
"#countdown3",
"dark-mode flipclock-linear"
).currentTime();
new FlipClockManager(
"#countdown4",
"flipclock-small dark-mode"
).countFromDate(new Date());

// New example: Timer for 5 minutes
new FlipClockManager("#countdown5", "flipclock-medium").countdownTimer(
5 * 60
);
});
</script>
</head>
<body>
<h1>Flip Clock Examples</h1>

<div class="example">
<h2>1. Current Time</h2>
<p>This clock shows the current time and updates in real-time.</p>
<div id="countdown1"></div>
</div>

<div class="example">
<h2>2. Countdown to Midnight</h2>
<p>
This small clock counts down to midnight (23:59:59) of the current day.
</p>
<div id="countdown2"></div>
</div>

<div class="example">
<h2>3. Dark Mode</h2>
<p>A dark mode version of the current time with a linear layout.</p>
<div id="countdown3"></div>
</div>

<div id="countdown1"></div>
<div id="countdown2"></div>
<div id="countdown3"></div>
<div id="countdown4"></div>
<div class="example">
<h2>4. Count Up from Page Load</h2>
<p>This small dark mode clock counts up from when the page was loaded.</p>
<div id="countdown4"></div>
</div>

<div class="example">
<h2>5. 5-Minute Timer</h2>
<p>This medium-sized clock counts down from 5 minutes.</p>
<div id="countdown5"></div>
</div>
</body>
</html>
136 changes: 81 additions & 55 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
:root {
--clock-bg: white;
--clock-text: #333;
--shadow-color: rgba(0, 0, 0, 0.1);
}

.dark-mode {
--clock-bg: #333;
--clock-text: #f0f0f0;
--shadow-color: rgba(0, 0, 0, 0.1);
}

.flip-clock {
display: inline-block;
margin-right: 20px;
Expand All @@ -7,81 +19,61 @@
perspective-origin: 50% 50%;
}

.flip-clock div{
position: absolute;
color: white;
background: black;
min-width: 86px;
height: 50px;
font-size: 57px;
text-align: center;
margin: 6px;
line-height: 100px;
overflow: hidden;
-moz-box-shadow: 3px 3px 3px #111;
-webkit-box-shadow: 3px 3px 3px #111;
box-shadow: 3px 3px 3px #111;
.flip-clock div {
position: absolute;
color: var(--clock-text);
background: var(--clock-bg);
min-width: 86px;
height: 50px;
font-size: 57px;
text-align: center;
margin: 6px;
line-height: 100px;
overflow: hidden;
box-shadow: 3px 3px 3px var(--shadow-color);
backface-visibility: hidden;
transition: z-index 0s 0.3s;
}

.flip-top {
border-radius: 9px 9px 0px 0px;
top: 0px;

}

.flip-bottom {
border-radius: 0px 0px 9px 9px;
top: 50px;
border-top: 1px solid transparent;
transform-origin: 50% 0%; /* Ensure bottom flips from its top edge */
}
.flip-bottom span{

.flip-bottom span {
display: block;
margin-top: -50px;
}

.flip-front {
z-index: 999;
z-index: 2;
}

.flip-back {
z-index: 998
z-index: 1;
}

.flip-top.flip-front{
.flip-top.flip-front {
transform-origin: 50% 100%;
}
.flip-bottom.flip-front{
.flip-bottom.flip-front {
transform-origin: 50% 0%;
}


.flip-top-animate {
animation-name: fliptop;
animation-timing-function: ease-in;
animation-duration: 0.4s;
}

.flip-bottom-animate {
animation-name: flipbottom;
animation-timing-function: ease-out;
animation-duration: 0.4s;
}

@keyframes fliptop {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-90deg);
}
.flip-clock .hidden {
opacity: 0;
}

@keyframes flipbottom {
0% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
.flip-clock .active {
z-index: 3;
transition: z-index 0s;
}

/* Start of Flip Clock small CSS */
Expand All @@ -92,26 +84,60 @@
min-width: 43px;
}

.flip-clock.flipclock-small div{
min-width: 43px;
height: 25px;
font-size: 27px;
margin: 6px;
line-height: 50px;
.flip-clock.flipclock-small div {
min-width: 43px;
height: 25px;
font-size: 27px;
margin: 6px;
line-height: 50px;
}

.flipclock-small .flip-top {
border-radius: 4px 4px 0px 0px;
top: 0px;

}

.flipclock-small .flip-bottom {
border-radius: 0px 0px 4px 4px;
top: 25px;
}
.flipclock-small .flip-bottom span{

.flipclock-small .flip-bottom span {
display: block;
margin-top: -25px;
}

/* End of Flip Clock small CSS */

/* Start of Flip Clock medium CSS */

.flip-clock.flipclock-medium {
margin-right: 15px;
height: 85px;
min-width: 64px;
}

.flip-clock.flipclock-medium div {
min-width: 64px;
height: 37px;
font-size: 42px;
margin: 6px;
line-height: 75px;
}

.flipclock-medium .flip-top {
border-radius: 6px 6px 0px 0px;
top: 0px;
}

.flipclock-medium .flip-bottom {
border-radius: 0px 0px 6px 6px;
top: 37px;
}

.flipclock-medium .flip-bottom span {
display: block;
margin-top: -37px;
}

/* End of Flip Clock medium CSS */
Loading