website desktop / work scooty & speedy
This commit is contained in:
Anton Linus
parent
3872fc45f4
commit
a7977bbbc8
File diff suppressed because one or more lines are too long
@ -206,11 +206,45 @@ function callAPI($url){
|
||||
<h2>a roaming speedshow</h2>
|
||||
<!--<p>legendary code has once been written on a cold rainy night in october. it was 2 nay 1 day before the opening of this show when i typed this silly code. it was legendary. both the situation as well as the code. thanks for reading. bye</p>-->
|
||||
<div id="bottom_menu">
|
||||
<a href="#" onclick="document.getElementById('infotext').style.visibility='visible';document.getElementById('infotext').style.opacity='1';document.getElementById('contacttext').style.visibility='hidden';document.getElementById('abouttext').style.visibility='hidden';">info</a>
|
||||
<a href="#" onclick="document.getElementById('abouttext').style.visibility='visible';document.getElementById('abouttext').style.opacity='1';document.getElementById('contacttext').style.visibility='hidden';document.getElementById('infotext').style.visibility='hidden';">about</a>
|
||||
<a href="#" onclick="document.getElementById('contacttext').style.visibility='visible';document.getElementById('contacttext').style.opacity='1';document.getElementById('infotext').style.visibility='hidden';document.getElementById('abouttext').style.visibility='hidden';">contact</a>
|
||||
<a href="#" onclick="document.getElementById('infotext').style.visibility='visible';document.getElementById('infotext').style.opacity='1';document.getElementById('contacttext').style.visibility='hidden';document.getElementById('abouttext').style.visibility='hidden';document.getElementById('howtotext').style.visibility='hidden';">info</a>
|
||||
<a href="#" onclick="document.getElementById('howtotext').style.visibility='visible';document.getElementById('howtotext').style.opacity='1';document.getElementById('infotext').style.visibility='hidden';document.getElementById('abouttext').style.visibility='hidden';document.getElementById('contacttext').style.visibility='hidden';">how to</a>
|
||||
<a href="#" onclick="document.getElementById('abouttext').style.visibility='visible';document.getElementById('abouttext').style.opacity='1';document.getElementById('contacttext').style.visibility='hidden';document.getElementById('infotext').style.visibility='hidden';document.getElementById('howtotext').style.visibility='hidden';">about</a>
|
||||
<a href="#" onclick="document.getElementById('contacttext').style.visibility='visible';document.getElementById('contacttext').style.opacity='1';document.getElementById('infotext').style.visibility='hidden';document.getElementById('abouttext').style.visibility='hidden';document.getElementById('howtotext').style.visibility='hidden';">contact</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="howtotext">
|
||||
<div id="infobuttons">
|
||||
<div id="closeButton" onclick="document.getElementById('howtotext').style.visibility='hidden';document.getElementById('howtotext').style.opacity='0';">X</div>
|
||||
<div id="enButton" onclick="document.getElementById('howtotext_en').style.visibility='visible';document.getElementById('howtotext_en').style.opacity='1';">EN</div>
|
||||
</div>
|
||||
<p>
|
||||
<span id="howto">HOW TO: Die Scooter Gallerie besuchen</span><br><br>
|
||||
1. Finde den Roller: Der aktuelle Standort aller Opencoil Roller wird dir auf der Karte angezeigt.<br>
|
||||
<span>Ein Pin mit dem 'Wifi' Icon bedeutet die Gallerie ist verfügbar.</span><br>
|
||||
<span>Ein Pin mit einem Stundenglas Icon bedeuted, dass die Gallerie aktuell besetzt ist.</span><br>
|
||||
<span>Ein schwarzer Pin mit Werkzeug Icon bedeuted, dass der Roller aktuell gewartet wird.</span><br><br>
|
||||
2. Verbinde dich mit dem Wifi Netzwerk. Es trägt den Namen der Arbeit die in der Gallerie zu sehen ist.<br>
|
||||
Auf dem iPhone sollte sich automatisch ein Fenster öffnen, indem nach kurzer Ladezeit die Arbeit zu sehen ist. Sollte dies einmal nicht funktionieren, öffne selbst den Browser und tipp die folgende Adresse ein: opencoil.local<br>
|
||||
Auf Android Geräten bekommst du eventuell ein Popup bekommen welches dich fragt ob du die Verbindung zum Netzwerk behalten möchtest, da keine Verbindung zum Internet besteht. Klicke Verbindung behalten. Sollte dich dein Gerät fragen ob du dich ins Netzwerk einloggen möchtest, klicke einloggen. Alternativ kannst du einen Browser deiner Wahl öffnen und entweder 'opencoil.local' oder eine beliebige Zeichenfolge gefolgt von '.com' in das URL Feld eingeben.<br><br>
|
||||
Solltest du Hilfe benötigen, zögere nicht uns per <a href="mailto:service@opencoil.show">Mail</a> oder <a href="https://t.me/opencoil">Telegram App</a> zu kontaktieren.
|
||||
Viel Spaß!
|
||||
</p>
|
||||
</div>
|
||||
<div id="howtotext_en">
|
||||
<div id="closeButton" onclick="document.getElementById('howtotext_en').style.visibility='hidden'; document.getElementById('howtotext').style.visibility='hidden';">X</div>
|
||||
<p>
|
||||
<span id="howto">HOW TO: Visit the scooter gallery</span><br><br>
|
||||
1. Find a scooter: The current location of all scooters will be displayed on the map.<br>
|
||||
<span>A map marker with a wifi icon means the gallery is available .</span>
|
||||
<span>a marker with an hourglass icon means its currently unavailable.</span>
|
||||
<span>a black marker & wrench icon means the scooter is beeing serviced.</span><br><br>
|
||||
2. Connect to the wifi network. The name should be the same as the artwork title.<br>
|
||||
Using an iPhone there should be a portal page popping up automatically. After a few seconds it will display the artwork. Should this not work for you, open up a browser and type 'opencoil.local' in the adressbar.<br>
|
||||
On an Android device you might get a popup asking you wether you want to stay connected to the network even without an internet connection. select yes. Should your device ask wether you want to log in to the network, select yes as well. Otherwise open up a browser and type either 'opencoil.local' or any short combination of letters followed by '.com' into the adressbar.<br><br>
|
||||
if you can't get it to work, don't hesitate to contact us via <a href="mailto:service@opencoil.show">mail</a> or <a href="https://t.me/opencoil">Telegram app</a><br><br>
|
||||
Have fun!
|
||||
</p>
|
||||
</div>
|
||||
<div id="abouttext">
|
||||
<div id="infobuttons">
|
||||
<div id="closeButton" onclick="document.getElementById('abouttext').style.visibility='hidden';document.getElementById('abouttext').style.opacity='0';">X</div>
|
||||
|
||||
@ -1 +1 @@
|
||||
{"0":{"ID":0,"lastPos":"52.516891, 13.493958","lastLocationUpdate":"2020-10-15T13:52:13Z","isRentable":true,"state":"ACTIVE","name":"artist name 0","title":"title","desc":"desciption"},"1":{"ID":1,"lastPos":"52.461506, 13.321215","lastLocationUpdate":"2020-10-15T13:44:47Z","isRentable":true,"state":"ACTIVE","name":"artist name 1","title":"title","desc":"desciption"},"2":{"ID":2,"lastPos":"52.491261, 13.385951","lastLocationUpdate":"2020-10-15T13:50:28Z","isRentable":true,"state":"ACTIVE","name":"artist name 2","title":"title","desc":"desciption"},"3":{"ID":3,"lastPos":"52.474423, 13.365387","lastLocationUpdate":"2020-10-15T12:22:59Z","isRentable":false,"state":"INACTIVE","name":"artist name 3","title":"title","desc":"desciption"},"4":{"ID":4,"lastPos":"52.512192, 13.376707","lastLocationUpdate":"2020-10-15T13:52:38Z","isRentable":true,"state":"ACTIVE","name":"artist name 4","title":"title","desc":"desciption"},"5":{"ID":5,"lastPos":"52.529744, 13.401148","lastLocationUpdate":"2020-10-15T13:49:15Z","isRentable":true,"state":"ACTIVE","name":"artist name 5","title":"title","desc":"desciption"},"6":{"ID":6,"lastPos":"52.507063, 13.31256","lastLocationUpdate":"2020-10-15T13:43:28Z","isRentable":true,"state":"ACTIVE","name":"artist name 6","title":"title","desc":"desciption"},"7":{"ID":7,"lastPos":"52.545101, 13.359419","lastLocationUpdate":"2020-10-15T13:43:50Z","isRentable":true,"state":"ACTIVE","name":"artist name 7","title":"title","desc":"desciption"},"8":{"ID":8,"lastPos":"52.511562, 13.310639","lastLocationUpdate":"2020-10-13T00:02:27Z","isRentable":false,"state":"GPS_ISSUE","name":"artist name 8","title":"title","desc":"desciption"},"9":{"ID":9,"lastPos":"52.533219, 13.366878","lastLocationUpdate":"2020-10-15T13:43:59Z","isRentable":true,"state":"ACTIVE","name":"artist name 9","title":"title","desc":"desciption"}}
|
||||
{"0":{"ID":0,"lastPos":"52.49476, 13.414632","lastLocationUpdate":"2020-10-16T01:13:22Z","isRentable":true,"state":"ACTIVE","name":"Aram Bartholl","title":"Fossils of late capitalism","desc":"Aram Bartholl has salvaged rental bikes and scooters from the Spree River and is now exhibiting them as material relics of the platform economy."},"1":{"ID":1,"lastPos":"52.486115, 13.42911","lastLocationUpdate":"2020-10-16T01:14:35Z","isRentable":true,"state":"ACTIVE","name":"!Mediengruppe Bitnik","title":"Follow the Rider \u01aa(\u0693\u05f2)\u01aa","desc":"Follow the next person you see on an e-scooter. \ud83d\udc60 Keep distance but don't lose your guide."},"2":{"ID":2,"lastPos":"52.490257, 13.426271","lastLocationUpdate":"2020-10-16T01:13:31Z","isRentable":true,"state":"ACTIVE","name":"Jonas Lund","title":"Hello Capitalism","desc":"'Hello Capitalism' is a text-based work by Jonas Lund, exploring a wide range of different types of capitalistic systems."},"3":{"ID":3,"lastPos":"52.479766, 13.444183","lastLocationUpdate":"2020-10-16T01:13:18Z","isRentable":true,"state":"ACTIVE","name":"Martin Howse","title":"wok_the_cables","desc":"Adventure game for psychogeophysical divination of portals, realtime instructions to follow #wokthecables"},"4":{"ID":4,"lastPos":"52.476657, 13.418607","lastLocationUpdate":"2020-10-16T01:13:10Z","isRentable":true,"state":"ACTIVE","name":"Sofya Aleynikova","title":"followers","desc":"Eine weibliche Protagonistin manifestiert sich als Meme im Web und stellt die richtigen Fragen."},"5":{"ID":5,"lastPos":"52.485425, 13.430225","lastLocationUpdate":"2020-10-16T01:09:09Z","isRentable":true,"state":"ACTIVE","name":"JODI","title":"%Location????????","desc":"XXXXXXXXXXXXXX"},"6":{"ID":6,"lastPos":"52.532667, 13.430166","lastLocationUpdate":"2020-10-16T01:16:22Z","isRentable":true,"state":"ACTIVE","name":"Rosa Menkmann","title":"title","desc":"desciption"},"7":{"ID":7,"lastPos":"52.545101, 13.359419","lastLocationUpdate":"2020-10-16T01:10:18Z","isRentable":true,"state":"ACTIVE","name":"Sarah Grant","title":"title","desc":"desciption"},"8":{"ID":8,"lastPos":"52.511562, 13.310639","lastLocationUpdate":"2020-10-13T00:02:27Z","isRentable":false,"state":"GPS_ISSUE","name":"Danja Vasiliev","title":"title","desc":"desciption"},"9":{"ID":9,"lastPos":"52.5331, 13.367352","lastLocationUpdate":"2020-10-16T01:10:28Z","isRentable":true,"state":"ACTIVE","name":"Constant Dullaart","title":"clock","desc":"ssid that tells the time"},"10":{"ID":10,"lastPos":"52.501327, 13.419824","lastLocationUpdate":"2020-10-16T01:16:19Z","isRentable":true,"state":"ACTIVE","name":"Dennis de Bel & Anton Jehle","title":"Paracity Gallery v0.41","desc":"HOW TO: diy scooter gallery"}}
|
||||
@ -21,7 +21,7 @@ body {
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
z-index: 1000;
|
||||
z-index: 800;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -39,15 +39,15 @@ h1, h2, h3 {
|
||||
h1 {
|
||||
padding-top: 2%;
|
||||
padding-right: 2%;
|
||||
font-size: 15vw;
|
||||
font-size: 10vw;
|
||||
align-self: flex-start;
|
||||
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-top: 15%;
|
||||
padding-top: 10%;
|
||||
padding-right: 2.5%;
|
||||
font-size: 5vw;
|
||||
font-size: 3vw;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
@ -69,7 +69,7 @@ h3 {
|
||||
width: 100%;
|
||||
font-family: Courier;
|
||||
font-weight: bold;
|
||||
font-size: 2.5vw;
|
||||
font-size: 2vw;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
border: 1px #d152b8;
|
||||
@ -82,17 +82,17 @@ h3 {
|
||||
}
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
#infotext, #infotext_en, #abouttext, #contacttext:-webkit-scrollbar {
|
||||
#infotext, #infotext_en, #abouttext, #contacttext, #howtotext, #howtotext_en:-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
#infotext, #infotext_en, #abouttext, #contacttext {
|
||||
#infotext, #infotext_en, #abouttext, #contacttext, #howtotext, #howtotext_en {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
#infotext, #infotext_en, #abouttext, #contacttext {
|
||||
#infotext, #infotext_en, #abouttext, #contacttext, #howtotext, #howtotext_en {
|
||||
|
||||
visibility: hidden;
|
||||
opacity:0;
|
||||
@ -107,46 +107,54 @@ h3 {
|
||||
word-wrap: break-word;
|
||||
background-color: #d152b8;
|
||||
color: white;
|
||||
margin: 23% 20% 20% 10%;
|
||||
margin: 14% 10% 10% 10%;
|
||||
transition: opacity 1s;
|
||||
|
||||
}
|
||||
|
||||
#infotext p, #infotext_en p, #abouttext p {
|
||||
#infotext p, #infotext_en p, #abouttext p, #howtotext p, #howtotext_en p {
|
||||
padding: 0% 10% 10% 10%;
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
font-size: 2.0vw;
|
||||
font-size: 1.5vw;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
#infotext a, #infotext_en a, #abouttext a {
|
||||
#infotext a, #infotext_en a, #abouttext a, #howtotext a, #howtotext_en a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#howtotext a {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
#howto {
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
#contacttext p {
|
||||
padding: 0% 10% 10% 10%;
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
font-size: 2.5vw;
|
||||
font-size: 1.5vw;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#contacttext a, #contacttext span {
|
||||
#contacttext a, #contacttext span, , #howtotext span, #howtotext_en span {
|
||||
color: white;
|
||||
padding-left: 5vw;
|
||||
font-size: 2vw;
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
#abouttext p {
|
||||
font-size: 2.5vw;
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
#abouttext span {
|
||||
font-size: 2vw;
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
#infobuttons {
|
||||
@ -194,7 +202,20 @@ h3 {
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
|
||||
#infotext, #infotext_en, #abouttext, #contacttext {
|
||||
h1 {
|
||||
font-size: 15vw;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-top: 10vh;
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
#howto {
|
||||
font-size: 6vw;
|
||||
}
|
||||
|
||||
#infotext, #infotext_en, #abouttext, #contacttext, #howtotext, #howtotext_en {
|
||||
visibility: hidden;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: scroll !important;
|
||||
@ -210,12 +231,16 @@ h3 {
|
||||
margin: 28% 5% 0% 5%;
|
||||
}
|
||||
|
||||
#abouttext span {
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
#contacttext p {
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
#contacttext a, #contacttext span {
|
||||
font-size: 3vw;
|
||||
#contacttext a, #contacttext span, , #howtotext span, #howtotext_en span {
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
#closeButton, #enButton {
|
||||
@ -230,7 +255,7 @@ h3 {
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
#infotext p, #infotext_en p, #abouttext p, #contacttext p {
|
||||
#infotext p, #infotext_en p, #abouttext p, #contacttext p, #howtotext p, #howtotext_en p {
|
||||
padding: 20px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
|
||||
BIN
works/.DS_Store
vendored
BIN
works/.DS_Store
vendored
Binary file not shown.
BIN
works/Dennis de Bel & Anton Jehle/.DS_Store
vendored
Normal file
BIN
works/Dennis de Bel & Anton Jehle/.DS_Store
vendored
Normal file
Binary file not shown.
Binary file not shown.
106
works/Dennis de Bel & Anton Jehle/index.html
Normal file
106
works/Dennis de Bel & Anton Jehle/index.html
Normal file
@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Fossils of late capitalism</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
max-height: 100vh;
|
||||
max-width: 100vw;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.artwork {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
max-width: 90vw;
|
||||
padding-top: 30vh;
|
||||
padding-left: 5vw;
|
||||
}
|
||||
|
||||
.artwork a {
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
#inviteDiv {
|
||||
max-height: 100vh;
|
||||
max-width: 100vw;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#inviteDiv h1, h2 {
|
||||
max-height: 100vh;
|
||||
max-width: 100vw;
|
||||
text-align: center;
|
||||
font-family: monospace;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
word-wrap: break-word;
|
||||
text-shadow: 3px 3px 1px rgba(75, 75, 75, 1);
|
||||
color: #d152b8;
|
||||
}
|
||||
|
||||
#inviteDiv h1 {
|
||||
position: absolute;
|
||||
padding-left: 2.5vw;
|
||||
font-size: 2.5vw;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
#inviteDiv h2 {
|
||||
position: absolute;
|
||||
font-size: 1vw;
|
||||
padding-left: 5vw;
|
||||
padding-top: 25vh;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="inviteDiv">
|
||||
<h1>
|
||||
######
|
||||
# # ## ##### ## #### # ##### # #
|
||||
# # # # # # # # # # # # # #
|
||||
###### # # # # # # # # # #
|
||||
# ###### ##### ###### # # # #
|
||||
# # # # # # # # # # # #
|
||||
# # # # # # # #### # # #
|
||||
|
||||
#####
|
||||
# # ## # # ###### ##### # #
|
||||
# # # # # # # # # #
|
||||
# #### # # # # ##### # # #
|
||||
# # ###### # # # ##### #
|
||||
# # # # # # # # # #
|
||||
##### # # ###### ###### ###### # # #
|
||||
</h1>
|
||||
<h2>
|
||||
### # #
|
||||
# # # # # # ##
|
||||
# # # # # # # #
|
||||
# # # # # # #
|
||||
# # ### # # ####### #
|
||||
# # ### # # # #
|
||||
## ### ### # #####
|
||||
</h2>
|
||||
</div>
|
||||
<div class="artwork">
|
||||
<a href="adaptor-lasercut-template-snap.zip">Download</a>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user