Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>SolarTech | Yenilenebilir Enerji Sistemleri</title>

tailwind.config = {

theme: {

extend: {

colors: {

solar: {

yellow: '#FFD700',

orange: '#FFA500',

green: '#2E8B57',

dark: '#1a202c',

light: '#f7fafc',

}

},

fontFamily: {

sans: ['Inter', 'sans-serif'],

tech: ['Orbitron', 'sans-serif'],

},

animation: {

'float': 'float 6s ease-in-out infinite',

'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',

},

keyframes: {

float: {

'0%, 100%': { transform: 'translateY(0)' },

'50%': { transform: 'translateY(-20px)' },

}

</script>

<style>

/* Özel CSS Tanımlamaları */

body {

overflow-x: hidden;

}

/* Scroll Bar Tasarımı */

::-webkit-scrollbar {

width: 10px;

}

::-webkit-scrollbar-track {

background: #1a202c;

}

::-webkit-scrollbar-thumb {

background: linear-gradient(to bottom, #FFA500, #2E8B57);

border-radius: 5px;

}

/* Reveal Animasyonları */

.reveal {

opacity: 0;

transform: translateY(30px);

transition: all 0.8s ease-out;

}

.reveal.active {

opacity: 1;

transform: translateY(0);

}

/* Parallax Efekti */

.parallax-bg {

background-image: url('https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

position: relative;

}

/* Hero Bölümü Arkaplanı */

.hero-bg {

background-image: url('https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');

background-attachment: fixed; /* Sabit arkaplan (Parallax hissi) */

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

.parallax-overlay {

background: rgba(0, 0, 0, 0.7);

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

/* Cam Efekti */

.glass {

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.2);

}

/* Loader */

#loader {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #0f172a;

z-index: 9999;

display: flex;

justify-content: center;

align-items: center;

transition: opacity 0.5s ease;

}

.sun-loader {

width: 60px;

height: 60px;

border-radius: 50%;

background: radial-gradient(circle, #FFD700, #FFA500);

box-shadow: 0 0 40px #FFA500;

animation: pulse-slow 2s infinite;

}

</style>

</head>

<h2 class="text-white font-tech text-xl tracking-widest animate-pulse">SOLARTECH YÜKLENİYOR</h2>

</div>

SOLAR<span class="text-solar-green">TECH</span>

</a>

<a href="#home" class="hover:text-solar-yellow transition-colors">Ana Sayfa</a>

<a href="#about" class="hover:text-solar-yellow transition-colors">Hakkımızda</a>

<a href="#services" class="hover:text-solar-yellow transition-colors">Hizmetler</a>

<a href="#projects" class="hover:text-solar-yellow transition-colors">Projeler</a>

<a href="#contact" class="px-5 py-2 bg-solar-green hover:bg-green-700 rounded-full transition-all transform hover:scale-105 shadow-lg shadow-green-500/30">Teklif Al</a>

</div>

</button>

</div>

<a href="#home" class="block hover:text-solar-yellow">Ana Sayfa</a>

<a href="#about" class="block hover:text-solar-yellow">Hakkımızda</a>

<a href="#services" class="block hover:text-solar-yellow">Hizmetler</a>

<a href="#projects" class="block hover:text-solar-yellow">Projeler</a>

<a href="#contact" class="block text-solar-green font-bold">Teklif Al</a>

</div>

</nav>

GELECEĞİN ENERJİSİ

</div>

Doğanın Gücüyle <br>

<span class="text-transparent bg-clip-text bg-gradient-to-r from-solar-yellow to-solar-orange">Sınırsız Enerji</span>

</h1>

Eviniz ve iş yeriniz için sürdürülebilir, verimli ve ekonomik güneş enerjisi çözümleri. Gezegenimizi korurken enerji maliyetlerinizi düşürün.

</p>

Ücretsiz Keşif İste

</a>

Projelerimizi İncele

</a>

</div>

</div>

</section>

<p class="text-sm opacity-90">Yıllık Sektör Tecrübesi</p>

</div>

<h3 class="text-solar-green font-bold uppercase tracking-wide mb-2">Hakkımızda</h3>

<h2 class="text-4xl font-bold text-gray-900 mb-6">Enerji Bağımsızlığınız İçin Çalışıyoruz</h2>

SolarTech olarak, Türkiye'nin dört bir yanında yenilenebilir enerji projelerine imza atıyoruz. Mühendislik temelli yaklaşımımızla, kurulumdan bakım onarıma kadar uçtan uca hizmet sunuyoruz.

</p>

<span class="text-gray-700">Yüksek verimli panel teknolojileri</span>

</li>

<span class="text-gray-700">25 Yıl performans garantisi</span>

</li>

<span class="text-gray-700">Uzman mühendis kadrosu</span>

</li>

</ul>

Daha Fazla Bilgi <i class="fas fa-arrow-right"></i>

</a>

</div>

</section>

<span class="text-solar-orange font-bold uppercase">Hizmetlerimiz</span>

<h2 class="text-4xl font-bold text-gray-900 mt-2">Sizin İçin Neler Yapıyoruz?</h2>

</div>

</div>

<h3 class="text-xl font-bold mb-4">Konut Tipi Sistemler</h3>

<p class="text-gray-600 mb-6">Evinizin çatısını bir enerji santraline dönüştürün. Elektrik faturanızdan tasarruf edin.</p>

Detayları İncele <i class="fas fa-chevron-right text-xs"></i>

</button>

</div>

</div>

<h3 class="text-xl font-bold mb-4">Endüstriyel Çözümler</h3>

<p class="text-gray-600 mb-6">Fabrikalar ve işletmeler için büyük ölçekli GES kurulumları ile maliyetleri düşürün.</p>

Detayları İncele <i class="fas fa-chevron-right text-xs"></i>

</button>

</div>

</div>

<h3 class="text-xl font-bold mb-4">Tarımsal Sulama</h3>

<p class="text-gray-600 mb-6">Tarlalarınızda mazot maliyetine son. Güneş enerjili sulama sistemleri ile tanışın.</p>

Detayları İncele <i class="fas fa-chevron-right text-xs"></i>

</button>

</div>

</section>

<div class="text-sm uppercase tracking-wider opacity-80">Tamamlanan Proje</div>

</div>

<div class="text-sm uppercase tracking-wider opacity-80">MW Kurulu Güç</div>

</div>

<div class="text-sm uppercase tracking-wider opacity-80">% Müşteri Memnuniyeti</div>

</div>

<div class="text-sm uppercase tracking-wider opacity-80">Ton CO2 Engellendi</div>

</div>

</section>

<div>

<span class="text-solar-green font-bold uppercase">Referanslarımız</span>

<h2 class="text-4xl font-bold text-gray-900 mt-2">Son Projelerimiz</h2>

</div>

<a href="#" class="hidden md:inline-block px-6 py-2 border-2 border-gray-800 rounded-full hover:bg-gray-800 hover:text-white transition-all font-semibold">Tümünü Gör</a>

</div>

<span class="text-solar-yellow text-sm font-bold">İZMİR</span>

<h3 class="text-white text-xl font-bold">Fabrika Çatı GES</h3>

<p class="text-gray-300 text-sm mt-2">2.5 MW Kurulu Güç</p>

</div>

<span class="text-solar-yellow text-sm font-bold">ANTALYA</span>

<h3 class="text-white text-xl font-bold">Villa Güneş Paneli</h3>

<p class="text-gray-300 text-sm mt-2">Hibrit Sistem Kurulumu</p>

</div>

<span class="text-solar-yellow text-sm font-bold">KONYA</span>

<h3 class="text-white text-xl font-bold">Arazi GES</h3>

<p class="text-gray-300 text-sm mt-2">Tarımsal Sulama Desteği</p>

</div>

</section>

<h2 class="text-4xl font-bold mb-6 font-tech">Projelerinizi Hayata Geçirelim</h2>

Ücretsiz keşif ve fizibilite raporu için bizimle iletişime geçin. Uzman ekibimiz size en uygun çözümü sunmak için hazır.

</p>

</div>

<div>

<h4 class="font-bold text-lg">Merkez Ofis</h4>

<p class="text-gray-400">Teknoloji Vadisi, Güneş Plaza No:45<br>İstanbul, Türkiye</p>

</div>

</div>

<div>

<h4 class="font-bold text-lg">Telefon</h4>

<p class="text-gray-500 text-sm">Hafta içi 09:00 - 18:00</p>

</div>

</div>

<div>

<h4 class="font-bold text-lg">E-Posta</h4>

<p class="text-gray-400">info@solartech.com.tr</p>

</div>

<h3 class="text-2xl font-bold mb-6 text-solar-yellow">Bize Ulaşın</h3>

<label for="name" class="absolute left-4 top-3 text-gray-400 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-placeholder-shown:text-gray-400 peer-focus:-top-6 peer-focus:text-xs peer-focus:text-solar-yellow">Adınız Soyadınız</label>

</div>

<label for="phone" class="absolute left-4 top-3 text-gray-400 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-placeholder-shown:text-gray-400 peer-focus:-top-6 peer-focus:text-xs peer-focus:text-solar-yellow">Telefon Numaranız</label>

</div>

<label for="email" class="absolute left-4 top-3 text-gray-400 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-placeholder-shown:text-gray-400 peer-focus:-top-6 peer-focus:text-xs peer-focus:text-solar-yellow">E-Posta Adresiniz</label>

</div>

<label for="message" class="absolute left-4 top-3 text-gray-400 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-placeholder-shown:text-gray-400 peer-focus:-top-6 peer-focus:text-xs peer-focus:text-solar-yellow">Mesajınız</label>

</div>

<span>GÖNDER</span>

</button>

</form>

</div>

</section>

</div>

</footer>

</button>

</div>

</div>

<div>

<h4 class="font-bold text-gray-800">Başarılı!</h4>

<p class="text-sm text-gray-600">Mesajınız bize ulaştı.</p>

</div>

// === Yükleyici (Loader) ===

window.addEventListener('load', () => {

const loader = document.getElementById('loader');

setTimeout(() => {

loader.style.opacity = '0';

setTimeout(() => {

loader.style.display = 'none';

// 3D Init kaldırıldı

}, 500);

}, 1000);

});

// === Navbar Kaydırma Efekti ===

const navbar = document.getElementById('navbar');

window.addEventListener('scroll', () => {

if (window.scrollY > 50) {

navbar.classList.add('bg-gray-900/95', 'backdrop-blur-md', 'shadow-lg', 'py-2');

navbar.classList.remove('py-4', 'bg-transparent');

} else {

navbar.classList.remove('bg-gray-900/95', 'backdrop-blur-md', 'shadow-lg', 'py-2');

navbar.classList.add('py-4', 'bg-transparent');

}

});

// === Mobil Menü ===

const mobileBtn = document.getElementById('mobile-menu-btn');

const mobileMenu = document.getElementById('mobile-menu');

mobileBtn.addEventListener('click', () => {

mobileMenu.classList.toggle('hidden');

});

// Menü linklerine tıklayınca menüyü kapat

document.querySelectorAll('#mobile-menu a').forEach(link => {

link.addEventListener('click', () => {

mobileMenu.classList.add('hidden');

});

// === Scroll Reveal Animasyonları ===

const observerOptions = {

threshold: 0.1,

rootMargin: "0px 0px -50px 0px"

};

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('active');

// Eğer sayaç ise çalıştır

if(entry.target.querySelector('.counter')) {

startCounters(entry.target);

}

});

}, observerOptions);

document.querySelectorAll('.reveal').forEach(el => {

observer.observe(el);

});

// === Sayaç Animasyonu ===

let counted = false;

function startCounters(container) {

const counters = container.querySelectorAll('.counter');

counters.forEach(counter => {

const target = +counter.getAttribute('data-target');

const duration = 2000; // ms

const increment = target / (duration / 16); // 60fps

let current = 0;

const updateCounter = () => {

current += increment;

if (current < target) {

counter.innerText = Math.ceil(current);

requestAnimationFrame(updateCounter);

} else {

counter.innerText = target;

}

};

updateCounter();

});

}

// === Modal Sistem ve İçerikleri ===

const modalData = {

'modal-konut': {

title: 'Konut Tipi Güneş Enerjisi',

image: 'https://images.unsplash.com/photo-1592833159155-c62df1b65634?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',

content: '<p class="mb-4">Müstakil evler ve site yönetimleri için özel olarak tasarlanan çatı tipi GES projelerimizle kendi elektriğinizi üretebilirsiniz. Fazla üretilen elektriği şebekeye satarak gelir elde etme imkanı sunuyoruz.</p><ul class="list-disc pl-5 space-y-2 text-gray-600"><li>Anahtar teslim kurulum</li><li>Resmi süreç yönetimi</li><li>Uzaktan izleme sistemi</li><li>Birebir tüketim analizi</li></ul>'

},

'modal-endustri': {

title: 'Endüstriyel Çözümler',

image: 'https://images.unsplash.com/photo-1611365892117-00ac5ef43c90?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',

content: '<p class="mb-4">Fabrika, depo ve ticari binalarınızın çatısında atıl duran alanları enerji üretim tesisine dönüştürüyoruz. Amortisman süresi ortalama 3-4 yıl olan sistemlerimizle rekabet gücünüzü artırın.</p><ul class="list-disc pl-5 space-y-2 text-gray-600"><li>Yüksek voltaj uyumluluğu</li><li>ISO standartlarında kurulum</li><li>Yıllık bakım anlaşmaları</li><li>Karbon ayak izi raporlaması</li></ul>'

},

'modal-tarim': {

title: 'Tarımsal Sulama Sistemleri',

image: 'https://images.unsplash.com/photo-1625305600309-400d77a1700d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',

content: '<p class="mb-4">Elektrik şebekesinin olmadığı arazilerde bile pompalarınızı güneş enerjisi ile çalıştırın. Mobil ve sabit sistem seçeneklerimiz mevcuttur.</p><ul class="list-disc pl-5 space-y-2 text-gray-600"><li>Mazot maliyetine son</li><li>Bakım gerektirmeyen yapı</li><li>Otomatik zamanlama sistemleri</li><li>Mobil römork çözümleri</li></ul>'

},

'modal-project1': {

title: 'İzmir Fabrika Çatı GES',

image: 'https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',

content: '<p>İzmir OSB içerisinde yer alan tekstil fabrikası için kurulan 2.5 MW gücündeki santral, fabrikanın yıllık enerji ihtiyacının %85\'ini karşılamaktadır. Proje 4 ayda tamamlanmış ve devreye alınmıştır.</p>'

},

'modal-project2': {

title: 'Antalya Villa Hibrit Sistem',

image: 'https://images.unsplash.com/photo-1566093097221-ac2335b09e70?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',

content: '<p>Elektrik kesintilerinden etkilenmeyen, batarya destekli (Hibrit) sistemimiz ile Antalya\'daki bu villa tam enerji bağımsızlığına kavuştu. 10kW panel gücü ve 15kWh lityum batarya kullanılmıştır.</p>'

},

'modal-project3': {

title: 'Konya Arazi GES',

image: 'https://images.unsplash.com/photo-1613665813446-82a78c468a1d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',

content: '<p>Tarımsal sulama kooperatifi için kurulan 500kW gücündeki arazi tipi santral, bölgedeki 50 çiftçinin sulama maliyetlerini sıfıra indirmiştir. Çelik konstrüksiyon üzerine inşa edilmiştir.</p>'

}

};

function openModal(modalId) {

const data = modalData[modalId];

if(!data) return;

const overlay = document.getElementById('modal-overlay');

const contentDiv = document.getElementById('modal-content');

const body = document.getElementById('modal-body');

body.innerHTML = `

<h3 class="text-2xl font-bold text-gray-800 mb-4">${data.title}</h3>

${data.content}

</div>

<button onclick="closeModal()" class="mt-6 bg-solar-green text-white px-6 py-2 rounded-lg hover:bg-green-700 transition-colors">Kapat</button>

</div>

`;

overlay.classList.remove('hidden');

// Animasyon için küçük gecikme

requestAnimationFrame(() => {

overlay.classList.remove('opacity-0');

contentDiv.classList.remove('scale-95');

contentDiv.classList.add('scale-100');

});

document.body.style.overflow = 'hidden'; // Scroll'u kilitle

}

function closeModal() {

const overlay = document.getElementById('modal-overlay');

const contentDiv = document.getElementById('modal-content');

overlay.classList.add('opacity-0');

contentDiv.classList.remove('scale-100');

contentDiv.classList.add('scale-95');

setTimeout(() => {

overlay.classList.add('hidden');

document.body.style.overflow = 'auto';

}, 300);

}

// Modal dışına tıklayınca kapatma

document.getElementById('modal-overlay').addEventListener('click', (e) => {

if (e.target === document.getElementById('modal-overlay')) {

closeModal();

}

});

// === Form İşlemleri ===

const contactForm = document.getElementById('contactForm');

contactForm.addEventListener('submit', (e) => {

e.preventDefault();

// Buton Animasyonu

const btn = contactForm.querySelector('button');

const originalText = btn.innerHTML;

btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> GÖNDERİLİYOR...';

btn.disabled = true;

// Simüle edilmiş gönderim süresi

setTimeout(() => {

// Formu temizle

contactForm.reset();

// Butonu eski haline getir

btn.innerHTML = originalText;

btn.disabled = false;

// Toast Bildirimi Göster

showToast();

}, 1500);

});

function showToast() {

const toast = document.getElementById('toast');

toast.classList.remove('translate-y-20', 'opacity-0');

setTimeout(() => {

toast.classList.add('translate-y-20', 'opacity-0');

}, 3000);

}

</script>

</body>

</html>

Metehan

Recommended

A Code by Metehan

A Code by Metehan

HTML

CSS

JS

Recommended

A Code by Metehan

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS