CTT
/
tdf-webseite
forked from cal/tdf-2023-webseite
11
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Interactive site plan

Browse Source
main
Martin Braun 4 months ago
parent 623ad28bd2
commit 489655bd52
13 changed files with 385 additions and 6 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      en/imprint.html
  2. 3
      en/index.html
  3. 3
      en/participate.html
  4. 155
      en/site-plan.html
  5. BIN
      image/Etagen_2. OG.png
  6. BIN
      image/Etagen_6. OG.png
  7. BIN
      image/Etagen_7. OG.png
  8. BIN
      image/Etagen_EG.png
  9. 2
      imprint.html
  10. 3
      index.html
  11. 3
      participate.html
  12. 156
      site-plan.html
  13. 64
      styles-4.7.css

2
en/imprint.html
Unescape View File

@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="../image/poster.png"/>
<link rel="stylesheet" type="text/css" href="../styles-4.6.css">
<link rel="stylesheet" type="text/css" href="../styles-4.7.css">
<title>Impressum</title>
</head>

3
en/index.html
Unescape View File

@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="image/poster.png" />
<link rel="stylesheet" type="text/css" href="../styles-4.6.css">
<link rel="stylesheet" type="text/css" href="../styles-4.7.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<title>4. Tübingen Days of Digital Freedom</title>
</head>
@ -19,6 +19,7 @@
<div>
<a href="index.html" class="nav-button inactive">Home</a>
<a href="participate.html" class="nav-button">Participate</a>
<a href="site-plan.html" class="nav-button">Site Plan</a>
<a href="https://cfp.cttue.de/tdf4/schedule" class="nav-button">Schedule <i class="fas fa-external-link-alt"></i></a>
<a href="https://elfen.cttue.de/" class="nav-button">Elf System <i class="fas fa-external-link-alt"></i></a>
</div>

3
en/participate.html
Unescape View File

@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="image/poster.png"/>
<link rel="stylesheet" type="text/css" href="../styles-4.6.css">
<link rel="stylesheet" type="text/css" href="../styles-4.7.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<title>4. Tübinger Days of Digital Freedom</title>
</head>
@ -18,6 +18,7 @@
<div>
<a href="index.html" class="nav-button">Home</a>
<a href="participate.html" class="nav-button inactive">Participate</a>
<a href="site-plan.html" class="nav-button">Site Plan</a>
<a href="https://cfp.cttue.de/tdf4/schedule" class="nav-button">Schedule <i class="fas fa-external-link-alt"></i></a>
<a href="https://elfen.cttue.de/" class="nav-button">Elf System <i class="fas fa-external-link-alt"></i></a>
</div>

155
en/site-plan.html
Unescape View File

