Duda17/social
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add social webseite

Browse Source
This commit is contained in:
nadja
2026-09-01 22:11:21 +02:00
commit 1162939720
5 changed files with 656 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app.js Normal file
View File

@@ -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);
})();

179
index.html Normal file
View File

@@ -0,0 +1,179 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Duda17 - Social Media</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Hero mit Profilbild -->
<header class="hero">
<img src="https://yt3.googleusercontent.com/ytc/AIdro_nV0BeUU6X1nvBat082Xuau7R-DzRHMX0hBHONIGmStA9w=s900-c-k-c0x00ffffff-no-rj"
alt="Duda17 Profilbild" class="hero-avatar">
<div class="hero-content">
<h1>Duda17</h1>
<p>Videos, Streams & Content — folge mir auf allen Kanälen!</p>
<div class="hero-socials">
<a href="#youtube" class="btn btn-youtube">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
YouTube
</a>
<a href="#tiktok" class="btn btn-tiktok">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1 0-5.78 2.92 2.92 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 3 15.57 6.33 6.33 0 0 0 9.37 22a6.33 6.33 0 0 0 6.37-6.22V9.4a8.16 8.16 0 0 0 4.85 1.58V7.53a4.85 4.85 0 0 1-1-.84z"/></svg>
TikTok
</a>
<a href="#twitch" class="btn btn-twitch">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z"/></svg>
Twitch
</a>
<a href="#discord" class="btn btn-discord">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.947 2.418-2.157 2.418z"/></svg>
Discord
</a>
</div>
</div>
</header>
<!-- YouTube -->
<section id="youtube" class="section">
<div class="container">
<div class="channel-head">
<img src="https://yt3.googleusercontent.com/ytc/AIdro_nV0BeUU6X1nvBat082Xuau7R-DzRHMX0hBHONIGmStA9w=s160-c-k-c0x00ffffff-no-rj"
alt="Duda17" class="channel-avatar" id="yt-avatar">
<div>
<h2 class="section-title">
<svg viewBox="0 0 24 24" width="32" height="32" fill="#FF0000"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
YouTube
</h2>
<p class="section-subtitle">Meine neuesten Videos werden automatisch geladen</p>
</div>
</div>
<div class="video-grid">
<!-- Offizieller YouTube Embed: zeigt automatisch die neuesten
Uploads des Kanals. YouTube hostet alles selbst - kein
CORS, kein API-Key, keine externen Dienste noetig und
neue Videos erscheinen automatisch. -->
<div class="video-card video-card-wide">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed?listType=user_uploads&list=UU0zG_TbEEic12DQHnEGmlQ"
title="Duda17 - YouTube Uploads"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</div>
<div class="section-cta">
<a href="https://www.youtube.com/@Duda-nn4ny" target="_blank" class="btn btn-outline btn-youtube-outline">Alle Videos auf YouTube ansehen →</a>
</div>
</div>
</section>
<!-- TikTok -->
<section id="tiktok" class="section section-alt">
<div class="container">
<div class="channel-head">
<img src="https://yt3.googleusercontent.com/ytc/AIdro_nV0BeUU6X1nvBat082Xuau7R-DzRHMX0hBHONIGmStA9w=s160-c-k-c0x00ffffff-no-rj"
alt="Duda17" class="channel-avatar">
<div>
<h2 class="section-title">
<svg viewBox="0 0 24 24" width="32" height="32" fill="#00f2ea"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1 0-5.78 2.92 2.92 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 3 15.57 6.33 6.33 0 0 0 9.37 22a6.33 6.33 0 0 0 6.37-6.22V9.4a8.16 8.16 0 0 0 4.85 1.58V7.53a4.85 4.85 0 0 1-1-.84z"/></svg>
TikTok
</h2>
<p class="section-subtitle">Mein TikTok-Profil & meine Videos</p>
</div>
</div>
<div class="tiktok-embed-wrap">
<!-- TikTok Creator-Embed: hält sich automatisch aktuell & zeigt Profil + Videos -->
<blockquote class="tiktok-embed"
cite="https://www.tiktok.com/@nick01.05"
data-unique-id="nick01.05"
data-embed-type="creator"
data-embed-from="oembed"
style="max-width:780px; min-width:288px;">
<section>
<a target="_blank" href="https://www.tiktok.com/@nick01.05?refer=creator_embed">@nick01.05</a>
</section>
</blockquote>
<script async src="https://www.tiktok.com/embed.js"></script>
</div>
<div class="section-cta">
<a href="https://www.tiktok.com/@nick01.05" target="_blank" class="btn btn-outline btn-tiktok-outline">Auf TikTok ansehen →</a>
</div>
</div>
</section>
<!-- Twitch -->
<section id="twitch" class="section">
<div class="container">
<div class="channel-head">
<img src="https://static-cdn.jtvnw.net/jtv_user_pictures/218e1e72-a12f-4eba-bd5d-85b3efbece20-profile_image-300x300.png"
alt="duda_xd" class="channel-avatar">
<div>
<h2 class="section-title">
<svg viewBox="0 0 24 24" width="32" height="32" fill="#9146FF"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z"/></svg>
Twitch
</h2>
<p class="section-subtitle">duda_xd — meinen Live-Stream sehen!</p>
</div>
</div>
<div class="twitch-embed-wrap" id="twitch-embed"></div>
<p class="twitch-status">Stream sehr selten — verpasse keinen Stream und folge mir!</p>
<div class="section-cta">
<a href="https://www.twitch.tv/duda_xd" target="_blank" class="btn btn-outline btn-twitch-outline">Auf Twitch ansehen →</a>
</div>
</div>
</section>
<!-- Discord -->
<section id="discord" class="section section-alt">
<div class="container">
<h2 class="section-title">
<svg viewBox="0 0 24 24" width="32" height="32" fill="#5865F2"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.947 2.418-2.157 2.418z"/></svg>
Discord
</h2>
<p class="section-subtitle">Vernetze dich direkt mit mir auf Discord!</p>
<div class="discord-card">
<div class="discord-info">
<div class="discord-profile">
<img src="https://yt3.googleusercontent.com/ytc/AIdro_nV0BeUU6X1nvBat082Xuau7R-DzRHMX0hBHONIGmStA9w=s160-c-k-c0x00ffffff-no-rj"
alt="Duda17" class="channel-avatar">
<div>
<h3>19duda98_66649</h3>
<p>Schreibe mich direkt an oder vernetze dich mit mir!</p>
</div>
</div>
<a href="https://discord.com/users/19duda98_66649" target="_blank" class="btn btn-discord btn-lg">
<svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.947 2.418-2.157 2.418z"/></svg>
Auf Discord anschreiben
</a>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<p>&copy; 2026 Duda17 — Alle Rechte vorbehalten.</p>
<div class="footer-links">
<a href="https://www.youtube.com/@Duda-nn4ny" target="_blank">YouTube</a>
<a href="https://www.tiktok.com/@nick01.05" target="_blank">TikTok</a>
<a href="https://www.twitch.tv/duda_xd" target="_blank">Twitch</a>
<a href="https://discord.com/users/19duda98_66649" target="_blank">Discord</a>
</div>
</div>
</footer>
<script src="app.js"></script>
</body>
</html>

58
server.ps1 Normal file
View File

@@ -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()
}

34
start.bat Normal file
View File

@@ -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

357
style.css Normal file
View File

@@ -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; }
}