TDF 2024 Recap

main
Martin Braun 3 weeks ago
parent 3810aa09f6
commit f39063d61f
  1. 2
      en/index.html
  2. 2
      en/participate.html
  3. 0
      image/banner-3x.png
  4. 2
      index.html
  5. 2
      participate.html
  6. 12
      tdf3/en/index.html
  7. 12
      tdf3/en/participate.html
  8. 93
      tdf3/en/recap.html
  9. BIN
      tdf3/image/01.jpg
  10. BIN
      tdf3/image/02.jpg
  11. BIN
      tdf3/image/03.jpg
  12. BIN
      tdf3/image/04.jpg
  13. BIN
      tdf3/image/05.jpg
  14. BIN
      tdf3/image/06.jpg
  15. BIN
      tdf3/image/07.jpg
  16. BIN
      tdf3/image/08.jpg
  17. BIN
      tdf3/image/09.jpg
  18. BIN
      tdf3/image/10.jpg
  19. BIN
      tdf3/image/11.jpg
  20. BIN
      tdf3/image/12.jpg
  21. BIN
      tdf3/image/radio.png
  22. 9
      tdf3/index.html
  23. 9
      tdf3/participate.html
  24. 94
      tdf3/recap.html
  25. 122
      tdf3/styles-0.2.css

@ -17,7 +17,7 @@
<div class="banner-box"> <div class="banner-box">
<img class="banner" id="banner-1" src="../image/banner-1.png" /> <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-2" src="../image/banner-2.png" />
<img class="banner" id="banner-3" src="../image/banner-3.png" /> <img class="banner" id="banner-3" src="../image/banner-3x.png" />
</div> </div>
<div class="box" id="event"> <div class="box" id="event">
<h2><s>June 28/29</s>, 2025</h2> <h2><s>June 28/29</s>, 2025</h2>

@ -16,7 +16,7 @@
<div class="banner-box"> <div class="banner-box">
<img class="banner" id="banner-1" src="../image/banner-1.png" /> <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-2" src="../image/banner-2.png" />
<img class="banner" id="banner-3" src="../image/banner-3.png" /> <img class="banner" id="banner-3" src="../image/banner-3x.png" />
</div> </div>
<div class="box"> <div class="box">
<h2>The Event</h2> <h2>The Event</h2>

Before

Width:  |  Height:  |  Size: 156 KiB

After

Width:  |  Height:  |  Size: 156 KiB

@ -17,7 +17,7 @@
<div class="banner-box"> <div class="banner-box">
<img class="banner" id="banner-1" src="image/banner-1.png" /> <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-2" src="image/banner-2.png" />
<img class="banner" id="banner-3" src="image/banner-3.png" /> <img class="banner" id="banner-3" src="image/banner-3x.png" />
</div> </div>
<div class="box" id="event"> <div class="box" id="event">

@ -18,7 +18,7 @@
<div class="banner-box"> <div class="banner-box">
<img class="banner" id="banner-1" src="image/banner-1.png" /> <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-2" src="image/banner-2.png" />
<img class="banner" id="banner-3" src="image/banner-3.png" /> <img class="banner" id="banner-3" src="image/banner-3x.png" />
</div> </div>
<div class="box"> <div class="box">

@ -3,8 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../styles-0.1.css"> <link rel="stylesheet" type="text/css" href="../styles-0.2.css">
<title>3. Tübinger Day of Digital Freedom</title> <title>3. Tübingen Day of Digital Freedom</title>
</head> </head>
<body> <body>
@ -13,11 +13,19 @@
<div id="content"> <div id="content">
<nav class="navbar">
<a href="index.html" class="nav-button inactive">Main Page</a>
<a href="participate.html" class="nav-button">Participate</a>
<a href="https://cfp.cttue.de/tdf3/schedule/" class="nav-button">Program</a>
<a href="recap.html" class="nav-button">Recap</a>
</nav>
<div class="banner-box"> <div class="banner-box">
<img class="banner" id="banner-1" src="../image/banner-1.png" /> <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-2" src="../image/banner-2.png" />
<img class="banner" id="banner-3" src="../image/banner-3.png" /> <img class="banner" id="banner-3" src="../image/banner-3.png" />
</div> </div>
<div class="box" id="event"> <div class="box" id="event">
<h2>July 6, 2024</h2> <h2>July 6, 2024</h2>
<p class="big">Saturday 1:00 PM to Sunday 1:00 PM</p> <p class="big">Saturday 1:00 PM to Sunday 1:00 PM</p>