@ -0,0 +1,155 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta property="og:image" content="image/poster.png"/>
<link rel="stylesheet" type="text/css" href="../styles-4.7.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<title>4. Tübingen Days of Digital Freedom - Site Plan</title>
</head>
<body>
<div class="background">
<div id="content">
<nav class="navigationbar">
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
<div>
<a href="index.html" class="nav-button">Home</a>
<a href="participate.html" class="nav-button">Participate</a>
<a href="site-plan.html" class="nav-button inactive">Site Plan</a>
<a href="https://cfp.cttue.de/tdf4/schedule" class="nav-button">Schedule <i class="fas fa-external-link-alt"></i></a>
<a href="https://elfen.cttue.de/" class="nav-button">Elf System <i class="fas fa-external-link-alt"></i></a>
</div>
<div>
<a href="../site-plan.html" class="nav-button"><img src="../image/de.png" style="height: 16px; vertical-align: middle;"> DE</a>
</div>
</div>
</nav>
<div class="banner-box">
<img class="banner" id="banner-1" src="../image/banner-1.png" />
<img class="banner" id="banner-2" src="../image/banner-2.png" />
<img class="banner" id="banner-3" src="../image/banner-3_en.png" />
</div>
<div class="box" id="site-plan-intro">
<h2>Where is what?</h2>
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1em;">
<div>
<ul>
<li><a href="#floor-2" class="location-link" data-target="back-office">Back Office</a></li>
<li><a href="#floor-eg" class="location-link" data-target="bar-foyer">Bar in Foyer</a></li>
<li><a href="#floor-6" class="location-link" data-target="cafeteria">Cafeteria</a></li>
<li><a href="#floor-eg" class="location-link" data-target="kasse">Cashier</a></li>
<li><a href="#floor-6" class="location-link" data-target="kaffee">Coffee</a></li>
<li><a href="#floor-6" class="location-link" data-target="diamant">Diamant</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#floor-eg" class="location-link" data-target="elfenhain">Elf Grove</a></li>
<li><a href="#floor-6" class="location-link" data-target="aussteller">Exhibitors</a></li>
<li><a href="#floor-eg" class="location-link" data-target="foyer">Foyer</a></li>
<li><a href="#floor-eg" class="location-link" data-target="hackspace">Hackspace</a></li>
<li><a href="#floor-eg" class="location-link" data-target="infodesk">Info Desk</a></li>
<li><a href="#floor-2" class="location-link" data-target="silent-room">Silent Room</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#floor-7" class="location-link" data-target="skybar">SKYBAR</a></li>
<li><a href="#floor-eg" class="location-link" data-target="buehne-1">Stage 1</a></li>
<li><a href="#floor-6" class="location-link" data-target="buehne-2">Stage 2</a></li>
<li><a href="#floor-6" class="location-link" data-target="waffeln">Waffles</a></li>
<li><a href="#floor-2" class="location-link" data-target="workshop-1">Workshop 1</a></li>
<li><a href="#floor-2" class="location-link" data-target="workshop-2">Workshop 2</a></li>
</ul>
</div>
</div>
</div>
<div class="box floor-plan" id="floor-eg">
<img src="../image/Etagen_EG.png" alt="Floor plan ground floor" class="floor-plan-image" />
<div class="location-marker" data-location="bar-foyer" style="top: 40%; left: 36%;"></div>
<div class="location-marker" data-location="buehne-1" style="top: 36%; left: 85%;"></div>
<div class="location-marker" data-location="elfenhain" style="top: 60%; left: 93%;"></div>
<div class="location-marker" data-location="foyer" style="top: 28%; left: 36%;"></div>
<div class="location-marker" data-location="hackspace" style="top: 36%; left: 60%;"></div>
<div class="location-marker" data-location="infodesk" style="top: 20%; left: 29%;"></div>
<div class="location-marker" data-location="kasse" style="top: 40%; left: 36%;"></div>
</div>
<div class="box floor-plan" id="floor-2">
<img src="../image/Etagen_2. OG.png" alt="Floor plan 2nd floor" class="floor-plan-image" />
<div class="location-marker" data-location="back-office" style="top: 13%; left: 70%;"></div>
<div class="location-marker" data-location="silent-room" style="top: 13%; left: 57%;"></div>
<div class="location-marker" data-location="workshop-1" style="top: 54%; left: 38%;"></div>
<div class="location-marker" data-location="workshop-2" style="top: 13%; left: 83%;"></div>
</div>
<div class="box floor-plan" id="floor-6">
<img src="../image/Etagen_6. OG.png" alt="Floor plan 6th floor" class="floor-plan-image" />
<div class="location-marker" data-location="aussteller" style="top: 75%; left: 64%;"></div>
<div class="location-marker" data-location="buehne-2" style="top: 41%; left: 20%;"></div>
<div class="location-marker" data-location="cafeteria" style="top: 58%; left: 82%;"></div>
<div class="location-marker" data-location="diamant" style="top: 54%; left: 33%;"></div>
<div class="location-marker" data-location="kaffee" style="top: 58%; left: 82%;"></div>
<div class="location-marker" data-location="waffeln" style="top: 58%; left: 82%;"></div>
</div>
<div class="box floor-plan" id="floor-7">
<img src="../image/Etagen_7. OG.png" alt="Floor plan 7th floor" class="floor-plan-image" />
<div class="location-marker" data-location="skybar" style="top: 35%; left: 36%;"></div>
</div>
<div class="center">
<a href="imprint.html" id="imprint">Legal Notice</a>
</div>
<p>&nbsp;</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const locationLinks = document.querySelectorAll('.location-link');
const markers = document.querySelectorAll('.location-marker');
locationLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
// Alle Marker ausblenden
markers.forEach(marker => {
marker.classList.remove('active');
});
// Ziel-Location finden und Marker anzeigen
const targetLocation = this.getAttribute('data-target');
const targetMarker = document.querySelector(`[data-location="${targetLocation}"]`);
if (targetMarker) {
targetMarker.classList.add('active');
// Zur entsprechenden Etage scrollen
const targetFloor = this.getAttribute('href');
const targetElement = document.querySelector(targetFloor);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth' });
}
// Marker nach 10 Sekunden ausblenden
setTimeout(() => {
targetMarker.classList.remove('active');
}, 10000);
}
});
});
});
</script>
</body>
</html>

