This repository has been archived by the owner on Oct 13, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·74 lines (71 loc) · 3.94 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- Description -->
<meta name="description" content=""Bangkok in Change" is a project made by Jan Wolf in the year of 2013. The project was part of his studies during his exchange in Bangkok. Originally an app for smartphones, it was migrated to a more light web version in the year of 2014.">
<meta property="og:description" content=""Bangkok in Change" is a project made by Jan Wolf in the year of 2013. The project was part of his studies during his exchange in Bangkok. Originally an app for smartphones, it was migrated to a more light web version in the year of 2014.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Bangkok in Change - made by Jan Wolf in 2013">
<meta property="og:title" content="Bangkok in Change - made by Jan Wolf in 2013">
<title>Bangkok in Change - made by Jan Wolf in 2013</title>
<link rel="stylesheet" href="css.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:700,300,400%7CRaleway' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="dragdealer.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
</head>
<body>
<!-- Images -->
<div id="image0" class="image"></div>
<div id="image1" class="image"></div>
<div id="image2" class="image"></div>
<div id="image3" class="image"></div>
<!-- Caption -->
<div id="caption" class="translucent">
<h2><span>Bangkok</span> in Change</h2>
Control the time at your fingertips.
</div>
<!-- Audio -->
<audio class="audio" id="audio0" loop autoplay preload="auto">
<source type="audio/mpeg">
</audio>
<audio class="audio" id="audio1" loop autoplay preload="auto">
<source type="audio/mpeg">
</audio>
<audio class="audio" id="audio2" loop autoplay preload="auto">
<source type="audio/mpeg">
</audio>
<audio class="audio" id="audio3" loop autoplay preload="auto">
<source type="audio/mpeg">
</audio>
<!-- Controls -->
<div id="header" class="translucent">
<div id="container">
<span id="info">
What is this?
</span>
<span id="dropdown">
<select size="1"></select>
</span>
</div>
<div id="description">
<span id="countdown">You spent <span></span> on this website.</span>
<h1>What is this?</h1>
<p>"Bangkok in Change" is a project made by Jan Wolf in the year of 2013. The project was part of his studies during his exchange in Bangkok. Originally an app for smartphones, it was migrated to a more light web version in the year of 2014.</p>
<p>The idea is to create an illusion to make users feel like they are able to control the time at their fingertips. Since humans started to increase the knowledge in science, they never have solved the problem of time. Humans like to control everything, but time is not part of it. In our society we try to minimize the impact of time by using highspeed trains, developing the internet and by decreasing the latency in general. This tools makes it happen and let users control time at their fingertips.</p>
<p>But users will soon realize that they just used their freetime to control "time". Consequently the user just spent time on this website realizing that "time" is still passing and not controllable.</p>
<h1>How to use it?</h1>
<p>The tool is very easy to use. Just select one of your desired locations at the top left corner and use your mouse or finger to slide on the timeline at the bottom of the page. By doing this, you can change the time at your desire. You will change the visible and audible character of your selected environment.</p>
</div>
</div>
<div id="hints" class="translucent">
<div id="hints_wrapper">
<div class="outer handle">
<div class="inner"></div>
</div>
</div>
</div>
</body>
</html>