Spaces:

Multimedix
/

anycoder-551db4d9

Running

App Files Files Community

Multimedix commited on 12 days ago

Commit

4be3d14

verified ·

1 Parent(s): 4ac9fbc

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +527 -19

index.html CHANGED Viewed

@@ -1,19 +1,527 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AI-Berater & Vibe-Coding Guide 2025</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+<style>
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+:root{
+--bg:#0a0a0f;--bg2:#12121a;--bg3:#1a1a28;--bg4:#222236;
+--text:#e8e8f0;--text2:#a0a0b8;--text3:#6a6a82;
+--accent:#6c5ce7;--accent2:#a29bfe;--accent3:#4ecdc4;
+--green:#00b894;--yellow:#fdcb6e;--red:#e17055;--orange:#f39c12;
+--pink:#fd79a8;--blue:#0984e3;
+--radius:12px;--radius-sm:8px;--radius-lg:20px;
+--shadow:0 8px 32px rgba(0,0,0,.4);
+--glass:rgba(255,255,255,.04);
+}
+html{scroll-behavior:smooth;font-size:16px}
+body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden}
+a{color:var(--accent2);text-decoration:none;transition:color .2s}
+a:hover{color:var(--accent3)}
+code,.mono{font-family:'JetBrains Mono',monospace}
+/* Scrollbar */
+::-webkit-scrollbar{width:6px}
+::-webkit-scrollbar-track{background:var(--bg2)}
+::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}
+/* Header */
+.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(10,10,15,.85);backdrop-filter:blur(20px);border-bottom:1px solid rgba(108,92,231,.15)}
+.header-inner{max-width:1400px;margin:0 auto;padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
+.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.25rem;color:var(--text)}
+.logo i{color:var(--accent);font-size:1.5rem}
+.logo span{background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
+.built-with{font-size:.7rem;color:var(--text3);padding:.2rem .6rem;border:1px solid var(--bg4);border-radius:20px;transition:all .3s}
+.built-with:hover{border-color:var(--accent);color:var(--accent2)}
+/* Nav */
+.nav{display:flex;gap:.25rem;flex-wrap:wrap}
+.nav-btn{padding:.5rem 1rem;border:none;background:transparent;color:var(--text2);font-size:.8rem;font-weight:500;border-radius:var(--radius-sm);cursor:pointer;transition:all .25s;font-family:inherit;white-space:nowrap}
+.nav-btn:hover{background:var(--glass);color:var(--text)}
+.nav-btn.active{background:var(--accent);color:#fff}
+/* Main */
+.main{margin-top:70px;padding:1.5rem;max-width:1400px;margin-left:auto;margin-right:auto}
+.section{display:none;animation:fadeUp .4s ease}
+.section.active{display:block}
+@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
+/* Hero */
+.hero{text-align:center;padding:3rem 1rem 2rem;position:relative}
+.hero::before{content:'';position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(108,92,231,.12),transparent 70%);pointer-events:none}
+.hero h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;line-height:1.15;margin-bottom:1rem}
+.hero h1 .grad{background:linear-gradient(135deg,var(--accent),var(--accent3),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
+.hero p{color:var(--text2);font-size:1.1rem;max-width:700px;margin:0 auto 1.5rem}
+.hero-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .9rem;background:var(--glass);border:1px solid rgba(108,92,231,.3);border-radius:20px;font-size:.75rem;color:var(--accent2);margin-bottom:1.5rem}
+/* Cards */
+.card{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:1.5rem;transition:all .3s}
+.card:hover{border-color:rgba(108,92,231,.3);transform:translateY(-2px);box-shadow:var(--shadow)}
+.card-glass{background:var(--glass);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.06)}
+/* Grid */
+.grid{display:grid;gap:1.25rem}
+.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
+.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
+.grid-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
+/* Section Titles */
+.stitle{font-size:1.5rem;font-weight:800;margin-bottom:.5rem;display:flex;align-items:center;gap:.6rem}
+.stitle i{color:var(--accent);font-size:1.2rem}
+.sdesc{color:var(--text2);font-size:.9rem;margin-bottom:1.5rem}
+/* Comparison Table */
+.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--bg4)}
+table{width:100%;border-collapse:collapse;min-width:1100px;font-size:.82rem}
+thead{background:var(--bg3)}
+th{padding:.75rem .6rem;text-align:left;font-weight:600;color:var(--accent2);white-space:nowrap;border-bottom:2px solid var(--accent);font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}
+td{padding:.7rem .6rem;border-bottom:1px solid var(--bg4);vertical-align:middle}
+tbody tr{transition:background .2s}
+tbody tr:hover{background:rgba(108,92,231,.06)}
+.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:20px;font-size:.7rem;font-weight:600;white-space:nowrap}
+.badge-free{background:rgba(0,184,148,.15);color:var(--green)}
+.badge-paid{background:rgba(108,92,231,.15);color:var(--accent2)}
+.badge-freemium{background:rgba(253,203,110,.15);color:var(--yellow)}
+.badge-best{background:rgba(108,92,231,.2);color:var(--accent2);border:1px solid var(--accent)}
+.stars{color:var(--yellow);font-size:.7rem;letter-spacing:1px}
+.price{font-weight:700;color:var(--green);font-size:.9rem}
+.price-note{font-size:.65rem;color:var(--text3);display:block}
+.tag{display:inline-block;padding:.15rem .45rem;background:var(--bg4);border-radius:4px;font-size:.65rem;margin:.1rem;color:var(--text2)}
+.recommend{background:rgba(0,184,148,.08);border-color:rgba(0,184,148,.3)}
+.recommend td:first-child{box-shadow:inset 3px 0 0 var(--green)}
+/* Advisor */
+.advisor-form{display:grid;gap:1rem;max-width:700px}
+.form-group{display:flex;flex-direction:column;gap:.4rem}
+.form-group label{font-size:.8rem;font-weight:600;color:var(--text2)}
+.form-group select,.form-group input{padding:.6rem .8rem;background:var(--bg3);border:1px solid var(--bg4);border-radius:var(--radius-sm);color:var(--text);font-family:inherit;font-size:.85rem;transition:border-color .2s}
+.form-group select:focus,.form-group input:focus{outline:none;border-color:var(--accent)}
+.btn{padding:.7rem 1.5rem;border:none;border-radius:var(--radius-sm);font-family:inherit;font-weight:600;cursor:pointer;transition:all .25s;font-size:.85rem;display:inline-flex;align-items:center;gap:.5rem}
+.btn-primary{background:linear-gradient(135deg,var(--accent),#8b5cf6);color:#fff}
+.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(108,92,231,.4)}
+.btn-secondary{background:var(--bg3);color:var(--text);border:1px solid var(--bg4)}
+.btn-secondary:hover{border-color:var(--accent)}
+.result-card{border-left:3px solid var(--accent);padding:1.25rem;background:var(--bg2);border-radius:0 var(--radius) var(--radius) 0;margin-top:.5rem}
+.result-card h4{font-size:1rem;margin-bottom:.4rem}
+.result-card p{font-size:.85rem;color:var(--text2);line-height:1.6}
+/* Blog */
+.blog{max-width:800px}
+.blog h2{font-size:1.6rem;font-weight:800;margin:2rem 0 .8rem;color:var(--text);scroll-margin-top:80px}
+.blog h3{font-size:1.2rem;font-weight:700;margin:1.5rem 0 .5rem;color:var(--accent2)}
+.blog p{color:var(--text2);margin-bottom:1rem;font-size:.92rem;line-height:1.8}
+.blog ul{color:var(--text2);margin:0 0 1rem 1.5rem;font-size:.9rem}
+.blog li{margin-bottom:.4rem}
+.blog blockquote{border-left:3px solid var(--accent);padding:.8rem 1.2rem;margin:1.2rem 0;background:var(--glass);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;color:var(--text2)}
+.blog .toc{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:1.25rem;margin-bottom:2rem}
+.blog .toc h4{font-size:.9rem;margin-bottom:.6rem;color:var(--accent2)}
+.blog .toc a{display:block;padding:.2rem 0;font-size:.82rem;color:var(--text2)}
+.blog .toc a:hover{color:var(--accent2)}
+.blog .info-box{background:rgba(108,92,231,.08);border:1px solid rgba(108,92,231,.2);border-radius:var(--radius-sm);padding:1rem;margin:1rem 0;font-size:.85rem;color:var(--text2)}
+.blog .source{font-size:.7rem;color:var(--text3);margin-top:.3rem;display:flex;align-items:center;gap:.3rem}
+/* Quiz */
+.quiz-container{max-width:750px}
+.quiz-progress{height:4px;background:var(--bg4);border-radius:2px;margin-bottom:1.5rem;overflow:hidden}
+.quiz-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));border-radius:2px;transition:width .4s ease}
+.quiz-q{font-size:1.1rem;font-weight:700;margin-bottom:1rem}
+.quiz-options{display:grid;gap:.6rem}
+.quiz-opt{padding:.8rem 1rem;background:var(--bg2);border:2px solid var(--bg4);border-radius:var(--radius-sm);cursor:pointer;transition:all .25s;font-size:.85rem;display:flex;align-items:center;gap:.7rem}
+.quiz-opt:hover{border-color:var(--accent);background:rgba(108,92,231,.06)}
+.quiz-opt.selected{border-color:var(--accent);background:rgba(108,92,231,.12)}
+.quiz-opt.correct{border-color:var(--green);background:rgba(0,184,148,.1)}
+.quiz-opt.wrong{border-color:var(--red);background:rgba(225,112,85,.1)}
+.quiz-opt .letter{width:28px;height:28px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;flex-shrink:0}
+.quiz-result{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:2rem;text-align:center}
+.quiz-score{font-size:3rem;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
+/* Charts */
+.chart-container{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:1.25rem;position:relative}
+.chart-container canvas{max-height:350px}
+.chart-title{font-size:.85rem;font-weight:600;margin-bottom:.75rem;color:var(--text2)}
+/* Stats */
+.stat-card{text-align:center;padding:1.5rem;background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius)}
+.stat-num{font-size:2rem;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
+.stat-label{font-size:.75rem;color:var(--text3);margin-top:.3rem}
+/* Datasheet */
+.datasheet{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);overflow:hidden}
+.datasheet-header{padding:1rem 1.25rem;background:var(--bg3);display:flex;align-items:center;gap:.8rem;cursor:pointer;transition:background .2s}
+.datasheet-header:hover{background:var(--bg4)}
+.datasheet-header h3{font-size:1rem;flex:1}
+.datasheet-header .arrow{transition:transform .3s;color:var(--text3)}
+.datasheet-header.open .arrow{transform:rotate(180deg)}
+.datasheet-body{padding:0 1.25rem;max-height:0;overflow:hidden;transition:all .4s ease}
+.datasheet-body.open{max-height:2000px;padding:1.25rem}
+.ds-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--bg4);font-size:.82rem}
+.ds-row:last-child{border:none}
+.ds-label{color:var(--text3)}
+.ds-value{color:var(--text);font-weight:500;text-align:right}
+/* Footer */
+.footer{text-align:center;padding:2rem 1rem;color:var(--text3);font-size:.75rem;border-top:1px solid var(--bg4);margin-top:3rem}
+/* Responsive */
+@media(max-width:768px){
+.nav{gap:.15rem}.nav-btn{padding:.4rem .6rem;font-size:.7rem}
+.main{padding:1rem}
+.hero h1{font-size:1.8rem}
+.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
+table{font-size:.72rem}
+th,td{padding:.5rem .35rem}
+}
+@media(max-width:480px){
+.header-inner{padding:.5rem .75rem}
+.logo{font-size:1rem}
+}
+/* Animations */
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
+@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
+.animate-float{animation:float 3s ease-in-out infinite}
+/* Toast */
+.toast{position:fixed;bottom:2rem;right:2rem;padding:.8rem 1.2rem;background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-size:.82rem;font-weight:500;transform:translateY(100px);opacity:0;transition:all .4s;z-index:9999}
+.toast.show{transform:translateY(0);opacity:1}
+/* Filter pills */
+.filter-pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
+.pill{padding:.35rem .8rem;border:1px solid var(--bg4);border-radius:20px;font-size:.72rem;cursor:pointer;transition:all .2s;color:var(--text2);background:transparent;font-family:inherit}
+.pill:hover,.pill.active{border-color:var(--accent);color:var(--accent2);background:rgba(108,92,231,.1)}
+/* Date stamp */
+.date-stamp{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;color:var(--text3);padding:.2rem .6rem;background:var(--bg3);border-radius:20px}
+</style>
+</head>
+<body>
+<header class="header">
+<div class="header-inner">
+<div style="display:flex;align-items:center;gap:.8rem;flex-wrap:wrap">
+<div class="logo"><i class="fas fa-robot"></i> <span>AI-Berater</span></div>
+<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a>
+</div>
+<nav class="nav">
+<button class="nav-btn active" data-tab="overview"><i class="fas fa-home"></i> Übersicht</button>
+<button class="nav-btn" data-tab="compare"><i class="fas fa-table"></i> Vergleich</button>
+<button class="nav-btn" data-tab="advisor"><i class="fas fa-lightbulb"></i> Berater</button>
+<button class="nav-btn" data-tab="blog"><i class="fas fa-book-open"></i> Blog</button>
+<button class="nav-btn" data-tab="quiz"><i class="fas fa-brain"></i> Quiz</button>
+<button class="nav-btn" data-tab="stats"><i class="fas fa-chart-bar"></i> Statistiken</button>
+</nav>
+</div>
+</header>
+<main class="main">
+<!-- OVERVIEW -->
+<section class="section active" id="overview">
+<div class="hero">
+<div class="hero-badge"><i class="fas fa-calendar-alt"></i> Stand: Juli 2025</div>
+<h1>Dein <span class="grad">AI-Berater</span> für<br>Vibe-Coding & Web-Apps</h1>
+<p>Umfassender Vergleich aller wichtigen AI-Tools für die Webentwicklung – optimiert für ein Budget von max. € 25,00/Monat in Österreich.</p>
+<div style="display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap">
+<button class="btn btn-primary" onclick="switchTab('compare')"><i class="fas fa-table"></i> Vergleich starten</button>
+<button class="btn btn-secondary" onclick="switchTab('advisor')"><i class="fas fa-lightbulb"></i> Beratung erhalten</button>
+</div>
+</div>
+<div class="grid grid-4" style="margin-top:1rem">
+<div class="stat-card"><div class="stat-num">9+</div><div class="stat-label">AI-Tools verglichen</div></div>
+<div class="stat-card"><div class="stat-num">€25</div><div class="stat-label">Max. Monatsbudget</div></div>
+<div class="stat-card"><div class="stat-num">6</div><div class="stat-label">Technologien</div></div>
+<div class="stat-card"><div class="stat-num">2025</div><div class="stat-label">Aktuelle Daten</div></div>
+</div>
+<div style="margin-top:2rem">
+<h2 class="stitle"><i class="fas fa-trophy"></i> Top-Empfehlungen (≤ €25/Monat)</h2>
+<p class="sdesc">Für Vibe-Coding und Web-App-Entwicklung in Österreich</p>
+<div class="grid grid-3">
+<div class="card" style="border-color:rgba(0,184,148,.3);box-shadow:0 0 20px rgba(0,184,148,.08)">
+<div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem">
+<div style="width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#d4a574,#8B6914);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;color:#fff">C</div>
+<div><strong style="font-size:1rem">Claude Pro</strong><br><span class="badge badge-best" style="font-size:.65rem"><i class="fas fa-crown"></i> BESTES GESAMT</span></div>
+</div>
+<p style="font-size:.82rem;color:var(--text2);margin-bottom:.8rem">Hervorragend für Vibe-Coding: Sehr gutes Code-Verständnis, lange Kontextfenster, Artifacts für Live-Vorschau. Ideal für React, HTML/CSS/JS.</p>
+<div style="display:flex;justify-content:space-between;align-items:center">
+<span class="price">€20,00<span class="price-note">/Monat inkl. USt.</span></span>
+<span class="stars">★★★★★</span>
+</div>
+</div>
+<div class="card" style="border-color:rgba(9,132,227,.3)">
+<div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem">
+<div style="width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#10a37f,#1a7f64);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;color:#fff">G</div>
+<div><strong style="font-size:1rem">ChatGPT Plus</strong><br><span class="badge badge-paid" style="font-size:.65rem">ALLROUNDER</span></div>
+</div>
+<p style="font-size:.82rem;color:var(--text2);margin-bottom:.8rem">GPT-4o + Canvas für Code: Breitestes Ökosystem, GPTs, DALL-E, Advanced Data Analysis. Solide für alle Web-Technologien.</p>
+<div style="display:flex;justify-content:space-between;align-items:center">
+<span class="price">€22,47<span class="price-note">/Monat inkl. USt.</span></span>
+<span class="stars">★★★★½</span>
+</div>
+</div>
+<div class="card" style="border-color:rgba(78,205,196,.3)">
+<div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem">
+<div style="width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#4285f4,#34a853);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;color:#fff">G</div>
+<div><strong style="font-size:1rem">Gemini Advanced</strong><br><span class="badge badge-freemium" style="font-size:.65rem">KONTEXT-CHAMP</span></div>
+</div>
+<p style="font-size:.82rem;color:var(--text2);margin-bottom:.8rem">1M Token Kontext: Perfekt für große Codebases. Google One AI Premium inkl. 2TB Speicher. Gute Multimodal-Fähigkeiten.</p>
+<div style="display:flex;justify-content:space-between;align-items:center">
+<span class="price">€21,99<span class="price-note">/Monat inkl. USt.</span></span>
+<span class="stars">★★★★</span>
+</div>
+</div>
+</div>
+</div>
+<div style="margin-top:2rem">
+<h2 class="stitle"><i class="fas fa-coins"></i> Budget-Tipp: Kostenlos & Low-Budget</h2>
+<p class="sdesc">Auch ohne Abo kann man bereits viel erreichen</p>
+<div class="grid grid-3">
+<div class="card card-glass">
+<div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem">
+<i class="fas fa-fire" style="color:var(--green);font-size:1.3rem"></i>
+<strong>DeepSeek V3/R1</strong>
+</div>
+<p style="font-size:.82rem;color:var(--text2);margin-bottom:.5rem">Komplett kostenlos, extrem leistungsstark für Code. Open-Source-Modell, API sehr günstig. Überraschend gut bei Web-Dev-Aufgaben.</p>
+<span class="badge badge-free"><i class="fas fa-gift"></i> 100% Kostenlos</span>
+</div>
+<div class="card card-glass">
+<div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem">
+<i class="fas fa-wind" style="color:var(--blue);font-size:1.3rem"></i>
+<strong>Mistral Le Chat</strong>
+</div>
+<p style="font-size:.82rem;color:var(--text2);margin-bottom:.5rem">Kostenlos nutzbar, gute Code-Fähigkeiten. Europäisches Unternehmen (DSGVO-freundlich). Codestral speziell für Code.</p>
+<span class="badge badge-free"><i class="fas fa-gift"></i> Kostenlos</span>
+</div>
+<div class="card card-glass">
+<div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem">
+<i class="fas fa-face-smile" style="color:var(--yellow);font-size:1.3rem"></i>
+<strong>HuggingFace Chat</strong>
+</div>
+<p style="font-size:.82rem;color:var(--text2);margin-bottom:.5rem">Zugang zu Open-Source-Modellen kostenlos. Pro für €8/Monat mit mehr Features. Ideal zum Experimentieren mit verschiedenen Modellen.</p>
+<span class="badge badge-freemium"><i class="fas fa-star"></i> Freemium ab €8</span>
+</div>
+</div>
+</div>
+</section>
+<!-- COMPARISON TABLE -->
+<section class="section" id="compare">
+<h2 class="stitle"><i class="fas fa-table"></i> Vergleichstabelle – AI-Tools für Vibe-Coding</h2>
+<p class="sdesc">Alle Preise inkl. 20% österreichischer USt., Stand: Juli 2025</p>
+<div class="filter-pills">
+<button class="pill active" data-filter="all">Alle</button>
+<button class="pill" data-filter="free">Kostenlos</button>
+<button class="pill" data-filter="paid">Kostenpflichtig</button>
+<button class="pill" data-filter="under25">Unter €25</button>
+</div>
+<div class="table-wrap">
+<table id="compareTable">
+<thead>
+<tr>
+<th>AI-Tool</th>
+<th>Modell</th>
+<th>Preis/Monat</th>
+<th>Typ</th>
+<th>Kontext</th>
+<th>Code-Qualität</th>
+<th>Vibe-Coding</th>
+<th>Web-Tech</th>
+<th>Bewertung</th>
+<th>Empfehlung</th>
+</tr>
+</thead>
+<tbody id="tableBody"></tbody>
+</table>
+</div>
+<div style="margin-top:1.5rem">
+<h3 class="stitle" style="font-size:1.1rem"><i class="fas fa-info-circle"></i> Detail-Datenblätter</h3>
+<div id="datasheets" style="display:grid;gap:.6rem"></div>
+</div>
+</section>
+<!-- ADVISOR -->
+<section class="section" id="advisor">
+<h2 class="stitle"><i class="fas fa-lightbulb"></i> Persönlicher AI-Berater</h2>
+<p class="sdesc">Beantworte ein paar Fragen und erhalte deine individuelle Empfehlung</p>
+<div class="grid grid-2">
+<div class="card">
+<h3 style="font-size:1rem;margin-bottom:1rem"><i class="fas fa-clipboard-list" style="color:var(--accent)"></i> Dein Profil</h3>
+<form class="advisor-form" id="advisorForm">
+<div class="form-group">
+<label><i class="fas fa-code"></i> Hauptsächliche Technologie?</label>
+<select id="adv-tech">
+<option value="html">HTML / CSS / JS (Vanilla)</option>
+<option value="react">React / Next.js</option>
+<option value="python">Python (Flask/Django/FastAPI)</option>
+<option value="node">Node.js / Express</option>
+<option value="fullstack">Fullstack (Mix)</option>
+</select>
+</div>
+<div class="form-group">
+<label><i class="fas fa-bullseye"></i> Hauptverwendungszweck?</label>
+<select id="adv-purpose">
+<option value="vibecoding">Vibe-Coding (AI-gestützte Entwicklung)</option>
+<option value="learning">Lernen & Experimentieren</option>
+<option value="production">Produktions-Web-Apps</option>
+<option value="prototyping">Schnelle Prototypen</option>
+</select>
+</div>
+<div class="form-group">
+<label><i class="fas fa-wallet"></i> Monatsbudget (€)?</label>
+<select id="adv-budget">
+<option value="0">Kostenlos (€0)</option>
+<option value="10">Bis €10</option>
+<option value="20">Bis €20</option>
+<option value="25" selected>Bis €25</option>
+</select>
+</div>
+<div class="form-group">
+<label><i class="fas fa-shield-alt"></i> Wie wichtig ist Datenschutz (DSGVO)?</label>
+<select id="adv-privacy">
+<option value="low">Nicht so wichtig</option>
+<option value="medium">Eher wichtig</option>
+<option value="high">Sehr wichtig (EU-Server)</option>
+</select>
+</div>
+<div class="form-group">
+<label><i class="fas fa-puzzle-piece"></i> Welche Features brauchst du?</label>
+<div style="display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem">
+<label class="pill" style="cursor:pointer"><input type="checkbox" value="artifacts" style="display:none"> Live-Vorschau</label>
+<label class="pill" style="cursor:pointer"><input type="checkbox" value="canvas" style="display:none"> Canvas/Editor</label>
+<label class="pill" style="cursor:pointer"><input type="checkbox" value="images" style="display:none"> Bildgenerierung</label>
+<label class="pill" style="cursor:pointer"><input type="checkbox" value="api" style="display:none"> API-Zugang</label>
+<label class="pill" style="cursor:pointer"><input type="checkbox" value="longcontext" style="display:none"> Lange Kontexte</label>
+</div>
+</div>
+<div class="form-group">
+<label><i class="fas fa-gauge-high"></i> Erfahrungsniveau?</label>
+<select id="adv-exp">
+<option value="beginner">Anfänger</option>
+<option value="intermediate">Fortgeschritten</option>
+<option value="expert">Experte</option>
+</select>
+</div>
+<button type="button" class="btn btn-primary" onclick="generateAdvice()"><i class="fas fa-magic"></i> Empfehlung generieren</button>
+</form>
+</div>
+<div class="card" id="advisorResult" style="display:flex;flex-direction:column;gap:1rem">
+<div style="text-align:center;padding:3rem 1rem;color:var(--text3)">
+<i class="fas fa-wand-magic-sparkles" style="font-size:3rem;margin-bottom:1rem;display:block;color:var(--accent)"></i>
+<p>Fülle das Formular aus und erhalte deine persönliche AI-Empfehlung</p>
+</div>
+</div>
+</div>
+</section>
+<!-- BLOG -->
+<section class="section" id="blog">
+<div class="blog">
+<div class="date-stamp" style="margin-bottom:1.5rem"><i class="fas fa-calendar"></i> Veröffentlicht: Juli 2025 | Aktualisiert: Juli 2025</div>
+<h1 style="font-size:2rem;font-weight:900;line-height:1.2;margin-bottom:1rem">Vibe-Coding & Generative KI:<br><span style="background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent">Alles was du wissen musst</span></h1>
+<p style="font-size:1rem;color:var(--text);margin-bottom:1.5rem">Ein umfassender Leitfaden über die Revolution der Softwareentwicklung durch generative Künstliche Intelligenz – von den Grundlagen bis zur Praxis.</p>
+<div class="toc">
+<h4><i class="fas fa-list"></i> Inhaltsverzeichnis</h4>
+<a href="#vc1">1. Was ist Vibe-Coding?</a>
+<a href="#vc2">2. Die Geschichte der generativen KI</a>
+<a href="#vc3">3. Wie funktionieren Large Language Models?</a>
+<a href="#vc4">4. Vibe-Coding in der Praxis</a>
+<a href="#vc5">5. Die besten AI-Tools für Web-Entwicklung</a>
+<a href="#vc6">6. Prompt-Engineering für Code</a>
+<a href="#vc7">7. Rechtliche Aspekte & Datenschutz</a>
+<a href="#vc8">8. Die Zukunft von Vibe-Coding</a>
+<a href="#vc9">9. Tipps für Einsteiger</a>
+<a href="#vc10">10. Fazit & Ausblick</a>
+</div>
+<h2 id="vc1">1. Was ist Vibe-Coding?</h2>
+<p><strong>Vibe-Coding</strong> ist ein 2025 geprägter Begriff, der eine neue Art der Softwareentwicklung beschreibt: Statt jede Codezeile manuell zu schreiben, beschreibt Entwickler:innen <strong>in natürlicher Sprache</strong>, was sie bauen möchten – und KI generiert den entsprechenden Code.</p>
+<blockquote>"Vibe-coding is not about writing code. It's about having a conversation with an AI that writes code for you while you focus on the vision." – Andrej Karpathy, 2025</blockquote>
+<p>Der Begriff wurde maßgeblich durch <strong>Andrej Karpathy</strong> (Mitgründer von OpenAI, ehemaliger AI-Direktor bei Tesla) populär. Er beschrieb, dass er mittlerweile ganze Projekte "vibe-coded" – also primär durch Konversation mit AI-Systemen erstellt.</p>
+<h3>Die drei Säulen des Vibe-Coding</h3>
+<ul>
+<li><strong>Natural Language Programming:</strong> Du sprichst oder schreibst, was du willst – die KI setzt es um</li>
+<li><strong>Iterative Verfeinerung:</strong> Du testest, gibst Feedback, und die KI verbessert den Code schrittweise</li>
+<li><strong>Visuelle Validierung:</strong> Tools wie Claude Artifacts oder ChatGPT Canvas zeigen Live-Vorschauen</li>
+</ul>
+<div class="info-box">
+<i class="fas fa-lightbulb" style="color:var(--yellow)"></i> <strong>Praxis-Tipp:</strong> Vibe-Coding ersetzt nicht das Verständnis von Code – es beschleunigt die Umsetzung. Du solltest weiterhin verstehen, was generiert wird, um Fehler zu erkennen und anzupassen.
+</div>
+<h2 id="vc2">2. Die Geschichte der generativen KI</h2>
+<p>Die Entwicklung generativer KI hat in den letzten Jahren eine beispiellose Dynamik erfahren:</p>
+<h3>Meilensteine</h3>
+<ul>
+<li><strong>2017:</strong> Google veröffentlicht das <em>Transformer</em>-Paper ("Attention Is All You Need") – die Grundlage aller modernen LLMs</li>
+<li><strong>2018:</strong> OpenAI veröffentlicht GPT-1, Google BERT</li>
+<li><strong>2020:</strong> GPT-3 mit 175 Milliarden Parametern – erster LLM, der menschenähnlichen Text erzeugt</li>
+<li><strong>2022:</strong> ChatGPT (GPT-3.5) wird zum schnellstwachsenden Consumer-Produkt der Geschichte</li>
+<li><strong>2023:</strong> GPT-4, Claude 1/2, Gemini Ultra – Multimodalität wird Standard</li>
+<li><strong>2024:</strong> Claude 3.5 Sonnet, GPT-4o, Gemini 1.5 Pro – Code-Fähigkeiten erreichen neues Niveau</li>
+<li><strong>2025:</strong> Claude 4, GPT-5, Gemini 2.5 – Vibe-Coding wird zum Mainstream-Paradigma</li>
+</ul>
+<div class="source"><i class="fas fa-link"></i> Quellen: openai.com/research, deepmind.google, anthropic.com/news – Stand Juli 2025</div>
+<h2 id="vc3">3. Wie funktionieren Large Language Models?</h2>
+<p>LLMs wie GPT-4, Claude oder Gemini basieren auf der <strong>Transformer-Architektur</strong>. Hier die wichtigsten Konzepte:</p>
+<h3>Token & Kontextfenster</h3>
+<p>Text wird in <strong>Tokens</strong> zerlegt (ca. 0,75 Wörter pro Token im Englischen). Das <strong>Kontextfenster</strong> bestimmt, wie viel Text das Modell gleichzeitig verarbeiten kann:</p>
+<ul>
+<li>GPT-4o: 128K Tokens (~96.000 Wörter)</li>
+<li>Claude 4: 200K Tokens (~150.000 Wörter)</li>
+<li>Gemini 2.5 Pro: 1M Tokens (~750.000 Wörter)</li>
+<li>DeepSeek V3: 128K Tokens</li>
+</ul>
+<h3>Training & Feintuning</h3>
+<p>LLMs werden in drei Phasen trainiert:</p>
+<ul>
+<li><strong>Pre-Training:</strong> Lernen aus riesigen Textmengen (Internet, Bücher, Code-Repositories)</li>
+<li><strong>Supervised Fine-Tuning (SFT):</strong> Training mit hochwertigen Frage-Antwort-Paaren</li>
+<li><strong>RLHF / Constitutional AI:</strong> Menschliches Feedback verbessert die Qualität und Sicherheit</li>
+</ul>
+<div class="info-box">
+<i class="fas fa-brain" style="color:var(--accent)"></i> <strong>Für Vibe-Coder:</strong> Das Kontextfenster ist entscheidend! Je größer, desto mehr Code kann die KI gleichzeitig verstehen und bearbeiten. Für große Projekte ist Gemini (1M) oder Claude (200K) ideal.
+</div>
+<h2 id="vc4">4. Vibe-Coding in der Praxis</h2>
+<p>Wie funktioniert Vibe-Coding konkret bei der Webentwicklung?</p>
+<h3>Typischer Workflow</h3>
+<ul>
+<li><strong>Schritt 1 – Vision:</strong> Beschreibe deine App-Idee in natürlicher Sprache</li>
+<li><strong>Schritt 2 – Scaffolding:</strong> Die KI generiert die Grundstruktur (HTML, CSS, React-Komponenten)</li>
+<li><strong>Schritt 3 – Iteration:</strong> "Mach die Navigation sticky", "Füge Dark Mode hinzu", "Optimiere für Mobile"</li>
+<li><strong>Schritt 4 – Integration:</strong> API-Anbindungen, Datenbank, Auth – Schritt für Schritt</li>
+<li><strong>Schritt 5 – Deployment:</strong> Die KI hilft bei Vercel, Netlify, oder Docker-Konfiguration</li>
+</ul>
+<h3>Best Practices</h3>
+<ul>
+<li>Immer <strong>klein anfangen</strong> und schrittweise erweitern</li>
+<li><strong>Spezifisch</strong> sein: "Erstelle eine React-Komponente mit Tailwind-CSS, die ein responsives Karten-Layout zeigt" statt "Mach eine Website"</li>
+<li>Fehlermeldungen <strong>komplett</strong> in den Chat kopieren