BIN
image/Etagen_2. OG.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
image/Etagen_6. OG.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
image/Etagen_7. OG.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
image/Etagen_EG.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

2
imprint.html
Unescape View File

@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="image/poster.png"/>
<link rel="stylesheet" type="text/css" href="styles-4.6.css">
<link rel="stylesheet" type="text/css" href="styles-4.7.css">
<title>Impressum</title>
</head>

3
index.html
Unescape View File

@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="image/poster.png" />
<link rel="stylesheet" type="text/css" href="styles-4.6.css">
<link rel="stylesheet" type="text/css" href="styles-4.7.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<title>4. Tübinger Tage der digitalen Freiheit</title>
</head>
@ -19,6 +19,7 @@
<div>
<a href="index.html" class="nav-button inactive">Hauptseite</a>
<a href="participate.html" class="nav-button">Mitmachen</a>
<a href="site-plan.html" class="nav-button">Lageplan</a>
<a href="https://cfp.cttue.de/tdf4/schedule" class="nav-button">Fahrplan <i class="fas fa-external-link-alt"></i></a>
<a href="https://elfen.cttue.de/" class="nav-button">Elfensystem <i class="fas fa-external-link-alt"></i></a>
</div>

3
participate.html
Unescape View File

@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<meta property="og:image" content="image/poster.png" />
<link rel="stylesheet" type="text/css" href="styles-4.6.css">
<link rel="stylesheet" type="text/css" href="styles-4.7.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<title>4. Tübinger Tage der digitalen Freiheit</title>
</head>
@ -20,6 +20,7 @@
<div>
<a href="index.html" class="nav-button">Hauptseite</a>
<a href="participate.html" class="nav-button inactive">Mitmachen</a>
<a href="site-plan.html" class="nav-button">Lageplan</a>
<a href="https://cfp.cttue.de/tdf4/schedule" class="nav-button">Fahrplan <i class="fas fa-external-link-alt"></i></a>
<a href="https://elfen.cttue.de/" class="nav-button">Elfensystem <i class="fas fa-external-link-alt"></i></a>
</div>

156
site-plan.html
Unescape View File

