https://pastein.ru/t/-WB
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Торты</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--cream: #F9F3EC;
--warm-white: #FDF9F5;
--chocolate: #2C1A0E;
--mocha: #5C3D2E;
--caramel: #C4862B;
--blush: #E8C4A0;
--text: #1E1009;
--muted: #8C6E5A;
}
html { scroll-behavior: smooth; }
body {
background: var(--cream);
color: var(--text);
font-family: 'Inter', sans-serif;
font-weight: 300;
min-height: 100vh;
overflow-x: hidden;
}
/* HERO */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 40px 24px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(196,134,43,0.12) 0%, transparent 70%);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}
.hero-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--caramel);
margin-bottom: 24px;
opacity: 0;
animation: fadeUp 1s ease forwards 0.3s;
}
.hero-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(52px, 10vw, 120px);
font-weight: 300;
line-height: 0.9;
color: var(--chocolate);
letter-spacing: -0.02em;
opacity: 0;
animation: fadeUp 1s ease forwards 0.5s;
}
.hero-title em {
font-style: italic;
color: var(--caramel);
}
.hero-sub {
font-size: 14px;
color: var(--muted);
margin-top: 28px;
letter-spacing: 0.05em;
opacity: 0;
animation: fadeUp 1s ease forwards 0.8s;
}
.hero-scroll {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
opacity: 0;
animation: fadeUp 1s ease forwards 1.2s;
}
.hero-scroll span {
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
}
.scroll-line {
width: 1px;
height: 50px;
background: linear-gradient(to bottom, var(--caramel), transparent);
animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
0% { transform: scaleY(0); transform-origin: top; }
50% { transform: scaleY(1); transform-origin: top; }
51% { transform: scaleY(1); transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* SECTION */
.cakes-section {
padding: 80px 24px 120px;
max-width: 1200px;
margin: 0 auto;
}
.section-label {
font-size: 10px;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--caramel);
margin-bottom: 60px;
text-align: center;
}
/* CAKE CARD */
.cake-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin-bottom: 120px;
opacity: 0;
transform: translateY(50px);
transition: opacity 0.8s ease, transform 0.8s ease;
background: var(--warm-white);
border-radius: 2px;
overflow: hidden;
box-shadow: 0 2px 40px rgba(44,26,14,0.06);
}
.cake-card.visible { opacity: 1; transform: translateY(0); }
.cake-card:nth-child(even) { direction: rtl; }
.cake-card:nth-child(even) > * { direction: ltr; }
.cake-image-wrap {
position: relative;
min-height: 420px;
overflow: hidden;
background: var(--blush);
cursor: pointer;
}
.cake-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
inset: 0;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: none;
}
.cake-image-wrap img.loaded { display: block; }
.cake-image-wrap:hover img { transform: scale(1.06); }
.image-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--mocha);
opacity: 0.4;
transition: opacity 0.3s;
}
.image-placeholder svg { width: 48px; height: 48px; }
.image-placeholder span {
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.cake-image-wrap:hover .image-placeholder { opacity: 0.7; }
.upload-input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
z-index: 10;
}
.cake-content {
padding: 52px 48px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
}
.cake-number {
font-family: 'Cormorant Garamond', serif;
font-size: 72px;
font-weight: 300;
color: var(--blush);
line-height: 1;
margin-bottom: -12px;
}
.cake-name-input {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(28px, 4vw, 42px);
font-weight: 400;
color: var(--chocolate);
border: none;
background: transparent;
border-bottom: 1px solid var(--blush);
padding-bottom: 8px;
outline: none;
width: 100%;
transition: border-color 0.3s;
line-height: 1.2;
}
.cake-name-input:focus { border-color: var(--caramel); }
.cake-name-input::placeholder { color: var(--blush); font-style: italic; }
.field-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.field-label {
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--caramel);
}
.field-input, .field-textarea {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 300;
color: var(--mocha);
border: none;
background: transparent;
border-bottom: 1px solid rgba(196,134,43,0.2);
padding: 6px 0;
outline: none;
width: 100%;
transition: border-color 0.3s;
resize: none;
line-height: 1.6;
}
.field-input:focus, .field-textarea:focus { border-color: var(--caramel); }
.field-input::placeholder, .field-textarea::placeholder { color: var(--blush); }
.field-textarea { min-height: 80px; }
.flavor-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.flavor-tag-input {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 400;
color: var(--mocha);
background: rgba(196,134,43,0.08);
border: 1px solid rgba(196,134,43,0.2);
border-radius: 20px;
padding: 4px 14px;
outline: none;
transition: all 0.3s;
min-width: 80px;
max-width: 160px;
}
.flavor-tag-input:focus {
background: rgba(196,134,43,0.15);
border-color: var(--caramel);
}
.flavor-tag-input::placeholder { color: var(--blush); }
/* ADD BUTTON */
.add-cake-wrap {
text-align: center;
margin-top: 40px;
}
.add-btn {
font-family: 'Cormorant Garamond', serif;
font-size: 18px;
font-style: italic;
color: var(--caramel);
background: transparent;
border: 1px solid var(--caramel);
padding: 16px 48px;
cursor: pointer;
letter-spacing: 0.05em;
transition: all 0.4s;
border-radius: 1px;
}
.add-btn:hover {
background: var(--caramel);
color: var(--cream);
}
/* DIVIDER */
.divider {
width: 1px;
height: 60px;
background: linear-gradient(to bottom, transparent, var(--caramel), transparent);
margin: 0 auto 60px;
}
/* FOOTER */
footer {
text-align: center;
padding: 40px 24px;
border-top: 1px solid rgba(196,134,43,0.15);
color: var(--muted);
font-size: 12px;
letter-spacing: 0.1em;
}
/* MOBILE */
@media (max-width: 768px) {
.cake-card { grid-template-columns: 1fr; }
.cake-card:nth-child(even) { direction: ltr; }
.cake-image-wrap { min-height: 280px; }
.cake-content { padding: 32px 24px; }
.cake-number { font-size: 52px; }
.hero-title { font-size: clamp(44px, 14vw, 80px); }
}
/* REMOVE BUTTON */
.remove-btn {
align-self: flex-end;
background: transparent;
border: none;
color: var(--blush);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
padding: 4px 0;
transition: color 0.3s;
margin-top: auto;
}
.remove-btn:hover { color: #c0392b; }
/* PRINT / EXPORT HINT */
.hint {
text-align: center;
font-size: 11px;
color: var(--muted);
letter-spacing: 0.1em;
margin-top: -60px;
margin-bottom: 60px;
opacity: 0.6;
}
</style>
</head>
<body>
<!-- HERO -->
<section class="hero">
<p class="hero-eyebrow">Авторская кондитерская</p>
<h1 class="hero-title">Каждый<br><em>торт</em> —<br>история</h1>
<p class="hero-sub">Вкус · Текстура · Настроение</p>
<div class="hero-scroll">
<div class="scroll-line"></div>
<span>Смотреть</span>
</div>
</section>
<!-- CAKES -->
<section class="cakes-section" id="cakes">
<p class="section-label">Коллекция</p>
<div class="divider"></div>
<div id="cake-list"></div>
<p class="hint">Заполните поля и загрузите фото — всё сохранится автоматически в браузере</p>
<div class="add-cake-wrap">
<button class="add-btn" onclick="addCake()">+ Добавить торт</button>
</div>
</section>
<footer>
<p>© 2025 · Авторские торты</p>
</footer>
<script>
// ─── DATA ───────────────────────────────────────────────
let cakes = JSON.parse(localStorage.getItem('cakes') || 'null') || [
{ id: 1, name: '', taste: '', description: '', reminds: '', tags: ['', '', ''], image: null },
{ id: 2, name: '', taste: '', description: '', reminds: '', tags: ['', '', ''], image: null },
];
let nextId = Math.max(...cakes.map(c => c.id), 0) + 1;
function save() {
localStorage.setItem('cakes', JSON.stringify(cakes));
}
// ─── RENDER ─────────────────────────────────────────────
function render() {
const list = document.getElementById('cake-list');
list.innerHTML = '';
cakes.forEach((cake, i) => {
const card = document.createElement('div');
card.className = 'cake-card';
card.dataset.id = cake.id;
card.innerHTML = `
<div class="cake-image-wrap">
<input type="file" class="upload-input" accept="image/*" onchange="uploadImage(event, ${cake.id})" title="Загрузить фото">
${cake.image
? `<img src="${cake.image}" class="loaded" alt="Торт">`
: `<div class="image-placeholder">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
<rect x="3" y="3" width="18" height="18" rx="2"/>
<circle cx="8.5" cy="8.5" r="1.5"/>
<path d="M21 15l-5-5L5 21"/>
</svg>
<span>Нажмите для фото</span>
</div>`
}
</div>
<div class="cake-content">
<div class="cake-number">0${i + 1}</div>
<input class="cake-name-input" type="text" placeholder="Название торта"
value="${cake.name}" oninput="updateField(${cake.id}, 'name', this.value)">
<div class="field-group">
<span class="field-label">Вкус</span>
<input class="field-input" type="text" placeholder="Шоколад, карамель, ваниль..."
value="${cake.taste}" oninput="updateField(${cake.id}, 'taste', this.value)">
</div>
<div class="field-group">
<span class="field-label">Описание</span>
<textarea class="field-textarea" placeholder="Расскажите про начинку, текстуру, состав..."
oninput="updateField(${cake.id}, 'description', this.value)">${cake.description}</textarea>
</div>
<div class="field-group">
<span class="field-label">На что похоже / что напоминает</span>
<input class="field-input" type="text" placeholder="Детство, осенний лес, горячий кофе..."
value="${cake.reminds}" oninput="updateField(${cake.id}, 'reminds', this.value)">
</div>
<div class="field-group">
<span class="field-label">Теги вкуса</span>
<div class="flavor-tags">
${cake.tags.map((t, ti) => `
<input class="flavor-tag-input" type="text" placeholder="тег ${ti+1}"
value="${t}" oninput="updateTag(${cake.id}, ${ti}, this.value)">
`).join('')}
</div>
</div>
${cakes.length > 1
? `<button class="remove-btn" onclick="removeCake(${cake.id})">× Удалить</button>`
: ''
}
</div>
`;
list.appendChild(card);
// animate in
requestAnimationFrame(() => {
setTimeout(() => card.classList.add('visible'), 50);
});
});
observeCards();
}
// ─── ACTIONS ─────────────────────────────────────────────
function addCake() {
cakes.push({ id: nextId++, name: '', taste: '', description: '', reminds: '', tags: ['', '', ''], image: null });
save();
render();
setTimeout(() => {
const cards = document.querySelectorAll('.cake-card');
cards[cards.length - 1].scrollIntoView({ behavior: 'smooth', block: 'center' });
}, 100);
}
function removeCake(id) {
if (cakes.length <= 1) return;
cakes = cakes.filter(c => c.id !== id);
save();
render();
}
function updateField(id, field, val) {
const c = cakes.find(c => c.id === id);
if (c) { c[field] = val; save(); }
}
function updateTag(id, ti, val) {
const c = cakes.find(c => c.id === id);
if (c) { c.tags[ti] = val; save(); }
}
function uploadImage(e, id) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = ev => {
const c = cakes.find(c => c.id === id);
if (c) { c.image = ev.target.result; save(); render(); }
};
reader.readAsDataURL(file);
}
// ─── SCROLL OBSERVER ─────────────────────────────────────
function observeCards() {
const cards = document.querySelectorAll('.cake-card:not(.visible)');
const obs = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }
});
}, { threshold: 0.15 });
cards.forEach(c => obs.observe(c));
}
// ─── INIT ─────────────────────────────────────────────────
render();
</script>
</body>
</html>