@ -3,8 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../styles-0.1.css"> <link rel="stylesheet" type="text/css" href="../styles-0.2.css">
<title>3. Tübinger Day of Digital Freedom</title> <title>3. Tübingen Day of Digital Freedom</title>
</head> </head>
<body> <body>
@ -12,11 +12,19 @@
<div class="background"> <div class="background">
<div id="content"> <div id="content">
<nav class="navbar">
<a href="index.html" class="nav-button">Main Page</a>
<a href="participate.html" class="nav-button inactive">Participate</a>
<a href="https://cfp.cttue.de/tdf3/schedule/" class="nav-button">Program</a>
<a href="recap.html" class="nav-button">Recap</a>
</nav>
<div class="banner-box"> <div class="banner-box">
<img class="banner" id="banner-1" src="../image/banner-1.png" /> <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-2" src="../image/banner-2.png" />
<img class="banner" id="banner-3" src="../image/banner-3.png" /> <img class="banner" id="banner-3" src="../image/banner-3.png" />
</div> </div>
<div class="box"> <div class="box">
<h2>The Event</h2> <h2>The Event</h2>
<p>The Day of Digital Freedom is an event organized by the Chaos community and takes place for the third <p>The Day of Digital Freedom is an event organized by the Chaos community and takes place for the third

