biliyoo.com Ads.txt file
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Biliyoo – Çok Yakında</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #48BD84;
--primary-dark: #3fae73;
--bg-start: #f5f7fa;
--bg-end: #c3cfe2;
--card-bg: #ffffffdd;
--text-dark: #2a2a2a;
--text-light: #555;
--radius: 12px;
--transition: 0.3s ease;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
min-height:100vh;
display:flex; align-items:center; justify-content:center;
font-family:'Poppins', sans-serif;
background: linear-gradient(135deg, var(--bg-start), var(--bg-end));
color: var(--text-dark);
padding:20px;
}
.card {
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
max-width: 400px;
width: 100%;
padding: 32px 24px;
text-align: center;
position: relative;
overflow: hidden;
animation: fadeIn 0.6s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.logo img {
width: 100px;
margin-bottom: 16px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
h1 {
font-size:1.75rem;
font-weight:700;
margin-bottom:8px;
}
p.subtitle {
font-size:1rem;
color: var(--text-light);
margin-bottom:24px;
}
.countdown {
display: grid;
grid-template-columns: repeat(4,1fr);
gap:12px;
margin-bottom:24px;
}
.countdown .segment {
background:#fff;
border-radius:var(--radius);
padding:16px 0;
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.05);
transition: transform var(--transition);
}
.countdown .segment:hover {
transform: translateY(-4px);
}
.segment h2 {
font-size:1.4rem;
color: var(--primary);
margin-bottom:4px;
}
.segment small {
font-size:0.75rem;
color: var(--text-light);
text-transform: uppercase;
letter-spacing:0.5px;
}
.subscribe {
display:flex;
gap:0;
margin-bottom:16px;
}
.subscribe input {
flex:1;
padding:12px 16px;
border:1px solid #ddd;
border-right:none;
border-radius: var(--radius) 0 0 var(--radius);
font-size:0.95rem;
outline:none;
transition: border-color var(--transition);
}
.subscribe input:focus {
border-color: var(--primary);
}
.subscribe button {
padding:0 20px;
background:var(--primary);
border:none;
color:#fff;
font-weight:600;
border-radius: 0 var(--radius) var(--radius) 0;
cursor:pointer;
transition: background var(--transition), transform var(--transition);
}
.subscribe button:hover {
background:var(--primary-dark);
transform: translateY(-2px);
}
.links {
display:flex;
justify-content:center;
gap:16px;
flex-wrap:wrap;
margin-top:16px;
}
.links a {
color:var(--primary);
text-decoration:none;
font-size:0.85rem;
transition: color var(--transition);
}
.links a:hover {
color:var(--primary-dark);
text-decoration:underline;
}
/* Modal */
.modal-backdrop {
position: fixed;
top:0; left:0; right:0; bottom:0;
background:rgba(0,0,0,0.4);
display:flex; align-items:center; justify-content:center;
opacity:0; pointer-events:none;
transition: opacity var(--transition);
}
.modal-backdrop.show {
opacity:1; pointer-events:auto;
}
.modal {
background:#fff; border-radius:var(--radius);
padding:24px; max-width:320px; width:100%;
box-shadow:0 8px 24px rgba(0,0,0,0.2);
text-align:left;
animation: fadeIn 0.4s ease;
}
.modal h3 {
margin-bottom:12px; font-size:1.25rem;
}
.modal .close {
position:absolute; top:12px; right:12px;
background:none; border:none; font-size:1.25rem;
cursor:pointer;
}
@media(max-width:360px){
.countdown { grid-template-columns: repeat(2,1fr); }
}
</style>
</head>
<body>
<div class="card">
<div class="logo">
<img src="./logo.png" alt="Biliyoo Logo"/>
</div>
<h1>Çok Yakında Geliyoruz 🎉</h1>
<p class="subtitle">Sabırsızlıkla beklediğin yenilikler yolda!</p>
<div class="countdown" id="countdown">
<div class="segment">
<h2 id="days">00</h2><small>Gün</small>
</div>
<div class="segment">
<h2 id="hours">00</h2><small>Saat</small>
</div>
<div class="segment">
<h2 id="minutes">00</h2><small>Dakika</small>
</div>
<div class="segment">
<h2 id="seconds">00</h2><small>Saniye</small>
</div>
</div>
<div class="subscribe">
<input id="email" type="email" placeholder="E-posta adresiniz" required/>
<button id="subBtn">Abone Ol</button>
</div>
<div class="links">
<a href="./gizlilik" target="_blank">Gizlilik Politikası</a>
<a href="./kullanim-sozlesmesi" target="_blank">Kullanıcı Sözleşmesi</a>
</div>
</div>
<div class="modal-backdrop" id="modal">
<div class="modal">
<button class="close" id="closeModal">×</button>
<h3>Teşekkürler!</h3>
<p>Aboneliğiniz alındı. En taze haberlerimiz yakında e-posta kutunuzda! 📬</p>
</div>
</div>
<script>
// localStorage'ta saklanan bitiş zamanı anahtar adı
const KEY = 'countdownEnd';
// Eğer önceden bir bitiş tarihi yoksa şimdi+10 gün olarak ayarla
let end = localStorage.getItem(KEY);
if (!end) {
const now = Date.now();
end = now + 10 * 24 * 60 * 60 * 1000; // 10 günms = 10*86400000
localStorage.setItem(KEY, end);
} else {
end = parseInt(end, 10);
}
function tick(){
const diff = Math.max(0, end - Date.now());
const d = Math.floor(diff / 86400000);
const h = Math.floor((diff % 86400000) / 3600000);
const m = Math.floor((diff % 3600000) / 60000);
const s = Math.floor((diff % 60000) / 1000);
document.getElementById('days').textContent = String(d).padStart(2,'0');
document.getElementById('hours').textContent = String(h).padStart(2,'0');
document.getElementById('minutes').textContent = String(m).padStart(2,'0');
document.getElementById('seconds').textContent = String(s).padStart(2,'0');
}
setInterval(tick, 1000);
tick();
// Abone ol & modal
const modal = document.getElementById('modal');
document.getElementById('subBtn').onclick = () => {
const email = document.getElementById('email').value.trim();
if (!email || !/.+@.+\..+/.test(email)) {
alert('Lütfen geçerli bir e-posta girin.');
return;
}
modal.classList.add('show');
};
document.getElementById('closeModal').onclick = () => {
modal.classList.remove('show');
document.getElementById('email').value = '';
};
</script>
</body>
</html>