-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (86 loc) · 3.32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-68295470-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-68295470-2');
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-9457102056329321",
enable_page_level_ads: true
});
</script>
<title>Card Deck Workout</title>
<link href="https://fonts.googleapis.com/css?family=Muli|Zilla+Slab" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="app.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-filters/dist/vue2-filters.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1 v-html="header" class="headline"></h1>
<p class="info">
Welcome to the Card Deck Workout! We draw five random cards from a standard deck of playing cards, and create a unique workout for you. Each suit has an exercise associated with it. When you draw a card, you do whatever number is on the card worth of reps for the appropriate exercise (ex. The 5♥ = 5 push-ups). Face cards are worth 10 reps, and aces are worth 1 rep. Click “Generate New Workout” to start drawing a sweat.
</p>
<dl class="exercises">
<div class="exercise">
<dt><span class="suit red">♥</span>Hearts<span class="suit red">♥</span></dt>
<hr/>
<dd>Push-ups</dd>
</div>
<div class="exercise">
<dt><span class="suit red">♦</span>Diamonds<span class="suit red">♦</span></dt>
<hr/>
<dd>Sit-ups</dd>
</div>
<div class="exercise">
<dt><span class="suit black">♠</span>Spades<span class="suit black">♠</span></dt>
<hr/>
<dd>Squats</dd>
</div>
<div class="exercise">
<dt><span class="suit black">♣</span>Clubs<span class="suit black">♣</span></dt>
<hr/>
<dd>Jumping Jacks</dd>
</div>
</dl>
<div class="actions">
<button class="action" v-on:click="draw">Generate New Workout</button>
</div>
<div class="results">
<div class="result-cards">
<h2 class="headline">Your Cards</h2>
<ul class="cards">
<li class="card" v-for="card in cards">
<img
v-bind:src="card.image.replace('http://', 'https://')"
v-bind:alt="card.value + ' of ' + card.suit"
v-bind:title="card.value + ' of ' + card.suit"
/>
</li>
</ul>
</div>
<div class="result-workout">
<h2 class="headline">Your Workout</h2>
<ol class="workout">
<li class="workout-item" v-for="(reps, k) in workout">
<strong class="reps">{{ reps }}</strong>
<span>{{ reps | pluralize(getExercise(k)) }}</span>
</li>
</ol>
</div>
</div>
</div>
<footer class="site-footer">
© 2018 Jeremy Paris
</footer>
<script src="app.js"></script>
</body>
</html>