-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
184 lines (181 loc) · 7.33 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="expires" content="21600">
<meta name="robots" content="noindex">
<meta name="theme-color" content="#FF10C0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=4.0">
<title>Jona's Recipe Book - Main Page</title>
<!--Fonts-->
<!--https://fonts.google.com/specimen/Playfair+Display TODO: replace with local copys-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair Display">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap">
<!--Scripts-->
<script src="js/index.js"></script>
<!--<script src="//unpkg.com/alpinejs" defer></script>-->
<script src="https://unpkg.com/alpinejs" defer></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>-->
<!--Stylesheets-->
<link rel="stylesheet" href="css/index.css">
<!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">-->
</head>
<body class="transition" x-data="{current_frame: frames.home, search_query: ''}">
<header>
<div id="search">
<div id="search_icon">
<img src="icon/search.png" alt="magnifying glass for searching">
</div>
<input type="search" name="q" placeholder="What do you like to eat?" aria-placeholder="recipe I want to search for" autocomplete="on" autofocus x-model="search_query">
<a id="cross_icon" x-on:click="search_query = ''" x-show="search_query != ''" x-transition.duration.400ms x-transition.delay.0s x-cloak>
<img src="icon/close.png" alt="cross for clearing the search bar">
</a>
</div>
<div id="heading">
<h1>JONA'S RECIPE BOOK</h1>
<i>A personal recipe book without trackers, bloat and ads.</i>
</div>
<div style="text-align: right;">
<label class="switch"><!--https://xkcd.com/1738/ -->
<input type="checkbox" autocomplete="off" onchange="toggle_theme()">
<div class="slider"></div>
</label>
</div>
</header>
<div id="devswitch" style="position: absolute; top: 30px; right: 150px;">
<a x-on:click="current_frame = frames.home" style="display: block;">home</a>
<a x-on:click="current_frame = frames.view" style="display: block;">view</a>
<a x-on:click="current_frame = frames.edit" style="display: block;">edit</a>
</div>
<noscript>You have to activate JavaScript on this site.</noscript>
<main id="home" x-show="current_frame == frames.home" x-cloak>
Homepage
<div style="width: 100%; background-color: gray;" x-show="search_query != ''" x-transition>
Search results
<div class="cards">
<a class="card" href="#" onclick="image_animation(event)">
<img src="example_images/apple-cobbler.jpg">
<span class="title">Apple Cobbler</span>
</a>
<a class="card" href="#" onclick="image_animation(event)">
<img src="example_images/apple-turnover.jpg">
<span class="title">Apple Turnover</span>
</a>
</div>
</div>
<div style="width: 100%; background-color: gray;">
<b>DISCOVER</b> (least times cooked)<br>
<div class="cards">
<a class="card" href="#" onclick="image_animation(event)">
<img src="example_images/apple-cobbler.jpg">
<span class="title">Apple Cobbler</span>
</a>
<a class="card" href="#" onclick="image_animation(event)">
<img src="example_images/apple-turnover.jpg">
<span class="title">Apple Turnover</span>
</a>
<a class="card" href="#" onclick="image_animation(event)">
<img src="example_images/caramel-brownies.jpg">
<span class="title">Caramel Brownies</span>
</a>
<a class="card" href="#" onclick="image_animation(event)">
<img src="example_images/chicken-wings.jpg">
<span class="title">Chicken Wings</span>
</a>
</div>
</div>
<div style="width: 100%; background-color: gray;">
last searched<br>
<div class="cards">
<a class="card" href="#" onclick="image_animation(event)">
<img src="example_images/apple-cobbler.jpg">
<span class="title">Apple Cobbler</span>
</a>
<a class="card" href="#" onclick="image_animation(event)">
<img src="example_images/apple-turnover.jpg">
<span class="title">Apple Turnover</span>
</a>
<a class="card" href="#" onclick="image_animation(event)">
<img src="example_images/caramel-brownies.jpg">
<span class="title">Caramel Brownies</span>
</a>
<a class="card" href="#" onclick="image_animation(event)">
<img src="example_images/chicken-wings.jpg">
<span class="title">Chicken Wings</span>
</a>
</div>
</div>
<div style="width: 100%; background-color: gray;">
last cooked<br>
<div class="cards">
<a class="card" href="#" onclick="image_animation(event)">
<img src="example_images/apple-cobbler.jpg">
<span class="title">Apple Cobbler</span>
</a>
<a class="card" href="#" onclick="image_animation(event)">
<img src="example_images/apple-turnover.jpg">
<span class="title">Apple Turnover</span>
</a>
<a class="card" href="#" onclick="image_animation(event)">
<img src="example_images/caramel-brownies.jpg">
<span class="title">Caramel Brownies</span>
</a>
<a class="card" href="#" onclick="image_animation(event)">
<img src="example_images/chicken-wings.jpg">
<span class="title">Chicken Wings</span>
</a>
</div>
</div>
</main>
<main id="view" x-data="{servings: 0, multiplier: [1/4, 1/3, 1/2, 2/3, 3/4, 1, 5/4, 3/2, 7/4, 2, 5/2, 3, 4, 5, 6, 7, 8, 9, 10]}" x-show="current_frame == frames.view" x-cloak>
<div class="left-column">
<img class="recipeimage" src="example_images/apple-cobbler.jpg">
<div class="controls">
<input type="range" id="servings" min="0.5" max="20.0" step="0.5" value="50" x-model="servings">
<label for="servings">Servings: <span x-text="servings"></span></label>
<div class="choice-buttons">
<!--https://codepen.io/nikkk-me/pen/abvPjeG -->
<input type="checkbox" id="cumulativeingredients">
<label for="cumulativeingredients">
<div class="slider"></div>
<span>grouped<img src="icon/rows.png"></span>
<span>separated<img src="icon/unordered-list.png"></span>
</label>
</div>
</div>
<div id="ingredients">
<div class="ingredient-group">
<h2>Dough</h2>
<ul>
<li>bre</li>
</ul>
</div>
<div class="ingredient-group">
<h2>Creme</h2>
<ul>
<li>400g sweetened condensed milk</li>
<li>50g cocoa powder</li>
</ul>
</div>
</div>
</div>
<div class="right-column">
<h1>Apple Cobbler</h1>
<div id="properties">
Recipe Properties
</div>
<div id="instructions">
<ol>
<li>Preheat the oven to 170°C.</li>
</ol>
</div>
</div>
</main>
<main id="edit" x-show="current_frame == frames.edit" x-cloak>
edit recipe
</main>
</body>
</html>