WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
A Code by Metehan
1306
Metehan
Open In Editor
Publish Your Code
13 October 2025
HTML Snake Game Code Example
4 December 2024
Snake
HTML
Copy
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SolarTrack - Güneş Enerjisi Takip ve Optimizasyon</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="styles.css"> </head> <body class="bg-solar-light text-solar-dark font-sans"> <!-- Navigation --> <nav class="gradient-bg text-white p-4 sticky top-0 z-50"> <div class="container mx-auto flex justify-between items-center"> <div class="flex items-center space-x-2"> <i class="fas fa-solar-panel text-2xl text-solar-accent"></i> <span class="text-xl font-bold">SolarTrack</span> </div> <div class="hidden md:flex space-x-6"> <a href="#dashboard" class="hover:text-solar-accent transition">Gösterge Paneli</a> <a href="#analysis" class="hover:text-solar-accent transition">Analiz</a> <a href="#financial" class="hover:text-solar-accent transition">Finansal</a> <a href="#community" class="hover:text-solar-accent transition">Topluluk</a> <a href="#simulator" class="hover:text-solar-accent transition">Simülatör</a> </div> <div class="flex items-center space-x-4"> <button id="theme-toggle" class="p-2 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30"> <i class="fas fa-moon"></i> </button> <button class="bg-solar-accent hover:bg-yellow-600 text-white px-4 py-2 rounded-full font-medium transition"> Giriş Yap </button> </div> <button class="md:hidden text-xl" id="mobile-menu-button"> <i class="fas fa-bars"></i> </button> </div> </nav> <!-- Mobile Menu --> <div id="mobile-menu" class="hidden bg-solar-dark text-white p-4"> <div class="container mx-auto space-y-2"> <a href="#dashboard" class="block py-2 hover:text-solar-accent transition">Gösterge Paneli</a> <a href="#analysis" class="block py-2 hover:text-solar-accent transition">Analiz</a> <a href="#financial" class="block py-2 hover:text-solar-accent transition">Finansal</a> <a href="#community" class="block py-2 hover:text-solar-accent transition">Topluluk</a> <a href="#simulator" class="block py-2 hover:text-solar-accent transition">Simülatör</a> </div> </div> <!-- Hero Section --> <section class="gradient-bg text-white py-16"> <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-8 md:mb-0"> <h1 class="text-4xl md:text-5xl font-bold mb-4">Güneş Enerjinizin Tam Potansiyelini Açığa Çıkarın</h1> <p class="text-xl mb-6 opacity-90">SolarTrack ile güneş enerjisi sisteminizi izleyin, optimize edin ve tasarrufunuzu maksimize edin.</p> <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> <button class="bg-white text-solar-primary hover:bg-gray-100 px-6 py-3 rounded-full font-bold transition"> Ücretsiz Dene <i class="fas fa-arrow-right ml-2"></i> </button> <button class="border-2 border-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-full font-medium transition"> <i class="fas fa-play-circle mr-2"></i> Tanıtım Videosu </button> </div> </div> <div class="md:w-1/2 relative"> <div class="bg-white bg-opacity-20 rounded-3xl p-6 solar-shadow backdrop-blur-sm"> <div class="flex justify-between items-center mb-4"> <div> <p class="text-sm opacity-80">Bugünkü Üretim</p> <p class="text-2xl font-bold">24.5 kWh</p> </div> <div class="sun-animation"> <i class="fas fa-sun text-4xl text-solar-accent"></i> </div> </div> <div class="chart-container bg-white bg-opacity-20 rounded-xl p-2 mb-4"> <!-- Chart placeholder --> <div class="h-full flex items-end space-x-1"> <div class="w-1/12 h-20 bg-solar-accent rounded-t"></div> <div class="w-1/12 h-32 bg-solar-accent rounded-t"></div> <div class="w-1/12 h-40 bg-solar-primary rounded-t" style="height: 56%;"></div> <div class="w-1/12 h-48 bg-solar-primary rounded-t" style="height: 60%;"></div> <div class="w-1/12 h-56 bg-solar-primary rounded-t" style="height: 35%;"></div> <div class="w-1/12 h-64 bg-solar-primary rounded-t" style="height: 43%;"></div> <div class="w-1/12 h-72 bg-solar-primary rounded-t" style="height: 54%;"></div> <div class="w-1/12 h-64 bg-solar-primary rounded-t" style="height: 74%;"></div> <div class="w-1/12 h-48 bg-solar-secondary rounded-t"></div> <div class="w-1/12 h-32 bg-solar-secondary rounded-t"></div> <div class="w-1/12 h-24 bg-solar-secondary rounded-t"></div> <div class="w-1/12 h-16 bg-solar-accent rounded-t"></div> </div> </div> <div class="grid grid-cols-3 gap-4 text-center"> <div class="bg-white bg-opacity-10 p-2 rounded-lg"> <p class="text-sm opacity-80">Tasarruf</p> <p class="font-bold">₺18.50</p> </div> <div class="bg-white bg-opacity-10 p-2 rounded-lg"> <p class="text-sm opacity-80">CO₂ Azaltımı</p> <p class="font-bold">12.4 kg</p> </div> <div class="bg-white bg-opacity-10 p-2 rounded-lg"> <p class="text-sm opacity-80">Verimlilik</p> <p class="font-bold">92%</p> </div> </div> </div> <div class="absolute -bottom-6 -right-6 bg-solar-accent p-3 rounded-full"> <i class="fas fa-bolt text-white text-xl"></i> </div> </div> </div> </section> <!-- Dashboard Section --> <section id="dashboard" class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12">Gerçek Zamanlı İzleme Paneli</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> <div class="bg-solar-light p-6 rounded-xl solar-shadow"> <div class="flex justify-between items-start"> <div> <p class="text-sm text-gray-500">Anlık Üretim</p> <p class="text-2xl font-bold">3.2 kW</p> </div> <div class="bg-solar-primary bg-opacity-10 p-2 rounded-full"> <i class="fas fa-solar-panel text-solar-primary"></i> </div> </div> <div class="mt-4 h-2 bg-gray-200 rounded-full"> <div class="h-2 bg-solar-primary rounded-full" style="width: 75%"></div> </div> <p class="text-xs text-gray-500 mt-1">Kapasitenin %75'i</p> </div> <div class="bg-solar-light p-6 rounded-xl solar-shadow"> <div class="flex justify-between items-start"> <div> <p class="text-sm text-gray-500">Bugünkü Tüketim</p> <p class="text-2xl font-bold">15.8 kWh</p> </div> <div class="bg-solar-secondary bg-opacity-10 p-2 rounded-full"> <i class="fas fa-home text-solar-secondary"></i> </div> </div> <div class="mt-4 flex items-center"> <div class="w-3/4"> <div class="h-2 bg-gray-200 rounded-full"> <div class="h-2 bg-solar-secondary rounded-full" style="width: 60%"></div> </div> </div> <div class="w-1/4 text-right"> <p class="text-xs text-gray-500">%60 kendi üretimin</p> </div> </div> </div> <div class="bg-solar-light p-6 rounded-xl solar-shadow"> <div class="flex justify-between items-start"> <div> <p class="text-sm text-gray-500">Şebekeye Satış</p> <p class="text-2xl font-bold">8.7 kWh</p> </div> <div class="bg-solar-accent bg-opacity-10 p-2 rounded-full"> <i class="fas fa-plug text-solar-accent"></i> </div> </div> <div class="mt-4 flex items-center"> <div class="w-3/4"> <div class="h-2 bg-gray-200 rounded-full"> <div class="h-2 bg-solar-accent rounded-full" style="width: 35%"></div> </div> </div> <div class="w-1/4 text-right"> <p class="text-xs text-gray-500">₺4.20 kazanç</p> </div> </div> </div> <div class="bg-solar-light p-6 rounded-xl solar-shadow"> <div class="flex justify-between items-start"> <div> <p class="text-sm text-gray-500">Hava Durumu</p> <p class="text-2xl font-bold">Açık</p> </div> <div class="bg-blue-100 p-2 rounded-full"> <i class="fas fa-sun text-yellow-500"></i> </div> </div> <div class="mt-4 flex justify-between text-sm"> <div> <p class="text-gray-500">Tahmini Üretim</p> <p class="font-medium">26.3 kWh</p> </div> <div> <p class="text-gray-500">Sıcaklık</p> <p class="font-medium">24°C</p> </div> </div> </div> </div> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="lg:col-span-2 bg-solar-light p-6 rounded-xl solar-shadow"> <div class="flex justify-between items-center mb-4"> <h3 class="text-lg font-bold">Enerji Üretim ve Tüketim Grafiği</h3> <div class="flex space-x-2"> <button class="px-3 py-1 bg-solar-primary text-white rounded-full text-sm">Günlük</button> <button class="px-3 py-1 bg-gray-200 rounded-full text-sm">Haftalık</button> <button class="px-3 py-1 bg-gray-200 rounded-full text-sm">Aylık</button> </div> </div> <div class="chart-container"> <!-- Complex chart placeholder --> <div class="h-full flex flex-col"> <div class="flex-1 grid grid-cols-12 gap-1 items-end"> <!-- Production bars --> <div class="col-span-1 flex flex-col h-full"> <div class="bg-solar-primary rounded-t" style="height: 60%;"></div> <div class="bg-solar-secondary rounded-t" style="height: 60%"></div> </div> <div class="col-span-1 flex flex-col h-full"> <div class="bg-solar-primary rounded-t" style="height: 53%;"></div> <div class="bg-solar-secondary rounded-t" style="height: 50%"></div> </div> <!-- More bars... --> </div> <div class="h-6 grid grid-cols-12 text-xs text-gray-500"> <div class="text-center">08:00</div> <div class="text-center">10:00</div> <div class="text-center">12:00</div> <div class="text-center">14:00</div> <div class="text-center">16:00</div> <div class="text-center">18:00</div> </div> </div> </div> <div class="flex justify-center space-x-4 mt-4"> <div class="flex items-center"> <div class="w-3 h-3 bg-solar-primary rounded-full mr-2"></div> <span class="text-sm">Üretim</span> </div> <div class="flex items-center"> <div class="w-3 h-3 bg-solar-secondary rounded-full mr-2"></div> <span class="text-sm">Tüketim</span> </div> </div> </div> <div class="bg-solar-light p-6 rounded-xl solar-shadow"> <h3 class="text-lg font-bold mb-4">Sistem Özeti</h3> <div class="space-y-4"> <div> <div class="flex justify-between text-sm mb-1"> <span class="text-gray-500">Kurulu Güç</span> <span class="font-medium">5.4 kW</span> </div> <div class="h-2 bg-gray-200 rounded-full"> <div class="h-2 bg-solar-primary rounded-full" style="width: 100%"></div> </div> </div> <div> <div class="flex justify-between text-sm mb-1"> <span class="text-gray-500">Panel Verimliliği</span> <span class="font-medium">92%</span> </div> <div class="h-2 bg-gray-200 rounded-full"> <div class="h-2 bg-green-500 rounded-full" style="width: 92%"></div> </div> </div> <div> <div class="flex justify-between text-sm mb-1"> <span class="text-gray-500">Kendi Kendine Yeterlilik</span> <span class="font-medium">68%</span> </div> <div class="h-2 bg-gray-200 rounded-full"> <div class="h-2 bg-solar-secondary rounded-full" style="width: 68%"></div> </div> </div> <div class="pt-4 border-t border-gray-200"> <div class="flex justify-between text-sm mb-1"> <span class="text-gray-500">Bu Ay Tasarruf</span> <span class="font-medium text-green-600">₺245.80</span> </div> <div class="flex justify-between text-sm mb-1"> <span class="text-gray-500">CO₂ Tasarrufu</span> <span class="font-medium">156 kg</span> </div> </div> <button class="w-full bg-solar-primary hover:bg-blue-600 text-white py-2 rounded-lg transition flex items-center justify-center space-x-2"> <i class="fas fa-chart-line"></i> <span>Detaylı Rapor Görüntüle</span> </button> </div> </div> </div> </div> </section> <!-- Analysis, Financial, Community, and Simulator sections are here but removed for brevity --> <!-- You can find these sections in the original code and add them back if needed --> <!-- Footer --> <footer class="bg-solar-dark text-white py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> <div> <div class="flex items-center space-x-2 mb-4"> <i class="fas fa-solar-panel text-2xl text-solar-accent"></i> <span class="text-xl font-bold">SolarTrack</span> </div> <p class="text-gray-400 mb-4">Güneş enerjisi sistemlerinizi izlemek, optimize etmek ve yönetmek için kapsamlı çözüm.</p> <div class="flex space-x-4"> <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600 transition"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600 transition"> <i class="fab fa-twitter"></i> </a> <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600 transition"> <i class="fab fa-instagram"></i> </a> <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600 transition"> <i class="fab fa-linkedin-in"></i> </a> </div> </div> <div> <h4 class="font-bold text-lg mb-4">Ürün</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition">Özellikler</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Fiyatlandırma</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Entegrasyonlar</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Güncellemeler</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li> </ul> </div> <div> <h4 class="font-bold text-lg mb-4">Kaynaklar</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Dokümantasyon</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Eğitimler</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Topluluk</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Destek</a></li> </ul> </div> <div> <h4 class="font-bold text-lg mb-4">Şirket</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition">Hakkımızda</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Kariyer</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Gizlilik</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">SSS</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">İletişim</a></li> </ul> </div> </div> <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> <p class="text-gray-400 mb-4 md:mb-0">© 2023 SolarTrack. Tüm hakları saklıdır.</p> <div class="flex space-x-6"> <a href="#" class="text-gray-400 hover:text-white transition">Kullanım Şartları</a> <a href="#" class="text-gray-400 hover:text-white transition">Gizlilik Politikası</a> <a href="#" class="text-gray-400 hover:text-white transition">Çerezler</a> </div> </div> </div> </footer> <script src="https://cdn.tailwindcss.com"></script> <script src="app.js"></script> </body> </html>
CSS
Copy
@tailwind base; @tailwind components; @tailwind utilities; /* Custom Tailwind Configuration */ :root { --color-solar-primary: #3b82f6; --color-solar-secondary: #10b981; --color-solar-accent: #f59e0b; --color-solar-dark: #1e293b; --color-solar-light: #f8fafc; } /* Custom Classes */ .container { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; } .gradient-bg { background: linear-gradient(135deg, var(--color-solar-primary) 0%, var(--color-solar-secondary) 100%); } .solar-shadow { box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3), 0 4px 6px -2px rgba(16, 185, 129, 0.2); } .chart-container { height: 300px; } .sun-animation { animation: pulse 4s infinite alternate; } @keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.05); } } .panel-tilt { transform: rotate(15deg); } /* Dark Mode Styles */ .dark-mode { background-color: var(--color-solar-dark); color: var(--color-solar-light); } .dark-mode .bg-solar-light { background-color: #334155; /* A darker slate color */ color: var(--color-solar-light); } .dark-mode .text-solar-dark { color: var(--color-solar-light); } .dark-mode .text-gray-500, .dark-mode .text-gray-600, .dark-mode .text-gray-700 { color: #94a3b8; /* lighter text for better contrast in dark mode */ } .dark-mode .bg-white { background-color: #475569; /* Darker background for cards */ } .dark-mode .bg-gray-50, .dark-mode .bg-gray-100, .dark-mode .bg-gray-200 { background-color: #334155; /* Darker gray backgrounds */ } .dark-mode .border-gray-200, .dark-mode .border-gray-300 { border-color: #475569; /* Darker borders */ } .dark-mode .chart-container .bg-solar-primary, .dark-mode .chart-container .bg-solar-secondary, .dark-mode .chart-container .bg-solar-accent { opacity: 0.8; /* Slightly reduce opacity of chart elements */ } /* Custom Utility Classes */ .bg-solar-primary { background-color: var(--color-solar-primary); } .bg-solar-secondary { background-color: var(--color-solar-secondary); } .bg-solar-accent { background-color: var(--color-solar-accent); } .bg-solar-dark { background-color: var(--color-solar-dark); } .bg-solar-light { background-color: var(--color-solar-light); } .text-solar-primary { color: var(--color-solar-primary); } .text-solar-secondary { color: var(--color-solar-secondary); } .text-solar-accent { color: var(--color-solar-accent); } .text-solar-dark { color: var(--color-solar-dark); } .text-solar-light { color: var(--color-solar-light); } /* Responsive Margins and Paddings */ @media (max-width: 640px) { .container { padding-left: 1rem; padding-right: 1rem; } h1 { font-size: 2.25rem !important; line-height: 2.5rem !important; } h2 { font-size: 1.875rem !important; line-height: 2.25rem !important; } .chart-container { height: 200px; } } /* Interactive Elements */ button, a { transition: all 0.3s ease; } .hover\:bg-opacity-20:hover { --tw-bg-opacity: 0.2; } .hover\:bg-opacity-30:hover { --tw-bg-opacity: 0.3; } /* Animation for charts */ .animate-chart { transition: height 1s ease-in-out; }
JS
Copy
// Wait for DOM to be fully loaded document.addEventListener('DOMContentLoaded', function() { // Theme toggle functionality const themeToggle = document.getElementById('theme-toggle'); const body = document.body; themeToggle.addEventListener('click', () => { body.classList.toggle('dark-mode'); if (body.classList.contains('dark-mode')) { themeToggle.innerHTML = '<i class="fas fa-sun"></i>'; localStorage.setItem('theme', 'dark'); } else { themeToggle.innerHTML = '<i class="fas fa-moon"></i>'; localStorage.setItem('theme', 'light'); } }); // Check if user has previously selected a theme const savedTheme = localStorage.getItem('theme'); if (savedTheme === 'dark') { body.classList.add('dark-mode'); themeToggle.innerHTML = '<i class="fas fa-sun"></i>'; } // Mobile menu toggle const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); if (mobileMenuButton && mobileMenu) { mobileMenuButton.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); } // Close mobile menu when clicking a link const mobileMenuLinks = mobileMenu ? mobileMenu.querySelectorAll('a') : []; mobileMenuLinks.forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.add('hidden'); }); }); // Chart animations animateCharts(); setInterval(animateCharts, 5000); // Smooth scroll for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, // Account for fixed header behavior: 'smooth' }); } }); }); }); // Function to animate chart bars function animateCharts() { // Select all chart bars const productionBars = document.querySelectorAll('.chart-container [class*="bg-solar-primary"]'); const consumptionBars = document.querySelectorAll('.chart-container [class*="bg-solar-secondary"]'); const accentBars = document.querySelectorAll('.chart-container [class*="bg-solar-accent"]'); // Animate production bars animateBarSet(productionBars, 10, 70); // Animate consumption bars animateBarSet(consumptionBars, 10, 60); // Animate accent bars animateBarSet(accentBars, 10, 80); } // Helper function to animate a set of bars function animateBarSet(bars, min, max) { bars.forEach((bar, index) => { setTimeout(() => { const randomHeight = Math.random() * (max - min) + min; bar.style.height = `${randomHeight}%`; // Add and remove animation class to trigger CSS transition bar.classList.add('animate-chart'); setTimeout(() => { bar.classList.remove('animate-chart'); }, 1000); }, index * 100); }); } // Add Tailwind config to the window object for dynamic styling window.tailwind = { config: { theme: { extend: { colors: { solar: { primary: '#3b82f6', secondary: '#10b981', accent: '#f59e0b', dark: '#1e293b', light: '#f8fafc' } } } } } }; // Simulate loading data (in a real app, this would fetch from an API) function loadDashboardData() { // This is a placeholder function for simulating data loading console.log('Dashboard data loaded'); // For a real implementation, you would fetch data from a server // and update the UI accordingly // Example: // fetch('/api/dashboard-data') // .then(response => response.json()) // .then(data => { // updateDashboardUI(data); // }) // .catch(error => { // console.error('Error loading dashboard data:', error); // }); } // Initialize dashboard data loading loadDashboardData();