@ -0,0 +1,156 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta property="og:image" content="image/poster.png" />
<link rel="stylesheet" type="text/css" href="styles-4.7.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<title>4. Tübinger Tage der digitalen Freiheit - Lageplan</title>
</head>
<body>
<div class="background">
<div id="content">
<nav class="navigationbar">
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
<div>
<a href="index.html" class="nav-button">Hauptseite</a>
<a href="participate.html" class="nav-button">Mitmachen</a>
<a href="site-plan.html" class="nav-button inactive">Lageplan</a>
<a href="https://cfp.cttue.de/tdf4/schedule" class="nav-button">Fahrplan <i class="fas fa-external-link-alt"></i></a>
<a href="https://elfen.cttue.de/" class="nav-button">Elfensystem <i class="fas fa-external-link-alt"></i></a>
</div>
<div>
<a href="en/site-plan.html" class="nav-button"><img src="image/gb.png" style="height: 16px; vertical-align: middle;"> EN</a>
</div>
</div>
</nav>
<div class="banner-box">
<img class="banner" id="banner-1" src="image/banner-1.png" />
<img class="banner" id="banner-2" src="image/banner-2.png" />
<img class="banner" id="banner-3" src="image/banner-3.3.png" />
</div>
<div class="box" id="site-plan-intro">
<h2>Wo ist was?</h2>
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1em;">
<div>
<ul>
<li><a href="#floor-6" class="location-link" data-target="aussteller">Aussteller</a></li>
<li><a href="#floor-2" class="location-link" data-target="back-office">Back Office</a></li>
<li><a href="#floor-eg" class="location-link" data-target="bar-foyer">Bar im Foyer</a></li>
<li><a href="#floor-eg" class="location-link" data-target="buehne-1">Bühne 1</a></li>
<li><a href="#floor-6" class="location-link" data-target="buehne-2">Bühne 2</a></li>
<li><a href="#floor-6" class="location-link" data-target="cafeteria">Cafeteria</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#floor-6" class="location-link" data-target="diamant">Diamant</a></li>
<li><a href="#floor-eg" class="location-link" data-target="elfenhain">Elfenhain</a></li>
<li><a href="#floor-eg" class="location-link" data-target="foyer">Foyer</a></li>
<li><a href="#floor-eg" class="location-link" data-target="hackspace">Hackspace</a></li>
<li><a href="#floor-eg" class="location-link" data-target="infodesk">Infodesk</a></li>
<li><a href="#floor-6" class="location-link" data-target="kaffee">Kaffee</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#floor-eg" class="location-link" data-target="kasse">Kasse</a></li>
<li><a href="#floor-2" class="location-link" data-target="silent-room">Silent Room</a></li>
<li><a href="#floor-7" class="location-link" data-target="skybar">SKYBAR</a></li>
<li><a href="#floor-6" class="location-link" data-target="waffeln">Waffeln</a></li>
<li><a href="#floor-2" class="location-link" data-target="workshop-1">Workshop 1</a></li>
<li><a href="#floor-2" class="location-link" data-target="workshop-2">Workshop 2</a></li>
</ul>
</div>
</div>
</div>
<div class="box floor-plan" id="floor-eg">
<img src="image/Etagen_EG.png" alt="Grundriss Erdgeschoss" class="floor-plan-image" />
<div class="location-marker" data-location="bar-foyer" style="top: 40%; left: 36%;"></div>
<div class="location-marker" data-location="buehne-1" style="top: 36%; left: 85%;"></div>
<div class="location-marker" data-location="elfenhain" style="top: 60%; left: 93%;"></div>
<div class="location-marker" data-location="foyer" style="top: 28%; left: 36%;"></div>
<div class="location-marker" data-location="hackspace" style="top: 36%; left: 60%;"></div>
<div class="location-marker" data-location="infodesk" style="top: 20%; left: 29%;"></div>
<div class="location-marker" data-location="kasse" style="top: 40%; left: 36%;"></div>
</div>
<div class="box floor-plan" id="floor-2">
<img src="image/Etagen_2. OG.png" alt="Grundriss 2. Obergeschoss" class="floor-plan-image" />
<div class="location-marker" data-location="back-office" style="top: 13%; left: 70%;"></div>
<div class="location-marker" data-location="silent-room" style="top: 13%; left: 57%;"></div>
<div class="location-marker" data-location="workshop-1" style="top: 54%; left: 38%;"></div>
<div class="location-marker" data-location="workshop-2" style="top: 13%; left: 83%;"></div>
</div>
<div class="box floor-plan" id="floor-6">
<img src="image/Etagen_6. OG.png" alt="Grundriss 6. Obergeschoss" class="floor-plan-image" />
<div class="location-marker" data-location="aussteller" style="top: 75%; left: 64%;"></div>
<div class="location-marker" data-location="buehne-2" style="top: 41%; left: 20%;"></div>
<div class="location-marker" data-location="cafeteria" style="top: 58%; left: 82%;"></div>
<div class="location-marker" data-location="diamant" style="top: 54%; left: 33%;"></div>
<div class="location-marker" data-location="kaffee" style="top: 58%; left: 82%;"></div>
<div class="location-marker" data-location="waffeln" style="top: 58%; left: 82%;"></div>
</div>
<div class="box floor-plan" id="floor-7">
<img src="image/Etagen_7. OG.png" alt="Grundriss 7. Obergeschoss" class="floor-plan-image" />
<div class="location-marker" data-location="skybar" style="top: 35%; left: 36%;"></div>
</div>
<div class="center">
<a href="imprint.html" id="imprint">Impressum</a>
</div>
<p>&nbsp;</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const locationLinks = document.querySelectorAll('.location-link');
const markers = document.querySelectorAll('.location-marker');
locationLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
// Alle Marker ausblenden
markers.forEach(marker => {
marker.classList.remove('active');
});
// Ziel-Location finden und Marker anzeigen
const targetLocation = this.getAttribute('data-target');
const targetMarker = document.querySelector(`[data-location="${targetLocation}"]`);
if (targetMarker) {
targetMarker.classList.add('active');
// Zur entsprechenden Etage scrollen
const targetFloor = this.getAttribute('href');
const targetElement = document.querySelector(targetFloor);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth' });
}
// Marker nach 10 Sekunden ausblenden
setTimeout(() => {
targetMarker.classList.remove('active');
}, 10000);
}
});
});
});
</script>
</body>
</html>

