http://aquagroup.ru/admin-mockup-v1/

1<!DOCTYPE html>
2<html lang="ru">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<title>Aquario ONE - Макеты админки</title>
7<link rel="icon" href="assets/logo-icon.svg">
8<link rel="stylesheet" href="assets/app.css">
9<style>
10  body { overflow-y: auto; }
11  .hero { max-width: 1100px; margin: 0 auto; padding: 70px 24px 40px; position: relative; z-index: 1; }
12  .hero .mark { width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center;
13    background: linear-gradient(145deg, rgba(0,141,210,.28), rgba(0,141,210,.05));
14    border: 1px solid rgba(0,141,210,.4); box-shadow: var(--glow-soft); margin-bottom: 22px; }
15  .hero .mark img { width: 38px; filter: brightness(0) invert(1); }
16  .hero h1 { font-size: 42px; letter-spacing: -.03em; }
17  .hero h1 span { color: var(--brand-300); }
18  .hero p { color: var(--text-2); font-size: 16px; max-width: 620px; margin-top: 14px; }
19  .cards { max-width: 1100px; margin: 0 auto 70px; padding: 0 24px; position: relative; z-index: 1;
20    display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
21  .pcard { text-decoration: none; }
22  .pcard .prev { height: 150px; display: grid; place-items: center; color: var(--brand-300);
23    background: radial-gradient(120% 120% at 30% 20%, rgba(0,141,210,.18), var(--bg-2)); border-bottom: 1px solid var(--stroke-soft); }
24  .pcard .prev svg { width: 50px; height: 50px; }
25  .pcard .info { padding: 16px 18px; }
26  .pcard .info h3 { font-size: 16px; }
27  .pcard .info p { color: var(--text-3); font-size: 13px; margin: 5px 0 0; }
28  .tagline { display:inline-flex; gap:8px; align-items:center; margin-bottom:20px; }
29</style>
30</head>
31<body data-page="none">
32<div class="hero reveal in">
33  <div class="tagline"><span class="chip chip--brand">Refined Glass</span><span class="chip">тёмная тема</span><span class="chip chip--amber">motion design</span></div>
34  <div class="mark"><img src="assets/logo-icon.svg" alt="Aquario"></div>
35  <h1>Aquario <span>ONE</span> - админка</h1>
36  <p>Макеты нового дизайна админки микросервиса на базе функционала legacy one.front. Тёмное матовое стекло, водный azure-акцент, аккуратный motion. Открывайте страницы и проверяйте живые состояния.</p>
37</div>
38
39<div class="cards" id="cards"></div>
40

41<script src="assets/app.js"></script>

41

42<script>
43  // на этой странице сайдбар не нужен - просто фон
44  var pages = [
45    ['design-system.html','Дизайн-система','Палитра, токены, типографика, компоненты','cube'],
46    ['01-dashboard.html','Дашборд','Сводка, KPI, графики, активность','dashboard'],
47    ['02-equipment.html','Оборудование','Каталог, карточка, кривая H-Q, 3D','equipment'],
48    ['03-files.html','Файлы','Медиатека, загрузка, инспектор, теги','files'],
49    ['04-taxonomy.html','Теги и поля','Таксономия: список + редактор','tags']
50  ];
51  document.getElementById('cards').innerHTML = pages.map(function(p,i){
52    return '<a class="pcard card card-hover reveal in" href="'+p[0]+'" style="transition-delay:'+(i*60)+'ms">'+
53      '<div class="prev">'+AQ_SVG(p[3])+'</div>'+
54      '<div class="info"><h3>'+p[1]+'</h3><p>'+p[2]+'</p></div></a>';
55  }).join('');
56</script>

56
57</body>
58</html>