@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../styles-0.2.css">
<title>3. Tübingen Day of Digital Freedom</title>
</head>
<body>
<div id="languages"><a href="../recap.html"><img src="../image/de.png"></a></div>
<div class="background">
<div id="content">
<nav class="navbar">
<a href="index.html" class="nav-button">Main Page</a>
<a href="participate.html" class="nav-button">Participate</a>
<a href="https://cfp.cttue.de/tdf3/schedule/" class="nav-button">Program</a>
<a href="recap.html" class="nav-button inactive">Recap</a>
</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.png" />
</div>
<div class="box">
<h2>3. Day of Digital Freedom 2024</h2>
<p>On July 6, 2024, the 3rd Day of Digital Freedom took place in Tübingen's Westspitze. It was organized by
<a href="https://cttue.de/">Chaostreff Tübingen e.V.</a> Thanks to the support of many <a
href="participate.html">helping hands</a> and financial
supporters, a fabulous event took place. Over 250 visitors were able to experience a <a href="https://cfp.cttue.de/tdf3/schedule/">diverse program</a>
across four floors and six venues.</p>
</div>
<div class="box">
<h2>Impressions</h2>
<div class="gallery">
<img src="../image/01.jpg" alt="Image 1" onclick="openLightbox('../image/01.jpg')">
<img src="../image/02.jpg" alt="Image 2" onclick="openLightbox('../image/02.jpg')">
<img src="../image/03.jpg" alt="Image 3" onclick="openLightbox('../image/03.jpg')">
<img src="../image/04.jpg" alt="Image 4" onclick="openLightbox('../image/04.jpg')">
<img src="../image/05.jpg" alt="Image 5" onclick="openLightbox('../image/05.jpg')">
<img src="../image/06.jpg" alt="Image 6" onclick="openLightbox('../image/06.jpg')">
<img src="../image/07.jpg" alt="Image 7" onclick="openLightbox('../image/07.jpg')">
<img src="../image/08.jpg" alt="Image 8" onclick="openLightbox('../image/08.jpg')">
<img src="../image/09.jpg" alt="Image 9" onclick="openLightbox('../image/09.jpg')">
<img src="../image/10.jpg" alt="Image 10" onclick="openLightbox('../image/10.jpg')">
<img src="../image/11.jpg" alt="Image 11" onclick="openLightbox('../image/11.jpg')">
<img src="../image/12.jpg" alt="Image 12" onclick="openLightbox('../image/12.jpg')">
</div>
</div>
<!-- Lightbox Container -->
<div id="lightbox" class="lightbox" onclick="closeLightbox()">
<img id="lightbox-img" src="" alt="Enlarged Image">
</div>
<script>
function openLightbox(imageSrc) {
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
lightboxImg.src = imageSrc; // Set the clicked image as the source
lightbox.style.display = 'flex'; // Show the lightbox
}
function closeLightbox() {
const lightbox = document.getElementById('lightbox');
lightbox.style.display = 'none'; // Hide the lightbox
}
</script>
<div class="box" id="radio">
<h2>TDF on the Radio</h2>
<p>A highlight of the Day of Digital Freedom 2024 was the "Broadcast Center". Here, Freies Radio Wüste Welle broadcasted a live program parallel to the event. Interviews with participants and organizers were also conducted.</p>
<p>The "Best Of from the Day of Digital Freedom 2024" can be listened to here:</p>
<div class="button-container">
<a href="https://www.wueste-welle.de/redaktion/view/id/25/tab/weblog/article/96389/Best_Of_vom_Tag_der_Digitalen_Freiheit_2024.html" class="button">To the Interviews…</a>
</div>
</div>
</div>
<p>&nbsp;</p>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 157 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 215 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles-0.1.css"> <link rel="stylesheet" type="text/css" href="styles-0.2.css">
<title>3. Tübinger Tag der digitalen Freiheit</title> <title>3. Tübinger Tag der digitalen Freiheit</title>
</head> </head>
@ -13,6 +13,13 @@
<div id="content"> <div id="content">
<nav class="navbar">
<a href="index.html" class="nav-button inactive">Hauptseite</a>
<a href="participate.html" class="nav-button">Mitmachen</a>
<a href="https://cfp.cttue.de/tdf3/schedule/" class="nav-button">Programm</a>
<a href="recap.html" class="nav-button">Rückblick</a>
</nav>
<div class="banner-box"> <div class="banner-box">
<img class="banner" id="banner-1" src="image/banner-1.png" /> <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-2" src="image/banner-2.png" />

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles-0.1.css"> <link rel="stylesheet" type="text/css" href="styles-0.2.css">
<title>3. Tübinger Tag der digitalen Freiheit</title> <title>3. Tübinger Tag der digitalen Freiheit</title>
</head> </head>
@ -14,6 +14,13 @@
<div id="content"> <div id="content">
<nav class="navbar">
<a href="index.html" class="nav-button">Hauptseite</a>
<a href="participate.html" class="nav-button inactive">Mitmachen</a>
<a href="https://cfp.cttue.de/tdf3/schedule/" class="nav-button">Programm</a>
<a href="recap.html" class="nav-button">Rückblick</a>
</nav>
<div class="banner-box"> <div class="banner-box">
<img class="banner" id="banner-1" src="image/banner-1.png" /> <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-2" src="image/banner-2.png" />

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles-0.2.css">
<title>3. Tübinger Tag der digitalen Freiheit</title>
</head>
<body>
<div id="languages"><a href="en/recap.html"><img src="image/gb.png"></a></div>
<div class="background">
<div id="content">
<nav class="navbar">
<a href="index.html" class="nav-button">Hauptseite</a>
<a href="participate.html" class="nav-button">Mitmachen</a>
<a href="https://cfp.cttue.de/tdf3/schedule/" class="nav-button">Programm</a>
<a href="recap.html" class="nav-button inactive">Rückblick</a>
</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.png" />
</div>
<div class="box">
<h2>3. Tag der digitalen Freiheit 2024</h2>
<p>Am 6. Juli 2024 fand in der Tübinger Westspitze der 3. Tag der digitalen Freiheit statt. Dazu lud der
<a href="https://cttue.de/">Chaostreff Tübingen e.V.</a> ein. Dank der Unterstützung vieler <a
href="participate.html">(h)elfender Hände</a> und finanzieller
Unterstützer konnte ein famoses Event stattfinden. Auf vier Etagen und sechs Veranstaltungsorten
haben über 250 Besucher ein <a href="https://cfp.cttue.de/tdf3/schedule/">vielfältiges Programm</a>
erleben können.</p>
</div>
<div class="box">
<h2>Impressionen</h2>
<div class="gallery">
<img src="image/01.jpg" alt="Bild 1" onclick="openLightbox('image/01.jpg')">
<img src="image/02.jpg" alt="Bild 2" onclick="openLightbox('image/02.jpg')">
<img src="image/03.jpg" alt="Bild 3" onclick="openLightbox('image/03.jpg')">
<img src="image/04.jpg" alt="Bild 4" onclick="openLightbox('image/04.jpg')">
<img src="image/05.jpg" alt="Bild 5" onclick="openLightbox('image/05.jpg')">
<img src="image/06.jpg" alt="Bild 6" onclick="openLightbox('image/06.jpg')">
<img src="image/07.jpg" alt="Bild 7" onclick="openLightbox('image/07.jpg')">
<img src="image/08.jpg" alt="Bild 8" onclick="openLightbox('image/08.jpg')">
<img src="image/09.jpg" alt="Bild 9" onclick="openLightbox('image/09.jpg')">
<img src="image/10.jpg" alt="Bild 10" onclick="openLightbox('image/10.jpg')">
<img src="image/11.jpg" alt="Bild 11" onclick="openLightbox('image/11.jpg')">
<img src="image/12.jpg" alt="Bild 12" onclick="openLightbox('image/12.jpg')">
</div>
</div>
<!-- Lightbox Container -->
<div id="lightbox" class="lightbox" onclick="closeLightbox()">
<img id="lightbox-img" src="" alt="Vergrößertes Bild">
</div>
<script>
function openLightbox(imageSrc) {
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
lightboxImg.src = imageSrc; // Set the clicked image as the source
lightbox.style.display = 'flex'; // Show the lightbox
}
function closeLightbox() {
const lightbox = document.getElementById('lightbox');
lightbox.style.display = 'none'; // Hide the lightbox
}
</script>
<div class="box" id="radio">
<h2>TDF im Radio</h2>
<p>Ein Highlight auf dem Tag der digitalen Freiheit 2024 war das „Sendezentrum“. Hier übertrug das Freie Radio Wüste Welle parallel zur Veranstaltung ein Live-Programm. Es wurden auch Interviews mit Teilnehmern und Organisatoren geführt.</p>
<p>Das „Best Of vom Tag der Digitalen Freiheit 2024“ kann hier nachgehört werden:</p>
<div class="button-container">
<a href="https://www.wueste-welle.de/redaktion/view/id/25/tab/weblog/article/96389/Best_Of_vom_Tag_der_Digitalen_Freiheit_2024.html" class="button">Zu den Interviews…</a>
</div>
</div>
</div>
<p>&nbsp;</p>
</div>
</body>
</html>

