Skip to content

Instantly share code, notes, and snippets.

@carpiediem

carpiediem/index.html

Last active April 29, 2020 13:52
Show Gist options
  • Save carpiediem/8cafe4e0698b73024031d3a972fd2396 to your computer and use it in GitHub Desktop.
Save carpiediem/8cafe4e0698b73024031d3a972fd2396 to your computer and use it in GitHub Desktop.
Download ZIP
Flip cards with equipment-free exercise options
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Kellett School Excercise Flip Cards</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css"
/>
<style>
body {
font: 500 1.5rem "Avenir Next", sans-serif;
color: rgba(0, 0, 0, 0.75);
background: #e1e3e5;
}
section.header {
font-size: 1.4em;
text-align: center;
position: sticky;
top: 0;
z-index: 2;
}
section.header span {
vertical-align: middle;
border-radius: 5px;
padding: 5px;
}
span.round {
background-color: #e1e3e5;
}
section.header span.countdown {
display: inline-block;
width: 80px;
border-radius: 5px;
background-color: #ccc;
}
.dropdown-menu {
cursor: pointer;
}
/* button#countdown {
position: fixed;
left: calc(50vw - 1.5em);
z-index: 2;
font-size: 4rem;
font-weight: 600;
width: 3em;
border-radius: 0.5em;
cursor: pointer;
outline: none;
} */
.row.no-gutters {
margin: -5px !important;
}
.row.no-gutters > * {
padding: 5px !important;
}
.flipper {
height: 0;
padding-bottom: 100%;
position: relative;
-webkit-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
}
@media (min-width: 576px) {
.ratio-not-1-1 {
padding-bottom: calc(50% - 5px);
}
}
.flipper-card {
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: -webkit-transform 0.8s
cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
-webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.flipper-front,
.flipper-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 10px;
background: #c1c3c5;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.flipper-front {
font-size: 3em;
}
.flipper-back {
background: #fff;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flipper-back iframe {
width: 100%;
height: 57%;
position: absolute;
top: 0;
outline: none;
}
.flipper-back h2 {
position: absolute;
bottom: 0;
max-height: 40%;
font-size: 1.2em;
overflow-y: hidden;
}
.flipper-card.flipper-is-flipped {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
</head>
<body translate="no">
<section class="container header pt-3">
<span class="round">Round 1</span>
<span class="countdown">30</span>
<div class="btn-group">
<button type="button" class="btn btn-primary start">Start</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" data-duration="30">30 on, 30 off</a>
<a class="dropdown-item" data-duration="40">40 on, 20 off</a>
<a class="dropdown-item" data-duration="50">50 on, 10 off</a>
</div>
</div>
<!-- <button id="countdown">30</button> -->
</section>
<section class="container py-3">
<div class="row no-gutters"></div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
<script>
function shuffle(array) {
var currentIndex = array.length,
temporaryValue,
randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
const exercises = [
{
title: "90-degree Crunch",
iframe:
"https://drive.google.com/file/d/1xrDsTz-Jcp_7pFcM7w8bBxbVKW8335MP/preview"
},
{
title: "Front Plank",
iframe:
"https://drive.google.com/file/d/1lOH6dxJfdrSmc1vFl2v8jJXxWStx72Rz/preview"
},
{
title: "Plank hand walk",
iframe:
"https://drive.google.com/file/d/1H0FBeuOuvoC4_PO-DMpHAuqXLTn3Y47y/preview"
},
{
title: "Spiderman Knee to Elbow",
iframe:
"https://drive.google.com/file/d/1OH5KvR86lvfjzQZH9o9VT5DO347viFEP/preview"
},
{
title: "Squat Jumps",
iframe:
"https://drive.google.com/file/d/1oQ2qpSqzCy--t6hW3eUFnQmK8y-nTWF1/preview"
},
{
title: "Leg kick to toe touch",
iframe:
"https://drive.google.com/file/d/106V3xAXZV9v9sFcGTnKATgx41h72cUa7/preview"
},
{
title: "Right side oblique",
iframe:
"https://drive.google.com/file/d/1YjGf1iTZyZbv55KLz7L-xDlgnczlrjRw/preview"
},
{
title: "Streamline sumo / plie squats",
iframe:
"https://drive.google.com/file/d/1a2FzoStibw3zreTcH7fpYZ3dVcC38mKe/preview"
},
{
title: "V-ups",
iframe:
"https://drive.google.com/file/d/1H5dv--PR3l2gDIOGiaFJ7YvCGNYzWTVX/preview"
},
{
title: "Streamline squats",
iframe:
"https://drive.google.com/file/d/1GfwrAKtDmn8ZymuQKAT7Phkzlrc_4-4X/preview"
},
{
title: "Superman Streamline",
iframe:
"https://drive.google.com/file/d/1zW9I8_B9dSM3zv1KiqezOmKjZOAyankx/preview"
},
{
title: "V-sit twist",
iframe:
"https://drive.google.com/file/d/1Txc2GQjDtLyqBDALLdgKEw590ZIsyCyI/preview"
},
{
title: "Left side oblique",
iframe:
"https://drive.google.com/file/d/1f1hi59QEIaZp-t0-oXg9IGnki2PFLTZd/preview"
},
{
title: "Yoga Roll",
iframe:
"https://drive.google.com/file/d/1L0BfCtLlmLLimkB-fr0QFUcWUG_qdhKN/preview"
},
{
title: "Burpees",
iframe:
"https://drive.google.com/file/d/1eV5ynMr7BYtui-E43337hoLAp3F-P3Sr/preview"
},
{
title: "Right side plank",
iframe:
"https://drive.google.com/file/d/1Am2lsfCRtVkoeXQAifq1noPzA1ppyDJx/preview"
},
{
title: "V-sit (alternate legs)",
iframe:
"https://drive.google.com/file/d/1ZS5jVO6kBDUgln9kNytun-P6KVbWsFG0/preview"
},
{
title: "Bow",
iframe:
"https://drive.google.com/file/d/1UekwDmgFY-sIXvgSLUciEq1GackBltyv/preview"
},
{
title: "Back crunch",
iframe:
"https://drive.google.com/file/d/1HuFlxZ0J8xmzmbtlcie0Fbg_hWQYKexc/preview"
},
{
title: "Leg lifts",
iframe:
"https://drive.google.com/file/d/1v1iUajz_fXPkJ3qWtED2E8EeajPTA9jk/preview"
},
{
title: "V-sit (row your boat)",
iframe:
"https://drive.google.com/file/d/1l7HtHOJnNCKZZrTRmk1aoGBQs8w1syJh/preview"
},
{
title: "Left side plank",
iframe:
"https://drive.google.com/file/d/117lEXB2Q3OTaDh3KIcAqPUCRpTv-fVNF/preview"
},
{
title: "Iron cross (V-Sit hold)",
iframe:
"https://drive.google.com/file/d/1JoBUG9DDQydxrgPJpD93YrBMpbUIB9Ql/preview"
},
{
title: "Spiderman push-up",
iframe:
"https://drive.google.com/file/d/1prP3PCbLpTBara2RFI32ixQWiEEolWYe/preview"
},
{
title: "90-degree Toe Touch",
iframe:
"https://drive.google.com/file/d/1eb2qTRK2iRLAVTfIHpx2VYBesz5ftFTb/preview"
},
{
title: "Push-ups",
iframe:
"https://drive.google.com/file/d/1esWhUOgbUClLatF4fkU7P6FWS4MAQ4n4/preview"
},
{
title: "High Knees Static Run",
iframe:
"https://drive.google.com/file/d/1UgQtSOL95_dMz9pMqsP-W_r9Umb-74eo/preview"
},
{
title: "Rockstar Jumps",
iframe:
"https://drive.google.com/file/d/1llhXh75ZRfdGThiNbQctgrX3XdBWMdpo/preview"
},
{
title: "Backstroke kicks",
iframe:
"https://drive.google.com/file/d/1Vw-qeWx0TUjYh71Vmcgfc6NOwVqUrNYF/preview"
},
{
title: "Plank hydraulics",
iframe:
"https://drive.google.com/file/d/1acf2a9OlNra0BbhF8juODFqfctIpsmWR/preview"
},
{
title: "Back Bridge to Wheel",
iframe:
"https://drive.google.com/file/d/1LfIPLa-89zZ8XFBJ-hUivMUm0NZ0xbkT/preview"
},
{
title: "Knee ups to chest",
iframe:
"https://drive.google.com/file/d/1f64JBda0movM2gshrjC1dfDxyxvY9pqr/preview"
}
// { title: "Streamline wall sit", iframe: "" },
// { title: "V-Sit Scissor Chop", iframe: "" },
// { title: "Lunges", iframe: "" },
// { title: "Tick Tock", iframe: "" },
// { title: "Bicycle", iframe: "" },
// { title: "Windshield wipers", iframe: "" },
// { title: "Pet the Kitty", iframe: "" },
// { title: "V-Sit Criss Cross", iframe: "" }
];
let durationOn = 30;
let activeMode = true;
let round = 1;
let started = null;
let interval = null;
function updateClock() {
const now = Date.now();
if (
(now - started) / 1000 >=
(activeMode ? durationOn : 60 - durationOn)
) {
activeMode = !activeMode;
started = Date.now();
$("span.countdown").css(
"background-color",
activeMode ? "lightgreen" : "pink"
);
if (activeMode) $("span.round").text(`Round ${++round}`);
}
$("span.countdown").text(
(activeMode ? durationOn : 60 - durationOn) -
Math.round((now - started) / 1000)
);
}
$(document).ready(function() {
shuffle(exercises).forEach(({ title, iframe }, i) => {
$("section div.row").append(`<div class="col-12 col-sm-6 col-md-3">
<div class="flipper">
<div class="flipper-card">
<div class="flipper-front">${i + 1}</div>
<div class="flipper-back">
<iframe src="${iframe}" frameBorder="0"></iframe>
<h2>${title}</h2>
</div>
</div>
</div>
</div>`);
});
$(".flipper").on("click", function() {
$(this)
.find(".flipper-card")
.toggleClass("flipper-is-flipped");
});
$(".dropdown-item").on("click", function() {
durationOn = $(this).data("duration");
started = null;
$("span.countdown").text(durationOn);
});
$("button.start").on("click", function() {
started = Date.now();
interval = setInterval(updateClock, 500);
$("span.countdown").css("background-color", "lightgreen");
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment