forked from cal/tdf-2023-webseite
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
155 lines
8.4 KiB
155 lines
8.4 KiB
<!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-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-6" class="location-link" data-target="projekte">Projects</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="projekte" 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> </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>
|
|
|