Spaces:

Tobs248
/

anycoder-90fcbfbd

Running

File size: 25,001 Bytes

248220c

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Finder - Wo finde ich den erstellten Code?</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #6366f1;
            --primary-dark: #4f46e5;
            --secondary: #ec4899;
            --background: #0f172a;
            --surface: #1e293b;
            --surface-light: #334155;
            --text: #f8fafc;
            --text-muted: #94a3b8;
            --success: #10b981;
            --warning: #f59e0b;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--background);
            color: var(--text);
            min-height: 100vh;
            line-height: 1.6;
        }

        /* Header */
        header {
            background: linear-gradient(135deg, var(--surface) 0%, var(--surface-light) 100%);
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--surface-light);
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(10px);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 1.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .logo i {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .built-with {
            color: var(--text-muted);
            text-decoration: none;
            font-size: 0.875rem;
            transition: color 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .built-with:hover {
            color: var(--primary);
        }

        /* Main Content */
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 3rem 1.5rem;
        }

        /* Hero Section */
        .hero {
            text-align: center;
            margin-bottom: 4rem;
        }

        .hero h1 {
            font-size: clamp(2rem, 5vw, 3.5rem);
            margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--text) 0%, var(--primary) 50%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero p {
            font-size: 1.25rem;
            color: var(--text-muted);
            max-width: 600px;
            margin: 0 auto;
        }

        /* Steps Container */
        .steps-container {
            display: grid;
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .step-card {
            background: var(--surface);
            border-radius: 1rem;
            padding: 2rem;
            border: 1px solid var(--surface-light);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .step-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, var(--primary), var(--secondary));
        }

        .step-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .step-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .step-number {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 700;
            flex-shrink: 0;
        }

        .step-title {
            font-size: 1.5rem;
            font-weight: 600;
        }

        .step-content {
            color: var(--text-muted);
            padding-left: 4rem;
        }

        .step-content ul {
            list-style: none;
            margin-top: 1rem;
        }

        .step-content li {
            padding: 0.5rem 0;
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
        }

        .step-content li i {
            color: var(--success);
            margin-top: 0.25rem;
        }

        /* Code Preview Section */
        .code-preview-section {
            background: var(--surface);
            border-radius: 1rem;
            overflow: hidden;
            border: 1px solid var(--surface-light);
            margin-bottom: 4rem;
        }

        .code-header {
            background: var(--surface-light);
            padding: 1rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .code-tabs {
            display: flex;
            gap: 0.5rem;
        }

        .code-tab {
            padding: 0.5rem 1rem;
            background: transparent;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
            font-size: 0.875rem;
        }

        .code-tab.active {
            background: var(--primary);
            color: var(--text);
        }

        .code-tab:hover:not(.active) {
            background: var(--surface);
        }

        .copy-btn {
            background: var(--primary);
            border: none;
            color: var(--text);
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: background 0.3s ease;
        }

        .copy-btn:hover {
            background: var(--primary-dark);
        }

        .code-body {
            padding: 1.5rem;
            overflow-x: auto;
        }

        .code-body pre {
            margin: 0;
            font-family: 'Fira Code', 'Consolas', monospace;
            font-size: 0.875rem;
            line-height: 1.7;
        }

        .code-body code {
            color: var(--text);
        }

        /* Info Cards Grid */
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-bottom: 4rem;
        }

        .info-card {
            background: var(--surface);
            border-radius: 1rem;
            padding: 1.5rem;
            border: 1px solid var(--surface-light);
            text-align: center;
            transition: transform 0.3s ease;
        }

        .info-card:hover {
            transform: scale(1.02);
        }

        .info-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.5rem;
        }

        .info-card h3 {
            margin-bottom: 0.5rem;
        }

        .info-card p {
            color: var(--text-muted);
            font-size: 0.875rem;
        }

        /* FAQ Section */
        .faq-section {
            margin-bottom: 4rem;
        }

        .faq-section h2 {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 2rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .faq-item {
            background: var(--surface);
            border-radius: 0.75rem;
            margin-bottom: 1rem;
            border: 1px solid var(--surface-light);
            overflow: hidden;
        }

        .faq-question {
            width: 100%;
            padding: 1.25rem 1.5rem;
            background: transparent;
            border: none;
            color: var(--text);
            font-size: 1rem;
            text-align: left;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background 0.3s ease;
        }

        .faq-question:hover {
            background: var(--surface-light);
        }

        .faq-question i {
            transition: transform 0.3s ease;
        }

        .faq-item.active .faq-question i {
            transform: rotate(180deg);
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .faq-item.active .faq-answer {
            max-height: 500px;
        }

        .faq-answer-content {
            padding: 0 1.5rem 1.25rem;
            color: var(--text-muted);
        }

        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border-radius: 1.5rem;
            padding: 3rem 2rem;
            text-align: center;
        }

        .cta-section h2 {
            font-size: 2rem;
            margin-bottom: 1rem;
        }

        .cta-section p {
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--text);
            color: var(--primary-dark);
            padding: 1rem 2rem;
            border-radius: 0.75rem;
            text-decoration: none;
            font-weight: 600;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .cta-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 2rem;
            color: var(--text-muted);
            border-top: 1px solid var(--surface-light);
            margin-top: 4rem;
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-in {
            animation: fadeInUp 0.6s ease forwards;
        }

        /* Toast Notification */
        .toast {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background: var(--success);
            color: var(--text);
            padding: 1rem 1.5rem;
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            transform: translateY(150%);
            transition: transform 0.3s ease;
            z-index: 1000;
        }

        .toast.show {
            transform: translateY(0);
        }

        /* Responsive */
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }

            .step-content {
                padding-left: 0;
            }

            .step-header {
                flex-direction: column;
                text-align: center;
            }

            .code-header {
                flex-direction: column;
                gap: 1rem;
            }

            .cta-section {
                padding: 2rem 1rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">
            <i class="fas fa-code"></i>
            Code Finder
        </div>
        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
            <i class="fas fa-heart"></i>
            Built with anycoder
        </a>
    </header>

    <main>
        <section class="hero animate-in">
            <h1>Wo finde ich den erstellten Code?</h1>
            <p>Eine vollständige Anleitung, wie Sie Ihren generierten Code finden, kopieren und verwenden können.</p>
        </section>

        <section class="steps-container">
            <div class="step-card animate-in">
                <div class="step-header">
                    <div class="step-number">1</div>
                    <h2 class="step-title">Code-Ausgabe im Chat</h2>
                </div>
                <div class="step-content">
                    <p>Nachdem Sie Ihre Anfrage gestellt haben, wird der generierte Code direkt im Chat-Fenster angezeigt.</p>
                    <ul>
                        <li><i class="fas fa-check"></i>Der Code erscheint in einem formatierten Code-Block</li>
                        <li><i class="fas fa-check"></i>Syntax-Highlighting macht den Code leicht lesbar</li>
                        <li><i class="fas fa-check"></i>Sie können den Code direkt markieren und kopieren</li>
                    </ul>
                </div>
            </div>

            <div class="step-card animate-in">
                <div class="step-header">
                    <div class="step-number">2</div>
                    <h2 class="step-title">Kopieren-Button verwenden</h2>
                </div>
                <div class="step-content">
                    <p>Die meisten Code-Blöcke haben einen praktischen "Kopieren"-Button.</p>
                    <ul>
                        <li><i class="fas fa-check"></i>Klicken Sie auf das Kopier-Symbol oben rechts im Code-Block</li>
                        <li><i class="fas fa-check"></i>Der gesamte Code wird in Ihre Zwischenablage kopiert</li>
                        <li><i class="fas fa-check"></i>Fügen Sie ihn mit Strg+V (oder Cmd+V) ein</li>
                    </ul>
                </div>
            </div>

            <div class="step-card animate-in">
                <div class="step-header">
                    <div class="step-number">3</div>
                    <h2 class="step-title">Code speichern</h2>
                </div>
                <div class="step-content">
                    <p>Speichern Sie den kopierten Code in einer Datei mit der richtigen Endung.</p>
                    <ul>
                        <li><i class="fas fa-check"></i>HTML-Code → dateiname.html</li>
                        <li><i class="fas fa-check"></i>CSS-Code → dateiname.css</li>
                        <li><i class="fas fa-check"></i>JavaScript-Code → dateiname.js</li>
                        <li><i class="fas fa-check"></i>Python-Code → dateiname.py</li>
                    </ul>
                </div>
            </div>
        </section>

        <section class="code-preview-section animate-in">
            <div class="code-header">
                <div class="code-tabs">
                    <button class="code-tab active" data-tab="html">HTML</button>
                    <button class="code-tab" data-tab="css">CSS</button>
                    <button class="code-tab" data-tab="js">JavaScript</button>
                </div>
                <button class="copy-btn" id="copyBtn">
                    <i class="fas fa-copy"></i>
                    Kopieren
                </button>
            </div>
            <div class="code-body">
                <pre><code id="codeContent">&lt;!DOCTYPE html&gt;
&lt;html lang="de"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Meine Webseite&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Willkommen!&lt;/h1&gt;
    &lt;p&gt;Dies ist ein Beispiel-Code.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
            </div>
        </section>

        <section class="info-grid">
            <div class="info-card animate-in">
                <div class="info-icon">
                    <i class="fas fa-download"></i>
                </div>
                <h3>Download</h3>
                <p>Laden Sie den Code direkt als Datei herunter, wenn diese Option verfügbar ist.</p>
            </div>
            <div class="info-card animate-in">
                <div class="info-icon">
                    <i class="fas fa-eye"></i>
                </div>
                <h3>Vorschau</h3>
                <p>Nutzen Sie die Live-Vorschau, um das Ergebnis sofort zu sehen.</p>
            </div>
            <div class="info-card animate-in">
                <div class="info-icon">
                    <i class="fas fa-edit"></i>
                </div>
                <h3>Bearbeiten</h3>
                <p>Passen Sie den Code nach Ihren Wünschen in einem Editor an.</p>
            </div>
            <div class="info-card animate-in">
                <div class="info-icon">
                    <i class="fas fa-share-alt"></i>
                </div>
                <h3>Teilen</h3>
                <p>Teilen Sie Ihren Code mit anderen über einen Link.</p>
            </div>
        </section>

        <section class="faq-section">
            <h2>Häufig gestellte Fragen</h2>
            
            <div class="faq-item">
                <button class="faq-question">
                    Kann ich den Code direkt ausführen?
                    <i class="fas fa-chevron-down"></i>
                </button>
                <div class="faq-answer">
                    <div class="faq-answer-content">
                        Ja! HTML-Dateien können Sie direkt im Browser öffnen. Speichern Sie den Code als .html-Datei und doppelklicken Sie darauf, um sie im Browser zu öffnen.
                    </div>
                </div>
            </div>

            <div class="faq-item">
                <button class="faq-question">
                    Was mache ich, wenn der Code nicht funktioniert?
                    <i class="fas fa-chevron-down"></i>
                </button>
                <div class="faq-answer">
                    <div class="faq-answer-content">
                        Überprüfen Sie, ob der gesamte Code kopiert wurde. Manchmal werden Teile abgeschnitten. Sie können auch eine neue Anfrage stellen und um Korrektur bitten.
                    </div>
                </div>
            </div>

            <div class="faq-item">
                <button class="faq-question">
                    Welchen Editor sollte ich verwenden?
                    <i class="fas fa-chevron-down"></i>
                </button>
                <div class="faq-answer">
                    <div class="faq-answer-content">
                        Wir empfehlen Visual Studio Code (kostenlos), Sublime Text oder Notepad++. Diese Editoren bieten Syntax-Highlighting und viele hilfreiche Funktionen für die Programmierung.
                    </div>
                </div>
            </div>

            <div class="faq-item">
                <button class="faq-question">
                    Kann ich den Code kommerziell nutzen?
                    <i class="fas fa-chevron-down"></i>
                </button>
                <div class="faq-answer">
                    <div class="faq-answer-content">
                        Der generierte Code kann in der Regel frei verwendet werden. Beachten Sie jedoch die Nutzungsbedingungen des jeweiligen AI-Services und prüfen Sie eventuelle Lizenzbedingungen.
                    </div>
                </div>
            </div>
        </section>

        <section class="cta-section animate-in">
            <h2>Bereit, Code zu erstellen?</h2>
            <p>Probieren Sie anycoder aus und generieren Sie Ihren eigenen Code in Sekunden!</p>
            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="cta-btn">
                <i class="fas fa-rocket"></i>
                Jetzt starten
            </a>
        </section>
    </main>

    <footer>
        <p>© 2024 Code Finder Guide | <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--primary);">Built with anycoder</a></p>
    </footer>

    <div class="toast" id="toast">
        <i class="fas fa-check-circle"></i>
        Code wurde kopiert!
    </div>

    <script>
        // Code examples for tabs
        const codeExamples = {
            html: `<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Webseite</title>
</head>
<body>
    <h1>Willkommen!</h1>
    <p>Dies ist ein Beispiel-Code.</p>
</body>
</html>`,
            css: `/* Grundlegende Styles */
body {
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}

h1 {
    color: #333;
    text-align: center;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}`,
            js: `// JavaScript Beispiel
document.addEventListener('DOMContentLoaded', function() {
    const button = document.querySelector('#myButton');
    
    button.addEventListener('click', function() {
        alert('Button wurde geklickt!');
    });
    
    console.log('Seite wurde geladen');
});`
        };

        // Tab switching
        const tabs = document.querySelectorAll('.code-tab');
        const codeContent = document.getElementById('codeContent');

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                
                const tabName = tab.dataset.tab;
                codeContent.textContent = codeExamples[tabName];
            });
        });

        // Copy functionality
        const copyBtn = document.getElementById('copyBtn');
        const toast = document.getElementById('toast');

        copyBtn.addEventListener('click', async () => {
            try {
                await navigator.clipboard.writeText(codeContent.textContent);
                showToast();
            } catch (err) {
                // Fallback for older browsers
                const textArea = document.createElement('textarea');
                textArea.value = codeContent.textContent;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                showToast();
            }
        });

        function showToast() {
            toast.classList.add('show');
            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }

        // FAQ accordion
        const faqItems = document.querySelectorAll('.faq-item');

        faqItems.forEach(item => {
            const question = item.querySelector('.faq-question');
            
            question.addEventListener('click', () => {
                const isActive = item.classList.contains('active');
                
                // Close all items
                faqItems.forEach(i => i.classList.remove('active'));
                
                // Open clicked item if it wasn't active
                if (!isActive) {
                    item.classList.add('active');
                }
            });
        });

        // Animate elements on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        document.querySelectorAll('.animate-in').forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(30px)';
            el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            observer.observe(el);
        });
    </script>
</body>
</html>