@ -99,6 +99,10 @@ body {
background-image: url("image/pesthoenchen.png"); background-image: url("image/pesthoenchen.png");
} }
#radio {
background-image: url("image/radio.png");
}
@ -312,3 +316,121 @@ h3,
max-height: 100px; max-height: 100px;
margin: 0 10px; margin: 0 10px;
} }
.background {
background-image: url("image/neon-scene.png");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
padding-top: 20px;
margin: 0;
}
#content {
max-width: 1000px;
margin: 0 auto;
padding: 0 75px;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 20px 0;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 10px; /* Abgerundete Ecken für mehr Eleganz */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatteneffekt */
transition: transform 0.3s, box-shadow 0.3s; /* Animation bei Hover */
}
.gallery img:hover {
transform: scale(1.10); /* Leichtes Vergrößern beim Hover */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Intensiverer Schatten */
}
/* Lightbox Styling */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8); /* Dunkler Hintergrund */
justify-content: center;
align-items: center;
z-index: 1000;
cursor: pointer;
}
.lightbox img {
max-width: 90%; /* Breite bis zu 1200px */
max-height: 90%;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* Content-Container */
#content {
max-width: 1000px;
margin: 0 auto;
padding: 0 75px;
position: relative; /* Ermöglicht die Positionierung der Navigation innerhalb */
}
/* Navigationsleiste */
.navbar {
position: fixed; /* Fixiert die Navigation relativ zum Fenster */
top: 0;
left: 50%; /* Zentrierung relativ zur Mitte des Containers */
transform: translateX(-50%); /* Verschiebt die Navigation zurück zur Container-Mitte */
display: flex;
justify-content: flex-start; /* Schaltflächen links ausrichten */
align-items: center;
width: 100%; /* Passt sich der Breite des Containers an */
max-width: 1000px; /* Begrenzt die Breite der Navigation */
z-index: 1000; /* Stellt sicher, dass sie über anderen Elementen liegt */
padding: 0; /* Kein Padding für die Leiste selbst */
background-color: transparent; /* Kein Hintergrund */
}
/* Navigation-Buttons */
.nav-button {
display: inline-block;
padding: 5px 10px;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #000;
background-color: #ffff00;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
text-align: center;
margin: 0 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Intensiverer Schatten */
}
/* Hover-Effekt für die Buttons */
.nav-button:hover {
transform: scale(1.1); /* Leichtes Vergrößern beim Hover */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Intensiverer Schatten */
}
/* Inaktive Schaltfläche */
.nav-button.inactive {
background-color: #ffffaa; /* Grauer Hintergrund für Inaktivität */
cursor: not-allowed; /* Ändert den Cursor zu einem Verbotssymbol */
pointer-events: none; /* Deaktiviert alle Hover- und Klickereignisse */
}
/* Kein Hover-Effekt für inaktive Buttons */
.nav-button.inactive:hover {
}
Loading…
Cancel
Save