Elara Aydin : modèle HTML de blog personnel

36 Metehan

Ouvrir dans l'éditeur Publiez votre code

Elara Aydin : modèle HTML de blog personnel

Recommandé

4 November 2024

Modèle de barre de navigation HTML CSS

9 September 2024

CodePen - Champ de saisie du numéro de téléphone

30 November 2024

Page de destination – Maquillage

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elara Aydın | Kişisel Blog</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap');

/* Temel Font ve Renkler */
        body {
            font-family: 'Roboto', sans-serif;
            color: #333333;
            background-color: #F8F5F2;
        }

.heading-font {
            font-family: 'Merriweather', serif;
        }

/* Sayfa Bölümleri */
        .page-section {
            display: none; /* Sayfaları başlangıçta gizle */
        }
        .page-section.active {
            display: block; /* Aktif sayfayı göster */
        }
        
        /* Header ve Navigasyon stilleri */
        .nav-link {
            position: relative;
            transition: color 0.3s ease;
            cursor: pointer;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #D9886A;
            transition: width 0.4s ease;
        }
        .nav-link:hover, .nav-link.active {
            color: #D9886A;
        }
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }

.mobile-nav-link {
            display: block;
            padding: 12px 24px;
            font-size: 1rem;
            color: #333;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
        }
        .mobile-nav-link:hover {
            background-color: #f8f5f2;
        }
        .mobile-nav-link.active {
            color: #D9886A;
            font-weight: bold;
        }

/* Hamburger Menü stilleri */
        .hamburger-line {
            width: 24px;
            height: 2px;
            background-color: #333;
            transition: all 0.3s ease-in-out;
        }
        #menu-toggle.active .hamburger-line:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
        }
        #menu-toggle.active .hamburger-line:nth-child(2) {
            opacity: 0;
        }
        #menu-toggle.active .hamburger-line:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
        }

/* Genel Kart Efektleri */
        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.12);
        }

/* İletişim Sayfası Sosyal Medya İkonları */
        .social-icon {
            display: inline-block;
            font-size: 28px;
            color: #4a5568; /* gray-700 */
            transition: color 0.3s ease, transform 0.3s ease;
        }
        .social-icon:hover {
            color: #D9886A;
            transform: translateY(-3px);
        }

/* Chatbox stilleri */
        #chatbox-container {
            position: fixed;
            bottom: 25px;
            right: 25px;
            z-index: 1000;
        }
        #chatbox-toggle {
            width: 60px;
            height: 60px;
            background-color: #D9886A;
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            transition: transform 0.2s ease;
        }
        #chatbox-toggle:hover {
            transform: scale(1.1);
        }
        #chatbox {
            width: 350px;
            height: 450px;
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.25);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        #chatbox-header {
            background-color: #D9886A;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #chatbox-close {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
        }
        #chatbox-body {
            flex-grow: 1;
            padding: 15px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .chat-message {
            padding: 10px 15px;
            border-radius: 20px;
            max-width: 80%;
        }
        .user-message {
            background-color: #D9886A;
            color: white;
            align-self: flex-end;
            border-bottom-right-radius: 5px;
        }
        .bot-message {
            background-color: #f1f1f1;
            color: #333;
            align-self: flex-start;
            border-bottom-left-radius: 5px;
        }
        .bot-message a {
            color: #D9886A;
            text-decoration: underline;
        }
        #chatbox-footer {
            padding: 10px;
            border-top: 1px solid #e0e0e0;
            display: flex;
        }
        #chatbox-input {
            flex-grow: 1;
            border: 1px solid #ddd;
            border-radius: 20px;
            padding: 8px 15px;
            outline: none;
        }
        #chatbox-send {
            background: none;
            border: none;
            color: #D9886A;
            font-size: 20px;
            margin-left: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body class="antialiased">

<header class="bg-white/80 backdrop-blur-sm fixed top-0 left-0 w-full shadow-md z-50">
        <div class="container mx-auto px-6 py-4 flex justify-between items-center">
            <a data-page="anasayfa" class="nav-link text-2xl heading-font text-[#D9886A]">Elara Aydın</a>
            <nav id="desktop-nav" class="hidden md:flex items-center space-x-8">
                <a data-page="anasayfa" class="nav-link">Anasayfa</a>
                <a data-page="hakkinda" class="nav-link">Hakkımda</a>
                <a data-page="yazilar" class="nav-link">Yazılar</a>
                <a data-page="galeri" class="nav-link">Galeri</a>
                <a data-page="iletisim" class="nav-link">İletişim</a>
            </nav>
            <button id="menu-toggle" class="md:hidden z-50">
                <div class="space-y-1.5">
                    <div class="hamburger-line"></div>
                    <div class="hamburger-line"></div>
                    <div class="hamburger-line"></div>
                </div>
            </button>
        </div>
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <a data-page="anasayfa" class="mobile-nav-link">Anasayfa</a>
            <a data-page="hakkinda" class="mobile-nav-link">Hakkımda</a>
            <a data-page="yazilar" class="mobile-nav-link">Yazılar</a>
            <a data-page="galeri" class="mobile-nav-link">Galeri</a>
            <a data-page="iletisim" class="mobile-nav-link">İletişim</a>
        </div>
    </header>

<main class="pt-20">
        <section id="anasayfa" class="page-section">
            <div class="container mx-auto px-6 py-16 text-center">
                <h1 class="heading-font text-5xl md:text-6xl font-bold mb-4">Fikrin Sanata Dönüştüğü Yer</h1>
                <p class="text-gray-600 max-w-3xl mx-auto text-lg">
                    Merhaba! Ben Elara. Dijital dünyada kodlar, pikseller ve kelimelerle hikayeler anlatan bir tasarımcı ve geliştiriciyim. Yaratıcılığın sınırlarını zorladığım bu dijital günlüğüme hoş geldiniz.
                </p>
                <a data-page="yazilar" class="nav-link bg-[#D9886A] text-white px-8 py-3 rounded-full font-bold mt-8 inline-block hover:bg-[#c97b5f] transition-colors shadow-lg">Keşfetmeye Başla</a>
            </div>
            <div class="container mx-auto px-6 pb-20 grid md:grid-cols-3 gap-10">
                <div class="bg-white p-8 rounded-lg shadow-lg text-center card-hover">
                    <i class="fas fa-user-circle text-4xl text-[#D9886A] mb-4"></i>
                    <h2 class="heading-font text-2xl font-bold mb-3">Ben Kimim?</h2>
                    <p class="text-gray-600 mb-6">Yaratıcı bir zihnin ardındaki hikayeyi, yolculuğumu ve tutkularımı öğrenin.</p>
                    <a data-page="hakkinda" class="nav-link font-bold text-[#D9886A]">Daha Fazla →</a>
                </div>
                <div class="bg-white p-8 rounded-lg shadow-lg text-center card-hover">
                    <i class="fas fa-feather-alt text-4xl text-[#D9886A] mb-4"></i>
                    <h2 class="heading-font text-2xl font-bold mb-3">Yazılar & Projeler</h2>
                    <p class="text-gray-600 mb-6">Teknoloji, tasarım ve hayata dair makalelerimi ve tamamladığım projeleri inceleyin.</p>
                    <a data-page="yazilar" class="nav-link font-bold text-[#D9886A]">Daha Fazla →</a>
                </div>
                <div class="bg-white p-8 rounded-lg shadow-lg text-center card-hover">
                    <i class="fas fa-palette text-4xl text-[#D9886A] mb-4"></i>
                    <h2 class="heading-font text-2xl font-bold mb-3">İlham Galerisi</h2>
                    <p class="text-gray-600 mb-6">Bana ilham veren anları ve görselleri bir araya getirdiğim koleksiyonuma göz atın.</p>
                    <a data-page="galeri" class="nav-link font-bold text-[#D9886A]">Daha Fazla →</a>
                </div>
            </div>
        </section>

