Jukka Lampikoski
8c7396304b
- Poistettu hero-section HTML:stä - Poistettu hero-tyylit CSS:stä - Headerin ja controlsin padding tiivistetty - CSS cache-busting v3 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
195 lines
7.5 KiB
HTML
195 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fi">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>tykkää.fi</title>
|
|
<link rel="stylesheet" href="style.css?v=3" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
|
|
<!-- HEADER -->
|
|
<header>
|
|
<div class="header-inner">
|
|
<div class="logo">
|
|
<h1 class="pixel-logo"><span class="logo-heart">♥</span>tykkää<span class="logo-fi">.fi</span></h1>
|
|
</div>
|
|
<p class="tagline" data-i18n="tagline"></p>
|
|
<nav>
|
|
<a href="#posts" data-i18n="nav_posts"></a>
|
|
<a href="#about" data-i18n="nav_about"></a>
|
|
<a href="#contact" data-i18n="nav_contact"></a>
|
|
<a href="admin.html" data-i18n="nav_admin"></a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- SEARCH & FILTER -->
|
|
<section class="controls" id="posts">
|
|
<div class="container">
|
|
<input type="text" id="search" data-i18n-ph="search_ph" oninput="filterPosts()" />
|
|
<div class="filters" id="categoryFilters"></div>
|
|
<div class="filters sub-filters" id="subCategoryFilters"></div>
|
|
<button class="add-post-btn" onclick="openSubmitModal()">✏️ Lisää julkaisu</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- POST GRID -->
|
|
<section class="recipe-section">
|
|
<div class="container">
|
|
<div class="recipe-grid" id="postGrid"></div>
|
|
<p class="no-results" id="noResults" style="display:none;" data-i18n="no_results"></p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ABOUT -->
|
|
<section class="about" id="about">
|
|
<div class="container about-inner">
|
|
<div class="about-emoji">🤝</div>
|
|
<div>
|
|
<h2 data-i18n="about_title"></h2>
|
|
<p data-i18n="about_text"></p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CONTACT -->
|
|
<section class="contact" id="contact">
|
|
<div class="container">
|
|
<h2 data-i18n="contact_title"></h2>
|
|
<p data-i18n="contact_desc"></p>
|
|
<form class="contact-form" onsubmit="handleSubmit(event)">
|
|
<input type="text" data-i18n-ph="name_ph" required />
|
|
<input type="email" data-i18n-ph="email_ph" required />
|
|
<textarea data-i18n-ph="msg_ph" rows="4" required></textarea>
|
|
<button type="submit" class="btn" data-i18n="send_btn"></button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<p>🍳 tykkää.fi — <span data-i18n="footer"></span> © 2026</p>
|
|
</footer>
|
|
|
|
<!-- POST MODAL -->
|
|
<div class="modal-overlay" id="modalOverlay" onclick="closeModal()">
|
|
<div class="modal" onclick="event.stopPropagation()">
|
|
<button class="modal-close" onclick="closeModal()">✕</button>
|
|
<div id="modalContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SUBMIT MODAL -->
|
|
<div class="modal-overlay" id="submitOverlay" onclick="closeSubmitModal()">
|
|
<div class="modal" onclick="event.stopPropagation()" style="max-width:640px">
|
|
<button class="modal-close" onclick="closeSubmitModal()">✕</button>
|
|
<h2>✏️ Lisää julkaisu</h2>
|
|
|
|
<div class="type-toggle">
|
|
<button class="type-btn active" id="sub-typeRecipeBtn" onclick="setSubmitType('recipe')">🍳 Resepti</button>
|
|
<button class="type-btn" id="sub-typePostBtn" onclick="setSubmitType('post')">📝 Julkaisu</button>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Otsikko *</label>
|
|
<input type="text" id="sub-title" placeholder="esim. Mummon mustikkapiirakka" maxlength="100" />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Kategoria</label>
|
|
<select id="sub-category" onchange="updateSubcategoryPicker()"></select>
|
|
</div>
|
|
|
|
<div class="form-group" id="sub-subcategory-group" style="display:none">
|
|
<label>Alikategoria</label>
|
|
<select id="sub-subcategory"></select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Kirjoittaja</label>
|
|
<input type="text" id="sub-author" placeholder="Nimesi tai nimimerkki" maxlength="50" />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Kuvaus</label>
|
|
<textarea id="sub-desc" rows="2" placeholder="Lyhyt houkutteleva kuvaus..."></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Kuvat <small style="font-weight:normal;text-transform:none;color:var(--text-light)">(1. kuva pakollinen, 2. ja 3. vapaaehtoisia)</small></label>
|
|
<div class="img-upload-slots">
|
|
<div class="img-upload-slot">
|
|
<label class="img-upload-btn" id="sub-lbl1">📷 Kuva 1 *
|
|
<input type="file" accept="image/*" onchange="uploadImg(this,'sub-img1','sub-prev1','sub-lbl1')" style="display:none" />
|
|
</label>
|
|
<img class="img-preview" id="sub-prev1" alt="" />
|
|
<input type="hidden" id="sub-img1" />
|
|
</div>
|
|
<div class="img-upload-slot">
|
|
<label class="img-upload-btn" id="sub-lbl2">📷 Kuva 2
|
|
<input type="file" accept="image/*" onchange="uploadImg(this,'sub-img2','sub-prev2','sub-lbl2')" style="display:none" />
|
|
</label>
|
|
<img class="img-preview" id="sub-prev2" alt="" />
|
|
<input type="hidden" id="sub-img2" />
|
|
</div>
|
|
<div class="img-upload-slot">
|
|
<label class="img-upload-btn" id="sub-lbl3">📷 Kuva 3
|
|
<input type="file" accept="image/*" onchange="uploadImg(this,'sub-img3','sub-prev3','sub-lbl3')" style="display:none" />
|
|
</label>
|
|
<img class="img-preview" id="sub-prev3" alt="" />
|
|
<input type="hidden" id="sub-img3" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RECIPE FIELDS -->
|
|
<div id="sub-recipeFields">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Valmistusaika</label>
|
|
<input type="text" id="sub-time" placeholder="esim. 30 min" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Annoksia</label>
|
|
<input type="text" id="sub-servings" placeholder="esim. 4 annosta" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Ainekset <small style="font-weight:normal;text-transform:none;color:var(--text-light)">(yksi per rivi)</small></label>
|
|
<textarea id="sub-ingredients" rows="4" placeholder="1 dl vehnäjauhoja 2 munaa ..."></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Ohjeet <small style="font-weight:normal;text-transform:none;color:var(--text-light)">(yksi vaihe per rivi)</small></label>
|
|
<textarea id="sub-steps" rows="5" placeholder="Sekoita aineet Paista 180°C..."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- POST FIELDS -->
|
|
<div id="sub-postFields" style="display:none">
|
|
<div class="form-group">
|
|
<label>Sisältö</label>
|
|
<textarea id="sub-body" rows="8" placeholder="Kirjoita sisältö tähän..."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- honeypot -->
|
|
<input type="text" id="sub-honeypot" tabindex="-1" autocomplete="off" style="display:none" />
|
|
|
|
<!-- captcha -->
|
|
<div class="captcha-row" style="margin-top:8px">
|
|
<label class="captcha-label" id="sub-captcha-question"></label>
|
|
<input type="number" id="sub-captcha-input" placeholder="Vastaus" min="0" max="99" style="width:100px" />
|
|
</div>
|
|
|
|
<p class="sub-error" id="sub-error"></p>
|
|
<button class="submit-btn" onclick="submitPublicPost()">📨 Lähetä julkaisu</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|