-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
262 lines (242 loc) · 19.1 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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!doctype html>
<html>
<head>
<title>Greybox</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./Plugins/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./Plugins/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="./index.js"></script>
<link rel="stylesheet" type="text/css" href="./Plugins/jquery.mCustomScrollbar.css" />
<link rel="stylesheet" type="text/css" href="./index.css" />
</head>
<body>
<div class="background">
<img src="./Szene45/Szene45.png" style="width: 100%; height: 100%; filter: blur(15px); opacity: 0.4;" />
</div>
<img id="next-blink" src="./Images/Weiterbutton_blink.png" style="z-index: 100;"
class="blink next" data-interval="1000" data-life="1000" data-fade-duration="1500" data-associate="next" />
<img id="next" src="./Images/Weiterbutton.png" class="next" onclick="$('#next-blink').stop(true, true).hide(); $(this).hide(); greybox.logic.nextView();"
style="display: none; z-index: 100; width:149px; height:70px" />
<audio id="hintergrundmusik" loop>
<source src="./Sounds/Hintergrundmusik.wav.MP3" type="audio/mp3">
</audio>
<audio id="detektivmusik" loop>
<source src="./Sounds/detektiv.wav.MP3" type="audio/mp3">
</audio>
<audio id="testmusik" loop>
<source src="./Sounds/songtest.wav.MP3" type="audio/mp3">
</audio>
<audio id="guadnachtmusi" loop>
<source src="./Sounds/Guadnachtmusi.wav.MP3" type="audio/mp3">
</audio>
<audio id="einbruch" loop>
<source src="./Sounds/Einbruch.wav.MP3" type="audio/mp3">
</audio>
<div class="view-wrapper">
<div class="view">
<img src="./Szene45/Szene45.png" style="" />
<div style="width: 100%; height: 100%; background-color: black; opacity: 0.85;"></div>
<img src="./Szene0/10_Logo.png" style="margin-left: 260px; margin-top: 100px; width: 769px; height: 513px" />
<img src="./Images/Ballonanimation.gif" style="margin-left: 585px; margin-top: 585px" />
<img src="./Images/Laedt_1.png" style="margin-left: 990px; margin-top: 850px;" />
<img src="./Images/Laedt_2.png" style="margin-left: 990px; margin-top: 850px;"
class="blink" data-interval="100" data-life="100" data-fade-duration="1500" />
</div>
</div>
<div class="view-wrapper">
<div class="view actionless video">
<video id="intro" width="1280" height="760" src="./Videos/Greybox_Intro.mp4">
</video>
</div>
</div>
<div class="view-wrapper">
<div class="view audio" data-play-audio="hintergrundmusik">
<img src="./Szene1/0_Himmel.png" style="" />
<img src="./Images/Himmel_Farben.png" style="margin-top: -50px"
class="rotate-right-very-slow" />
<img src="./Szene1/2_Background.png" style="" />
<img src="./Szene1/4_Haus_2.png" style="margin-left: 40px" />
<img src="./Szene1/Animation_Leute.gif" style="margin-left: 255px; margin-top: 270px" />
<img src="./Szene1/5_Nebel_2.png" style="margin-left: 60px; margin-top: 265px;" />
<img src="./Szene1/6_Haus_1.png" style="" />
<img src="./Szene1/7_Elder_Lady_Body.png" style="margin-left: 255px; margin-top: 550px;" />
<img src="./Szene1/Animation_ladykopf.gif" style="margin-left: 330px; margin-top: 550px;" />
<img src="./Szene1/9_Koepfe_links_1.png" style="margin-left: -40px; margin-top: 600px;" />
<img src="./Szene1/10_Kopf_rechts.png" style="margin-left: 1050px; margin-top: 750px;" />
<img src="./Szene1/11_Nebel_1.png" style="margin-left: 0px; margin-top: 400px;" />
<div style="width: 250px; height: 350px; margin-left: 255px; margin-top: 550px;"
class="action sound" data-file="./Sounds/Figurensound/ElderLady.MP3"
data-tooltip-header="ELDER LADY" data-tooltip-style="width: 550px; height: 360px; margin-left: 680px; margin-top: 490px"
data-tooltip-text="Willkommen zurück in Hofhausen! <br/>
Ich hoffe, du hast deinem Tantchen aus Übersee die Grüße bestellt, so wie ich es dir aufgetragen hatte. Du wunderst dich, was hier los ist? Nun ja - wie der Erzähler zu Beginn schon erklärt hat, findet heute die Feier zu Ehren unserer Gründerväter statt, die den Grundstein zum Bau dieses niedlichen Nests vor 512 oder 513 Jahren gelegt haben. Solltest du meine Schwester WIDOW heute noch antreffen, bestell‘ ihr doch bitte liebe Grüße von mir. <br/>
Ich muss sie bestimmt schon seit zwei Stunden nicht mehr gesehen haben... "></div>
<div style="width: 450px; height: 300px; margin-left: 255px; margin-top: 250px;"
class="action optional sound" data-file="./Sounds/Figurensound/Menschenmenge.wav.MP3"></div>
</div>
</div>
<div class="view-wrapper">
<div class="view">
<img src="./Szene2/Background.png" style="" />
<img src="./Szene2/1_Koerper.png" style="margin-left: 780px; margin-top: 600px" />
<img src="./Szene2/1_Putzehaende.gif" style="margin-left: 725px; margin-top: 560px" />
<img src="./Szene2/1_Kopf.png" style="margin-left: 785px; margin-top: 580px" />
<img src="./Szene2/8_Zwei_Gestalten_Koerper.png" style="margin-left: 350px; margin-top: 300px" />
<img src="./Szene2/Animation_kopflinks.gif" style="margin-left: 350px; margin-top: 310px" />
<img src="./Szene2/Animation_kopfrechts.gif" style="margin-left: 500px; margin-top: 300px" />
<img src="./Images/Ballonanimation.gif" style="margin-left: 940px; margin-top: 30px" />
<img src="./Szene2/12_Vordergrund.png" style="" />
<div style="width: 310px; height: 320px; margin-left: 0px; margin-top: 150px"
class="action optional sound" data-file="./Sounds/Figurensound/Steinverkauefer.wav.MP3"></div>
<div style="width: 150px; height: 350px; margin-left: 350px; margin-top: 300px"
class="action sound" data-file="./Sounds/Figurensound/Chro.MP3" data-tooltip-header="CHRO" data-tooltip-style="width: 450px; height: 215px; margin-left: 50px; margin-top: 650px"
data-tooltip-text="Meine Frau ONO und ich haben diesen Tik-Tik-Laden vor ein paar Jahren eröffnet und erhofften uns den großen Durchbruch mit dem Verkauf von Tik-Tiks und Glitzersteinen, doch leider wurden wir des Öfteren Opfer einer räuberischen Diebesbande..."></div>
<div style="width: 180px; height: 350px; margin-left: 510px; margin-top: 300px;"
class="action sound" data-file="./Sounds/Figurensound/Ono.wav.MP3" data-tooltip-header="ONO" data-tooltip-style="width: 450px; height: 215px; margin-left: 500px; margin-top: 80px"
data-tooltip-text="Seit dieser Einbruchserie können wir keine Tik-Tiks oder Glitzersteine mehr anbieten und haben uns deshalb auf die Wartung und Reparatur von - vorzugsweise - Stundenzeigern spezialisiert."></div>
<div style="width: 180px; height: 300px; margin-left: 750px; margin-top: 570px;"
class="action sound" data-file="./Sounds/Figurensound/Olga.wav.MP3" data-tooltip-header="OLGA" data-tooltip-style="width: 450px; height: 185px; margin-top: 390px; right: 50px;"
data-tooltip-text="Ohne mich und meinen Mopp wäre diese Stadt bereits mehrere Male nahezu im Dreck versunken! So geschehen bei der 17-jährigen Jubiläumsfeier zu Ehren der Henne, die das Ei erfunden hat."></div>
</div>
</div>
<div class="view-wrapper">
<div class="view">
<img src="./Szene3/0_Himmel.png" style="" />
<img src="./Images/Himmel_Farben.png" style="margin-top: -50px; margin-left: -200px"
class="rotate-left-very-slow" />
<img src="./Szene3/2_Himmel_Farben.png" style="margin-top: -20px; margin-left: 650px"
class="rotate-right-very-slow" />
<img src="./Szene3/Background.png" style="" />
<img src="./Szene3/5_Angler_Koerper.png" style="margin-left: 690px; margin-top: 280px" />
<img src="./Szene3/Animation_angel.gif" style="margin-left: 558px; margin-top: 270px" />
<img src="./Szene3/6_Angler_Kopf.png" style="margin-left: 700px; margin-top: 270px" />
<img src="./Szene3/Animation_blase.gif" style="margin-left: 720px; margin-top: 290px" />
<img src="./Szene3/12_Fuchs_Koerper.png" style="margin-left: 730px; margin-top: 490px" />
<img src="./Szene3/Animation_Fuchskopf.gif" style="margin-left: 740px; margin-top: 440px" />
<img src="./Szene3/10_Fisch_Koerper.png" style="margin-left: 950px; margin-top: 410px" />
<img src="./Szene3/Animation_Fischkopf.gif" style="margin-left: 920px; margin-top: 370px" />
<img src="./Szene3/16_Teddy_Koerper.png" style="margin-left: 955px; margin-top: 530px" />
<img src="./Szene3/Animation_Teddykopf.gif" style="margin-left: 1020px; margin-top: 490px" />
<img src="./Szene3/14_Schwein_Koerper.png" style="margin-left: 720px; margin-top: 700px" />
<img src="./Szene3/Animation_Schweinekopf.gif" style="margin-left: 710px; margin-top: 680px" />
<div style="width: 220px; height: 200px; margin-left: 710px; margin-top: 690px"
class="action sound" data-file="./Sounds/Figurensound/Grunz.wav.MP3" data-tooltip-header="GRUNZ" data-tooltip-style="width: 350px; height: 245px; margin-left: 250px; margin-top: 650px"
data-tooltip-text="Diese Schatten sind solche Schweine! Ich will jedenfalls nicht mit der armen Sau tauschen müssen, die dem Verbrecherkartell letzte Nacht zum Opfer gefallen ist. "></div>
<div style="width: 180px; height: 150px; margin-left: 910px; margin-top: 355px"
class="action sound" data-file="./Sounds/Figurensound/O.wav.MP3" data-tooltip-header="MOE" data-tooltip-style="width: 350px; height: 245px; margin-left: 490px; margin-top: 80px;"
data-tooltip-text="Mein Papi ist Detektor, aber ihm sind die Flossen gebunden, wenn es um die kriminellen Machenschaften der Schatten geht... Alles nur, weil unser Detektorenchef EISEN mit der Bande unter einer Decke steckt!"></div>
<div style="width: 240px; height: 260px; margin-left: 950px; margin-top: 470px;"
class="action sound" data-file="./Sounds/Figurensound/Toddy.wav.MP3" data-tooltip-header="TODDY" data-tooltip-style="width: 350px; height: 245px; margin-top: 150px; right: 50px;"
data-tooltip-text="Ich habe heute das Zähneputzen ausgelassen, meine Schnürsenkel nicht gebunden, die Haare nicht gekämmt und meine Hausaufgaben nicht gemacht. Tja, so ein Leben als Rebell verlangt einem alles ab und wenn ich so weitermache, darf ich sicherlich bald den Schatten beitreten."></div>
<div style="width: 200px; height: 210px; margin-left: 720px; margin-top: 430px;"
class="action sound" data-file="./Sounds/Figurensound/Pipp.wav.MP3" data-tooltip-header="PIPP" data-tooltip-style="width: 350px; height: 245px; margin-left: 300px; margin-top: 360px"
data-tooltip-text="Die Schatten haben wieder zugeschlagen! Wenn ich groß bin, werde ich ihnen beitreten und neben meinem Vorbild ROB DA HOOD die Bande anführen."></div>
<div style="width: 200px; height: 200px; margin-left: 600px; margin-top: 200px;"
class="action optional sound" data-file="./Sounds/Figurensound/Angler.MP3"></div>
</div>
</div>
<div class="view-wrapper">
<div class="view">
<img src="./Szene4/0_Himmel.png" style="" />
<img src="./Images/Himmel_Farben.png" style="margin-top: -20px; margin-left: -500px"
class="rotate-right-very-slow" />
<img src="./Szene4/2_Hintergrund.png" style="" />
<img src="./Szene4/3_Spectators_rechts.png" style="margin-left: 665px; margin-top: 180px" />
<img src="./Szene4/Animation_Minispectator.gif" style="margin-left: 200px; margin-top: 270px" />
<img src="./Szene4/5_Vordergrund.png" style="" />
<div style="width: 220px; height: 200px; margin-left: 180px; margin-top: 250px"
class="action sound" data-file="./Sounds/Figurensound/WID.wav.MP3" data-tooltip-header="WID" data-tooltip-style="width: 400px; height: 150px; margin-left: 180px; margin-top: 80px"
data-tooltip-text="Glitschi, Glibber, Schleim <br/> - das kommt aus deinem Heim!"></div>
<div style="width: 180px; height: 200px; margin-left: 665px; margin-top: 280px"
class="action sound" data-file="./Sounds/Figurensound/NES.wav.MP3" data-tooltip-header="NES" data-tooltip-style="width: 400px; height: 150px; margin-left: 650px; margin-top: 80px"
data-tooltip-text="Rumpel, Donner, Fensterbruch <br/> ...und der verwesende Geruch."></div>
<div style="width: 180px; height: 200px; margin-left: 835px; margin-top: 480px"
class="action sound" data-file="./Sounds/Figurensound/SES.wav.MP3" data-tooltip-header="SES" data-tooltip-style="width: 400px; height: 150px; margin-left: 650px; margin-top: 690px"
data-tooltip-text="Einer, zwei, oder mehr Täter? <br/> Das erfährst du später..."></div>
</div>
</div>
<div class="view-wrapper">
<div class="view moderated audio" data-file="./Sounds/Einbruch.wav.MP3" data-pause-audio="hintergrundmusik">
<img src="./Szene5/Zimmer_Normal.png" style="" />
<img src="./Szene5/1_Zimmer_Pink.png" style=""
class="blink" data-interval="5000" data-life="100" data-fade-duration="1500"/>
</div>
</div>
<div class="view-wrapper">
<div class="view audio" data-play-audio="detektivmusik">
<img src="./Szene6/0_Himmel.png" style="margin-left: 100px;" />
<img src="./Images/Himmel_Farben.png" style="margin-top: -20px; margin-left: 0px"
class="rotate-right-very-slow" />
<img src="./Szene6/2_Hintergrund.png" style="" />
<img src="./Szene6/3_Eisen.png" style="margin-left: 460px; margin-top: 258px" />
<img src="./Szene6/3_nebelanimation.gif" style="margin-left: 860px; margin-top: 240px" />
<img src="./Szene6/4_Auto_Reifen_Hintergrund.png" style="margin-left: 560px; margin-top: 540px" />
<img src="./Szene6/Animation_Auto.gif" style="margin-left: 580px; margin-top: 430px" />
<img src="./Szene6/6_Helfer.png" style="margin-left: 960px; margin-top: 550px" />
<img src="./Szene6/7_Helferrauch.png" style="margin-left: 900px; margin-top: 520px" />
<img src="./Szene6/8_Auto_Reifen_Vordergrund.png" style="margin-left: 940px; margin-top: 690px" />
<img src="./Szene6/9_Busch_nebel.png" style="margin-left: 830px; margin-top: 620px" />
<img src="./Szene6/10_Busch_rechts.png" style="margin-left: 910px; margin-top: 660px" />
<img src="./Szene6/11_Vordergrund.png" style="" />
<div style="width: 390px; height: 400px; margin-left: 440px; margin-top: 250px"
class="action sound" data-file="./Sounds/Figurensound/Eisen.MP3" data-tooltip-header="EISEN" data-tooltip-style="width: 450px; height: 260px; margin-left: 50px; margin-top: 80px"
data-tooltip-text="Gestatten, Oberdetektor EISEN. Ich hoffe, es ist nicht wieder falscher Alarm wie beim letzten Mal, als der NEAPLER HOCHSTAPLER einen Mord beobachtet haben will...<br/>
<br/>
...das hat er zwar auch...<br/>
<br/>
...aber...<br/>
<br/>
...im Abendprogramm seiner Weitblickröhre.<br/>
Wir haben nicht viel Zeit, also lassen Sie uns gleich zum Tatort gehen."></div>
<div style="width: 210px; height: 230px; margin-left: 960px; margin-top: 540px"
class="action optional sound" data-file="./Sounds/Figurensound/Schnauz.wav.MP3" data-tooltip-header="SCHNAUZ" data-tooltip-style="width: 450px; height: 180px; right: 50px; margin-top: 210px"
data-tooltip-text="Ja, EISEN passt in diesen Wagen und jetzt geh zur Seite, Kleiner! Ich muss den Tatort inspizieren."></div>
</div>
</div>
<div class="view-wrapper">
<div class="view">
<img src="./Szene7/0_Himmel.png" style="" />
<img src="./Images/Himmel_Farben.png" style="margin-top: -20px; margin-left: -500px"
class="rotate-right-very-slow" />
<img src="./Szene7/2_Hintergrund.png" style="" />
<img src="./Szene7/Animation_Minispectator.gif" style="margin-left: 450px; margin-top: 180px" />
<img src="./Szene7/6_Helfer.png" style="margin-left: 190px; margin-top: 335px" />
<img src="./Szene7/Animation_Helferstift.gif" style="margin-left: 232px; margin-top: 458px" />
<img src="./Szene7/8_Vordergrund.png" style="" />
<img src="./Szene7/9_Eisen.png" style="margin-left: 580px; margin-top: 280px" />
<img src="./Szene7/10_Eisen_Maske.png" style="margin-left: 733px; margin-top: 280px" />
<div style="width: 150px; height: 150px; margin-left: 450px; margin-top: 200px"
class="action optional sound" data-file="./Sounds/Figurensound/WID.wav.MP3"></div>
<div style="width: 500px; height: 640px; margin-left: 580px; margin-top: 250px"
class="action sound" data-file="./Sounds/Figurensound/Eisen.MP3" data-tooltip-header="EISEN" data-tooltip-style="width: 480px; height: 280px; right: 50px; margin-top: 420px"
data-tooltip-text="Wenn mich etwas auf die Palme bringt, dann ist es der verschwenderische Umgang mit Marmelade. <br/>
SCHNAUZ, nehmen Sie Proben des eigenartigen Gelees und füllen Sie es in Einweggläsern ab!"></div>
<div style="width: 250px; height: 250px; margin-left: 150px; margin-top: 300px"
class="action optional sound" data-file="./Sounds/Figurensound/Schnauz.wav.MP3" data-tooltip-header="SCHNAUZ" data-tooltip-style="width: 350px; height: 250px; margin-left: 50px; margin-top: 80px"
data-tooltip-text="Milch, Butter, Brot, Lauch... Wann hat man heutzutage schon noch Zeit, eine ordentliche Einkaufsliste zu schreiben?"></div>
</div>
</div>
<div class="view-wrapper">
<div class="view">
<img src="./Szene8/Outside_1.png" style="" />
<img src="./Szene8/Background.png" style="" />
<img src="./Szene8/Geldglas_Schein.png" style="margin-left: 501px; margin-top: 390px"
class="blink" data-interval="1000" data-life="500" data-fade-duration="2000"/>
<img src="./Szene8/Geldglas.png" style="margin-left: 525px; margin-top: 413px" />
<img src="./Szene8/Animation_Helfer.gif" style="margin-left: 75px; margin-top: 100px" />
<img src="./Szene8/Eisen.png" style="margin-left: 100px; margin-top: 170px;" />
<img src="./Szene8/Fussspuren_Schein.png" style="margin-left: 518px; margin-top: 626px"
class="blink" data-interval="1000" data-life="500" data-fade-duration="2000" data-timeout="2000" />
<div style="width: 290px; height: 230px; margin-left: 500px; margin-top: 350px"
class="action" data-tooltip-header="EISEN" data-tooltip-style="width: 450px; height: 190px; margin-left: 50px; margin-top: 500px"
data-tooltip-text="Sie sagten, es sei kein Geld entwendet worden? Pah! Bei solchen Aussagen lachen doch die Hühner..."></div>
<div style="width: 290px; height: 160px; margin-left: 500px; margin-top: 600px"
class="action" data-tooltip-header="EISEN" data-tooltip-style="width: 450px; height: 260px; margin-left: 550px; margin-top: 80px"
data-tooltip-text="Fußspuren unter dem Tisch? Sehr, sehr fadenscheinig... <br/>
Mir scheint, als wollten Sie mich nur an meiner nicht vorhandenen Nase herumführen."></div>
</div>
</div>
<script>
greybox.logic.init();
</script>
</body>
</html>