<section id="hakkinda" class="page-section">
            <div class="container mx-auto px-6 py-16">
                <div class="bg-white p-8 md:p-12 rounded-lg shadow-xl max-w-4xl mx-auto">
                    <div class="grid md:grid-cols-3 gap-12 items-center">
                        <div class="md:col-span-1">
                            <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=1888&auto=format&fit=crop" alt="Elara Aydın" class="rounded-full w-48 h-48 md:w-full md:h-auto mx-auto object-cover shadow-lg border-4 border-white">
                        </div>
                        <div class="md:col-span-2 text-center md:text-left">
                            <h1 class="heading-font text-4xl font-bold mb-2">Ben Elara Aydın.</h1>
                            <p class="text-xl text-gray-600">Bir Hayalperest, Tasarımcı ve Geliştirici.</p>
                        </div>
                    </div>
                    <div class="border-t my-8"></div>
                    <div>
                        <h2 class="heading-font text-2xl font-bold mb-4">Benim Hikayem</h2>
                        <p class="text-gray-700 leading-relaxed mb-4">
                            Ege'nin küçük bir sahil kasabasında, yıldızların denize en yakın olduğu yerde doğdum. Çocukluğum, babamın marangoz atölyesinde ahşabın kokusu ve annemin çizdiği desenlerin büyüsüyle geçti. O zamanlar farkında değildim ama yaratıcılık, DNA'ma işlenmişti. Bilgisayarla ilk tanışmam, tüm dünyamı değiştirdi. O siyah ekranda yanıp sönen imleç, benim için sonsuz bir tuvaldi. Kod yazmayı kendi kendime öğrendim; `<html>` etiketleriyle basit sayfalar yapmak, benim için en büyük oyundu.
                        </p>
                        <p class="text-gray-700 leading-relaxed mb-4">
                            Üniversitede Grafik Tasarım okurken, kodlama bilgimi sanatsal vizyonumla birleştirmeye karar verdim. Benim için tasarım sadece estetik değil, aynı zamanda bir iletişim biçimiydi. Kullanıcıların dijital dünyada kaybolmadan, keyifle gezinebilecekleri deneyimler yaratmak en büyük tutkum haline geldi. Mezuniyet sonrası freelance olarak çalışmaya başladım. Küçük startup'lardan büyük kurumsal firmalara kadar birçok farklı projede yer aldım. Her proje, bana yeni bir şey öğretti ve beni daha iyi bir problem çözücü yaptı.
                        </p>
                         <h2 class="heading-font text-2xl font-bold mb-4 mt-8">Felsefem</h2>
                        <p class="text-gray-700 leading-relaxed">
                            "İyi tasarım, görünmez olandır." felsefesine inanıyorum. Bir web sitesi ya da uygulama o kadar sezgisel olmalı ki, kullanıcı teknolojiyi değil, sadece hedefini düşünmeli. Bu blog, benim hem profesyonel yolculuğumun bir kaydı hem de ilham kaynaklarımı, denemelerimi ve hatta başarısızlıklarımı paylaştığım kişisel bir alan. Çünkü inanıyorum ki, en iyi dersler hatalardan çıkarılır. Gelin, bu yaratıcılık yolculuğunda birlikte öğrenelim ve üretelim.
                        </p>
                    </div>
                </div>
            </div>
        </section>

