Spaces:

Selim003
/

anycoder-fa7419ad

Running

App Files Files Community

Selim003 commited on Mar 28

Commit

f480fca

verified ·

1 Parent(s): ae98a5f

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +46 -481

index.html CHANGED Viewed

@@ -1,481 +1,46 @@
-<!DOCTYPE html>
-<html lang="tr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI for Humanity | Yapay Zeka ile İyilik</title>
-    <!-- FontAwesome for Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-color: #0f172a;
-            --card-bg: #1e293b;
-            --primary: #38bdf8;
-            --secondary: #818cf8;
-            --accent: #22d3ee;
-            --text-main: #f1f5f9;
-            --text-muted: #94a3b8;
-            --glass: rgba(30, 41, 59, 0.7);
-            --border: rgba(255, 255, 255, 0.1);
-        }
-        * {
-            box-sizing: margin-box;
-            margin: 0;
-            padding: 0;
-        }
-        body {
-            font-family: 'Inter', sans-serif;
-            background-color: --bg-color;
-            background-image:
-                radial-gradient(at 0% 0%, rgba(56, 189, 248, 0.15) 0px, transparent 50%),
-                radial-gradient(at 100% 0%, rgba(129, 140, 248, 0.15) 0px, transparent 50%),
-                radial-gradient(at 100% 100%, rgba(34, 211, 238, 0.15) 0px, transparent 50%);
-            background-color: var(--bg-color);
-            color: var(--text-main);
-            line-height: 1.6;
-            overflow-x: hidden;
-        }
-        /* --- Header & Nav --- */
-        header {
-            position: fixed;
-            top: 0;
-            width: 100%;
-            padding: 1.5rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            z-index: 100;
-            background: var(--glass);
-            backdrop-filter: blur(12px);
-            border-bottom: 1px solid var(--border);
-        }
-        .brand {
-            font-weight: 800;
-            font-size: 1.2rem;
-            letter-spacing: -0.5px;
-            background: linear-gradient(to right, var(--primary), var(--accent));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        .anycoder-link {
-            font-size: 0.9rem;
-            color: var(--text-muted);
-            text-decoration: none;
-            border: 1px solid var(--border);
-            padding: 0.5rem 1rem;
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        .anycoder-link:hover {
-            color: var(--primary);
-            border-color: var(--primary);
-            box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
-        }
-        /* --- Hero Section --- */
-        .hero {
-            padding: 8rem 2rem 4rem;
-            text-align: center;
-            max-width: 800px;
-            margin: 0 auto;
-        }
-        .hero h1 {
-            font-size: 3.5rem;
-            line-height: 1.1;
-            margin-bottom: 1.5rem;
-            background: linear-gradient(to bottom right, #fff, #94a3b8);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        .hero p {
-            font-size: 1.2rem;
-            color: var(--text-muted);
-            max-width: 600px;
-            margin: 0 auto;
-        }
-        /* --- Grid Layout --- */
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 2rem;
-        }
-        .grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 2rem;
-        }
-        /* --- Cards --- */
-        .card {
-            background: var(--card-bg);
-            border: 1px solid var(--border);
-            border-radius: 16px;
-            padding: 2rem;
-            transition: transform 0.4s ease, box-shadow 0.4s ease;
-            position: relative;
-            overflow: hidden;
-            cursor: pointer;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            height: 320px;
-        }
-        .card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 30px -10px rgba(56, 189, 248, 0.3);
-            border-color: var(--primary);
-        }
-        .card-icon {
-            font-size: 2.5rem;
-            color: var(--primary);
-            margin-bottom: 1rem;
-            transition: transform 0.3s ease;
-        }
-        .card:hover .card-icon {
-            transform: scale(1.1);
-            color: var(--accent);
-        }
-        .card-title {
-            font-size: 1.5rem;
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-        }
-        .card-desc {
-            font-size: 0.95rem;
-            color: var(--text-muted);
-            margin-bottom: 1.5rem;
-        }
-        .card-action {
-            font-size: 0.9rem;
-            font-weight: 600;
-            color: var(--primary);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        /* --- Modal --- */
-        .modal-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(15, 23, 42, 0.9);
-            backdrop-filter: blur(5px);
-            z-index: 1000;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.3s ease;
-        }
-        .modal-overlay.active {
-            opacity: 1;
-            pointer-events: all;
-        }
-        .modal-content {
-            background: var(--card-bg);
-            border: 1px solid var(--border);
-            width: 90%;
-            max-width: 600px;
-            padding: 3rem;
-            border-radius: 20px;
-            transform: scale(0.9);
-            transition: transform 0.3s ease;
-            position: relative;
-            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
-        }
-        .modal-overlay.active .modal-content {
-            transform: scale(1);
-        }
-        .close-btn {
-            position: absolute;
-            top: 1.5rem;
-            right: 1.5rem;
-            background: none;
-            border: none;
-            color: var(--text-muted);
-            font-size: 1.5rem;
-            cursor: pointer;
-            transition: color 0.3s;
-        }
-        .close-btn:hover {
-            color: var(--primary);
-        }
-        .modal-title {
-            font-size: 2rem;
-            margin-bottom: 1rem;
-            color: var(--primary);
-        }
-        .modal-list {
-            list-style: none;
-            margin-top: 2rem;
-        }
-        .modal-list li {
-            padding: 1rem 0;
-            border-bottom: 1px solid var(--border);
-            color: var(--text-muted);
-        }
-        .modal-list li:last-child {
-            border-bottom: none;
-        }
-        .modal-list li strong {
-            color: var(--text-main);
-            display: block;
-            margin-bottom: 0.3rem;
-        }
-        /* --- Footer --- */
-        footer {
-            text-align: center;
-            padding: 4rem 2rem;
-            color: var(--text-muted);
-            font-size: 0.9rem;
-            border-top: 1px solid var(--border);
-            margin-top: 4rem;
-        }
-        /* --- Responsive --- */
-        @media (max-width: 768px) {
-            .hero h1 { font-size: 2.5rem; }
-            .grid { grid-template-columns: 1fr; }
-            header { padding: 1rem; }
-        }
-        /* --- Animations --- */
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .fade-in {
-            animation: fadeIn 0.8s ease forwards;
-        }
-    </style>
-</head>
-<body>
-    <header>
-        <div class="brand">AI for Humanity</div>
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
-    </header>
-    <main>
-        <section class="hero fade-in">
-            <h1>Yapay Zeka ile Dünyayı Nasıl Değiştirebiliriz?</h1>
-            <p>Teknoloji sadece kod değil, insanlığın sorunlarına çözüm üretme aracıdır. Yapay zeka modelleriyle dünyaya katkı sağlayabileceğiniz alanları keşfedin.</p>
-        </section>
-        <div class="container">
-            <div class="grid">
-                <!-- Card 1: Healthcare -->
-                <article class="card" onclick="openModal('health')">
-                    <div>
-                        <i class="fa-solid fa-heart-pulse card-icon"></i>
-                        <h3 class="card-title">Sağlık ve Tıp</h3>
-                        <p class="card-desc">Erken teşhis, ilaç keşfi ve kişisel sağlık takibi için AI modelleri geliştirin.</p>
-                    </div>
-                    <div class="card-action">Projeleri Gör <i class="fa-solid fa-arrow-right"></i></div>
-                </article>
-                <!-- Card 2: Education -->
-                <article class="card" onclick="openModal('education')">
-                    <div>
-                        <i class="fa-solid fa-book-open card-icon"></i>
-                        <h3 class="card-title">Eğitimde Eşitlik</h3>
-                        <p class="card-desc">Kaynakları yetersiz bölgelerdeki öğrencilere yapay zeka destekli kişisel öğretmenlik.</p>
-                    </div>
-                    <div class="card-action">Projeleri Gör <i class="fa-solid fa-arrow-right"></i></div>
-                </article>
-                <!-- Card 3: Environment -->
-                <article class="card" onclick="openModal('environment')">
-                    <div>
-                        <i class="fa-solid fa-earth-americas card-icon"></i>
-                        <h3 class="card-title">Çevre ve İklim</h3>
-                        <p class="card-desc">İklim değişimi analizi, yaban hayatı takibi ve enerji verimliliği optimizasyonu.</p>
-                    </div>
-                    <div class="card-action">Projeleri Gör <i class="fa-solid fa-arrow-right"></i></div>
-                </article>
-                <!-- Card 4: Accessibility -->
-                <article class="card" onclick="openModal('accessibility')">
-                    <div>
-                        <i class="fa-solid fa-universal-access card-icon"></i>
-                        <h3 class="card-title">Erişilebilirlik</h3>
-                        <p class="card-desc">Görme ve işitme bozukluğu olan bireyler için yaşam kalitesini artıran araçlar.</p>
-                    </div>
-                    <div class="card-action">Projeleri Gör <i class="fa-solid fa-arrow-right"></i></div>
-                </article>
-                <!-- Card 5: Disaster Relief -->
-                <article class="card" onclick="openModal('disaster')">
-                    <div>
-                        <i class="fa-solid fa-house-crack card-icon"></i>
-                        <h3 class="card-title">Afet Yönetimi</h3>
-                        <p class="card-desc">Deprem ve yangın gibi felaketlerde hasar tespiti ve kurtarma operasyonları.</p>
-                    </div>
-                    <div class="card-action">Projeleri Gör <i class="fa-solid fa-arrow-right"></i></div>
-                </article>
-                <!-- Card 6: Fake News -->
-                <article class="card" onclick="openModal('truth')">
-                    <div>
-                        <i class="fa-solid fa-shield-halved card-icon"></i>
-                        <h3 class="card-title">Doğruluk ve Güven</h3>
-                        <p class="card-desc">Dezenformasyonu tespit etmek ve toplumsal manipülasyonlara karşı koruma.</p>
-                    </div>
-                    <div class="card-action">Projeleri Gör <i class="fa-solid fa-arrow-right"></i></div>
-                </article>
-            </div>
-        </div>
-    </main>
-    <footer>
-        <p>İyilik yapmak için kod yazın. Gelecek sizin elinizde.</p>
-        <p style="margin-top: 10px; opacity: 0.6;">Designed for Humanity</p>
-    </footer>
-    <!-- Modal Template -->
-    <div class="modal-overlay" id="modalOverlay">
-        <div class="modal-content">
-            <button class="close-btn" onclick="closeModal()"><i class="fa-solid fa-xmark"></i></button>
-            <h2 class="modal-title" id="modalTitle">Başlık</h2>
-            <p style="color: var(--text-muted);" id="modalDesc">Açıklama buraya gelecek.</p>
-            <ul class="modal-list" id="modalList">
-                <!-- JS will populate this -->
-            </ul>
-            <div style="margin-top: 2rem; text-align: right;">
-                <button style="background: var(--primary); color: #000; border: none; padding: 0.8rem 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer;" onclick="closeModal()">Kapat</button>
-            </div>
-        </div>
-    </div>
-    <script>
-        // Data Source
-        const contentData = {
-            'health': {
-                title: 'Sağlık ve Tıp Alanında Yapay Zeka',
-                desc: 'Milyonlar insanın hayatını kurtarabilecek potansiyel. Uzman olmayan doktorların da tanı koyabilmesi için destek sistemleri.',
-                list: [
-                    { strong: 'Derin Öğrenme ile MRI Analizi', text: 'Tümörlerin erken evrede tespit edilmesi için görüntü işleme modelleri.' },
-                    { strong: 'İlaç Keşfi (Drug Discovery)', text: 'Yeni moleküllerin simülasyonu ve test süreçlerinin AI ile hızlandırılması.' },
-                    { strong: 'Genel Sağlık Asistanları', text: 'Köylerdeki sağlıkçılar için semptom analizi yapan chatbotlar.' }
-                ]
-            },
-            'education': {
-                title: 'Eğitimde Yapay Zeka',
-                desc: 'Eğitimde fırsat eşitliği sağlamak. Her çocuğun kendi hızında öğrenmesini sağlamak.',
-                list: [
-                    { strong: 'Kişisel Öğrenme Yolları', text: 'Öğrencinin eksiklerini tespit ederek ona özel ders planı oluşturan sistemler.' },
-                    { strong: 'Dil Öğrenimi', text: 'Konuşma pratiği yapabilen, ücretsiz AI öğretmenler.' },
-                    { strong: 'Otomatik İçerik Üretimi', text: 'Kaynak kitapların yetersiz olduğu bölgeler için ders içerikleri.' }
-                ]
-            },
-            'environment': {
-                title: 'Çevre ve İklim',
-                desc: 'Dünyayı korumak için veri analizi. Doğayı koruyan teknolojiler.',
-                list: [
-                    { strong: 'Yaban Hayatı Takibi', text: 'Kamera görüntülerinden nadir türleri tanıma ve koruma.' },
-                    { strong: 'Enerji Optimizasyonu', text: 'Şehirlerin enerji tüketimini AI ile analiz ederek karbon ayak izini düşürmek.' },
-                    { strong: 'Tarım Verimliliği', text: 'Su ve gübre kullanımını optimize eden AI modelleri.' }
-                ]
-            },
-            'accessibility': {
-                title: 'Erişilebilirlik',
-                desc: 'Dünyayı herkes için yaşanabilir hale getirmek.',
-                list: [
-                    { strong: 'Görme Bozukluğu', text: 'Yazıları sesli okuyan veya nesneleri tanımlayan akıllı gözlük uygulamaları.' },
-                    { strong: 'İşitme Bozukluğu', text: 'Konuşmayı anında metne çeviren gerçekçi çeviri araçları.' },
-                    { strong: 'Nöro Çeşitlilik', text: 'Otizmli bireylere sosyal etkileşim konusunda yardımcı simülasyonlar.' }
-                ]
-            },
-            'disaster': {
-                title: 'Afet Yönetimi',
-                desc: 'Kriz anlarında hayat kurtaran veri analizi.',
-                list: [
-                    { strong: 'Hasar Tespiti', text: 'Deprem sonrası uydu görüntülerinden yıkılan binaları tespit etmek.' },
-                    { strong: 'Yangın Erken Alarmı', text: 'Orman yangınlarını uydu verisiyle erken tespit etmek.' },
-                    { strong: 'Kurtarma Planlaması', text: 'Afet bölgesindeki en hızlı kurtarma yollarını hesaplayan algoritmalar.' }
-                ]
-            },
-            'truth': {
-                title: 'Doğruluk ve Güven',
-                desc: 'Toplumsal barış ve doğru bilgi için mücadele.',
-                list: [
-                    { strong: 'Dezenformasyon Tespiti', text: 'Fake news ve manipülasyon içeriklerini otomatik etiketleme.' },
-                    { strong: 'Hukuk Desteği', text: 'Hukuki süreçlerde dar gelirli vatandaşlara yapay zeka destekli danışmanlık.' },
-                    { strong: 'Güvenli İletişim', text: 'Şifreleme ve güvenlik protokollerini güçlendiren modeller.' }
-                ]
-            }
-        };
-        const modalOverlay = document.getElementById('modalOverlay');
-        const modalTitle = document.getElementById('modalTitle');
-        const modalDesc = document.getElementById('modalDesc');
-        const modalList = document.getElementById('modalList');
-        function openModal(key) {
-            const data = contentData[key];
-            if(!data) return;
-            modalTitle.innerText = data.title;
-            modalDesc.innerText = data.desc;
-            // Clear and populate list
-            modalList.innerHTML = '';
-            data.list.forEach(item => {
-                const li = document.createElement('li');
-                li.innerHTML = `<strong>${item.strong}</strong>${item.text}`;
-                modalList.appendChild(li);
-            });
-            modalOverlay.classList.add('active');
-        }
-        function closeModal() {
-            modalOverlay.classList.remove('active');
-        }
-        // Close modal when clicking outside
-        modalOverlay.addEventListener('click', (e) => {
-            if (e.target === modalOverlay) {
-                closeModal();
-            }
-        });
-    </script>
-</body>
-</html>

