-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
76 lines (75 loc) · 3.77 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0"/> -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Advice generator app</title>
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<div id="searchBar" class='search-bar'>
<input id='searchBarInput' type="text" placeholder='Search'>
<button id='searchIcon' class="search_icon">
<svg viewBox="0 0 512 512" fill='currentColor'>
<path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z" />
</svg>
</button>
</div>
<div id="adviceBox">
<h3>ADVICE #<span id="adviceId" class='advice_id' contenteditable='true'>117</span></h3>
<div id="adviceTextContainer">
<p id="adviceText">
"It is easy to sit up and take notice, what's difficult is getting up and taking action."
</p>
</div>
<div id='divider'><img src="./images/pattern-divider-mobile.svg" alt="||"></div>
<div id="buttons" class='buttons hide_buttons'>
<button
id='newButton'
class='new_button'
onmousedown="this.classList.add('button_clicked')"
onmouseup="this.classList.remove('button_clicked')"
ontouchstart="this.classList.add('button_clicked')"
ontouchend="this.classList.remove('button_clicked')">
<img src="./images/icon-dice.svg" alt="New Advice">
</button>
<div id="navigateAdvice" class='arrow_buttons'>
<button
id='leftButton'
class='arrow_button'
onmousedown="this.classList.add('button_clicked')"
onmouseup="this.classList.remove('button_clicked')"
ontouchstart="this.classList.add('button_clicked')"
ontouchend="this.classList.remove('button_clicked')">
<svg viewBox="0 0 256 512" fill='currentColor'><path d="M137.4 406.6l-128-127.1C3.125 272.4 0 264.2 0 255.1s3.125-16.38 9.375-22.63l128-127.1c9.156-9.156 22.91-11.9 34.88-6.943S192 115.1 192 128v255.1c0 12.94-7.781 24.62-19.75 29.58S146.5 415.8 137.4 406.6z"/></svg>
</button>
<button
id='rightButton'
class='arrow_button'
onmousedown="this.classList.add('button_clicked')"
onmouseup="this.classList.remove('button_clicked')"
ontouchstart="this.classList.add('button_clicked')"
ontouchend="this.classList.remove('button_clicked')">
<svg viewBox="0 0 256 512" fill='currentColor'><path d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z"/></svg>
</button>
</div>
</div>
</div>
</div>
<!-- <div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Emeka Orji</a>.
</div> -->
<script src="./js/layout.js"></script>
<script src="./js/app.js"></script>
</body>
</html>