<section id="yazilar" class="page-section">
            <div class="container mx-auto px-6 py-16">
                <h1 class="heading-font text-4xl font-bold text-center mb-12">Projeler, Makaleler ve Yorumlar</h1>
                <div id="articles">
                    <h2 class="heading-font text-3xl font-bold mb-8">Son Yazılarım</h2>
                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                        <article class="bg-white rounded-lg overflow-hidden shadow-md card-hover">
                            <img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?q=80&w=2070&auto=format&fit=crop" alt="Proje">
                            <div class="p-6">
                                <h3 class="heading-font text-xl font-bold mb-3">Proje: Minimalist E-Ticaret Arayüzü</h3>
                                <p class="text-gray-600 mb-4">Kullanıcı deneyimini ön planda tutarak geliştirdiğim modern ve temiz e-ticaret sitesi tasarımı.</p>
                                <a href="#" class="font-medium text-[#D9886A] hover:text-[#c97b5f]">İncele →</a>
                            </div>
                        </article>
                        <article class="bg-white rounded-lg overflow-hidden shadow-md card-hover">
                            <img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=2070&auto=format&fit=crop" alt="Makale">
                            <div class="p-6">
                                <h3 class="heading-font text-xl font-bold mb-3">Makale: Mobil Öncelikli Tasarım Neden Önemli?</h3>
                                <p class="text-gray-600 mb-4">Günümüz dijital dünyasında neden "Mobile-First" yaklaşımını benimsememiz gerektiğini anlatıyorum.</p>
                                 <a href="#" class="font-medium text-[#D9886A] hover:text-[#c97b5f]">Oku →</a>
                            </div>
                        </article>
                        <article class="bg-white rounded-lg overflow-hidden shadow-md card-hover">
                            <img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=1974&auto=format&fit=crop" alt="İpucu">
                            <div class="p-6">
                                <h3 class="heading-font text-xl font-bold mb-3">İpucu: Freelancer Olarak Zaman Yönetimi</h3>
                                <p class="text-gray-600 mb-4">Evden çalışırken verimliliği artırmak için kullandığım kişisel zaman yönetimi stratejileri.</p>
                                 <a href="#" class="font-medium text-[#D9886A] hover:text-[#c97b5f]">Öğren →</a>
                            </div>
                        </article>
                    </div>
                </div>
                <div class="border-t my-16"></div>
                <div class="grid md:grid-cols-2 gap-16">
                    <section id="testimonials">
                        <h2 class="heading-font text-3xl font-bold mb-8">Kullanıcı Yorumları</h2>
                        <div class="space-y-6">
                            <div class="bg-white p-6 rounded-lg shadow-sm">
                                <p class="text-gray-700 italic">"Elara, projemize sadece bir tasarımcı olarak değil, bir vizyoner olarak yaklaştı. Sonuç beklentilerimizin çok ötesinde oldu!"</p>
                                <p class="text-right font-bold text-gray-800 mt-3">- Ahmet Yılmaz, Startup Kurucusu</p>
                            </div>
                            <div class="bg-white p-6 rounded-lg shadow-sm">
                                <p class="text-gray-700 italic">"Teknik bilgisi ve yaratıcı bakış açısının birleşimi inanılmaz. Çalıştığım en iyi geliştiricilerden biri."</p>
                                <p class="text-right font-bold text-gray-800 mt-3">- Zeynep Kaya, Proje Yöneticisi</p>
                            </div>
                        </div>
                    </section>
                    <section id="poll">
                        <h2 class="heading-font text-3xl font-bold mb-8">Sizce Sırada Ne Olmalı?</h2>
                        <div class="bg-white p-8 rounded-lg shadow-md">
                            <p class="mb-6 text-gray-700">Bir sonraki blog yazımın konusu hakkında fikirlerinizi merak ediyorum:</p>
                            <form id="poll-form">
                                <div class="space-y-4">
                                    <label class="flex items-center"><input type="radio" name="poll" class="form-radio text-[#D9886A]"><span class="ml-3">Web Animasyonları (CSS/JS)</span></label>
                                    <label class="flex items-center"><input type="radio" name="poll" class="form-radio text-[#D9886A]"><span class="ml-3">Kullanıcı Deneyimi (UX) Temelleri</span></label>
                                    <label class="flex items-center"><input type="radio" name="poll" class="form-radio text-[#D9886A]"><span class="ml-3">SEO Dostu İçerik Nasıl Oluşturulur?</span></label>
                                </div>
                                <button type="submit" class="bg-[#D9886A] text-white w-full py-2 rounded-lg font-bold mt-8 hover:bg-[#c97b5f] transition-colors">Oy Ver</button>
                            </form>
                        </div>
                    </section>
                </div>
            </div>
        </section>

<section id="galeri" class="page-section">
            <div class="container mx-auto px-6 py-16">
                <div class="text-center mb-12">
                    <h1 class="heading-font text-4xl font-bold">İlham Anları</h1>
                    <p class="text-gray-600 max-w-2xl mx-auto mt-2">Yaratıcılığı tetikleyen, bana ilham veren ve projelerime yön veren anlardan kareler.</p>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    <div class="overflow-hidden rounded-lg shadow-lg card-hover"><img src="https://images.unsplash.com/photo-1496171367470-9ed9a91ea931?q=80&w=2070" class="w-full h-full object-cover" alt="Galeri"></div>
                    <div class="overflow-hidden rounded-lg shadow-lg card-hover"><img src="https://images.unsplash.com/photo-1531297484001-80022131f5a1?q=80&w=2020" class="w-full h-full object-cover" alt="Galeri"></div>
                    <div class="overflow-hidden rounded-lg shadow-lg card-hover"><img src="https://images.unsplash.com/photo-1484417894907-623942c8ee29?q=80&w=1932" class="w-full h-full object-cover" alt="Galeri"></div>
                    <div class="overflow-hidden rounded-lg shadow-lg card-hover"><img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?q=80&w=2070" class="w-full h-full object-cover" alt="Galeri"></div>
                    <div class="overflow-hidden rounded-lg shadow-lg card-hover"><img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?q=80&w=2072" class="w-full h-full object-cover" alt="Galeri"></div>
                    <div class="overflow-hidden rounded-lg shadow-lg card-hover"><img src="https://images.unsplash.com/photo-1587620962725-abab7fe55159?q=80&w=1931" class="w-full h-full object-cover" alt="Galeri"></div>
                    <div class="overflow-hidden rounded-lg shadow-lg card-hover"><img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2070" class="w-full h-full object-cover" alt="Galeri"></div>
                    <div class="overflow-hidden rounded-lg shadow-lg card-hover"><img src="https://images.unsplash.com/photo-1522204523234-8729aa6e3d5f?q=80&w=2070" class="w-full h-full object-cover" alt="Galeri"></div>
                </div>
            </div>
        </section>