+Harika bir soru! Kodun içine ne yaptığını ve nasıl çalıştığını adım adım anlatayım. Bu proje, **"AI for Humanity" (İyilik için Yapay Zeka)** temasına uygun, modern ve etkileşimli bir web arayüzü.
+İşte yaptığım değişikliklerin ve kodun mantığının detayları:
+### 1. Tasarım ve Stil (CSS)
+Kodun en görsel kısmı CSS tarafında. Modern bir "Dark Mode" (Koyu Tema) tasarımı seçtim.
+*   **Renk Paleti (`:root`):**
+    *   `--bg-color`: Koyu lacivert/siyah tonları (#0f172a) kullanarak gözü yormayan, premium bir arka plan oluşturdu.
+    *   `--primary` ve `--accent`: Mavi ve turkuaz tonları (#38bdf8, #22d3ee) kullanarak teknoloji ve yapay zeka hissini verdim.
+*   **Glassmorphism (Cam Efekti):** Header (üst menü) kısmında `backdrop-filter: blur(12px)` kullanarak arka planın bulanık geçmesini sağladım. Bu, modern UI tasarımında çok popülerdir.
+*   **Grid Yapısı:** Kartları yerleştirmek için `display: grid` ve `grid-template-columns: repeat(auto-fit, ...)` kullandım. Bu kod, ekran küçüldüğünde kartların otomatik olarak tek satıra düşmesini, ekran büyüdüğünde yan yana dizilmesini sağlar (Responsive).
+*   **Hover Efektleri:** Kartların üzerine gelince (`:hover`) hafifçe yukarı kalkması (`transform: translateY(-5px)`) ve parlama efekti (`box-shadow`) ile kullanıcıya "buna tıkla" hissi verdim.
+*   **Gradient Text:** Başlıklarda (`h1`) ve marka isminde renk geçişleri (`linear-gradient`) kullanarak metnin sıkıcı düz beyaz olmasını engelledim.
+### 2. HTML Yapısı
+HTML kısmı semantik (anlamsal) etiketlerle temiz bir yapıya sahip:
+*   **Header:** Marka adı ve "Built with anycoder" linki sabit olarak üstte duruyor.
+*   **Hero Section:** Kullanıcıyı karşılayan büyük başlık ve açıklama metni.
+*   **Grid Container:** İçerideki kartların (Card) bulunduğu ana alan.
+*   **Cards (Kartlar):** Her bir kategori (Sağlık, Eğitim vb.) bir `<article>` etiketi içinde. İçinde ikon, başlık, açıklama ve "Projeleri Gör" butonu var.
+*   **Modal (Popup):** Sayfanın en altına gizli bir pencere (`modal-overlay`) koydum. Başlangıçta görünmez (`opacity: 0`), kullanıcı bir kartı tıkladığında açılır.
+### 3. JavaScript Mantığı (İşlevsellik)
+JavaScript kısmı sayfanın "canlı" olmasını sağlar.
+*   **Veri Yapısı (`contentData`):**
+    *   Kodun içinde karmaşık HTML yazmak yerine, verileri bir JavaScript nesnesi (object) içinde sakladım.
+    *   Örneğin: `'health': { title: '...', list: [...] }` şeklinde. Bu, veriyi yönetmek ve değiştirmek çok daha kolaydır.
+*   **Etkileşim (`openModal`):**
+    *   Bir kart tıklandığında `onclick="openModal('health')"` tetiklenir.
+    *   JavaScript, bu anahtarı (`health`) alır, `contentData` içinden ilgili verileri bulur.
+    *   Modal penceresinin başlığını, açıklamasını ve listesini (`ul` içindeki `li`'leri) dinamik olarak doldurur.
+    *   Son olarak `.active` sınıfını ekleyerek pencereyi görünür yapar.
+*   **Kapatma İşlemi:**
+    *   "Kapat" butonu veya pencere dışına tıklayınca `closeModal` çalışır ve pencereyi kapatır.
+### Özetle Ne Oluşturdum?
+Eskiden sadece düz metinler olan bir sayfayı;
+1.  **Görsel olarak zengin** (gradientler, ikonlar, gölgeler),
+2.  **Mobil uyumlu** (telefonda tek sütun, bilgisayarda çok sütun),
+3.  **İçerik yüklü** (JavaScript ile dinamik içerik gösteren)
+bir uygulamaya dönüştürdüm.
+Kullanıcı bir kartı tıkladığında sayfa yenilenmez, sadece ilgili pencere (modal) açılır ve detaylar orada gösterilir. Bu, kullanıcı deneyimi (UX) açısından çok daha hızlı ve modern bir yöntemdir.