-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
194 lines (186 loc) · 23.7 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
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI StarWars</title>
<link rel="stylesheet" href="styles/general.css"/>
</head>
<body>
<script type="text/javascript">
const max_slide = 2;
const min_slide = 0;
var current = 0;
function slide() {
let slidable_elements = document.getElementsByClassName("slidable");
for(let elem of slidable_elements) {
let index = parseInt(elem.id[elem.id.length - 1]);
if(index === current) {
elem.classList.add("display");
}
else {
elem.classList.remove("display");
}
elem.style.transform = `translate(calc(100% * ${-(current)}))`;
}
}
function arrow_activation(arrow) {
arrow.classList.remove("deactivated");
}
function arrow_deactivation(arrow) {
arrow.classList.add("deactivated");
}
function current_up() {
current += 1;
}
function current_down() {
current -= 1;
}
function handle_click(left, max, min, current) {
let left_arrow = document.getElementById("left-arrow");
let right_arrow = document.getElementById("right-arrow")
if(left) {
if(current < min) return; ///impossible
current_down();
slide();
handle_slide_show(true);
handle_date();
if(current === min) { ///deactivate the arrow
arrow_deactivation(left_arrow);
return;
}
arrow_activation(left_arrow);
arrow_activation(right_arrow);
return;
}
if(current > max) return; ///impossible
current_up();
slide();
handle_slide_show(false);
handle_date();
if(current === max) { ///deactivate the arrow
arrow_deactivation(right_arrow);
return;
}
arrow_activation(right_arrow);
arrow_activation(left_arrow);
}
function handle_slide_show (left) {
if(left) {
document.getElementById(`circle-${current + 1}`).classList.remove("fill-2", "fill");
document.getElementById(`line-${current}`).classList.remove("fill");
return;
}
document.getElementById(`circle-${current - 1}`).classList.add("fill");
document.getElementById(`circle-${current}`).classList.add("fill-2");
document.getElementById(`line-${current - 1}`).classList.add("fill");
}
function handle_date() {
let ids = ["date-decade-1", "date-decade-2", "date-unit-1", "date-unit-2", "date-unit-3"]
switch(current) {
case 0:
/*for(let i = 0; i < ids.length; i++) {
document.getElementById(ids[i]).style.transform = "translate(0%)";
}*/
document.getElementById("date-decade-1").classList.add("display");
document.getElementById("date-decade-2").classList.remove("display");
document.getElementById("date-unit-1").classList.add("display");
document.getElementById("date-unit-2").classList.remove("display");
document.getElementById("date-unit-3").classList.remove("display");
break;
case 1:
/*for(let i = 0; i < ids.length; i++) {
document.getElementById(ids[i]).style.transform = "translate(-100%)";
}*/
document.getElementById("date-decade-1").classList.remove("display");
document.getElementById("date-decade-2").classList.add("display");
document.getElementById("date-unit-1").classList.remove("display");
document.getElementById("date-unit-2").classList.add("display");
document.getElementById("date-unit-3").classList.remove("display");
break;
case 2:
/*for(let i = 2; i < ids.length; i++) {
document.getElementById(ids[i]).style.transform = "translate(-200%)";
}*/
document.getElementById("date-unit-1").classList.remove("display");
document.getElementById("date-unit-2").classList.remove("display");
document.getElementById("date-unit-3").classList.add("display");
break;
default:
break;
}
}
</script>
<div class="viewport">
<main class="content">
<div class="left">
<main class="main-content">
<div class="vector-slider">
<svg id="svg-0" class="display slidable" width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.4553 6.76543C19.4045 6.8337 19.3585 6.90879 19.3027 6.97433C15.2378 11.7313 12.295 17.0515 10.961 23.1506C10.0381 27.3682 10.2138 31.5408 11.8357 35.5926C13.1189 38.8012 15.0538 41.5907 17.7052 43.8565C19.2801 45.2179 21.1655 46.1895 23.2031 46.6896C26.3285 47.4536 28.9973 46.6344 31.2577 44.4218C32.398 43.3056 33.0406 41.9095 33.5752 40.4622C35.0139 36.5647 34.9818 32.6215 33.8938 28.6558C33.3412 26.6095 32.518 24.6426 31.4452 22.8052C29.9703 20.3004 27.7232 18.6032 25.1087 17.3403C24.8495 17.2146 24.5853 17.0993 24.2863 16.962C24.7951 16.4084 25.2893 15.8697 25.7855 15.3325C26.7836 14.2538 27.7908 13.1827 28.7757 12.0924C28.975 11.8719 29.1179 11.8781 29.3584 12.0044C32.0028 13.3889 34.1266 15.3379 35.8593 17.7164C35.9193 17.799 35.9785 17.883 36.0426 17.9717C36.2601 17.4024 35.7429 14.6129 35.0668 12.8454C34.4323 11.184 33.5787 9.61094 32.5276 8.1663L39.8713 0L47.1313 8.07687C45.1615 11.1421 43.8128 14.3931 43.548 18.1014C43.6553 17.9799 43.7166 17.9199 43.7668 17.8516C45.5588 15.411 47.8241 13.4899 50.472 11.9894C50.633 11.8986 50.7466 11.8398 50.9118 12.0235C52.3539 13.6292 53.8086 15.2239 55.2597 16.8228C55.2897 16.8555 55.3148 16.891 55.3461 16.9341C54.7669 17.2228 54.1787 17.4802 53.6287 17.7977C50.1335 19.8266 47.7734 22.7412 46.5486 26.5415C45.6425 29.3269 45.1448 32.1716 45.2243 35.0983C45.3037 38.025 45.9101 40.8158 47.5864 43.2906C49.292 45.8083 51.6952 47.1197 54.8123 47.0221C56.6056 46.9655 58.2178 46.3005 59.7547 45.4335C62.0158 44.1569 63.7764 42.3792 65.2366 40.2833C67.2538 37.388 68.6248 34.2388 69.2096 30.7708C69.7881 27.3211 69.5142 23.9268 68.5321 20.5782C67.4922 17.033 65.7831 13.8046 63.6049 10.8158C62.6291 9.47638 61.5321 8.2216 60.4914 6.9245C60.4308 6.84872 60.3806 6.76406 60.3256 6.68282C60.3437 6.6562 60.3618 6.62889 60.3792 6.60158C60.573 6.67804 60.7918 6.72037 60.9563 6.83643C64.2873 9.18828 67.4963 11.6787 70.2669 14.6703C74.2614 18.9821 76.9498 23.9794 78.4595 29.5979C79.3373 32.8544 79.8491 36.195 79.9859 39.5604C80.0689 41.6207 79.8396 43.6742 79.5587 45.7155C79.0387 49.5051 78.0803 53.1841 76.588 56.7224C73.9576 62.9588 70.0118 68.2257 64.5173 72.3334C60.4231 75.3953 55.8501 77.4884 50.8561 78.7213C47.0329 79.6582 43.0979 80.084 39.1582 79.987C35.0696 79.899 31.0674 79.2497 27.2137 77.8994C15.5277 73.8032 7.41879 66.0384 2.7872 54.8C0.606271 49.5071 -0.264287 43.9616 0.0688807 38.2632C0.544237 30.157 3.31691 22.8812 8.38691 16.4357C11.3743 12.6311 14.9604 9.4559 19.0406 6.80981C19.152 6.75029 19.2687 6.70071 19.3891 6.66166L19.4553 6.76543Z" fill="#FFF38A"/>
</svg>
<svg id="svg-1" class="slidable" width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38.4084 80H41.6101C41.7172 79.9772 41.8254 79.9603 41.9343 79.9493C45.4909 79.7905 48.9754 79.1988 52.3432 78.0507C63.9027 74.109 72.1071 66.5261 76.9563 55.3022C78.5412 51.6331 79.4543 47.7738 79.8172 43.7898C79.8839 43.04 79.9413 42.2888 80.0033 41.5383V38.4696C79.9853 38.3362 79.9573 38.2095 79.9513 38.078C79.8374 35.392 79.4404 32.7254 78.7666 30.1227C76.6275 21.9026 72.3345 15.012 65.8664 9.51498C59.3983 4.01798 51.917 0.921245 43.4731 0.15807C39.0057 -0.246736 34.502 0.118126 30.158 1.23678C23.7346 2.87788 18.0349 5.90657 13.1556 10.3916C5.48795 17.4403 1.15986 26.1592 0.171334 36.5484C-0.31611 41.6955 0.23763 46.888 1.79954 51.8165C4.54901 60.5472 9.67152 67.5473 17.1671 72.8165C23.1136 76.9927 29.7411 79.3195 36.987 79.8819C37.4579 79.9186 37.9342 79.9606 38.4084 80ZM30.3715 32.4596C32.4099 29.9446 35.0106 28.4196 38.205 27.8919C37.7167 23.8225 37.2325 19.7805 36.7482 15.7425C37.9735 15.4249 42.2478 15.4316 43.2663 15.7731C42.7821 19.8065 42.2969 23.8483 41.8109 27.8986C43.3423 28.1265 44.8163 28.6436 46.1545 29.4223C47.4968 30.2056 48.6797 31.2343 49.6417 32.4549L59.4897 25.0874C60.5409 26.3115 62.3826 29.551 62.7107 30.7511L51.4334 35.5744C52.5453 38.6091 52.5173 41.6024 51.3667 44.5884L62.7694 49.4676C61.9208 51.4831 60.8143 53.38 59.4777 55.1107L49.553 47.6684C47.5139 50.1247 44.9379 51.6084 41.7875 52.1194C42.2845 56.2595 42.7767 60.3636 43.273 64.4957C41.0765 64.7538 38.924 64.7625 36.7449 64.4743C37.2425 60.3342 37.7354 56.2315 38.2303 52.1154C35.0513 51.5984 32.4839 50.1021 30.4635 47.6711L20.5115 55.1207C19.1936 53.3805 18.106 51.4773 17.2758 49.4583L28.6592 44.5937C28.0772 43.1573 27.7738 41.6232 27.7654 40.0734C27.7595 38.5381 28.0379 37.015 28.5865 35.581C24.7845 33.954 21.0291 32.3449 17.2738 30.7378C17.7814 29.2001 19.9012 25.6611 20.5876 25.1194L30.3715 32.4596ZM7.34383 56.7425C4.98124 52.3496 3.08489 46.0293 3.295 38.9526C3.44096 33.4787 4.82064 28.1084 7.33115 23.2421L9.74044 24.4316C9.27352 25.493 8.7866 26.4996 8.37571 27.5423C7.96483 28.585 7.62064 29.6657 7.24178 30.7498C7.73471 30.8919 8.15893 31.0167 8.58382 31.1361L9.89252 31.5063C8.33769 37.1888 8.34036 42.8339 9.89252 48.5003L7.24178 49.2548C7.62798 50.3536 7.97016 51.4309 8.38439 52.4796C8.79861 53.5283 9.28353 54.541 9.74311 55.5837C8.97804 55.9606 8.22297 56.3329 7.46656 56.7045C7.42669 56.7198 7.38565 56.7318 7.34383 56.7405V56.7425ZM70.126 48.4983C71.6795 42.8205 71.6768 37.1754 70.126 31.509L72.7334 30.7645C72.1164 28.5818 71.2822 26.4665 70.2434 24.4503L71.4534 23.8539L72.692 23.2428C75.735 29.2495 77.0586 35.5899 76.6628 42.2642C76.3587 47.3676 75.0333 52.2032 72.6867 56.7712L70.2427 55.5637C71.2834 53.5451 72.1181 51.4268 72.7341 49.2408L70.126 48.4983ZM17.5459 61.7738C21.7482 66.0253 26.6281 68.8546 32.3085 70.3362C32.0837 71.2382 31.8676 72.1014 31.6495 72.9733C33.8471 73.5284 36.0945 73.8636 38.3584 73.974C38.2997 74.8959 38.2437 75.7752 38.1876 76.6558C33.1623 76.499 26.1492 74.9406 19.6104 70.5444C15.4358 67.7512 11.8762 64.1342 9.15013 59.9153L11.426 58.4156C12.6723 60.3414 14.1073 62.1384 15.7096 63.7799C16.3246 63.1094 16.9229 62.4543 17.5459 61.7732V61.7738ZM41.8256 76.6778C41.7689 75.7645 41.7135 74.8846 41.6568 73.974C43.944 73.8499 46.1646 73.5464 48.3657 72.9733C48.1416 72.0781 47.9268 71.2222 47.7047 70.3382C53.4078 68.8526 58.2977 66.0147 62.4979 61.7565L64.3176 63.7698C65.9152 62.1308 67.347 60.3377 68.5919 58.4169L70.8357 59.8993C70.1727 61.3749 66.6829 65.4523 64.1622 67.6604C60.2889 71.0645 55.736 73.6057 50.8057 75.1154C47.8922 76.0171 44.8751 76.542 41.8282 76.6771L41.8256 76.6778ZM32.3098 9.67708C26.6128 11.1621 21.7242 14.002 17.5313 18.2515C16.9069 17.563 16.3113 16.9046 15.7043 16.2355C14.1044 17.8763 12.6709 19.6716 11.4247 21.595L9.1688 20.1054C12.2745 15.1501 17.5179 9.98863 24.3642 6.77582C28.7023 4.73026 33.401 3.56007 38.1916 3.33218L38.3591 6.03665C36.0778 6.1614 33.856 6.46828 31.6508 7.04132C31.8709 7.92992 32.0864 8.78649 32.3098 9.67708ZM47.7067 9.67708C47.9342 8.77115 48.149 7.91457 48.3677 7.03999C46.1486 6.46627 43.9267 6.16674 41.6581 6.03598C41.7168 5.11337 41.7722 4.24213 41.8269 3.37622C44.9299 2.97595 53.1056 5.26947 57.688 7.81516C63.0905 10.8158 67.4848 14.9097 70.8711 20.0967L68.5992 21.5997C67.3664 19.6955 65.9485 17.9176 64.3663 16.2922L62.4192 18.1808C58.2864 13.988 53.3997 11.1621 47.7067 9.67441V9.67708Z" fill="#FFF38A"/>
</svg>
<svg id="svg-2" class="slidable" width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M76.9679 20.0914C77.0835 20.2106 77.1838 20.3449 77.2662 20.4911C77.5686 21.2149 77.8969 21.9318 78.1326 22.6798C78.563 24.0508 78.9839 25.4289 79.3177 26.8269C80.0873 30.0454 79.9674 33.3349 79.9988 36.6159C80.0301 39.897 79.6323 43.094 78.6856 46.2044C78.277 47.5313 77.6681 48.7928 77.1191 50.0699C76.7963 50.8208 76.4381 51.5575 76.0444 52.2729C75.6725 52.9598 75.2271 53.6027 74.8402 54.2811C74.2954 55.241 73.7764 56.2152 73.252 57.1852C73.1977 57.2786 73.1695 57.3859 73.1702 57.4952C73.1879 57.6815 73.192 57.9418 73.3064 58.0257C73.4209 58.1096 73.6892 58.0627 73.8186 57.9674C74.8106 57.2599 75.6564 56.3517 76.3059 55.2965C77.2713 53.6847 78.2429 52.0823 79.221 50.4895C79.3508 50.3104 79.4963 50.1442 79.6555 49.9931L79.7917 50.0358C79.8026 50.2548 79.8802 50.498 79.8149 50.6857C79.5315 51.4992 79.2387 52.3127 78.8886 53.0964C78.1285 54.803 77.3711 56.5096 76.453 58.1423C75.4995 59.8489 74.4983 61.5072 73.3201 63.0489C66.9274 71.4015 58.7844 76.9082 48.7262 79.0202C35.7788 81.738 24.0233 78.7969 13.6095 70.2737C10.1415 67.4293 7.20737 64.043 4.74185 60.2329C3.55297 58.3954 2.52189 56.4517 1.66063 54.4247C1.17162 53.2784 0.652636 52.1492 0.25897 50.9616C0.177469 50.6731 0.111075 50.3802 0.0600908 50.0841L0.208562 49.9746C0.377471 50.1425 0.591338 50.2818 0.709846 50.4824C1.13212 51.2034 1.50535 51.9543 1.92762 52.674C2.28178 53.3077 2.67301 53.918 3.09908 54.5015C3.89595 55.5425 4.73368 56.5495 5.57822 57.5493C5.78216 57.7726 6.0279 57.9498 6.30017 58.0698C6.65025 58.2333 6.86955 58.0612 6.7851 57.6844C6.69928 57.3023 6.56168 56.935 6.37645 56.5935C5.9678 55.8384 5.50466 55.1145 5.08648 54.365C4.29506 52.9428 3.45188 51.5533 2.75309 50.0884C0.835594 46.2671 -0.111303 41.9963 0.00288223 37.684C0.00288223 35.0743 -0.0420745 32.4574 0.0995906 29.8534C0.214013 27.7201 0.690776 25.6295 1.38276 23.61C1.74101 22.5618 2.1769 21.5421 2.591 20.5153C2.6896 20.3127 2.80204 20.1178 2.92745 19.9321L3.09499 19.9748C3.06639 20.3161 3.04731 20.6575 3.00917 20.9974C2.67272 24.1063 2.80894 27.2195 2.86207 30.3483C2.89912 32.434 3.22769 34.5028 3.83737 36.4893C4.03537 37.1227 4.27618 37.7405 4.55796 38.3382C5.0824 39.476 5.57686 40.6351 6.20891 41.7046C7.02621 43.0813 7.93613 44.3968 8.85831 45.6995C9.16344 46.1262 9.60614 46.4661 10.0202 46.8017C10.403 47.1117 10.764 46.9567 10.8593 46.4575C10.9176 46.2136 10.9129 45.958 10.8457 45.7166C10.4616 44.6713 10.1306 43.5833 9.61976 42.6176C8.50143 40.5213 7.84214 38.2628 7.16106 35.9916C6.10129 32.456 5.91876 28.8479 6.11083 25.1914C6.17076 24.0693 6.18575 22.9373 6.35738 21.8322C6.51948 20.7897 6.86002 19.7785 7.12428 18.7531C7.33133 17.951 7.51658 17.1418 7.7536 16.3482C8.89645 12.5339 10.9261 9.25285 13.457 6.30606C15.1011 4.39036 16.8406 2.56425 18.5597 0.721084C18.8784 0.379757 19.2053 -0.0540053 19.8673 0.0540817C19.7189 0.348477 19.6085 0.605898 19.4669 0.840561C18.8008 1.93565 18.0407 2.97387 17.4713 4.12443C15.9729 7.14375 15.1229 10.3295 15.4553 13.784C15.6243 15.7149 16.0261 17.6157 16.6513 19.4415C17.228 21.0876 17.9228 22.6859 18.7299 24.2229C19.8537 26.3562 21.0892 28.4241 22.3506 30.4692C23.2346 31.9014 23.2714 33.3136 22.6816 34.8495C22.0196 36.5747 21.3889 38.3154 20.8222 40.0761C20.406 41.3614 20.0643 42.6717 19.7992 44C19.6358 44.8249 19.6453 45.6952 19.6467 46.5443C19.6467 48.962 19.5104 51.3883 19.7638 53.7733C19.9668 55.6919 20.5961 57.5749 21.1587 59.4322C21.4311 60.3225 21.9869 61.1147 22.401 61.9595C22.5372 62.2311 22.574 62.5639 22.7415 62.8043C23.5901 64.0359 24.3979 65.3102 25.35 66.4522C27.0051 68.4319 28.7078 70.3832 30.8191 71.8566C32.7439 73.2062 34.7694 74.3468 37.0619 74.8787C37.7675 75.0437 37.8547 75.021 37.9242 74.2643C38.0522 72.8578 38.1762 71.447 38.2211 70.0362C38.2756 68.3509 38.2511 66.6627 38.2498 64.976C38.2498 64.4825 38.2498 63.8709 37.7771 63.696C37.5196 63.5993 37.0497 63.9335 36.7514 64.1753C36.0703 64.7285 35.4246 65.3443 34.7667 65.9345C34.5145 66.1822 34.2274 66.388 33.9153 66.5447C33.934 66.3638 33.9757 66.1864 34.0393 66.017C34.4016 65.333 34.8253 64.683 35.1522 63.9819C35.5499 63.1285 36.0294 62.288 35.9695 61.2797C35.9368 60.7179 35.5036 60.5686 35.1045 60.4975C33.9426 60.2898 32.7698 60.149 31.6038 59.9613C30.8042 59.8333 30.0073 59.6883 29.2159 59.5119C29.0483 59.4749 28.9148 59.2701 28.7664 59.1435C28.9094 58.9928 29.0388 58.7425 29.1982 58.7069C30.5603 58.4083 31.9225 58.1665 33.2847 57.8735C34.1306 57.6901 34.9683 57.4611 35.8033 57.2264C36.2215 57.1084 36.3264 56.7912 36.1752 56.3731C35.6875 55.0391 35.2217 53.7008 34.7095 52.3753C34.4371 51.6741 34.0965 51.0057 33.8282 50.3032C33.7015 49.9732 33.6729 49.6006 33.6007 49.2465L33.7737 49.1668C34.4548 50.0202 35.1358 50.8905 35.8169 51.7381C36.3345 52.3715 36.869 52.9878 37.4202 53.587C37.5482 53.7292 37.7716 53.7733 37.9514 53.8629C38.0223 53.6724 38.1462 53.4861 38.1571 53.2941C38.2933 50.8337 38.4663 48.3732 38.5426 45.9086C38.8069 37.2332 39.0384 28.5435 39.2823 19.8625C39.3985 15.7295 39.5143 11.5971 39.6296 7.46517C39.6296 7.3457 39.6528 7.22481 39.665 7.10535L39.8149 7.09253C39.9143 8.06247 40.0696 9.02956 40.1023 10.0009C40.2385 13.9333 40.3298 17.8685 40.4401 21.8052C40.6345 28.7673 40.8315 35.728 41.0313 42.6873C41.1253 45.8161 41.2615 48.9549 41.3855 52.0895C41.4059 52.5958 41.4399 53.1035 41.5053 53.6055C41.5666 54.0734 41.8091 54.1744 42.1306 53.8487C42.6019 53.3694 43.0323 52.8532 43.4614 52.3227C44.0703 51.5803 44.6574 50.8151 45.2663 50.0713C45.4433 49.8566 45.6627 49.6817 45.9678 49.3859C45.9446 49.6632 45.9678 49.8054 45.9187 49.9178C45.5605 50.791 45.2022 51.6656 44.8195 52.5275C44.4108 53.4576 43.9654 54.3763 43.5418 55.2993C43.484 55.431 43.4384 55.5682 43.4056 55.7089C43.1467 56.777 43.3156 57.1781 44.3386 57.4156C45.7253 57.7299 47.1379 57.9162 48.5341 58.1864C49.1798 58.3116 49.8173 58.4922 50.4493 58.6827C50.7006 58.7848 50.9423 58.9109 51.1712 59.0596L51.1835 59.263C50.8457 59.3867 50.516 59.5659 50.1673 59.6228C48.5218 59.8931 46.8695 60.1135 45.2254 60.3937C44.7854 60.4803 44.3606 60.6361 43.9654 60.8559C43.5268 61.0848 43.4273 61.4973 43.6453 61.9638C44.0839 62.901 44.5307 63.8354 44.972 64.7712C45.2118 65.2832 45.4515 65.7966 45.679 66.3142C45.6962 66.4082 45.6962 66.5047 45.679 66.5987L45.5142 66.7224C45.3889 66.5347 45.2935 66.3129 45.1341 66.1664C44.3168 65.4183 43.5186 64.6261 42.6332 63.9705C41.8159 63.3675 41.271 63.7145 41.2833 64.7626C41.2928 65.9232 41.35 67.0822 41.3882 68.2428C41.4536 70.1997 41.5189 72.1566 41.5843 74.1136C41.6129 74.9271 41.711 75.0636 42.4861 74.937C43.1354 74.8279 43.7709 74.6433 44.3809 74.3866C47.6936 72.9957 50.6141 71.016 53.0429 68.2328C54.3056 66.785 55.5956 65.3571 56.6213 63.7273C57.7709 61.8998 58.7449 59.9514 59.2816 57.8124C59.614 56.484 59.9109 55.1443 60.1874 53.8018C60.2792 53.3215 60.3207 52.8322 60.3114 52.3426C60.3005 49.8224 60.3005 47.3023 60.2228 44.785C60.1997 44.0384 59.9804 43.2875 59.7829 42.5593C59.3333 40.8925 58.9261 39.2143 58.1891 37.6413C57.8036 36.8193 57.583 35.9134 57.3037 35.0387C57.0997 34.451 56.9274 33.8518 56.7875 33.2439C56.6417 32.5328 56.8065 31.8985 57.2097 31.2528C58.1265 29.7866 58.9424 28.2506 59.7978 26.7444C60.152 26.1272 60.5579 25.5398 60.8699 24.8956C61.4038 23.8048 61.8711 22.6798 62.386 21.5805C63.507 19.1827 64.0355 16.6142 64.4646 14.0087C64.7139 12.4941 64.5436 11.0334 64.2685 9.53871C63.9511 7.81216 63.3463 6.19797 62.7074 4.60084C62.3669 3.74752 61.7839 3.00087 61.2853 2.22293C60.8767 1.58437 60.4285 0.972825 60.0049 0.342792C59.9654 0.28306 59.945 0.140854 59.979 0.108143C60.0444 0.0427222 60.1779 -0.0255753 60.2433 0.00429089C60.5157 0.123755 60.8045 0.233265 61.0102 0.43095C62.0141 1.408 63.0316 2.37225 63.9688 3.41756C65.158 4.74305 66.3144 6.10553 67.4096 7.51635C68.3236 8.69393 69.2445 9.89711 69.9555 11.2141C70.8709 12.9051 71.7263 14.6458 72.184 16.5644C72.6281 18.4346 73.2887 20.2621 73.5462 22.1607C73.8186 24.1518 73.7328 26.2097 73.8186 28.2378C73.914 30.5232 73.5639 32.7632 73.0394 34.9591C72.3468 37.8582 71.3414 40.6661 70.0427 43.3287C69.6994 44.0327 69.4215 44.7737 69.1246 45.5004C69.05 45.6453 69.0138 45.8083 69.0197 45.9726C69.0701 46.3096 69.175 46.6382 69.2581 46.9681C69.555 46.8686 69.9392 46.86 70.1312 46.6524C70.8144 45.9132 71.4514 45.1289 72.0383 44.3043C72.6972 43.3782 73.2983 42.4086 73.8377 41.4016C75.1058 38.991 76.246 36.5121 76.7255 33.7787C76.8753 32.8865 76.9491 31.9822 76.9461 31.0765C76.9598 27.8495 76.9325 24.6225 76.9121 21.3956C76.9121 20.9831 76.8508 20.5693 76.8181 20.1569L76.9679 20.0914Z" fill="#FFF38A"/>
</svg>
</div>
<div class="title-slider">
<h1 id="title-0" class="display slidable">Un nouvel espoir</h1>
<h1 id="title-1" class="slidable">L'empire contre-attaque</h1>
<h1 id="title-2" class="slidable">Le retour du Jedi</h1>
</div>
<div class="text-slider">
<p id="text-0" class="display slidable">C'est le premier opus de la saga Star Wars par sa date de sortie, mais le quatrième selon l'ordre chronologique de l'histoire.</p>
<p id="text-1" class="slidable">La guerre entre le maléfique Empire galactique et son antagoniste, L'alliance rebelle, bat son plein.</p>
<p id="text-2" class="slidable">Le maléfique Empire galactique construit une nouvelle station spaciale Étoile de la mort pour anéantir définitivement l'Alliance rebelle.</p>
</div>
</main>
<div class="date-slider-wrapper">
<div class="unmovable">
<p>19</p>
</div>
<div class="date-slider">
<p id="date-decade-1" class="display">7</p>
<p id="date-decade-2">8</p>
</div>
<div class="date-slider">
<p id="date-unit-1" class="display">7</p>
<p id="date-unit-2">0</p>
<p id="date-unit-3">3</p>
</div>
</div>
</div>
<div class="right">
<div class="image-slider">
<img class="display slidable" src="images/image1.png" alt="" id="image-0">
<img class="slidable" src="images/image2.png" alt="" id="image-1">
<img class="slidable" src="images/image3.png" alt="" id="image-2">
</div>
</div>
</main>
<footer class="controls-wrapper">
<div class="controls">
<div class="arrow-wrapper" onclick="handle_click(true, max_slide, min_slide, current - 1)">
<div id="left-arrow" class="left-arrow deactivated"></div></div>
<div class="arrow-wrapper" onclick="handle_click(false, max_slide, min_slide, current + 1)">
<div id="right-arrow" class="right-arrow"></div>
</div>
</div>
<div class="slide-show">
<div id="circle-0" class="circle"></div>
<div id="line-0" class="line"></div>
<div id="circle-1" class="circle"></div>
<div id="line-1" class="line"></div>
<div id="circle-2" class="circle"></div>
<div id="line-2" class="line"></div>
<div id="circle-3" class="circle"></div>
<div id="line-3" class="line"></div>
<div id="circle-4" class="circle"></div>
</div>
</footer>
</div>
</body>
</html>