<section id="iletisim" class="page-section">
            <div class="container mx-auto px-6 py-16">
                <div class="text-center mb-12">
                    <h1 class="heading-font text-4xl font-bold">Bağlantı Kuralım</h1>
                    <p class="text-gray-600 max-w-2xl mx-auto mt-2">Bir proje fikriniz mi var veya sadece merhaba mı demek istiyorsunuz? Bana ulaşmaktan çekinmeyin.</p>
                </div>
                <div class="grid md:grid-cols-2 gap-12 max-w-6xl mx-auto">
                    <div class="bg-white p-8 rounded-lg shadow-lg">
                        <h2 class="heading-font text-2xl font-bold mb-6">İletişim Bilgileri</h2>
                        <div class="space-y-6">
                            <div class="flex items-center"><i class="fas fa-map-marker-alt text-2xl text-[#D9886A] w-8"></i><span class="ml-4 text-gray-700">Karaköy, İstanbul, Türkiye</span></div>
                            <div class="flex items-center"><i class="fas fa-phone text-2xl text-[#D9886A] w-8"></i><span class="ml-4 text-gray-700">+90 555 123 45 67</span></div>
                            <div class="flex items-center"><i class="fas fa-envelope text-2xl text-[#D9886A] w-8"></i><a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=ornek@eposta.com&su=Websitenizden_Ulaşıyorum&body=Merhaba%20Elara," target="_blank" class="ml-4 text-gray-700 hover:text-[#D9886A] transition-colors">ornek@eposta.com</a></div>
                        </div>
                        <div class="border-t my-8"></div>
                        <h2 class="heading-font text-2xl font-bold mb-6">Sosyal Medya</h2>
                        <div class="flex space-x-6">
                            <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
                            <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#" class="social-icon"><i class="fab fa-github"></i></a>
                        </div>
                    </div>
                    <div>
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12042.825221041002!2d28.974899587158204!3d41.02054170000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cab9e7a777a83f%3A0x42f74d2091a35564!2sKarak%C3%B6y%2C%20Beyo%C4%9Flu%2F%C4%B0stanbul!5e0!3m2!1str!2str!4v1719225797371!5m2!1str!2str" width="100%" height="100%" style="border:0; min-height: 400px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="rounded-lg shadow-lg"></iframe>
                    </div>
                </div>
            </div>
        </section>
    </main>

<div id="chatbox-container">
        <div id="chatbox-toggle"><i class="fas fa-comment-dots"></i></div>
        <div id="chatbox" class="hidden">
            <div id="chatbox-header">
                <p class="font-bold text-white">Yardımcı Asistan</p><button id="chatbox-close">×</button>
            </div>
            <div id="chatbox-body"></div>
            <div id="chatbox-footer">
                <input type="text" id="chatbox-input" placeholder="Bir soru sorun..."><button id="chatbox-send"><i class="fas fa-paper-plane"></i></button>
            </div>
        </div>
    </div>
    
    <footer class="bg-gray-800 text-white p-6 text-center">
        <p>© 2025 Elara Aydın. Tüm hakları saklıdır.</p>
    </footer>

// Sayfa Değiştirme Fonksiyonu
            function switchPage(pageId) {
                // Tüm sayfaları gizle
                pageSections.forEach(section => {
                    section.classList.remove('active');
                });

// İstenen sayfayı göster
                const targetPage = document.getElementById(pageId);
                if (targetPage) {
                    targetPage.classList.add('active');
                }

// Aktif linki güncelle
                allNavLinks.forEach(link => {
                    link.classList.remove('active');
                    if (link.dataset.page === pageId) {
                        link.classList.add('active');
                    }
                });
                
                // Mobil menüyü kapat
                mobileMenu.classList.add('hidden');
                menuToggle.classList.remove('active');
                
                // Sayfanın başına git
                window.scrollTo(0, 0);
            }

// Navigasyon linklerine tıklama olayı ekle
            allNavLinks.forEach(link => {
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    const pageId = link.dataset.page;
                    switchPage(pageId);
                });
            });

// Mobil Menü Toggle
            menuToggle.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
                menuToggle.classList.toggle('active');
            });

