400 lines
11 KiB
HTML
400 lines
11 KiB
HTML
|
<!doctype html>
|
||
|
<html lang="en-US">
|
||
|
<head>
|
||
|
<meta charset="UTF-8">
|
||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
<style>
|
||
|
h1 {
|
||
|
font-size: 3em;
|
||
|
}
|
||
|
img {
|
||
|
max-width: 100%;
|
||
|
/*position: absolute;*/
|
||
|
}
|
||
|
.rel {
|
||
|
position: relative;
|
||
|
}
|
||
|
#capture {
|
||
|
height: 100vh;
|
||
|
}
|
||
|
.text {
|
||
|
position: absolute;
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
flex-wrap: wrap;
|
||
|
z-index: -1;
|
||
|
}
|
||
|
.text > div {
|
||
|
/*font-size: 20px;*/
|
||
|
font-family: monospace;
|
||
|
color: #695858;
|
||
|
letter-spacing: .1em;
|
||
|
padding: 13px;
|
||
|
transform: rotate(355deg);
|
||
|
}
|
||
|
#button-wrapper {
|
||
|
position: fixed;
|
||
|
top: 300px;
|
||
|
left: 0;
|
||
|
width: 250px;
|
||
|
animation: translate 20s infinite linear;
|
||
|
z-index: 9999;
|
||
|
}
|
||
|
#imgButton {
|
||
|
background: linear-gradient(to right, #CB3066, #16BFFD);
|
||
|
background-size: 300% 300%;
|
||
|
color: #fff;
|
||
|
font-size: 18px;
|
||
|
line-height: 30px;
|
||
|
padding: 10px 30px;
|
||
|
text-decoration: none;
|
||
|
display: inline-block;
|
||
|
text-transform: uppercase;
|
||
|
position: absolute;
|
||
|
left: -300px;
|
||
|
border: 0;
|
||
|
outline: 0;
|
||
|
box-shadow: 0 5px 10px 0 rgba(205, 209, 215, 0.8);
|
||
|
animation: gradient 2.5s ease infinite, inmotion 1.5s alternate infinite ease-in-out;
|
||
|
}
|
||
|
@keyframes translate {
|
||
|
to { transform: translateX(200%); }
|
||
|
}
|
||
|
@keyframes inmotion {
|
||
|
to { transform: translateY(100px); }
|
||
|
}
|
||
|
@keyframes gradient {
|
||
|
0% { background-position: 0% 50% }
|
||
|
50% { background-position: 100% 50% }
|
||
|
100% { background-position: 0% 50% }
|
||
|
}
|
||
|
</style>
|
||
|
</div>
|
||
|
<body id="capture">
|
||
|
<div id="button-wrapper">
|
||
|
<button id="imgButton">CLICK TO SAVE YOUR KATAMARI</button>
|
||
|
</div>
|
||
|
<div class="text">
|
||
|
<div>Bouchéstraße</div>
|
||
|
<div>Alt-Treptow</div>
|
||
|
<div>Berlin</div>
|
||
|
<div>Kiefholzstraße</div>
|
||
|
<div>Elsenstraße</div>
|
||
|
<div>Harzer Straße</div>
|
||
|
<div>Wildenbruchstraße</div>
|
||
|
<div>Heidelberger Straße</div>
|
||
|
<div>Karl-Kunger-Straße</div>
|
||
|
<div>Sülzhayner Straße</div>
|
||
|
<div>Schmollerstraße</div>
|
||
|
<div>Mengerzeile</div>
|
||
|
<div>Am Treptower Park</div>
|
||
|
<div>Puschkinallee</div>
|
||
|
<div>Martin-Hoffman-Straße</div>
|
||
|
<div>Eichenstraße</div>
|
||
|
<div>Fanny-Zobel-Straße</div>
|
||
|
<div>Matthesstraße</div>
|
||
|
<div>Beermannstraße</div>
|
||
|
<div>Jordanstraße</div>
|
||
|
<div>Lohmühlenstraße</div>
|
||
|
<div>Am Flutgraben</div>
|
||
|
<div>Schleusenufer</div>
|
||
|
<div>Landwehr Canal</div>
|
||
|
<div>Spree</div>
|
||
|
<div>Treptower Park</div>
|
||
|
<div>Rummelsburger See</div>
|
||
|
<div>Schlesisches Tor</div>
|
||
|
<div>Skalitzer Straße</div>
|
||
|
<div>Köpenicker Straße</div>
|
||
|
<div>Brückenstraße</div>
|
||
|
<div>Rungestraße</div>
|
||
|
<div>Ohmstraße</div>
|
||
|
<div>Michaelkirchstraße</div>
|
||
|
<div>Michaelkirchplatz</div>
|
||
|
<div>Heinrich-Heine-Straße</div>
|
||
|
<div>Jannowitzbrücke</div>
|
||
|
<div>Schlesisches Straße</div>
|
||
|
<div>Cuvrystraße</div>
|
||
|
<div>Wrangelstraße</div>
|
||
|
<div>Taborstraße</div>
|
||
|
<div>Heckmannufer</div>
|
||
|
<div>Görlitzer Ufer</div>
|
||
|
<div>Görlitzer Park</div>
|
||
|
<div>Falckenstein Straße</div>
|
||
|
<div>Oppelner Straße</div>
|
||
|
<div>Sorauer Straße</div>
|
||
|
<div>Lübbener Straße</div>
|
||
|
<div>Plesser Straße</div>
|
||
|
<div>Krüllsstraße</div>
|
||
|
<div>Kiehlufer</div>
|
||
|
<div>Treptower Straße</div>
|
||
|
<div>Hüttenroder Weg</div>
|
||
|
<div>Onckenstraße</div>
|
||
|
<div>Lexisstraße</div>
|
||
|
<div>Grabowstraße</div>
|
||
|
<div>Wiener Straße</div>
|
||
|
<div>Reichenberger Straße</div>
|
||
|
<div>Paul-Lincke-Ufer</div>
|
||
|
<div>Glogauer Straße</div>
|
||
|
<div>Liegnitzer Straße</div>
|
||
|
<div>Forster Straße</div>
|
||
|
<div>Ohlauer Straße</div>
|
||
|
<div>Lausitzer Straße</div>
|
||
|
<div>Manteuffelstraße</div>
|
||
|
<div>Mariannenstraße</div>
|
||
|
<div>Muskauer Straße</div>
|
||
|
<div>Warschauer Straße</div>
|
||
|
<div>Revaler Straße</div>
|
||
|
<div>Simon-Dach-Straße</div>
|
||
|
<div>Boxhagener Platz</div>
|
||
|
<div>Kreuzberg</div>
|
||
|
<div>Neukölln</div>
|
||
|
<div>Bouchéstraße</div>
|
||
|
<div>Alt-Treptow</div>
|
||
|
<div>Berlin</div>
|
||
|
<div>Kiefholzstraße</div>
|
||
|
<div>Elsenstraße</div>
|
||
|
<div>Harzer Straße</div>
|
||
|
<div>Wildenbruchstraße</div>
|
||
|
<div>Heidelberger Straße</div>
|
||
|
<div>Karl-Kunger-Straße</div>
|
||
|
<div>Sülzhayner Straße</div>
|
||
|
<div>Schmollerstraße</div>
|
||
|
<div>Mengerzeile</div>
|
||
|
<div>Am Treptower Park</div>
|
||
|
<div>Puschkinallee</div>
|
||
|
<div>Martin-Hoffman-Straße</div>
|
||
|
<div>Eichenstraße</div>
|
||
|
<div>Fanny-Zobel-Straße</div>
|
||
|
<div>Matthesstraße</div>
|
||
|
<div>Beermannstraße</div>
|
||
|
<div>Jordanstraße</div>
|
||
|
<div>Lohmühlenstraße</div>
|
||
|
<div>Am Flutgraben</div>
|
||
|
<div>Schleusenufer</div>
|
||
|
<div>Landwehr Canal</div>
|
||
|
<div>Spree</div>
|
||
|
<div>Treptower Park</div>
|
||
|
<div>Rummelsburger See</div>
|
||
|
<div>Schlesisches Tor</div>
|
||
|
<div>Skalitzer Straße</div>
|
||
|
<div>Köpenicker Straße</div>
|
||
|
<div>Brückenstraße</div>
|
||
|
<div>Rungestraße</div>
|
||
|
<div>Ohmstraße</div>
|
||
|
<div>Michaelkirchstraße</div>
|
||
|
<div>Michaelkirchplatz</div>
|
||
|
<div>Heinrich-Heine-Straße</div>
|
||
|
<div>Jannowitzbrücke</div>
|
||
|
<div>Schlesisches Straße</div>
|
||
|
<div>Cuvrystraße</div>
|
||
|
<div>Wrangelstraße</div>
|
||
|
<div>Taborstraße</div>
|
||
|
<div>Heckmannufer</div>
|
||
|
<div>Görlitzer Ufer</div>
|
||
|
<div>Görlitzer Park</div>
|
||
|
<div>Falckenstein Straße</div>
|
||
|
<div>Oppelner Straße</div>
|
||
|
<div>Sorauer Straße</div>
|
||
|
<div>Lübbener Straße</div>
|
||
|
<div>Plesser Straße</div>
|
||
|
<div>Krüllsstraße</div>
|
||
|
<div>Kiehlufer</div>
|
||
|
<div>Treptower Straße</div>
|
||
|
<div>Hüttenroder Weg</div>
|
||
|
<div>Onckenstraße</div>
|
||
|
<div>Lexisstraße</div>
|
||
|
<div>Grabowstraße</div>
|
||
|
<div>Wiener Straße</div>
|
||
|
<div>Reichenberger Straße</div>
|
||
|
<div>Paul-Lincke-Ufer</div>
|
||
|
<div>Glogauer Straße</div>
|
||
|
<div>Liegnitzer Straße</div>
|
||
|
<div>Forster Straße</div>
|
||
|
<div>Ohlauer Straße</div>
|
||
|
<div>Lausitzer Straße</div>
|
||
|
<div>Manteuffelstraße</div>
|
||
|
<div>Mariannenstraße</div>
|
||
|
<div>Muskauer Straße</div>
|
||
|
<div>Warschauer Straße</div>
|
||
|
<div>Revaler Straße</div>
|
||
|
<div>Simon-Dach-Straße</div>
|
||
|
<div>Boxhagener Platz</div>
|
||
|
<div>Kreuzberg</div>
|
||
|
<div>Neukölln</div>
|
||
|
<div>Bouchéstraße</div>
|
||
|
<div>Alt-Treptow</div>
|
||
|
<div>Berlin</div>
|
||
|
<div>Kiefholzstraße</div>
|
||
|
<div>Elsenstraße</div>
|
||
|
<div>Harzer Straße</div>
|
||
|
<div>Wildenbruchstraße</div>
|
||
|
<div>Heidelberger Straße</div>
|
||
|
<div>Karl-Kunger-Straße</div>
|
||
|
<div>Sülzhayner Straße</div>
|
||
|
<div>Schmollerstraße</div>
|
||
|
<div>Mengerzeile</div>
|
||
|
<div>Am Treptower Park</div>
|
||
|
<div>Puschkinallee</div>
|
||
|
<div>Martin-Hoffman-Straße</div>
|
||
|
<div>Eichenstraße</div>
|
||
|
<div>Fanny-Zobel-Straße</div>
|
||
|
<div>Matthesstraße</div>
|
||
|
<div>Beermannstraße</div>
|
||
|
<div>Jordanstraße</div>
|
||
|
<div>Lohmühlenstraße</div>
|
||
|
<div>Am Flutgraben</div>
|
||
|
<div>Schleusenufer</div>
|
||
|
<div>Landwehr Canal</div>
|
||
|
<div>Spree</div>
|
||
|
<div>Treptower Park</div>
|
||
|
<div>Rummelsburger See</div>
|
||
|
<div>Schlesisches Tor</div>
|
||
|
<div>Skalitzer Straße</div>
|
||
|
<div>Köpenicker Straße</div>
|
||
|
<div>Brückenstraße</div>
|
||
|
<div>Rungestraße</div>
|
||
|
<div>Ohmstraße</div>
|
||
|
<div>Michaelkirchstraße</div>
|
||
|
<div>Michaelkirchplatz</div>
|
||
|
<div>Heinrich-Heine-Straße</div>
|
||
|
<div>Jannowitzbrücke</div>
|
||
|
<div>Schlesisches Straße</div>
|
||
|
<div>Cuvrystraße</div>
|
||
|
<div>Wrangelstraße</div>
|
||
|
<div>Taborstraße</div>
|
||
|
<div>Heckmannufer</div>
|
||
|
<div>Görlitzer Ufer</div>
|
||
|
<div>Görlitzer Park</div>
|
||
|
<div>Falckenstein Straße</div>
|
||
|
<div>Oppelner Straße</div>
|
||
|
<div>Sorauer Straße</div>
|
||
|
<div>Lübbener Straße</div>
|
||
|
<div>Plesser Straße</div>
|
||
|
<div>Krüllsstraße</div>
|
||
|
<div>Kiehlufer</div>
|
||
|
<div>Treptower Straße</div>
|
||
|
<div>Hüttenroder Weg</div>
|
||
|
<div>Onckenstraße</div>
|
||
|
<div>Lexisstraße</div>
|
||
|
<div>Grabowstraße</div>
|
||
|
<div>Wiener Straße</div>
|
||
|
<div>Reichenberger Straße</div>
|
||
|
<div>Paul-Lincke-Ufer</div>
|
||
|
<div>Glogauer Straße</div>
|
||
|
<div>Liegnitzer Straße</div>
|
||
|
<div>Forster Straße</div>
|
||
|
<div>Ohlauer Straße</div>
|
||
|
<div>Lausitzer Straße</div>
|
||
|
<div>Manteuffelstraße</div>
|
||
|
<div>Mariannenstraße</div>
|
||
|
<div>Muskauer Straße</div>
|
||
|
<div>Warschauer Straße</div>
|
||
|
<div>Revaler Straße</div>
|
||
|
<div>Simon-Dach-Straße</div>
|
||
|
<div>Boxhagener Platz</div>
|
||
|
<div>Kreuzberg</div>
|
||
|
<div>Neukölln</div>
|
||
|
<div>Bouchéstraße</div>
|
||
|
<div>Alt-Treptow</div>
|
||
|
<div>Berlin</div>
|
||
|
<div>Kiefholzstraße</div>
|
||
|
<div>Elsenstraße</div>
|
||
|
<div>Harzer Straße</div>
|
||
|
<div>Wildenbruchstraße</div>
|
||
|
<div>Heidelberger Straße</div>
|
||
|
<div>Karl-Kunger-Straße</div>
|
||
|
<div>Sülzhayner Straße</div>
|
||
|
<div>Schmollerstraße</div>
|
||
|
<div>Mengerzeile</div>
|
||
|
<div>Am Treptower Park</div>
|
||
|
<div>Puschkinallee</div>
|
||
|
<div>Martin-Hoffman-Straße</div>
|
||
|
<div>Eichenstraße</div>
|
||
|
<div>Fanny-Zobel-Straße</div>
|
||
|
<div>Matthesstraße</div>
|
||
|
<div>Beermannstraße</div>
|
||
|
<div>Jordanstraße</div>
|
||
|
<div>Lohmühlenstraße</div>
|
||
|
<div>Am Flutgraben</div>
|
||
|
<div>Schleusenufer</div>
|
||
|
<div>Landwehr Canal</div>
|
||
|
<div>Spree</div>
|
||
|
<div>Treptower Park</div>
|
||
|
<div>Rummelsburger See</div>
|
||
|
<div>Schlesisches Tor</div>
|
||
|
<div>Skalitzer Straße</div>
|
||
|
<div>Köpenicker Straße</div>
|
||
|
<div>Brückenstraße</div>
|
||
|
<div>Rungestraße</div>
|
||
|
<div>Ohmstraße</div>
|
||
|
<div>Michaelkirchstraße</div>
|
||
|
<div>Michaelkirchplatz</div>
|
||
|
<div>Heinrich-Heine-Straße</div>
|
||
|
<div>Jannowitzbrücke</div>
|
||
|
<div>Schlesisches Straße</div>
|
||
|
<div>Cuvrystraße</div>
|
||
|
<div>Wrangelstraße</div>
|
||
|
<div>Taborstraße</div>
|
||
|
<div>Heckmannufer</div>
|
||
|
<div>Görlitzer Ufer</div>
|
||
|
<div>Görlitzer Park</div>
|
||
|
<div>Falckenstein Straße</div>
|
||
|
<div>Oppelner Straße</div>
|
||
|
<div>Sorauer Straße</div>
|
||
|
<div>Lübbener Straße</div>
|
||
|
<div>Plesser Straße</div>
|
||
|
<div>Krüllsstraße</div>
|
||
|
<div>Kiehlufer</div>
|
||
|
<div>Treptower Straße</div>
|
||
|
<div>Hüttenroder Weg</div>
|
||
|
<div>Onckenstraße</div>
|
||
|
<div>Lexisstraße</div>
|
||
|
<div>Grabowstraße</div>
|
||
|
<div>Wiener Straße</div>
|
||
|
<div>Reichenberger Straße</div>
|
||
|
<div>Paul-Lincke-Ufer</div>
|
||
|
<div>Glogauer Straße</div>
|
||
|
<div>Liegnitzer Straße</div>
|
||
|
<div>Forster Straße</div>
|
||
|
<div>Ohlauer Straße</div>
|
||
|
<div>Lausitzer Straße</div>
|
||
|
<div>Manteuffelstraße</div>
|
||
|
<div>Mariannenstraße</div>
|
||
|
<div>Muskauer Straße</div>
|
||
|
<div>Warschauer Straße</div>
|
||
|
<div>Revaler Straße</div>
|
||
|
<div>Simon-Dach-Straße</div>
|
||
|
<div>Boxhagener Platz</div>
|
||
|
<div>Kreuzberg</div>
|
||
|
<div>Neukölln</div>
|
||
|
</div>
|
||
|
|
||
|
<div>
|
||
|
<marquee><i><h1>PLAGUE RAVE 2020 <progress></progress></h1></i></marquee>
|
||
|
|
||
|
<div class="rel">
|
||
|
<img src="img/mask.gif" />
|
||
|
<br/>
|
||
|
<img src="img/berghain.gif" />
|
||
|
</br>
|
||
|
<img src="img/TIER-scooter-final-1024x1024.png" />
|
||
|
</div>
|
||
|
<marquee><i><h1><progress></progress> PLAGUE RAVE 2020</h1></i></marquee>
|
||
|
|
||
|
<div class="rel">
|
||
|
<img src="img/source.gif" />
|
||
|
<img class="left" src="img/thumbnail.gif" />
|
||
|
<img src="img/Berlin_TV_Tower.png" />
|
||
|
</div>
|
||
|
|
||
|
<marquee><i><h1><progress></progress> PLAGUE RAVE 2020</h1></i></marquee>
|
||
|
</div>
|
||
|
|
||
|
<script type='text/javascript' src='js/jquery-3.5.1.slim.min.js'></script>
|
||
|
<script type='text/javascript' src='js/howler.min.js'></script>
|
||
|
<script type='text/javascript' src='js/html2canvas.min.js'></script>
|
||
|
<script type='text/javascript' src='js/kh.js'></script>
|
||
|
</body>
|
||
|
</html>
|