Architektur-Designstudio | ZEICHNEN

Im Editor öffnen Veröffentlichen Sie Ihren Code

24 June 2025

HTML-Vorlage für Digitalagenturen | Tailwind CSS

15 September 2024

CodePen – Blumen zeichnen mit Greensock

HTML

<!DOCTYPE html>
<html lang="tr" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DRAW - Mimarlık & Tasarım Stüdyosu</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
        /* Özel Stiller ve Font Tanımlamaları */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #111111;
            color: #E0E0E0;
        }
        h1, h2, h3, h4, h5, h6, .font-serif {
            font-family: 'Playfair Display', serif;
        }
        .hero-bg {
            background-image: linear-gradient(rgba(17, 17, 17, 0.8), rgba(17, 17, 17, 0.8)), url('https://images.unsplash.com/photo-1604014237800-1c9102c219da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }
        .nav-link {
            position: relative;
            transition: color 0.3s;
            color: #A0A0A0;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #E6C081; /* Daha yumuşak altın rengi */
            transition: width 0.3s ease-in-out;
        }
        .nav-link:hover, .nav-link.active {
            color: #FFFFFF;
        }
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }
        .gold-accent {
            color: #E6C081;
        }
        .btn-gold {
            background-color: #E6C081;
            color: #111111;
            transition: all 0.3s ease;
        }
        .btn-gold:hover {
            background-color: #FFFFFF;
            color: #111111;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(230, 192, 129, 0.2);
        }
        .section-bg-darker { background-color: #0A0A0A; }
        .section-bg { background-color: #111111; }
        .section-bg-lighter { background-color: #1A1A1A; }
        
        .project-card {
            position: relative;
            overflow: hidden;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .project-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }
        .project-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
            color: white;
            padding: 2rem;
            transform: translateY(101%);
            transition: transform 0.4s ease-in-out;
        }
        .project-card:hover .project-overlay {
            transform: translateY(0);
        }

.scroll-animation {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .scroll-animation.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        .chatbot-modal {
            transform: scale(0.95); opacity: 0;
            transition: transform 0.3s ease, opacity 0.3s ease;
            pointer-events: none;
        }
        .chatbot-modal.active {
            transform: scale(1); opacity: 1;
            pointer-events: all;
        }
        .user-message { background-color: #E6C081; color: #111; align-self: flex-end; }
        .bot-message { background-color: #2D2D2D; color: #E0E0E0; align-self: flex-start; }
    </style>
</head>
<body class="antialiased">

<header id="header" class="bg-black bg-opacity-70 backdrop-blur-md shadow-lg sticky top-0 z-50">
        <div class="container mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <a href="#" class="flex items-center">
                    <img src="https://i.ibb.co/9v0d0bH/the-draw-logo.png" alt="DRAW Logo" class="h-10 md:h-12">
                </a>
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#hero" class="nav-link font-medium active">Ana Sayfa</a>
                    <a href="#services" class="nav-link font-medium">Hizmetler</a>
                    <a href="#projects" class="nav-link font-medium">Projeler</a>
                    <a href="#about" class="nav-link font-medium">Stüdyo</a>
                    <a href="#contact" class="nav-link font-medium">İletişim</a>
                </nav>
                <div class="md:hidden">
                    <button id="mobile-menu-button" class="text-white focus:outline-none"><i class="fas fa-bars fa-lg"></i></button>
                </div>
            </div>
        </div>
        <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-95">
            <a href="#hero" class="block py-3 px-6 text-gray-300 hover:bg-gray-800">Ana Sayfa</a>
            <a href="#services" class="block py-3 px-6 text-gray-300 hover:bg-gray-800">Hizmetler</a>
            <a href="#projects" class="block py-3 px-6 text-gray-300 hover:bg-gray-800">Projeler</a>
            <a href="#about" class="block py-3 px-6 text-gray-300 hover:bg-gray-800">Stüdyo</a>
            <a href="#contact" class="block py-3 px-6 text-gray-300 hover:bg-gray-800">İletişim</a>
        </div>
    </header>

<main>
        
        <section id="hero" class="hero-bg h-screen flex items-center justify-center text-white">
            <div class="text-center p-8">
                <h1 class="text-5xl md:text-7xl lg:text-8xl font-bold mb-6 font-serif">Mekanın Şiirsel Yorumu</h1>
                <p class="text-lg md:text-xl mb-10 max-w-3xl mx-auto text-gray-200">Mimariyi, sanat ve mühendisliğin kesişim noktasında yeniden tanımlıyoruz.</p>
                <button id="open-chatbot" class="btn-gold font-bold py-4 px-12 rounded-sm text-lg uppercase tracking-wider">Proje Başlat</button>
            </div>
        </section>

<section id="services" class="py-24 section-bg-lighter">
            <div class="container mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-4xl md:text-5xl font-bold font-serif">Kabiliyetlerimiz</h2>
                    <p class="text-gray-400 mt-4 text-lg">Konseptten teslime, vizyonunuzu gerçeğe dönüştürüyoruz.</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                    
                    <div class="bg-gray-900 p-8 rounded-md text-center scroll-animation transition-all duration-300 hover:bg-gray-800 hover:-translate-y-2">
                        <div class="text-5xl gold-accent mb-5"><i class="fas fa-drafting-compass"></i></div>
                        <h3 class="text-2xl font-bold mb-3 font-serif">Mimari Tasarım</h3>
                        <p class="text-gray-400">İkonik ve işlevsel yapılar için özgün konseptler.</p>
                    </div>
                     <div class="bg-gray-900 p-8 rounded-md text-center scroll-animation transition-all duration-300 hover:bg-gray-800 hover:-translate-y-2" style="transition-delay: 100ms;">
                        <div class="text-5xl gold-accent mb-5"><i class="fas fa-couch"></i></div>
                        <h3 class="text-2xl font-bold mb-3 font-serif">İç Mekan Tasarımı</h3>
                        <p class="text-gray-400">Yaşam alanlarınıza kimlik ve ruh katan detaylar.</p>
                    </div>
                     <div class="bg-gray-900 p-8 rounded-md text-center scroll-animation transition-all duration-300 hover:bg-gray-800 hover:-translate-y-2" style="transition-delay: 200ms;">
                        <div class="text-5xl gold-accent mb-5"><i class="fas fa-city"></i></div>
                        <h3 class="text-2xl font-bold mb-3 font-serif">Kentsel Planlama</h3>
                        <p class="text-gray-400">Geleceğin şehirleri için sürdürülebilir master planlar.</p>
                    </div>
                     <div class="bg-gray-900 p-8 rounded-md text-center scroll-animation transition-all duration-300 hover:bg-gray-800 hover:-translate-y-2" style="transition-delay: 300ms;">
                        <div class="text-5xl gold-accent mb-5"><i class="fas fa-tools"></i></div>
                        <h3 class="text-2xl font-bold mb-3 font-serif">Proje Yönetimi</h3>
                        <p class="text-gray-400">Fikirden anahtar teslimine kadar titiz bir yönetim.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="projects" class="py-24 section-bg">
            <div class="container mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-4xl md:text-5xl font-bold font-serif">Seçilmiş İşler</h2>
                    <p class="text-gray-400 mt-4 text-lg">İmzamızı taşıyan, dikkat çeken projelerimiz.</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    
                    <div class="project-card h-96 scroll-animation">
                        <div class="h-full w-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')">
                            <div class="project-overlay">
                                <h3 class="text-3xl font-bold mb-2 font-serif">Kıyı Villası</h3>
                                <p class="mb-4 text-gray-300">Marmaris, Türkiye</p>
                                <a href="#" class="font-semibold tracking-wider uppercase text-sm gold-accent hover:underline">Projeyi Keşfet →</a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="project-card h-96 scroll-animation" style="transition-delay: 200ms;">
                         <div class="h-full w-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2053&q=80')">
                             <div class="project-overlay">
                                <h3 class="text-3xl font-bold mb-2 font-serif">Galata Sanat Merkezi</h3>
                                <p class="mb-4 text-gray-300">İstanbul, Türkiye</p>
                                <a href="#" class="font-semibold tracking-wider uppercase text-sm gold-accent hover:underline">Projeyi Keşfet →</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        
        <section id="about" class="py-24 section-bg-lighter">
            <div class="container mx-auto px-6">
                <div class="grid lg:grid-cols-2 gap-12 items-center">
                    <div class="scroll-animation">
                        <h2 class="text-4xl md:text-5xl font-bold font-serif mb-6">Tasarım Felsefemiz</h2>
                        <p class="text-gray-400 mb-6 text-lg leading-relaxed">DRAW, 2010 yılında kurulmuş, disiplinler arası çalışan bir mimarlık stüdyosudur. Biz, her projenin kendi hikayesini anlatması gerektiğine inanırız. Yaklaşımımız; bağlamı anlamak, malzeme ile deneyler yapmak ve insan deneyimini zenginleştirmek üzerine kuruludur.</p>
                        <a href="#" class="inline-block border-b-2 border-amber-400 pb-1 font-semibold text-amber-400 hover:text-white transition">Yaklaşımımız Hakkında Daha Fazla Bilgi Edinin</a>
                    </div>
                    <div class="grid grid-cols-2 gap-6 scroll-animation" style="transition-delay: 200ms;">
                        <div class="bg-gray-800 p-8 text-center rounded">
                            <h3 class="text-4xl lg:text-5xl font-bold gold-accent">14+</h3>
                            <p class="text-gray-400 mt-2">Yıllık Tecrübe</p>
                        </div>
                        <div class="bg-gray-800 p-8 text-center rounded">
                            <h3 class="text-4xl lg:text-5xl font-bold gold-accent">80+</h3>
                            <p class="text-gray-400 mt-2">Tamamlanan Proje</p>
                        </div>
                         <div class="bg-gray-800 p-8 text-center rounded">
                            <h3 class="text-4xl lg:text-5xl font-bold gold-accent">12</h3>
                            <p class="text-gray-400 mt-2">Uluslararası Ödül</p>
                        </div>
                         <div class="bg-gray-800 p-8 text-center rounded">
                            <h3 class="text-4xl lg:text-5xl font-bold gold-accent">25+</h3>
                            <p class="text-gray-400 mt-2">Tutkulu Ekip Üyesi</p>
                        </div>
                    </div>
                </div>
                 
                <div class="mt-24 scroll-animation">
                     <div class="aspect-w-16 aspect-h-9 rounded-lg shadow-2xl overflow-hidden">
                        <iframe src="https://www.youtube.com/embed/haCN6Fc5Qtw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen class="w-full h-full"></iframe>
                    </div>
                </div>
            </div>
        </section>

<section id="testimonials" class="py-24 section-bg">
            <div class="container mx-auto px-6">
                <div class="text-center mb-16">
                     <h2 class="text-4xl md:text-5xl font-bold font-serif">Müşteri Deneyimleri</h2>
                     <p class="text-gray-400 mt-4 text-lg">İş ortaklarımızın bizim hakkımızdaki düşünceleri.</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="bg-gray-800 p-8 rounded scroll-animation">
                        <p class="text-gray-300 italic mb-6 text-lg">"DRAW ekibi, vizyonumuzu anlamakla kalmadı, onu aştı. Süreç boyunca gösterdikleri profesyonellik ve yaratıcılık olağanüstüydü."</p>
                        <div class="flex items-center">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full mr-4 border-2 border-amber-400">
                            <div>
                                <h4 class="font-bold text-white">Ahmet Yılmaz</h4>
                                <p class="text-sm text-gray-400">Yılmaz Holding CEO</p>
                            </div>
                        </div>
                    </div>
                     <div class="bg-gray-800 p-8 rounded scroll-animation" style="transition-delay: 200ms;">
                        <p class="text-gray-300 italic mb-6 text-lg">"Sürdürülebilir mimari konusundaki uzmanlıkları, projemize hem çevresel hem de ekonomik olarak büyük değer kattı. Kesinlikle tekrar çalışacağız."</p>
                        <div class="flex items-center">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-12 h-12 rounded-full mr-4 border-2 border-amber-400">
                            <div>
                                <h4 class="font-bold text-white">Elif Kaya</h4>
                                <p class="text-sm text-gray-400">EkoTurizm A.Ş. Kurucusu</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="contact" class="py-24 section-bg-lighter">
            <div class="container mx-auto px-6">
                 <div class="text-center mb-16">
                    <h2 class="text-4xl md:text-5xl font-bold font-serif">Bir Sohbet Başlatalım</h2>
                    <p class="text-gray-400 mt-4 text-lg">Projenizi hayata geçirmek için buradayız.</p>
                </div>
                <div class="max-w-3xl mx-auto bg-gray-900 p-8 md:p-12 rounded-lg shadow-2xl scroll-animation">
                   
                   <form action="#" method="POST">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <input type="text" placeholder="Adınız Soyadınız" class="w-full p-4 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-white">
                            <input type="email" placeholder="E-posta Adresiniz" class="w-full p-4 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-white">
                        </div>
                        <div class="mb-6">
                            <input type="text" placeholder="Konu" class="w-full p-4 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-white">
                        </div>
                        <div class="mb-6">
                            <input placeholder="Projenizden bahsedin..." rows="6" class="w-full p-4 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-white"/>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn-gold font-bold py-3 px-10 rounded-sm text-lg uppercase tracking-wider">Mesajı Gönder</button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </main>
    
    
    <footer class="section-bg py-16">
        <div class="container mx-auto px-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12 text-gray-400">
                 <div class="mb-6 lg:mb-0 col-span-1 md:col-span-2 lg:col-span-1">
                    <a href="#" class="flex items-center mb-4">
                        <img src="https://i.ibb.co/9v0d0bH/the-draw-logo.png" alt="DRAW Logo" class="h-12">
                    </a>
                    <p class="text-sm mt-4">Mekanın şiirsel yorumu.</p>
                </div>
                <div>
                    <h4 class="text-lg font-semibold text-white mb-4">Keşfet</h4>
                    <ul class="space-y-2">
                        <li><a href="#services" class="hover:text-amber-400 transition">Hizmetler</a></li>
                        <li><a href="#projects" class="hover:text-amber-400 transition">Projeler</a></li>
                        <li><a href="#about" class="hover:text-amber-400 transition">Stüdyo</a></li>
                    </ul>
                </div>
                 <div>
                    <h4 class="text-lg font-semibold text-white mb-4">İletişim</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start"><i class="fas fa-map-marker-alt mt-1 mr-3 w-4"></i><span>Maslak, İstanbul</span></li>
                        <li class="flex items-center"><i class="fas fa-phone-alt mr-3 w-4"></i><span>+90 212 555 1234</span></li>
                        <li class="flex items-center"><i class="fas fa-envelope mr-3 w-4"></i><span>iletisim@draw.com</span></li>
                    </ul>
                </div>
                 <div>
                    <h4 class="text-lg font-semibold text-white mb-4">Takip Edin</h4>
                    <div class="flex space-x-5 text-xl">
                        <a href="#" class="hover:text-amber-400 transition"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="hover:text-amber-400 transition"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="hover:text-amber-400 transition"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="hover:text-amber-400 transition"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-10 pt-8 text-center text-gray-500 text-sm">
                <p>© 2024 DRAW Mimarlık Stüdyosu. Tüm Hakları Saklıdır.</p>
            </div>
        </div>
    </footer>

<div id="chatbot-modal" class="chatbot-modal fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex items-end justify-center sm:items-center p-4 z-[100]">
        <div class="bg-gray-900 w-full max-w-lg h-[85vh] max-h-[700px] rounded-t-lg sm:rounded-lg shadow-2xl flex flex-col border border-gray-700">
            <div class="bg-gray-800 p-4 flex justify-between items-center rounded-t-lg border-b border-gray-700">
                <h3 class="text-lg font-bold text-white font-serif">DRAW Asistan</h3>
                <button id="close-chatbot" class="text-gray-400 hover:text-white text-2xl">×</button>
            </div>
            <div id="chat-window" class="flex-1 p-4 overflow-y-auto flex flex-col space-y-4">
                
            </div>
            <div class="p-4 bg-gray-800 rounded-b-lg border-t border-gray-700">
                <div class="flex">
                    <input type="text" id="chat-input" placeholder="Bir soru sorun..." class="w-full p-3 bg-gray-700 border border-gray-600 rounded-l-md focus:outline-none focus:ring-2 focus:ring-amber-500 text-white">
                    <button id="chat-send" class="bg-amber-500 text-black px-5 rounded-r-md font-bold hover:bg-amber-400"><i class="fas fa-paper-plane"></i></button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
       // Script remains the same as previous version
       document.addEventListener('DOMContentLoaded', () => {
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenuButton.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
            document.querySelectorAll('#mobile-menu a').forEach(link => {
                link.addEventListener('click', () => {
                    mobileMenu.classList.add('hidden');
                });
            });

const qaPairs = {
                "merhaba": "Merhaba! DRAW Mimarlık asistanına hoş geldiniz. Size nasıl yardımcı olabilirim?",
                "selam": "Merhaba! DRAW Mimarlık asistanına hoş geldiniz. Size nasıl yardımcı olabilirim?",
                "hizmetler": "Mimari tasarım, iç mimari, kentsel planlama ve proje yönetimi gibi geniş bir yelpazede hizmet sunuyoruz. Detaylı bilgi 'Kabiliyetlerimiz' bölümümüzde mevcuttur.",
                "hizmetleriniz nelerdir": "Mimari tasarım, iç mimari, kentsel planlama ve proje yönetimi gibi geniş bir yelpazede hizmet sunuyoruz. Detaylı bilgi 'Kabiliyetlerimiz' bölümümüzde mevcuttur.",
                "fiyat": "Her proje kendine özgüdür. Projenizin detaylarını (türü, büyüklüğü, konumu vb.) paylaşırsanız size özel bir teklif hazırlayabiliriz. İletişim formumuzu doldurabilir veya telefonla bize ulaşabilirsiniz.",
                "teklif": "Her proje kendine özgüdür. Projenizin detaylarını (türü, büyüklüğü, konumu vb.) paylaşırsanız size özel bir teklif hazırlayabiliriz. İletişim formumuzu doldurabilir veya telefonla bize ulaşabilirsiniz.",
                "neredesiniz": "Stüdyomuz Maslak, İstanbul'da bulunmaktadır. Detaylı adres ve harita için 'İletişim' bölümümüze göz atabilirsiniz.",
                "adres": "Stüdyomuz Maslak, İstanbul'da bulunmaktadır. Detaylı adres ve harita için 'İletişim' bölümümüze göz atabilirsiniz.",
                "projeler": "Elbette! Web sitemizin 'Seçilmiş İşler' bölümünde öne çıkan çalışmalarımızı inceleyebilirsiniz.",
                "teşekkürler": "Rica ederim! Başka bir sorunuz var mı?",
                "görüşürüz": "İyi günler dileriz!"
            };

const addMessage = (message, sender) => {
                const messageDiv = document.createElement('div');
                messageDiv.className = `p-3 rounded-lg max-w-[80%] ${sender === 'user' ? 'user-message' : 'bot-message'}`;
                messageDiv.textContent = message;
                chatWindow.appendChild(messageDiv);
                chatWindow.scrollTop = chatWindow.scrollHeight;
            };

const getBotResponse = (userInput) => {
                userInput = userInput.toLowerCase().trim();
                let bestMatch = null;
                let maxMatch = 0;

for (const key in qaPairs) {
                    if (userInput.includes(key) && key.length > maxMatch) {
                       maxMatch = key.length;
                       bestMatch = qaPairs[key];
                    }
                }
                return bestMatch || "Üzgünüm, sorunuzu anlayamadım. Lütfen farklı bir şekilde sormayı deneyin veya iletişim formumuzu kullanın.";
            };

const handleSend = () => {
                const userInput = chatInput.value;
                if (userInput.trim() === '') return;
                addMessage(userInput, 'user');
                chatInput.value = '';
                setTimeout(() => {
                    const botResponse = getBotResponse(userInput);
                    addMessage(botResponse, 'bot');
                }, 600);
            };

chatSendBtn.addEventListener('click', handleSend);
            chatInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') handleSend(); });
            openChatbotBtn.addEventListener('click', () => chatbotModal.classList.add('active'));
            closeChatbotBtn.addEventListener('click', () => chatbotModal.classList.remove('active'));

addMessage("Merhaba! Ben DRAW Asistan. Projeleriniz hakkında bilgi almak veya hizmetlerimizi sormak için buradayım.", 'bot');
       });
    </script>
</body>
</html>

HTML-Vorlage für Digitalagenturen | Tailwind CSS

CodePen – Blumen zeichnen mit Greensock

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS