172 lines
7.4 KiB
HTML
172 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>КлинСервис - Профессиональная уборка</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; }
|
||
|
||
/* Хедер */
|
||
header {
|
||
background: white;
|
||
padding: 20px 50px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
.header-content {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.logo { font-size: 28px; font-weight: bold; color: #667eea; }
|
||
.auth-buttons { display: flex; gap: 15px; }
|
||
.btn {
|
||
padding: 12px 25px;
|
||
border: none;
|
||
border-radius: 25px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
transition: all 0.3s;
|
||
}
|
||
.btn-primary { background: #667eea; color: white; }
|
||
.btn-primary:hover { background: #5a67d8; transform: translateY(-2px); }
|
||
.btn-secondary { background: transparent; color: #667eea; border: 2px solid #667eea; }
|
||
.btn-secondary:hover { background: #667eea; color: white; }
|
||
|
||
/* Hero секция */
|
||
.hero {
|
||
background: linear-gradient(rgba(102,126,234,0.9), rgba(118,75,162,0.9)),
|
||
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23f8f9fa" width="1200" height="600"/></svg>');
|
||
padding: 100px 50px;
|
||
text-align: center;
|
||
color: white;
|
||
}
|
||
.hero-content { max-width: 800px; margin: 0 auto; }
|
||
.hero h1 { font-size: 48px; margin-bottom: 20px; }
|
||
.hero p { font-size: 20px; margin-bottom: 40px; opacity: 0.95; }
|
||
.hero-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
|
||
|
||
/* Секция услуг */
|
||
.services { padding: 80px 50px; max-width: 1200px; margin: 0 auto; }
|
||
.section-title { text-align: center; font-size: 36px; margin-bottom: 60px; color: #333; }
|
||
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; }
|
||
.service-card {
|
||
background: white;
|
||
padding: 40px;
|
||
border-radius: 20px;
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||
text-align: center;
|
||
transition: all 0.3s;
|
||
border: 1px solid #f0f0f0;
|
||
}
|
||
.service-card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,0.15); }
|
||
.service-icon { font-size: 64px; margin-bottom: 20px; }
|
||
.service-card h3 { font-size: 24px; margin-bottom: 15px; color: #333; }
|
||
.service-price { font-size: 28px; font-weight: bold; color: #667eea; margin: 20px 0; }
|
||
|
||
/* Футер */
|
||
footer {
|
||
background: #2c3e50;
|
||
color: white;
|
||
padding: 40px 50px 20px;
|
||
text-align: center;
|
||
}
|
||
.footer-content { max-width: 1200px; margin: 0 auto; }
|
||
.social-links { display: flex; justify-content: center; gap: 20px; margin: 20px 0; }
|
||
.social-links a { color: white; font-size: 24px; transition: color 0.3s; }
|
||
.social-links a:hover { color: #667eea; }
|
||
|
||
@media (max-width: 768px) {
|
||
header, .services { padding-left: 20px; padding-right: 20px; }
|
||
.hero h1 { font-size: 36px; }
|
||
.hero-buttons { flex-direction: column; align-items: center; }
|
||
.services-grid { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="header-content">
|
||
<div class="logo">🧹 КлинСервис</div>
|
||
<div class="auth-buttons">
|
||
<a href="register-login.html" class="btn btn-secondary">Войти</a>
|
||
<a href="register-login.html" class="btn btn-primary">Регистрация</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="hero">
|
||
<div class="hero-content">
|
||
<h1>Профессиональная уборка</h1>
|
||
<p>Чистота и порядок в вашем доме за 2 часа. Быстро. Качественно. Надежно.</p>
|
||
<div class="hero-buttons">
|
||
<a href="services.html" class="btn btn-primary" style="padding: 18px 40px; font-size: 18px;">Заказать уборку</a>
|
||
<a href="#services" class="btn btn-secondary" style="padding: 18px 40px; font-size: 18px;">Наши услуги</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="services" id="services">
|
||
<h2 class="section-title">Наши услуги</h2>
|
||
<div class="services-grid">
|
||
<div class="service-card">
|
||
<div class="service-icon">🧹</div>
|
||
<h3>Поддерживающая уборка</h3>
|
||
<div class="service-price">от 2500 ₽</div>
|
||
<p>Быстрая уборка помещений. Пыль, полы, сантехника. Идеально для ежедневной чистоты.</p>
|
||
</div>
|
||
<div class="service-card">
|
||
<div class="service-icon">✨</div>
|
||
<h3>Генеральная уборка</h3>
|
||
<div class="service-price">от 5000 ₽</div>
|
||
<p>Полная уборка с мойкой окон, шкафов, техники. Как после ремонта.</p>
|
||
</div>
|
||
<div class="service-card">
|
||
<div class="service-icon">🪑</div>
|
||
<h3>Химчистка мебели</h3>
|
||
<div class="service-price">от 3500 ₽</div>
|
||
<p>Профессиональная чистка диванов, кресел, ковров. Высокое давление + химия.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="footer-content">
|
||
<h3>🧹 КлинСервис</h3>
|
||
<p>Профессиональная уборка для вашего комфорта</p>
|
||
<div class="social-links">
|
||
<a href="#">📱 Telegram</a>
|
||
<a href="#">📧 WhatsApp</a>
|
||
<a href="#">📞 +7 (999) 123-45-67</a>
|
||
</div>
|
||
<p style="margin-top: 30px; opacity: 0.8;">© 2026 КлинСервис. Все права защищены.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
const token = localStorage.getItem('token');
|
||
|
||
if (token) {
|
||
// Если авторизован — показываем кнопки "Личный кабинет" и "Выход"
|
||
document.querySelector('.auth-buttons').innerHTML = `
|
||
<a href="my-bookings.html" class="btn btn-secondary">Личный кабинет</a>
|
||
<a href="#" onclick="logout()" class="btn btn-primary">Выход</a>
|
||
`;
|
||
}
|
||
|
||
function logout() {
|
||
localStorage.removeItem('token');
|
||
window.location.href = 'register-login.html';
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|