64
styles-4.6.css → styles-4.7.css
Unescape View File

@ -367,6 +367,70 @@ h3,
height: 60px;
}
/* Lageplan Styles */
.floor-plan {
padding: 0; /* Kein Padding, damit Bild die Box vollständig ausfüllt */
overflow: hidden; /* Verhindert Überlauf */
position: relative; /* Für absolute Positionierung der Markierungen */
}
.floor-plan-image {
width: 100%;
height: 100%;
display: block;
margin: 0;
object-fit: cover; /* Bild füllt die gesamte Box aus */
object-position: center; /* Zentriert das Bild */
}
/* Location Links */
.location-link {
text-decoration: none;
color: #e5ebff;
transition: color 0.3s ease;
}
.location-link:hover {
color: #FF668C;
}
/* Pulsierender Ring für Locations */
.location-marker {
position: absolute;
width: 40px;
height: 40px;
border: 6px solid #00ff66;
border-radius: 50%;
background: rgba(0, 255, 102, 0.6);
display: none;
z-index: 10;
animation: pulse 2s infinite;
transform: translate(-50%, -50%);
box-shadow: 0 0 20px #00ff66, 0 0 40px #00ff66, 0 0 60px #00ff66;
}
.location-marker.active {
display: block;
}
@keyframes pulse {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
box-shadow: 0 0 20px #00ff66, 0 0 40px #00ff66, 0 0 60px #00ff66;
}
50% {
transform: translate(-50%, -50%) scale(1.3);
opacity: 0.8;
box-shadow: 0 0 30px #00ff66, 0 0 60px #00ff66, 0 0 90px #00ff66;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
box-shadow: 0 0 20px #00ff66, 0 0 40px #00ff66, 0 0 60px #00ff66;
}
}
/* Content-Container */
#content {
Write Preview
Loading…
Cancel
Save