// Anket Formu
            const pollForm = document.getElementById('poll-form');
            if (pollForm) {
                pollForm.addEventListener('submit', (e) => {
                    e.preventDefault();
                    alert('Oyunuz için teşekkür ederiz!');
                    pollForm.reset();
                });
            }

// Başlangıçta anasayfayı göster
            switchPage('anasayfa');

// --- CHATBOX ASİSTANI ---
            const toggleButton = document.getElementById('chatbox-toggle');
            const chatbox = document.getElementById('chatbox');
            const closeButton = document.getElementById('chatbox-close');
            const chatBody = document.getElementById('chatbox-body');
            const chatInput = document.getElementById('chatbox-input');
            const sendButton = document.getElementById('chatbox-send');

let chatInitiated = false;

toggleButton.addEventListener('click', () => {
                chatbox.classList.remove('hidden');
                toggleButton.classList.add('hidden');
                if (!chatInitiated) {
                    addBotMessage("Merhaba! Ben Elara'nın dijital asistanıyım. Size nasıl yardımcı olabilirim?");
                    chatInitiated = true;
                }
            });

closeButton.addEventListener('click', () => {
                chatbox.classList.add('hidden');
                toggleButton.classList.remove('hidden');
            });

sendButton.addEventListener('click', handleUserInput);
            chatInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') { handleUserInput(); }
            });
            
            function handleUserInput() {
                const userText = chatInput.value.trim();
                if (userText === '') return;
                addUserMessage(userText);
                chatInput.value = '';
                setTimeout(() => { generateBotResponse(userText); }, 1000);
            }

function addUserMessage(message) {
                const msg = `<div class="chat-message user-message">${message}</div>`;
                chatBody.innerHTML += msg;
                chatBody.scrollTop = chatBody.scrollHeight;
            }

function addBotMessage(message) {
                const msg = `<div class="chat-message bot-message">${message}</div>`;
                chatBody.innerHTML += msg;
                chatBody.scrollTop = chatBody.scrollHeight;
            }
            
            function generateBotResponse(userInput) {
                const lcInput = userInput.toLowerCase();
                let response;

if (lcInput.includes('merhaba') || lcInput.includes('selam')) {
                    response = "Merhaba! Size nasıl yardımcı olabilirim?";
                } else if (lcInput.includes('hakkında') || lcInput.includes('kimsin')) {
                    response = "Elara Aydın, teknoloji ve sanatı birleştiren bir tasarımcı ve geliştiricidir. Daha fazla bilgi için <a href='#' data-page='hakkinda' class='nav-link'>Hakkımda</a> sayfasını ziyaret edebilirsiniz.";
                } else if (lcInput.includes('proje') || lcInput.includes('yazı')) {
                    response = "Elara'nın projelerini ve makalelerini <a href='#' data-page='yazilar' class='nav-link'>Yazılar</a> sayfasında bulabilirsiniz.";
                } else if (lcInput.includes('iletişim') || lcInput.includes('adres') || lcInput.includes('telefon')) {
                    response = "İletişim bilgilerine, sosyal medya hesaplarına ve harita konumuna <a href='#' data-page='iletisim' class='nav-link'>İletişim</a> sayfasından ulaşabilirsiniz.";
                } else if (lcInput.includes('galeri')) {
                    response = "Elara'nın ilham kaynaklarını görmek isterseniz <a href='#' data-page='galeri' class='nav-link'>Galeri</a> bölümüne göz atın!";
                } else if (lcInput.includes('nasılsın')) {
                    response = "Ben bir kod yığınıyım ama yardımcı olabildiğim için mutluyum! Sizin için ne yapabilirim?";
                } else {
                     response = "Üzgünüm, bu soruyu anlayamadım. 'Hakkında', 'projeler' veya 'iletişim' gibi anahtar kelimelerle tekrar deneyebilirsiniz.";
                }
                
                addBotMessage(response);
                
                // Chatbot içindeki linklerin sayfa değiştirme özelliğini aktif et
                const botLinks = chatBody.querySelectorAll('.bot-message a');
                botLinks.forEach(link => {
                    if(link.dataset.page) {
                        link.addEventListener('click', (e) => {
                             e.preventDefault();
                             switchPage(link.dataset.page);
                        });
                    }
                });
            }
        });
    </script>
</body>
</html>

Recommandé

Modèle de barre de navigation HTML CSS

CodePen - Champ de saisie du numéro de téléphone

Page de destination – Maquillage

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS