TravelAI – Hayalindeki Seyahati Planla
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
–blue: #4A90E2;
–blue-dark: #2d6fc7;
–blue-light: rgba(74,144,226,0.15);
–text: #e8e4dc;
–text-muted: #8a8680;
–bg: #0a0a0a;
–surface: #111111;
–surface2: #181818;
–border: rgba(255,255,255,0.08);
–border-hover: rgba(74,144,226,0.4);
–nav-bg: rgba(10,10,10,0.92);
–modal-bg: #161616;
–modal-border: rgba(255,255,255,0.1);
–input-bg: rgba(255,255,255,0.05);
–input-border: rgba(255,255,255,0.1);
–shadow: 0 4px 24px rgba(0,0,0,0.5);
–radius: 16px;
}
[data-theme=”light”] {
–blue: #1A6EFF;
–blue-dark: #1254CC;
–blue-light: rgba(26,110,255,0.1);
–text: #0D1B2E;
–text-muted: #6B7A90;
–bg: #ffffff;
–surface: #F5F8FF;
–surface2: #ffffff;
–border: rgba(0,0,0,0.08);
–border-hover: rgba(26,110,255,0.4);
–nav-bg: rgba(255,255,255,0.92);
–modal-bg: #ffffff;
–modal-border: rgba(0,0,0,0.1);
–input-bg: rgba(0,0,0,0.03);
–input-border: rgba(0,0,0,0.12);
–shadow: 0 4px 24px rgba(26,110,255,0.08);
}
html { scroll-behavior: smooth; }
body { font-family: ‘Plus Jakarta Sans’, sans-serif; color: var(–text); background: var(–bg); overflow-x: hidden; transition: background 0.3s, color 0.3s; }
/* ── NAV ── */
nav { position:fixed; top:0; left:0; right:0; z-index:100; background:var(–nav-bg); backdrop-filter:blur(14px); border-bottom:1px solid var(–border); display:flex; align-items:center; justify-content:space-between; padding:0 5%; height:64px; transition:box-shadow 0.3s,background 0.3s; }
nav.scrolled { box-shadow:0 2px 24px rgba(0,0,0,0.15); }
.nav-logo { display:flex; align-items:center; gap:9px; font-weight:800; font-size:20px; color:var(–blue); text-decoration:none; letter-spacing:-0.3px; }
.nav-logo svg { width:26px; height:26px; flex-shrink:0; }
.nav-links { display:flex; gap:28px; list-style:none; }
.nav-links a { text-decoration:none; color:var(–text-muted); font-size:14px; font-weight:500; transition:color 0.2s; }
.nav-links a:hover { color:var(–text); }
.nav-right { display:flex; align-items:center; gap:10px; }
/* theme toggle */
.theme-toggle { width:38px; height:38px; border-radius:50%; background:var(–surface2); border:1px solid var(–border); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:17px; transition:all 0.2s; flex-shrink:0; }
.theme-toggle:hover { border-color:var(–blue); background:var(–blue-light); }
/* hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; background:none; border:none; }
.hamburger span { display:block; width:22px; height:2px; background:var(–text); border-radius:2px; transition:all 0.3s; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
/* mobile drawer */
.mobile-menu { display:none; position:fixed; top:64px; left:0; right:0; z-index:99; background:var(–nav-bg); backdrop-filter:blur(14px); border-bottom:1px solid var(–border); padding:16px 5% 20px; flex-direction:column; gap:4px; animation:slideDown 0.2s ease; }
.mobile-menu.open { display:flex; }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);} }
.mobile-menu a { text-decoration:none; color:var(–text-muted); font-size:15px; font-weight:500; padding:10px 0; border-bottom:1px solid var(–border); transition:color 0.2s; }
.mobile-menu a:last-child { border-bottom:none; }
.mobile-menu a:hover { color:var(–text); }
/* ── PAGES ── */
#plans-page { display:none; min-height:100vh; padding:90px 5% 60px; background:var(–surface); }
#plans-page.active { display:block; }
#plan-detail-page { display:none; min-height:100vh; padding:90px 5% 60px; background:var(–surface); }
#plan-detail-page.active { display:block; }
.main-content.hidden { display:none; }
.plans-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; flex-wrap:wrap; gap:16px; }
.plans-header h1 { font-size:28px; font-weight:800; }
.plans-header p { color:var(–text-muted); font-size:14px; margin-top:4px; }
.plans-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.plan-card { background:var(–surface2); border-radius:var(–radius); border:1px solid var(–border); padding:24px; box-shadow:var(–shadow); transition:all 0.3s; }
.plan-card:hover { transform:translateY(-3px); border-color:var(–border-hover); }
.plan-card-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.plan-dest { font-size:20px; font-weight:800; margin-bottom:2px; }
.plan-status { display:inline-block; padding:4px 12px; border-radius:50px; font-size:11px; font-weight:700; background:rgba(74,222,128,0.12); color:#4ade80; }
[data-theme=”light”] .plan-status { background:#DCFCE7; color:#16A34A; }
.plan-meta { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.plan-meta-item label { font-size:11px; color:var(–text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:3px; }
.plan-meta-item span { font-size:14px; font-weight:600; }
.plan-actions { display:flex; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(–border); }
.plan-act-btn { flex:1; padding:8px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:none; font-family:inherit; transition:all 0.2s; }
.plan-act-btn.view { background:var(–blue-light); color:var(–blue); }
.plan-act-btn.view:hover { background:var(–blue); color:#fff; }
.plan-act-btn.delete { background:rgba(220,38,38,0.1); color:#f87171; }
.plan-act-btn.delete:hover { background:#DC2626; color:#fff; }
[data-theme=”light”] .plan-act-btn.delete { background:#FEF2F2; color:#DC2626; }
.empty-plans { text-align:center; padding:80px 20px; color:var(–text-muted); }
.empty-plans .empty-icon { font-size:56px; margin-bottom:16px; }
.empty-plans h3 { font-size:20px; font-weight:700; color:var(–text); margin-bottom:8px; }
.empty-plans p { font-size:14px; margin-bottom:24px; }
/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 22px; border-radius:50px; font-family:inherit; font-weight:600; font-size:14px; cursor:pointer; text-decoration:none; border:none; transition:all 0.2s; }
.btn-primary { background:var(–blue); color:#fff; }
.btn-primary:hover { background:var(–blue-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(74,144,226,0.35); }
.btn-outline { background:transparent; color:var(–text); border:1.5px solid var(–border); }
.btn-outline:hover { border-color:var(–border-hover); background:var(–blue-light); transform:translateY(-1px); }
.btn-lg { padding:14px 32px; font-size:15px; }
/* ── HERO ── */
.hero { min-height:100vh; background:linear-gradient(135deg,rgba(5,5,5,0.88) 0%,rgba(10,20,40,0.80) 50%,rgba(30,60,100,0.60) 100%), url(‘
https://images.unsplash.com/photo-1641128324972-af3212f0f6bd?w=1800&q=85’😉 center/cover no-repeat; display:flex; align-items:center; padding:100px 5% 60px; position:relative; overflow:hidden; }
.plane-float { position:absolute; color:rgba(255,255,255,0.1); animation:floatPlane 8s ease-in-out infinite; }
@keyframes floatPlane { 0%,100%{transform:translateY(0) rotate(-10deg);}50%{transform:translateY(-20px) rotate(-5deg);} }
.hero-location { position:absolute; bottom:20px; right:24px; z-index:2; font-size:12px; color:rgba(255,255,255,0.4); font-weight:500; }
.hero-content { max-width:560px; position:relative; z-index:1; }
.hero-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.8); border-radius:50px; padding:6px 14px; font-size:13px; font-weight:500; margin-bottom:24px; }
.hero-badge span { width:6px; height:6px; background:#4ADE80; border-radius:50%; animation:dotPulse 2s infinite; }
@keyframes dotPulse { 0%,100%{opacity:1}50%{opacity:0.3} }
.hero h1 { font-size:clamp(38px,5vw,58px); font-weight:800; line-height:1.15; color:#fff; margin-bottom:20px; }
.hero h1 em { color:#60A5FA; font-style:normal; }
.hero p { font-size:16px; color:rgba(255,255,255,0.6); line-height:1.7; margin-bottom:36px; max-width:440px; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; }
.hero-stats { display:flex; gap:32px; margin-top:52px; padding-top:32px; border-top:1px solid rgba(255,255,255,0.1); }
.hero-stat { color:#fff; }
.hero-stat-num { font-size:28px; font-weight:800; }
.hero-stat-label { font-size:13px; color:rgba(255,255,255,0.45); margin-top:2px; }
/* ── SECTIONS ── */
section { padding:80px 5%; }
.section-title { text-align:center; font-size:clamp(26px,3vw,36px); font-weight:800; margin-bottom:12px; }
.section-line { width:48px; height:4px; background:var(–blue); border-radius:2px; margin:0 auto 48px; }
/* ── DESTINATIONS ── */
#destinasyonlar { background:var(–surface); }
.dest-tabs { display:flex; gap:8px; justify-content:center; margin-bottom:32px; flex-wrap:wrap; }
.dest-tab { background:var(–surface2); border:1.5px solid var(–border); border-radius:50px; padding:7px 18px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; color:var(–text-muted); transition:all 0.2s; }
.dest-tab:hover { border-color:var(–blue); color:var(–text); }
.dest-tab.active { background:var(–blue); border-color:var(–blue); color:#fff; }
.dest-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.dest-card { border-radius:var(–radius); overflow:hidden; background:var(–surface2); border:1px solid var(–border); box-shadow:var(–shadow); cursor:pointer; transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s; }
.dest-card:hover { transform:translateY(-6px); border-color:var(–border-hover); box-shadow:0 16px 40px rgba(0,0,0,0.4); }
.dest-img { position:relative; overflow:hidden; height:180px; }
.dest-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; filter:brightness(0.88); }
.dest-card:hover .dest-img img { transform:scale(1.07); filter:brightness(1); }
.dest-country { position:absolute; top:12px; left:12px; background:rgba(0,0,0,0.6); backdrop-filter:blur(6px); color:#fff; border-radius:50px; padding:4px 12px; font-size:12px; font-weight:600; display:flex; align-items:center; gap:4px; }
.dest-body { padding:16px; }
.dest-body h3 { font-size:17px; font-weight:700; margin-bottom:4px; }
.dest-body p { font-size:13px; color:var(–text-muted); line-height:1.5; }
.dest-footer { padding:0 16px 16px; display:flex; align-items:center; justify-content:space-between; }
.dest-price { font-size:15px; font-weight:700; color:var(–blue); }
.dest-btn { background:var(–blue-light); color:var(–blue); border:none; border-radius:50px; padding:6px 14px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.2s; }
.dest-btn:hover { background:var(–blue); color:#fff; }
/* ── HOW IT WORKS ── */
#nasil-calisir { background:var(–bg); }
.steps { display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap; }
.step { flex:1; min-width:200px; max-width:260px; text-align:center; position:relative; padding:0 20px; }
.step:not(:last-child)::after { content:”; position:absolute; top:40px; right:-10%; width:20%; height:2px; background:repeating-linear-gradient(90deg,var(–blue) 0,var(–blue) 6px,transparent 6px,transparent 14px); opacity:0.4; }
.step-icon { width:80px; height:80px; border-radius:50%; background:rgba(74,144,226,0.1); border:1px solid rgba(74,144,226,0.2); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; position:relative; transition:all 0.3s; }
.step:hover .step-icon { background:var(–blue); box-shadow:0 8px 24px rgba(74,144,226,0.3); border-color:transparent; }
.step:hover .step-icon svg { color:#fff; }
.step-icon svg { width:32px; height:32px; color:var(–blue); transition:color 0.3s; }
.step-num { position:absolute; top:-6px; right:-6px; width:24px; height:24px; background:var(–blue); color:#fff; border-radius:50%; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.step h3 { font-size:17px; font-weight:700; margin-bottom:10px; }
.step p { font-size:14px; color:var(–text-muted); line-height:1.6; }
/* ── FEATURES ── */
#ozellikler { background:var(–surface); }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.feature-card { background:var(–surface2); border-radius:var(–radius); padding:28px; border:1px solid var(–border); display:flex; gap:20px; align-items:flex-start; transition:all 0.3s; cursor:pointer; }
.feature-card:hover { border-color:var(–border-hover); transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,0.2); }
.feature-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.feature-icon.blue { background:rgba(74,144,226,0.15); }
.feature-icon.green { background:rgba(74,222,128,0.12); }
.feature-icon.purple { background:rgba(167,139,250,0.12); }
[data-theme=”light”] .feature-icon.blue { background:#EEF4FF; }
[data-theme=”light”] .feature-icon.green { background:#EEFBF0; }
[data-theme=”light”] .feature-icon.purple { background:#F3EEFF; }
.feature-icon svg { width:24px; height:24px; }
.feature-icon.blue svg { color:#4A90E2; }
.feature-icon.green svg { color:#4ade80; }
.feature-icon.purple svg { color:#a78bfa; }
[data-theme=”light”] .feature-icon.green svg { color:#16A34A; }
[data-theme=”light”] .feature-icon.purple svg { color:#7C3AED; }
.feature-text h3 { font-size:16px; font-weight:700; margin-bottom:6px; }
.feature-text p { font-size:14px; color:var(–text-muted); line-height:1.6; }
/* ── REVIEWS ── */
#yorumlar { background:var(–bg); }
.reviews-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.review-card { background:var(–surface2); border-radius:var(–radius); padding:24px; border:1px solid var(–border); transition:all 0.3s; }
[data-theme=”light”] .review-card { background:var(–surface); }
.review-card:hover { border-color:var(–border-hover); transform:translateY(-3px); }
.reviewer { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:15px; flex-shrink:0; }
.reviewer-info h4 { font-size:15px; font-weight:700; }
.stars { color:#F59E0B; font-size:14px; margin-top:2px; }
.review-text { font-size:14px; color:var(–text-muted); line-height:1.7; font-style:italic; }
/* ── CTA ── */
.cta-banner { background:linear-gradient(135deg,#0d1b30,#1a3a6e); border:1px solid rgba(74,144,226,0.2); border-radius:24px; padding:56px 48px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin:0 5% 80px; }
.cta-banner h2 { font-size:clamp(26px,3vw,36px); font-weight:800; color:#fff; max-width:400px; line-height:1.2; }
.cta-banner p { color:rgba(255,255,255,0.55); font-size:15px; margin-top:10px; max-width:360px; }
.btn-white { background:#fff; color:#1254CC; padding:14px 32px; font-size:15px; font-weight:700; border-radius:50px; display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; font-family:inherit; transition:all 0.2s; white-space:nowrap; }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(255,255,255,0.2); }
/* ── FOOTER ── */
footer { background:#060606; border-top:1px solid var(–border); color:rgba(255,255,255,0.45); padding:40px 5%; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
[data-theme=”light”] footer { background:#0D1B2E; }
.footer-logo { font-size:20px; font-weight:800; color:#fff; display:flex; align-items:center; gap:8px; }
.footer-links { display:flex; gap:28px; flex-wrap:wrap; }
.footer-links a { color:rgba(255,255,255,0.45); font-size:13px; text-decoration:none; transition:color 0.2s; }
.footer-links a:hover { color:#fff; }
.footer-socials { display:flex; gap:12px; }
.social-btn { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.5); cursor:pointer; transition:all 0.2s; text-decoration:none; }
.social-btn:hover { background:var(–blue); color:#fff; border-color:transparent; }
/* ── MODAL ── */
.modal-overlay { display:none; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.65); backdrop-filter:blur(6px); align-items:center; justify-content:center; }
.modal-overlay.active { display:flex; }
.modal { background:var(–modal-bg); border:1px solid var(–modal-border); border-radius:24px; padding:40px; width:90%; max-width:420px; position:relative; animation:popIn 0.25s ease; }
@keyframes popIn { from{transform:scale(0.92);opacity:0;}to{transform:scale(1);opacity:1;} }
.modal-close { position:absolute; top:16px; right:16px; background:var(–surface); border:none; border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; color:var(–text-muted); transition:all 0.2s; }
.modal-close:hover { color:var(–text); }
.modal h2 { font-size:22px; font-weight:800; margin-bottom:8px; }
.modal p { color:var(–text-muted); font-size:14px; margin-bottom:24px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.form-group input, .form-group select { width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(–input-border); background:var(–input-bg); font-family:inherit; font-size:14px; outline:none; transition:border-color 0.2s; color:var(–text); }
.form-group input::placeholder { color:var(–text-muted); }
.form-group input:focus, .form-group select:focus { border-color:var(–blue); }
.form-group select option { background:var(–modal-bg); color:var(–text); }
.modal-btn { width:100%; justify-content:center; padding:14px; font-size:15px; border-radius:12px; }
/* ── TOAST ── */
.toast { position:fixed; bottom:24px; right:24px; z-index:300; background:var(–surface2); border:1px solid var(–border); color:var(–text); border-radius:12px; padding:14px 20px; font-size:14px; font-weight:500; display:flex; align-items:center; gap:10px; transform:translateY(80px); opacity:0; transition:all 0.3s; box-shadow:var(–shadow); }
.toast.show { transform:translateY(0); opacity:1; }
.toast-icon { color:#4ADE80; font-size:18px; }
/* ── TABS ── */
.dtab { background:var(–surface2); border:1.5px solid var(–border); border-radius:50px; padding:8px 18px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; color:var(–text-muted); transition:all 0.2s; }
.dtab:hover { border-color:var(–blue); color:var(–text); }
.dtab.active { background:var(–blue); border-color:var(–blue); color:#fff; }
.ai-spinner { width:48px; height:48px; border-radius:50%; border:4px solid var(–blue-light); border-top-color:var(–blue); animation:spin 0.8s linear infinite; margin:0 auto; }
@keyframes spin { to{transform:rotate(360deg);} }
.reveal { opacity:0; transform:translateY(30px); transition:all 0.6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
#btn-avatar { display:none; position:relative; }
#user-menu { display:none; position:absolute; top:52px; right:0; background:var(–modal-bg); border:1px solid var(–modal-border); border-radius:14px; box-shadow:var(–shadow); min-width:200px; overflow:hidden; z-index:200; }
@media (max-width: 768px) {
.nav-links { display:none; }
.hamburger { display:flex; }
#btn-giris { display:none; }
.step:not(:last-child)::after { display:none; }
.cta-banner { padding:36px 24px; text-align:center; justify-content:center; }
.dest-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}
TravelAI
✈
✈
📍 Kapadokya, Türkiye
Yapay Zeka Destekli Seyahat Planlama
Hayalindeki
Seyahati Planla
TravelAI ile en iyi rotaları, otelleri ve aktiviteleri keşfet. Akıllı önerilerle unutulmaz bir tatil seni bekliyor.
Popüler Destinasyonlar
📍 Türkiye
İstanbul
Tarihin ve modernliğin buluştuğu benzersiz metropol.
📍 Türkiye
Kapadokya
Peri bacaları ve balon turlarıyla masalsı bir coğrafya.
📍 Türkiye
Antalya
Turkuaz deniz, antik kentler ve muhteşem plajlar.
📍 Türkiye
Bodrum
Ege’nin incisi, lüks tatil ve eğlence merkezi.
📍 Fransa
Paris
Romantik bir şehir ve büyüleyici atmosfer.
📍 Japonya
Tokyo
Gelenek ve modernliğin eşsiz birleşimi.
📍 İtalya
Roma
Tarih kokan sokaklarıyla unutulmaz bir deneyim.
📍 ABD
New York
Enerjisi hiç bitmeyen modern metropol.
Nasıl Çalışır?
1
Gideceğin Yeri Seç
Gitmek istediğin şehir veya ülkeyi belirle.
2
Seyahat Planını Oluştur
Akıllı sistemimiz sana en uygun rota, otel ve aktiviteleri hazırlar.
3
Tatiline Başla
Planını kaydet ve unutulmaz bir deneyimin tadını çıkar!
Özellikler
Akıllı Rota Önerisi
Yapay zeka ile en uygun ve optimum rotaları keşfet. Zaman ve para tasarrufu sağla.
Otel Önerileri
Bütçene ve zevkine uygun konaklama seçenekleri bul. En iyi fiyat garantisi.
Aktivite Önerileri
Gideceğin yerdeki gezilecek yerler ve aktiviteleri keşfet. Her yaşa uygun seçenekler.
Kullanıcı Yorumları
“TravelAI sayesinde tatilimizi mükemmel şekilde planladık. Her şey çok kolaydı!”
“Otel ve rota önerileri harikaydı. Zamandan tasarruf ettim, kesinlikle tavsiye ederim.”
“Gitmeden önce tüm aktiviteleri hazır görmek tatili daha keyifli hale getirdi. Harika!”
Yeni bir maceraya
hazır mısın?
TravelAI ile hayalindeki seyahati şimdi planla ve unutulmaz anılar biriktirmeye başla.
✓İşlem başarılı!
// THEME
const htmlEl = document.documentElement;
const themeBtn = document.getElementById(‘theme-btn’);
const saved = localStorage.getItem(‘travelai_theme’) || ‘dark’;
htmlEl.setAttribute(‘data-theme’, saved);
themeBtn.textContent = saved === ‘dark’ ? ‘🌙’ : ‘☀️’;
function toggleTheme() {
const cur = htmlEl.getAttribute(‘data-theme’);
const next = cur === ‘dark’ ? ‘light’ : ‘dark’;
htmlEl.setAttribute(‘data-theme’, next);
themeBtn.textContent = next === ‘dark’ ? ‘🌙’ : ‘☀️’;
localStorage.setItem(‘travelai_theme’, next);
}
// NAV SCROLL
window.addEventListener(‘scroll’, () => { document.getElementById(‘navbar’).classList.toggle(‘scrolled’, window.scrollY > 20); });
// SCROLL REVEAL
const obs = new IntersectionObserver((entries) => { entries.forEach((e,i) => { if(e.isIntersecting) setTimeout(()=>e.target.classList.add(‘visible’), i*80); }); }, {threshold:0.1});
document.querySelectorAll(‘.reveal’).forEach(el => obs.observe(el));
// MOBILE MENU
function toggleMobileMenu() {
const m = document.getElementById(‘mobile-menu’), b = document.getElementById(‘hamburger’);
const open = m.classList.toggle(‘open’); b.classList.toggle(‘open’, open);
}
function closeMobileMenu() { document.getElementById(‘mobile-menu’).classList.remove(‘open’); document.getElementById(‘hamburger’).classList.remove(‘open’); }
// DEST FILTER
function filterDest(cat, btn) {
document.querySelectorAll(‘.dest-tab’).forEach(b=>b.classList.remove(‘active’)); btn.classList.add(‘active’);
document.querySelectorAll(‘.dest-card’).forEach(card => { card.style.display = (cat===’all’||card.dataset.cat===cat) ? ” : ‘none’; });
}
// TOAST
function showToast(msg) { const t=document.getElementById(‘toast’); document.getElementById(‘toast-text’).textContent=msg; t.classList.add(‘show’); setTimeout(()=>t.classList.remove(‘show’),3500); }
// PLANS
let plans = JSON.parse(localStorage.getItem(‘travelai_plans’)||'[]’);
function savePlans() { localStorage.setItem(‘travelai_plans’,JSON.stringify(plans)); updateBadge(); }
function updateBadge() { const b=document.getElementById(‘plans-count-badge’); b.style.display=plans.length>0?’inline’:’none’; b.textContent=plans.length; }
updateBadge();
function showMain() { document.getElementById(‘main-content’).classList.remove(‘hidden’); document.getElementById(‘plans-page’).classList.remove(‘active’); document.getElementById(‘plan-detail-page’).classList.remove(‘active’); }
function showPlans() { document.getElementById(‘main-content’).classList.add(‘hidden’); document.getElementById(‘plans-page’).classList.add(‘active’); document.getElementById(‘plan-detail-page’).classList.remove(‘active’); renderPlans(); window.scrollTo(0,0); }
function showPlanDetail(i) { document.getElementById(‘main-content’).classList.add(‘hidden’); document.getElementById(‘plans-page’).classList.remove(‘active’); document.getElementById(‘plan-detail-page’).classList.add(‘active’); renderPlanDetail(i); window.scrollTo(0,0); }
function renderPlans() {
const c = document.getElementById(‘plans-container’);
if(!plans.length){ c.innerHTML=`
🗺️
Henüz bir planın yok
İlk seyahat planını oluşturmak için butona tıkla.
`; return; }
c.innerHTML=`
${plans.map((p,i)=>`
`).join(”)}
`;
}
function deletePlan(i) { if(!confirm(‘Bu planı silmek istediğine emin misin?’))return; plans.splice(i,1); savePlans(); renderPlans(); showToast(‘Plan silindi.’); }
function renderPlanDetail(idx) {
const p = plans[idx];
document.getElementById(‘plan-detail-page’).innerHTML=`
📍 ${p.destination}
${p.date||”}${p.returnDate?’ → ‘+p.returnDate:”} · ${p.people} · ${p.budget} bütçe
${p.itinerary?renderItineraryHTML(p.itinerary):’
‘}
`;
if(!p.itinerary) generateItinerary(idx);
}
function renderItineraryHTML(data) {
const c=(i)=>`
${i}
`;
const sc=(i)=>`
${i}
`;
let h=`
🤖 AI Seyahat Özeti
${data.summary}
Bütçe
${data.estimatedCost}
En İyi Mevsim
${data.bestSeason}
`;
h+=`
`;
h+=`
`;
data.days.forEach(day=>{ h+=c(`
Gün ${day.day}
${day.title}
${day.activities.map(a=>`
${a.name}
${a.desc}
${a.tip?`
💡 ${a.tip}
`:”}
`).join(”)}`); });
h+=`
`;
h+=`
`;
data.places.forEach(pl=>{ h+=sc(`
${pl.icon}
${pl.name}
${pl.category}
${pl.desc}
⏱ ${pl.duration} · ${pl.entryFee}
`); });
h+=`
`;
h+=`
`;
data.hotels.forEach(ho=>{ h+=`
${ho.icon}
${ho.name}${ho.stars}★${ho.budget}
${ho.desc}
${ho.price}/gece
${ho.features.map(f=>`${f}`).join(”)}
`; });
h+=`
`;
h+=`
`;
data.restaurants.forEach(r=>{ h+=sc(`
${r.icon}
${r.name}
${r.cuisine}
${r.desc}
${r.priceRange} · ${r.mustTry}
`); });
h+=`
`;
h+=`
`;
data.tips.forEach(t=>{ h+=`
`; });
h+=`
`;
return h;
}
function switchTab(name, event) {
document.querySelectorAll(‘.dtab’).forEach(b=>b.classList.remove(‘active’));
document.querySelectorAll(‘.tab-content’).forEach(c=>c.style.display=’none’);
event.target.classList.add(‘active’);
document.getElementById(‘tab-‘+name).style.display=’block’;
}
async function generateItinerary(idx) {
const p = plans[idx];
const prompt = `Sen bir uzman seyahat planlayıcısısın. ${p.destination} için detaylı seyahat planı oluştur.
Gidiş: ${p.date||’belirtilmedi’}, Dönüş: ${p.returnDate||’belirtilmedi’}, Kişi: ${p.people}, Bütçe: ${p.budget}
SADECE JSON formatında yanıtla:
{“summary”:”özet”,”duration”:”5 gün”,”estimatedCost”:”₺X”,”bestSeason”:”Nisan-Haziran”,”days”:[{“day”:1,”title”:”başlık”,”activities”:[{“time”:”09:00″,”icon”:”🏛️”,”name”:”yer”,”desc”:”açıklama”,”tip”:”ipucu veya null”}]}],”places”:[{“icon”:”🗼”,”name”:”yer”,”category”:”kategori”,”desc”:”açıklama”,”duration”:”2 saat”,”entryFee”:”Ücretsiz”}],”hotels”:[{“icon”:”🏨”,”name”:”otel”,”stars”:4,”budget”:”Orta”,”desc”:”açıklama”,”price”:”₺800″,”features”:[“WiFi”,”Kahvaltı”]}],”restaurants”:[{“icon”:”🍝”,”name”:”restoran”,”cuisine”:”mutfak”,”desc”:”açıklama”,”priceRange”:”💰💰”,”mustTry”:”yemek”}],”tips”:[{“icon”:”💡”,”title”:”başlık”,”desc”:”detay”}]}
En az 3 gün, günde 4-5 aktivite, 5 gezilecek yer, 3 otel, 4 restoran, 5 ipucu. Türkçe.`;
try {
const res = await fetch(‘
https://api.anthropic.com/v1/messages’,{method:’POST’,headers:{‘Content-Type’:’application/json’},body:JSON.stringify({model:’claude-sonnet-4-20250514′,max_tokens:4000,messages:[{role:’user’,content:prompt}]})});
const data = await res.json();
let text = data.content.map(c=>c.text||”).join(”).replace(/“`json|“`/g,”).trim();
const itinerary = JSON.parse(text);
plans[idx].itinerary=itinerary; savePlans();
const area=document.getElementById(‘itinerary-area’);
if(area) area.innerHTML=renderItineraryHTML(itinerary);
renderPlans(); showToast(‘Rota hazır! ✈’);
} catch(err) {
const area=document.getElementById(‘itinerary-area’);
if(area) area.innerHTML=`
⚠️
Hata oluştu.
`;
}
}
let currentDestForPlan=”;
const modals={
login:`
Giriş Yap
Hesabına giriş yaparak seyahat planlarına devam et.
E-posta
Şifre
Hesabın yok mu? Kayıt Ol
`,
register:`
Kayıt Ol
Ücretsiz hesap oluştur ve seyahat planlamaya başla.
Ad Soyad
E-posta
Şifre
`,
plan:`
Seyahat Planla ✈
Hayalindeki tatili birkaç adımda oluştur!
Nereye?
Gidiş Tarihi
Dönüş Tarihi
Kaç kişi?1 Kişi2 Kişi3-5 Kişi6+ Kişi
BütçeEkonomikOrtaLüks
`
};
function openModal(type,extra){
currentDestForPlan=extra||”;
let body=modals[type]||”;
if(type===’dest’){body=`
${extra} 📍
AI senin için ${extra} rotanı hazırlasın!
Gidiş Tarihi
Dönüş Tarihi
Kişi1 Kişi2 Kişi3-5 Kişi6+ Kişi
BütçeEkonomikOrtaLüks
`;}
document.getElementById(‘modal-body’).innerHTML=body;
document.getElementById(‘modal’).classList.add(‘active’);
}
function closeModal(){document.getElementById(‘modal’).classList.remove(‘active’);}
function closeModalOutside(e){if(e.target.id===’modal’)closeModal();}
function setLoggedIn(email,name){
document.getElementById(‘avatar-initials’).textContent=email.slice(0,2).toUpperCase();
document.getElementById(‘menu-email’).textContent=email;
document.getElementById(‘menu-name’).textContent=name||email.split(‘@’)[0];
document.getElementById(‘btn-giris’).style.display=’none’;
document.getElementById(‘btn-avatar’).style.display=’block’;
localStorage.setItem(‘travelai_user’,JSON.stringify({email,name:name||email.split(‘@’)[0]}));
}
function setLoggedOut(){document.getElementById(‘btn-giris’).style.display=”;document.getElementById(‘btn-avatar’).style.display=’none’;localStorage.removeItem(‘travelai_user’);}
const savedUser=JSON.parse(localStorage.getItem(‘travelai_user’)||’null’);
if(savedUser)setLoggedIn(savedUser.email,savedUser.name);
function toggleUserMenu(e){e.stopPropagation();const m=document.getElementById(‘user-menu’);m.style.display=m.style.display===’none’?’block’:’none’;}
document.addEventListener(‘click’,()=>{const m=document.getElementById(‘user-menu’);if(m)m.style.display=’none’;});
function handleLogin(){const email=document.getElementById(‘login-email’)?.value.trim();if(!email){showToast(‘Lütfen e-posta gir!’);return;}setLoggedIn(email,”);closeModal();showToast(‘Hoş geldin! 👋’);}
function handleRegister(){const name=document.getElementById(‘reg-name’)?.value.trim()||”;const email=document.getElementById(‘reg-email’)?.value.trim()||”;if(!email){showToast(‘Lütfen e-posta gir!’);return;}setLoggedIn(email,name);closeModal();showToast(‘Hesabın oluşturuldu! 🎉’);}
function handleLogout(){document.getElementById(‘user-menu’).style.display=’none’;setLoggedOut();showToast(‘Çıkış yapıldı. Görüşürüz! 👋’);}
function handlePlan(){
const dest=(document.getElementById(‘p-dest’)?.value.trim()||”)||currentDestForPlan;
if(!dest){showToast(‘Lütfen destinasyon gir!’);return;}
const plan={destination:dest,date:document.getElementById(‘p-date’)?.value||”,returnDate:document.getElementById(‘p-return’)?.value||”,people:document.getElementById(‘p-people’)?.value||’1 Kişi’,budget:document.getElementById(‘p-budget’)?.value||’Orta’,created:new Date().toLocaleDateString(‘tr-TR’,{day:’2-digit’,month:’long’,year:’numeric’}),itinerary:null};
plans.unshift(plan);savePlans();closeModal();showToast(‘AI rotanı hazırlıyor… ✈’);setTimeout(()=>showPlanDetail(0),600);
}
document.addEventListener(‘keydown’,e=>{if(e.key===’Escape’)closeModal();});