commit 116293972091abb14b0c2e4dcb76169c1f2ae925 Author: nadja Date: Tue Sep 1 22:11:21 2026 +0200 add social webseite diff --git a/app.js b/app.js new file mode 100644 index 0000000..72b229d --- /dev/null +++ b/app.js @@ -0,0 +1,28 @@ +(function () { + "use strict"; + + var TWITCH_CHANNEL = "duda_xd"; + + /* ------------------------------------------------------------------ + * Twitch: Live-Player einbetten. Zeigt automatisch den aktuellen + * Stream, sobald du live bist. Die Domain wird dynamisch gesetzt, + * damit der Player ueberall funktioniert (auch lokal). + * Twitch ist ein iframe-Embed -> keine CORS-Probleme. + * ------------------------------------------------------------------ */ + function loadTwitch() { + var wrap = document.getElementById("twitch-embed"); + if (!wrap) return; + + var domain = window.location.hostname || "localhost"; + var iframe = document.createElement("iframe"); + iframe.src = "https://player.twitch.tv/?channel=" + TWITCH_CHANNEL + + "&parent=" + domain + "&muted=true"; + iframe.setAttribute("title", "Twitch Stream"); + iframe.setAttribute("allowfullscreen", "true"); + iframe.setAttribute("scrolling", "no"); + iframe.setAttribute("allow", "autoplay; fullscreen"); + wrap.appendChild(iframe); + } + + document.addEventListener("DOMContentLoaded", loadTwitch); +})(); diff --git a/index.html b/index.html new file mode 100644 index 0000000..6e9074e --- /dev/null +++ b/index.html @@ -0,0 +1,179 @@ + + + + + + Duda17 - Social Media + + + + + + + +

Duda17

Videos, Streams & Content — folge mir auf allen Kanälen!

+ + + YouTube + + + + TikTok + + + + Twitch + + + + Discord + +

+ + +

+ + YouTube +

Meine neuesten Videos werden automatisch geladen

+ +

+ Alle Videos auf YouTube ansehen → +

+ + +

+ + TikTok +

Mein TikTok-Profil & meine Videos

+ +

+
+ @nick01.05 +
+

+ +

+ Auf TikTok ansehen → +

+ + +

+ + Twitch +

duda_xd — meinen Live-Stream sehen!

+ +

Stream sehr selten — verpasse keinen Stream und folge mir!

+ +

+ Auf Twitch ansehen → +

+ + +

+ + Discord +

Vernetze dich direkt mit mir auf Discord!

19duda98_66649

Schreibe mich direkt an oder vernetze dich mit mir!

+ + + Auf Discord anschreiben + +

+ + + + + + diff --git a/server.ps1 b/server.ps1 new file mode 100644 index 0000000..9b9dd26 --- /dev/null +++ b/server.ps1 @@ -0,0 +1,58 @@ +param( + [string]$Dir = ".", + [int]$Port = 8080 +) + +$prefix = "http://localhost:$Port/" +$listener = New-Object System.Net.HttpListener +$listener.Prefixes.Add($prefix) +$listener.Start() + +Write-Host "Server laeuft auf $prefix" -ForegroundColor Green +Write-Host "Druecke STRG+C zum Beenden." +Write-Host "" + +try { + while ($listener.IsListening) { + $ctx = $listener.GetContext() + + try { + $path = $ctx.Request.Url.AbsolutePath + if ($path -eq "/") { $path = "/index.html" } + + $rel = $path.TrimStart("/") + $file = Join-Path (Resolve-Path $Dir) $rel + + if ((Test-Path $file) -and -not (Get-Item $file -ErrorAction SilentlyContinue).PSIsContainer) { + $bytes = [System.IO.File]::ReadAllBytes($file) + $ext = [System.IO.Path]::GetExtension($file).ToLower() + $mime = switch ($ext) { + ".html" { "text/html; charset=utf-8" } + ".htm" { "text/html; charset=utf-8" } + ".css" { "text/css" } + ".js" { "application/javascript" } + ".json" { "application/json" } + ".png" { "image/png" } + ".jpg" { "image/jpeg" } + ".jpeg" { "image/jpeg" } + ".gif" { "image/gif" } + ".svg" { "image/svg+xml" } + ".ico" { "image/x-icon" } + ".woff2"{ "font/woff2" } + default { "application/octet-stream" } + } + $ctx.Response.ContentType = $mime + $ctx.Response.OutputStream.Write($bytes, 0, $bytes.Length) + } + else { + $ctx.Response.StatusCode = 404 + } + } + finally { + $ctx.Response.OutputStream.Close() + } + } +} +finally { + $listener.Stop() +} diff --git a/start.bat b/start.bat new file mode 100644 index 0000000..50e7a73 --- /dev/null +++ b/start.bat @@ -0,0 +1,34 @@ +@echo off +chcp 65001 >nul +title Duda17 - Social Media Seite +echo ============================================ +echo Duda17 - Social Media Webseite +echo ============================================ +echo. +echo Starte lokalen Server, damit die eingebetteten +echo Videos (YouTube/TikTok/Twitch) geladen werden. +echo WICHTIG: Die Seite muss ueber http://localhost +echo laufen - direktes Oeffnen als Datei (file://) +echo blockiert die Video-Einbettung durch YouTube! +echo. +echo Nach dem Start oeffnet sich automatisch dein +echo Browser. Dieses Fenster offen lassen! +echo. + +set PORT=8080 + +echo [Server] Starte Server mit PowerShell (in eigenem Fenster)... +start "Duda17 Server" powershell -NoProfile -ExecutionPolicy Bypass -File "%~dp0server.ps1" -Dir "%~dp0" -Port %PORT% + +echo. +echo [Browser] Oeffne die Seite in 2 Sekunden... +powershell -NoProfile -Command "Start-Sleep -Seconds 2; Start-Process 'http://localhost:%PORT%/index.html'" + +echo. +echo ============================================ +echo Server laeuft! Seite: http://localhost:%PORT% +echo Zum Beenden: dieses Fenster UND das +echo "Duda17 Server"-Fenster schliessen. +echo ============================================ +pause >nul +exit diff --git a/style.css b/style.css new file mode 100644 index 0000000..8efbe6e --- /dev/null +++ b/style.css @@ -0,0 +1,357 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --bg-primary: #0a0a0a; + --bg-secondary: #111111; + --bg-card: #1a1a1a; + --text-primary: #ffffff; + --text-secondary: #a0a0a0; + --youtube-red: #FF0000; + --tiktok-cyan: #00f2ea; + --tiktok-pink: #ff0050; + --twitch-purple: #9146FF; + --discord-blurple: #5865F2; + --border: #2a2a2a; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + background: var(--bg-primary); + color: var(--text-primary); + line-height: 1.6; + overflow-x: hidden; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Hero */ +.hero { + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding: 60px 20px; + background: + radial-gradient(ellipse at 15% 30%, rgba(255, 0, 0, 0.1) 0%, transparent 50%), + radial-gradient(ellipse at 50% 70%, rgba(0, 242, 234, 0.08) 0%, transparent 50%), + radial-gradient(ellipse at 85% 30%, rgba(145, 70, 255, 0.1) 0%, transparent 50%), + radial-gradient(ellipse at 70% 85%, rgba(88, 101, 242, 0.08) 0%, transparent 50%); +} + +.hero-avatar { + width: 140px; + height: 140px; + border-radius: 50%; + object-fit: cover; + border: 4px solid var(--border); + box-shadow: 0 0 0 4px rgba(145, 70, 255, 0.3), 0 0 40px rgba(88, 101, 242, 0.3); + margin-bottom: 24px; +} + +.hero-content h1 { + font-size: clamp(3rem, 8vw, 6rem); + font-weight: 900; + letter-spacing: -2px; + margin-bottom: 16px; + background: linear-gradient(135deg, #fff 0%, #c0c0c0 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-content p { + font-size: 1.25rem; + color: var(--text-secondary); + margin-bottom: 40px; + max-width: 500px; + margin-left: auto; + margin-right: auto; +} + +.hero-socials { + display: flex; + gap: 16px; + justify-content: center; + flex-wrap: wrap; +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + gap: 10px; + padding: 14px 28px; + border-radius: 12px; + font-size: 1rem; + font-weight: 600; + text-decoration: none; + transition: all 0.3s ease; + border: none; + cursor: pointer; +} + +.btn-youtube { background: var(--youtube-red); color: #fff; } +.btn-youtube:hover { background: #cc0000; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 0, 0, 0.3); } + +.btn-tiktok { background: linear-gradient(135deg, var(--tiktok-cyan), var(--tiktok-pink)); color: #fff; } +.btn-tiktok:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 242, 234, 0.3); } + +.btn-twitch { background: var(--twitch-purple); color: #fff; } +.btn-twitch:hover { background: #7a38d6; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(145, 70, 255, 0.3); } + +.btn-discord { background: var(--discord-blurple); color: #fff; } +.btn-discord:hover { background: #4752c4; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(88, 101, 242, 0.3); } + +.btn-outline { + background: transparent; + border: 2px solid var(--border); + color: var(--text-primary); +} + +.btn-youtube-outline:hover { border-color: var(--youtube-red); color: var(--youtube-red); background: rgba(255, 0, 0, 0.05); } +.btn-tiktok-outline:hover { border-color: var(--tiktok-cyan); color: var(--tiktok-cyan); background: rgba(0, 242, 234, 0.05); } +.btn-twitch-outline:hover { border-color: var(--twitch-purple); color: var(--twitch-purple); background: rgba(145, 70, 255, 0.05); } +.btn-discord-outline:hover { border-color: var(--discord-blurple); color: var(--discord-blurple); background: rgba(88, 101, 242, 0.05); } + +.btn-lg { padding: 18px 36px; font-size: 1.1rem; } + +/* Sections */ +.section { padding: 90px 0; scroll-margin-top: 20px; } +.section-alt { background: var(--bg-secondary); } + +.channel-head { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 40px; +} + +.channel-avatar { + width: 72px; + height: 72px; + border-radius: 50%; + object-fit: cover; + flex-shrink: 0; + border: 2px solid var(--border); +} + +.section-title { + display: flex; + align-items: center; + gap: 14px; + font-size: 2.2rem; + font-weight: 900; + margin-bottom: 4px; + flex-wrap: wrap; +} + +.section-subtitle { color: var(--text-secondary); font-size: 1.05rem; } + +.section-cta { text-align: center; margin-top: 40px; } + +/* YouTube Video Grid */ +.video-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 24px; +} + +/* Der YouTube-Uploads-Player (alle Videos) soll die volle Breite nutzen */ +.video-card-wide { + grid-column: 1 / -1; +} + +.video-card { + background: var(--bg-card); + border-radius: 16px; + overflow: hidden; + border: 1px solid var(--border); + transition: transform 0.3s, border-color 0.3s; +} + +.video-card:hover { + transform: translateY(-4px); + border-color: var(--youtube-red); +} + +.video-wrapper { + position: relative; + padding-bottom: 56.25%; + height: 0; +} + +.video-wrapper iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.video-meta { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 12px 16px; +} + +.video-meta p { + font-weight: 600; + font-size: 0.95rem; + padding: 0; +} + +.video-views { + color: var(--text-secondary); + font-size: 0.8rem; + white-space: nowrap; + flex-shrink: 0; +} + +/* Loading & Error */ +.loading { + grid-column: 1 / -1; + text-align: center; + padding: 60px 0; + color: var(--text-secondary); + font-size: 1.1rem; +} + +.loading.error { + color: var(--tiktok-pink); +} + +/* TikTok Embed */ +.tiktok-embed-wrap { + background: var(--bg-card); + border-radius: 16px; + border: 1px solid var(--border); + padding: 28px; + display: flex; + justify-content: center; + transition: border-color 0.3s; +} + +.tiktok-embed-wrap:hover { border-color: var(--tiktok-cyan); } + +.tiktok-embed-wrap .tiktok-embed { + margin: 0 auto; +} + +/* Twitch Embed */ +.twitch-embed-wrap { + position: relative; + width: 100%; + padding-bottom: 56.25%; + border-radius: 16px; + overflow: hidden; + border: 1px solid var(--border); + background: #0f0e11; + transition: border-color 0.3s; +} + +.twitch-embed-wrap:hover { border-color: var(--twitch-purple); } + +.twitch-embed-wrap iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; + z-index: 1; +} + +.twitch-status { + text-align: center; + color: var(--text-secondary); + margin-top: 20px; + font-size: 1rem; +} + +/* Discord Card */ +.discord-card { + background: var(--bg-card); + border-radius: 16px; + border: 1px solid var(--border); + padding: 40px; + max-width: 620px; + margin: 0 auto; + text-align: center; + transition: border-color 0.3s; +} + +.discord-card:hover { border-color: var(--discord-blurple); } + +.discord-profile { + display: flex; + align-items: center; + gap: 20px; + text-align: left; + justify-content: center; + margin-bottom: 24px; +} + +.discord-info h3 { + font-size: 1.6rem; + margin-bottom: 6px; + color: var(--discord-blurple); +} + +.discord-info p { color: var(--text-secondary); font-size: 1rem; } + +/* Footer */ +.footer { + padding: 40px 0; + border-top: 1px solid var(--border); + text-align: center; +} + +.footer p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 16px; } + +.footer-links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; } + +.footer-links a { + color: var(--text-secondary); + text-decoration: none; + font-size: 0.9rem; + transition: color 0.3s; +} + +.footer-links a:hover { color: var(--text-primary); } + +/* Responsive */ +@media (max-width: 768px) { + .section { padding: 60px 0; } + + .channel-head { flex-direction: column; text-align: center; } + + .section-title { font-size: 1.7rem; justify-content: center; } + .section-subtitle { text-align: center; } + + .video-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } + + .discord-card { padding: 28px 20px; } + .discord-profile { flex-direction: column; text-align: center; } +} + +@media (max-width: 480px) { + .hero-socials { flex-direction: column; align-items: center; } + .btn { width: 100%; max-width: 300px; justify-content: center; } + .hero-avatar { width: 110px; height: 110px; } +}