Merhaba bu html şablonu sayesınde chatgpt ve googlede direk yarma yapabileceğinz bir html şablonu tasarladım web sitelerinizde veya tarayıcılarınızda ücretsiz bir şekidel kullanabileceksiniz.
html şablonu
<!DOCTYPE html>
<html lang="tr" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatGPT Search</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<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=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: '#10B981',
secondary: '#1F2937',
dark: '#0F172A',
accent: '#06B6D4'
},
fontFamily: {
sans: ['Plus Jakarta Sans', 'sans-serif']
},
animation: {
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'float': 'float 5s ease-in-out infinite',
'shimmer': 'shimmer 2s linear infinite',
'slide-up': 'slideUp 0.5s ease-out forwards',
'scale-in': 'scaleIn 0.5s ease-out forwards',
'fade-in': 'fadeIn 0.5s ease-out forwards'
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' }
},
shimmer: {
'0%': { backgroundPosition: '-200% 0' },
'100%': { backgroundPosition: '200% 0' }
},
slideUp: {
'0%': { transform: 'translateY(20px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' }
},
scaleIn: {
'0%': { transform: 'scale(0.95)', opacity: '0' },
'100%': { transform: 'scale(1)', opacity: '1' }
},
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' }
}
}
}
}
}
</script>
<style>
.search-pill {
transition: all 0.3s ease;
}
.search-pill:hover {
transform: translateY(-2px);
}
.glassmorphism {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.dark .glassmorphism {
background: rgba(15, 23, 42, 0.35);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.gradient-border {
position: relative;
border-radius: 16px;
overflow: hidden;
}
.gradient-border::before {
content: '';
position: absolute;
inset: -2px;
background: linear-gradient(45deg, #10B981, #06B6D4, #3b82f6, #10B981);
background-size: 400% 400%;
animation: gradient 8s ease infinite;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.gradient-border:hover::before {
opacity: 1;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.shimmer {
background: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.2) 25%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0) 100%);
background-size: 200% 100%;
animation: shimmer 2s linear infinite;
}
.dark .shimmer {
background: linear-gradient(90deg,
rgba(15, 23, 42, 0) 0%,
rgba(15, 23, 42, 0.3) 25%,
rgba(15, 23, 42, 0.3) 50%,
rgba(15, 23, 42, 0) 100%);
background-size: 200% 100%;
}
.fade-up {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease-out;
}
.fade-up.appear {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-50 via-gray-100 to-gray-50 dark:from-dark dark:via-gray-900 dark:to-secondary min-h-screen transition-colors duration-500 font-sans overflow-x-hidden">
<!-- Background Effects -->
<div class="fixed inset-0 -z-10 overflow-hidden">
<div class="absolute -top-40 -right-40 w-96 h-96 bg-primary/10 dark:bg-primary/5 rounded-full blur-3xl animate-float opacity-70"></div>
<div class="absolute top-1/2 -left-20 w-72 h-72 bg-accent/10 dark:bg-accent/5 rounded-full blur-3xl animate-float opacity-70" style="animation-delay: 1s;"></div>
<div class="absolute bottom-32 right-1/4 w-64 h-64 bg-blue-400/10 dark:bg-blue-400/5 rounded-full blur-3xl animate-float opacity-70" style="animation-delay: 2s;"></div>
</div>
<!-- Particles Animation -->
<div id="particles-js" class="fixed inset-0 -z-5 opacity-30"></div>
<!-- Dark Mode Toggle -->
<div class="fixed top-5 right-5 z-50">
<button id="darkModeToggle" class="p-3 rounded-full bg-white/90 dark:bg-secondary/90 shadow-lg hover:shadow-xl transition-all duration-300 glassmorphism">
<i class="fas fa-moon dark:hidden text-gray-700"></i>
<i class="fas fa-sun hidden dark:block text-yellow-400"></i>
</button>
</div>
<div class="container mx-auto px-4 py-12 max-w-4xl relative z-10">
<!-- Logo ve Başlık -->
<div class="flex justify-center mb-16 mt-8 animate-fade-in">
<div class="text-center">
<div class="inline-block mb-5 text-primary relative">
<div class="absolute inset-0 bg-primary/20 rounded-full blur-xl animate-pulse-slow"></div>
<i class="fas fa-robot text-5xl animate-float"></i>
</div>
<h1 class="text-6xl font-bold mb-3 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
ChatGPT<span class="text-gray-700 dark:text-gray-300">Search</span>
</h1>
<p class="text-gray-600 dark:text-gray-400 text-lg max-w-lg mx-auto">Yapay zeka destekli arama deneyimi ile sorularınızın cevaplarını anında bulun</p>
</div>
</div>
<!-- Arama Kutusu -->
<div class="relative transform transition-all duration-300 hover:scale-[1.01] animate-scale-in" style="animation-delay: 0.2s;">
<form id="search-form" action="" method="get" class="mb-12">
<div class="relative gradient-border">
<input
type="text"
name="q"
id="search-input"
placeholder="Ne aramak istersiniz?"
class="w-full px-7 py-6 pr-16 text-lg border-0 rounded-xl shadow-xl dark:shadow-gray-900/30 bg-white/90 dark:bg-secondary/90 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-primary/20 transition-all duration-300 glassmorphism"
autocomplete="off"
>
<button type="submit" class="absolute right-4 top-1/2 transform -translate-y-1/2 text-xl bg-gradient-to-r from-primary to-accent text-white p-4 rounded-xl hover:shadow-lg hover:shadow-primary/20 dark:hover:shadow-primary/10 transition-all duration-300">
<i class="fas fa-search"></i>
</button>
</div>
<!-- Platform Seçimi -->
<div class="flex justify-center mt-4 gap-4">
<label class="flex items-center cursor-pointer">
<input type="radio" name="search_platform" value="chatgpt" class="hidden peer" checked>
<div class="px-4 py-2 rounded-lg bg-white/90 dark:bg-secondary/90 shadow-md peer-checked:bg-primary peer-checked:text-white transition-all duration-300 flex items-center gap-2 glassmorphism border-2 border-primary/20 hover:border-primary/50 dark:border-primary/30 dark:hover:border-primary/60">
<i class="fas fa-robot text-primary peer-checked:text-white"></i>
<span class="font-medium">ChatGPT</span>
</div>
</label>
<label class="flex items-center cursor-pointer">
<input type="radio" name="search_platform" value="google" class="hidden peer">
<div class="px-4 py-2 rounded-lg bg-white/90 dark:bg-secondary/90 shadow-md peer-checked:bg-blue-500 peer-checked:text-white transition-all duration-300 flex items-center gap-2 glassmorphism border-2 border-blue-500/20 hover:border-blue-500/50 dark:border-blue-500/30 dark:hover:border-blue-500/60">
<i class="fab fa-google text-blue-500 peer-checked:text-white"></i>
<span class="font-medium">Google</span>
</div>
</label>
</div>
</form>
</div>
<!-- Önerilen Aramalar -->
<div class="mt-16 fade-up">
<h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-8 flex items-center">
<div class="p-2 bg-primary/10 dark:bg-primary/20 rounded-lg text-primary mr-3">
<i class="fas fa-fire"></i>
</div>
Popüler Aramalar
</h2>
<div class="flex flex-wrap gap-3">
<a href="#" class="search-pill popular-search px-6 py-3 bg-white/80 dark:bg-secondary/80 border-0 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-800 hover:text-primary dark:hover:text-primary transition-all duration-300 shadow-md hover:shadow-lg dark:shadow-gray-900/30 glassmorphism" data-query="film önerileri">
<i class="fas fa-film mr-2 text-primary/70"></i>Film önerileri
</a>
<a href="#" class="search-pill popular-search px-6 py-3 bg-white/80 dark:bg-secondary/80 border-0 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-800 hover:text-primary dark:hover:text-primary transition-all duration-300 shadow-md hover:shadow-lg dark:shadow-gray-900/30 glassmorphism" data-query="instagram ne zaman kuruldu">
<i class="fab fa-instagram mr-2 text-primary/70"></i>Instagram ne zaman kuruldu
</a>
<a href="#" class="search-pill popular-search px-6 py-3 bg-white/80 dark:bg-secondary/80 border-0 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-800 hover:text-primary dark:hover:text-primary transition-all duration-300 shadow-md hover:shadow-lg dark:shadow-gray-900/30 glassmorphism" data-query="yapay zeka nedir">
<i class="fas fa-brain mr-2 text-primary/70"></i>Yapay zeka nedir
</a>
<a href="#" class="search-pill popular-search px-6 py-3 bg-white/80 dark:bg-secondary/80 border-0 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-800 hover:text-primary dark:hover:text-primary transition-all duration-300 shadow-md hover:shadow-lg dark:shadow-gray-900/30 glassmorphism" data-query="seyahat önerileri">
<i class="fas fa-plane-departure mr-2 text-primary/70"></i>Seyahat önerileri
</a>
<a href="#" class="search-pill popular-search px-6 py-3 bg-white/80 dark:bg-secondary/80 border-0 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-800 hover:text-primary dark:hover:text-primary transition-all duration-300 shadow-md hover:shadow-lg dark:shadow-gray-900/30 glassmorphism" data-query="web tasarım trendleri">
<i class="fas fa-paint-brush mr-2 text-primary/70"></i>Web tasarım trendleri
</a>
</div>
</div>
<!-- Öne Çıkan Başlık -->
<div class="mt-20 fade-up">
<h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-8 flex items-center">
<div class="p-2 bg-accent/10 dark:bg-accent/20 rounded-lg text-accent mr-3">
<i class="fas fa-lightbulb"></i>
</div>
Keşfedin
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white/80 dark:bg-secondary/80 rounded-xl shadow-lg dark:shadow-gray-900/30 p-6 glassmorphism hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
<div class="text-accent text-2xl mb-4">
<i class="fas fa-rocket"></i>
</div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Hızlı Cevaplar</h3>
<p class="text-gray-600 dark:text-gray-400">Sorularınıza saniyeler içinde cevap alın.</p>
</div>
<div class="bg-white/80 dark:bg-secondary/80 rounded-xl shadow-lg dark:shadow-gray-900/30 p-6 glassmorphism hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
<div class="text-primary text-2xl mb-4">
<i class="fas fa-brain"></i>
</div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">AI Teknolojisi</h3>
<p class="text-gray-600 dark:text-gray-400">En son yapay zeka teknolojisi ile desteklendi.</p>
</div>
<div class="bg-white/80 dark:bg-secondary/80 rounded-xl shadow-lg dark:shadow-gray-900/30 p-6 glassmorphism hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
<div class="text-blue-500 text-2xl mb-4">
<i class="fas fa-globe"></i>
</div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Sürekli Güncel</h3>
<p class="text-gray-600 dark:text-gray-400">Her zaman en güncel bilgilere erişin.</p>
</div>
</div>
</div>
<!-- Arama Sonuçları -->
<div id="search-results" class="mt-16 hidden animate-fade-in">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
<i class="fas fa-search text-primary mr-3"></i> Arama Sonuçları:
<span id="search-query" class="font-bold text-primary ml-2"></span>
</h2>
<div class="bg-white/90 dark:bg-secondary/90 rounded-xl shadow-xl dark:shadow-gray-900/30 p-8 divide-y divide-gray-200 dark:divide-gray-700 glassmorphism">
<div class="py-4">
<div class="flex items-center gap-4">
<div class="animate-pulse-slow">
<div class="w-10 h-10 bg-primary/20 rounded-full flex items-center justify-center">
<i class="fas fa-spinner fa-spin text-primary/70"></i>
</div>
</div>
<div>
<h3 class="text-xl font-medium text-primary mb-3">Arama sonuçları gösteriliyor...</h3>
<p class="text-gray-600 dark:text-gray-400">Aradığınız sonuçlar burada listelenecek.</p>
<div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full mt-4 overflow-hidden">
<div class="h-full bg-primary rounded-full shimmer" style="width: 70%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="mt-auto py-10 text-center text-gray-500 dark:text-gray-400 text-sm relative z-10">
<div class="container mx-auto px-4">
<div class="flex flex-col items-center">
<div class="text-primary text-2xl mb-5">
<i class="fas fa-robot"></i>
</div>
<p class="font-medium mb-4">© 2023 ChatGPT Search. Tüm hakları saklıdır.</p>
<div class="mt-3 flex justify-center space-x-6">
<a href="#" class="hover:text-primary transition-colors text-lg">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="hover:text-primary transition-colors text-lg">
<i class="fab fa-github"></i>
</a>
<a href="#" class="hover:text-primary transition-colors text-lg">
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
</div>
</footer>
<!-- Particles JS -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// Particles JS
document.addEventListener('DOMContentLoaded', function() {
if (typeof particlesJS !== 'undefined') {
particlesJS("particles-js", {
"particles": {
"number": {
"value": 30,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#10B981"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
}
},
"opacity": {
"value": 0.3,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": true,
"speed": 2,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#10B981",
"opacity": 0.2,
"width": 1
},
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 0.8
}
},
"push": {
"particles_nb": 3
}
}
},
"retina_detect": true
});
}
});
// Scroll Animation
function checkFadeElements() {
const fadeElements = document.querySelectorAll('.fade-up');
fadeElements.forEach(el => {
const rect = el.getBoundingClientRect();
const windowHeight = window.innerHeight || document.documentElement.clientHeight;
if (rect.top <= windowHeight * 0.85) {
el.classList.add('appear');
}
});
}
window.addEventListener('scroll', checkFadeElements);
window.addEventListener('resize', checkFadeElements);
window.addEventListener('load', checkFadeElements);
// Dark Mode Toggle
const darkModeToggle = document.getElementById('darkModeToggle');
const html = document.documentElement;
// Sayfa yüklendiğinde dark mode durumunu kontrol et
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
html.classList.add('dark');
} else {
html.classList.remove('dark');
}
// Dark mode toggle işlevi
darkModeToggle.addEventListener('click', () => {
html.classList.toggle('dark');
localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
});
document.addEventListener('DOMContentLoaded', function() {
// URL'den arama sorgusu parametresini al
const urlParams = new URLSearchParams(window.location.search);
const query = urlParams.get('q');
// Eğer bir arama sorgusu varsa, arama sonuçlarını göster
if (query) {
document.getElementById('search-input').value = query;
document.getElementById('search-query').textContent = query;
document.getElementById('search-results').classList.remove('hidden');
}
// Form gönderildiğinde yeni sayfaya yönlendirme yapmadan URL'i güncelle
const searchForm = document.getElementById('search-form');
searchForm.addEventListener('submit', function(e) {
e.preventDefault();
const searchInput = document.getElementById('search-input');
if (searchInput.value.trim() !== '') {
performSearch(searchInput.value.trim());
}
});
// Popüler aramalara tıklandığında doğrudan arama yap
const popularSearches = document.querySelectorAll('.popular-search');
popularSearches.forEach(item => {
item.addEventListener('click', function(e) {
e.preventDefault();
const query = this.getAttribute('data-query');
performSearch(query);
});
});
// Arama işlemini gerçekleştiren fonksiyon
function performSearch(query) {
document.getElementById('search-input').value = query;
// Seçilen platformu al
const platform = document.querySelector('input[name="search_platform"]:checked').value;
let newUrl;
if (platform === 'google') {
// Google'da ara
newUrl = 'https://www.google.com/search?q=' + encodeURIComponent(query);
} else {
// ChatGPT'de ara
newUrl = 'https://chatgpt.com/?q=' + encodeURIComponent(query) + '&hints=search&ref=ext';
}
window.location.href = newUrl;
// Not: Buradaki kodun geri kalanı yönlendirme nedeniyle çalışmayacak
// Eğer yerel testler için URL yönlendirmesini devre dışı bırakmak isterseniz,
// aşağıdaki yorum satırlarını açabilirsiniz
/*
document.getElementById('search-query').textContent = query;
document.getElementById('search-results').classList.remove('hidden');
// URL'i güncelle
const newUrl = window.location.pathname + '?q=' + encodeURIComponent(query);
history.pushState({}, '', newUrl);
// Arama kutusu animasyonu
const searchForm = document.getElementById('search-form');
searchForm.classList.add('searched');
// Sayfayı arama sonuçlarına doğru kaydır
document.getElementById('search-results').scrollIntoView({ behavior: 'smooth' });
*/
}
});
</script>
</body>
</html>