<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница — Fixtape</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
font: 15px/1.5 system-ui, sans-serif;
color: #1f2937;
background: #f9fafb;
}
.site-header {
background: #111827;
color: #fff;
padding: 16px 32px;
display: flex;
align-items: center;
gap: 24px;
}
.logo { font-weight: 700; font-size: 18px; }
.site-header nav a {
color: #9ca3af;
margin-right: 16px;
text-decoration: none;
font-size: 14px;
}
.site-header nav a:hover { color: #fff; }
main { max-width: 720px; margin: 32px auto; padding: 0 16px; }
.hero h2 { font-size: 28px; margin: 0 0 8px; }
.hero p { color: #4b5563; }
.cta {
background: #4f46e5;
color: #fff;
border: none;
border-radius: 8px;
padding: 12px 20px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.cta.secondary { background: #e5e7eb; color: #1f2937; }
.cards { display: flex; gap: 16px; margin-top: 40px; }
.card {
flex: 1;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 18px;
}
.card h3 { margin: 0 0 6px; font-size: 16px; }
.card p { margin: 0; font-size: 13px; color: #6b7280; }
.signup {
margin-top: 40px;
padding: 20px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
}
.signup input {
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
width: 260px;
}
.signup button {
margin-left: 8px;
padding: 10px 18px;
border: none;
border-radius: 8px;
background: #111827;
color: #fff;
font-size: 14px;
cursor: pointer;
}
.note { margin-top: 40px; color: #9ca3af; font-size: 13px; }
</style>
</head>
<body>
<header class="site-header">
<div class="logo">Demo</div>
<nav>
<a href="#">Главная</a>
<a href="#">Тарифы</a>
<a href="#">Документация</a>
</nav>
</header>
<main>
<section class="hero">
<h2>Тестовая страница для экстеншена</h2>
<p>Наведите курсор на любой элемент и кликните, чтобы открыть форму правки. Shift+клик добавляет элемент к текущей группе.</p>
<button class="cta">Попробовать бесплатно</button>
<button class="cta secondary">Узнать больше</button>
</section>
<section class="cards">
<div class="card">
<h3>Быстро</h3>
<p>Правки собираются за несколько кликов.</p>
</div>
<div class="card">
<h3>Точно</h3>
<p>Селектор указывает агенту точно на элемент.</p>
</div>
<div class="card">
<h3>Удобно</h3>
<p>Копируете всё одним запросом.</p>
</div>
</section>
<section class="signup">
<h3>Подписка на новости</h3>
<input type="email" placeholder="you@example.com" />
<button type="submit">Подписаться</button>
</section>
<p class="note">Загрузите экстеншн через chrome://extensions → Load unpacked.</p>
</main>
</body>
</html>
