Upload folder using huggingface_hub

index.html

@@ -1,19 +1,575 @@
-<!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="tr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Merhaba! 👋</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Poppins', sans-serif;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 20px;
+            overflow: hidden;
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+            animation: fadeInDown 0.8s ease-out;
+        }
+
+        .header a {
+            color: white;
+            text-decoration: none;
+            font-size: 14px;
+            opacity: 0.8;
+            transition: opacity 0.3s ease;
+        }
+
+        .header a:hover {
+            opacity: 1;
+        }
+
+        .container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 30px;
+            padding: 50px;
+            max-width: 500px;
+            width: 100%;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+            animation: fadeInUp 0.8s ease-out 0.2s both;
+        }
+
+        .avatar {
+            width: 120px;
+            height: 120px;
+            margin: 0 auto 30px;
+            position: relative;
+            animation: bounce 2s ease-in-out infinite;
+        }
+
+        .avatar::before {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            z-index: -1;
+            top: 5px;
+            left: 5px;
+        }
+
+        .avatar-inner {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 50px;
+        }
+
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 10px;
+            font-size: 28px;
+            font-weight: 600;
+        }
+
+        .subtitle {
+            text-align: center;
+            color: #666;
+            margin-bottom: 30px;
+            font-size: 16px;
+            line-height: 1.6;
+        }
+
+        .response-box {
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            border-radius: 20px;
+            padding: 25px;
+            margin-bottom: 30px;
+            position: relative;
+        }
+
+        .response-box::before {
+            content: '💬';
+            position: absolute;
+            top: -15px;
+            left: 20px;
+            font-size: 24px;
+            background: white;
+            padding: 5px 10px;
+            border-radius: 50%;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        }
+
+        .response-text {
+            color: #444;
+            font-size: 16px;
+            line-height: 1.8;
+        }
+
+        .status-indicator {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            background: #d4edda;
+            color: #155724;
+            padding: 8px 16px;
+            border-radius: 50px;
+            font-size: 14px;
+            margin-bottom: 25px;
+        }
+
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            background: #28a745;
+            border-radius: 50%;
+            animation: pulse 2s ease-in-out infinite;
+        }
+
+        .btn-group {
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .btn {
+            padding: 15px 30px;
+            border: none;
+            border-radius: 50px;
+            font-size: 16px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-family: inherit;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
+        }
+
+        .btn-secondary {
+            background: white;
+            color: #667eea;
+            border: 2px solid #667eea;
+        }
+
+        .btn-secondary:hover {
+            background: #667eea;
+            color: white;
+            transform: translateY(-3px);
+        }
+
+        .floating-shapes {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            overflow: hidden;
+            z-index: -1;
+        }
+
+        .shape {
+            position: absolute;
+            border-radius: 50%;
+            opacity: 0.1;
+            animation: float 20s ease-in-out infinite;
+        }
+
+        .shape:nth-child(1) {
+            width: 300px;
+            height: 300px;
+            background: white;
+            top: -100px;
+            left: -100px;
+            animation-delay: 0s;
+        }
+
+        .shape:nth-child(2) {
+            width: 200px;
+            height: 200px;
+            background: white;
+            bottom: -50px;
+            right: -50px;
+            animation-delay: -5s;
+        }
+
+        .shape:nth-child(3) {
+            width: 150px;
+            height: 150px;
+            background: white;
+            top: 50%;
+            right: 10%;
+            animation-delay: -10s;
+        }
+
+        @keyframes fadeInDown {
+            from {
+                opacity: 0;
+                transform: translateY(-30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        @keyframes bounce {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-15px);
+            }
+        }
+
+        @keyframes pulse {
+            0%, 100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+            50% {
+                opacity: 0.5;
+                transform: scale(1.2);
+            }
+        }
+
+        @keyframes float {
+            0%, 100% {
+                transform: translate(0, 0) rotate(0deg);
+            }
+            25% {
+                transform: translate(20px, -20px) rotate(5deg);
+            }
+            50% {
+                transform: translate(-10px, 10px) rotate(-5deg);
+            }
+            75% {
+                transform: translate(-20px, -10px) rotate(3deg);
+            }
+        }
+
+        .typing-indicator {
+            display: flex;
+            gap: 5px;
+            padding: 10px 0;
+        }
+
+        .typing-indicator span {
+            width: 8px;
+            height: 8px;
+            background: #667eea;
+            border-radius: 50%;
+            animation: typing 1.4s ease-in-out infinite;
+        }
+
+        .typing-indicator span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+
+        .typing-indicator span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+
+        @keyframes typing {
+            0%, 60%, 100% {
+                transform: translateY(0);
+            }
+            30% {
+                transform: translateY(-10px);
+            }
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        .modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+        }
+
+        .modal.active {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .modal-content {
+            background: white;
+            padding: 40px;
+            border-radius: 30px;
+            max-width: 400px;
+            width: 90%;
+            text-align: center;
+            transform: scale(0.8);
+            transition: transform 0.3s ease;
+        }
+
+        .modal.active .modal-content {
+            transform: scale(1);
+        }
+
+        .modal-icon {
+            font-size: 60px;
+            margin-bottom: 20px;
+        }
+
+        .modal h2 {
+            color: #333;
+            margin-bottom: 15px;
+        }
+
+        .modal p {
+            color: #666;
+            margin-bottom: 25px;
+        }
+
+        @media (max-width: 600px) {
+            .container {
+                padding: 30px 20px;
+            }
+
+            h1 {
+                font-size: 24px;
+            }
+
+            .subtitle {
+                font-size: 14px;
+            }
+
+            .btn-group {
+                flex-direction: column;
+            }
+
+            .btn {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="floating-shapes">
+        <div class="shape"></div>
+        <div class="shape"></div>
+        <div class="shape"></div>
+    </div>
+
+    <div class="header">
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
+    </div>
+
+    <div class="container">
+        <div class="avatar">
+            <div class="avatar-inner">😊</div>
+        </div>
+
+        <h1>Merhaba! 👋</h1>
+        
+        <div class="status-indicator">
+            <span class="status-dot"></span>
+            Çevrimiçi ve Hazırım
+        </div>
+
+        <p class="subtitle">
+            Ben geliştirilmiş bir yapay zeka asistanıyım. Size nasıl yardımcı olabilirim?
+        </p>
+
+        <div class="response-box">
+            <p class="response-text" id="responseText">
+                İyiyim, teşekkür ederim! 🌟 Siz nasılsınız? Ben burada her türlü sorunuzda size yardımcı olmak için bekliyorum. HTML, CSS, JavaScript veya başka konularda bir şeyler oluşturmak ister misiniz?
+            </p>
+        </div>
+
+        <div class="btn-group">
+            <button class="btn btn-primary" onclick="showOptions()">
+                💡 Fikirler Göster
+            </button>
+            <button class="btn btn-secondary" onclick="openChat()">
+                💬 Sohbet Başlat
+            </button>
+        </div>
+    </div>
+
+    <!-- Options Modal -->
+    <div class="modal" id="optionsModal">
+        <div class="modal-content">
+            <div class="modal-icon">🎨</div>
+            <h2>Ne Yapmak İstersiniz?</h2>
+            <p>Farklı projeler ve uygulamalar oluşturabiliriz</p>
+            <div class="btn-group" style="flex-direction: column;">
+                <button class="btn btn-primary" onclick="createWebApp()">🌐 Web Sitesi</button>
+                <button class="btn btn-secondary" onclick="createGame()">🎮 Basit Oyun</button>
+                <button class="btn btn-primary" onclick="createTool()">🛠️ Araç Uygulaması</button>
+                <button class="btn btn-secondary" onclick="closeModal()">❌ Kapat</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Chat Modal -->
+    <div class="modal" id="chatModal">
+        <div class="modal-content">
+            <div class="modal-icon">💬</div>
+            <h2>Yakında Geliyor!</h2>
+            <p>Sohbet özelliği şu anda geliştirme aşamasında. Çok yakında burada olacak! 🎉</p>
+            <button class="btn btn-primary" onclick="closeModal()">Tamam 👍</button>
+        </div>
+    </div>
+
+    <script>
+        // Initial greeting animation
+        document.addEventListener('DOMContentLoaded', () => {
+            const responseText = document.getElementById('responseText');
+            responseText.style.opacity = '0';
+            
+            setTimeout(() => {
+                responseText.style.transition = 'opacity 0.5s ease';
+                responseText.style.opacity = '1';
+            }, 1000);
+        });
+
+        // Show options modal
+        function showOptions() {
+            document.getElementById('optionsModal').classList.add('active');
+        }
+
+        // Open chat modal
+        function openChat() {
+            document.getElementById('chatModal').classList.add('active');
+        }
+
+        // Close modal
+        function closeModal() {
+            document.querySelectorAll('.modal').forEach(modal => {
+                modal.classList.remove('active');
+            });
+        }
+
+        // Close modal on backdrop click
+        document.querySelectorAll('.modal').forEach(modal => {
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) {
+                    closeModal();
+                }
+            });
+        });
+
+        // Create different types of projects
+        function createWebApp() {
+            closeModal();
+            alert('🌐 Harika bir web sitesi fikri! \n\nBana ne tür bir web sitesi istediğinizi söyleyin:\n- Kişisel portfolyo\n- Blog sitesi\n- İşletme web sitesi\n- Landing page\n\nVe detayları ile birlikte oluşturayım!');
+        }
+
+        function createGame() {
+            closeModal();
+            alert('🎮 Eğlenceli! 🎮\n\nHangi tür oyun oluşturalım:\n- Hafıza kart oyunu\n- Quiz oyunu\n- Snake oyunu\n- Sayı tahmin oyunu\n\nTercihinizi söyleyin, hemen başlayalım!');
+        }
+
+        function createTool() {
+            closeModal();
+            alert('🛠️ Faydalı bir araç! 🛠️\n\nHangi tür araç uygulaması istersiniz:\n- Hesap makinesi\n- Not alma uygulaması\n- Renk seçici\n- QR kod oluşturucu\n\nDetayları ile birlikte yazın!');
+        }
+
+        // Add some random fun responses on hover
+        const avatar = document.querySelector('.avatar');
+        const emojis = ['😊', '😄', '🙂', '😉', '🤗'];
+        let currentEmoji = 0;
+
+        avatar.addEventListener('mouseenter', () => {
+            currentEmoji = (currentEmoji + 1) % emojis.length;
+            avatar.querySelector('.avatar-inner').textContent = emojis[currentEmoji];
+        });
+
+        // Confetti effect on double click
+        document.addEventListener('dblclick', (e) => {
+            createConfetti(e.clientX, e.clientY);
+        });
+
+        function createConfetti(x, y) {
+            for (let i = 0; i < 20; i++) {
+                const confetti = document.createElement('div');
+                confetti.style.cssText = `
+                    position: fixed;
+                    width: 10px;
+                    height: 10px;
+                    background: ${['#667eea', '#764ba2', '#f093fb', '#f5576c', '#28a745'][Math.floor(Math.random() * 5)]};
+                    border-radius: ${Math.random() > 0.5 ? '50%' : '0'};
+                    pointer-events: none;
+                    left: ${x}px;
+                    top: ${y}px;
+                    animation: confettiFall ${1 + Math.random()}s ease-out forwards;
+                    z-index: 9999;
+                `;
+                document.body.appendChild(confetti);
+
+                setTimeout(() => confetti.remove(), 2000);
+            }
+        }
+
+        // Add confetti animation dynamically
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes confettiFall {
+                0% {
+                    transform: translate(0, 0) rotate(0deg);
+                    opacity: 1;
+                }
+                100% {
+                    transform: translate(${100 - Math.random() * 200}px, ${window.innerHeight}px) rotate(${Math.random() * 720}deg);
+                    opacity: 0;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>