Jukka Lampikoski
7bb5924cf6
When user selects Reseptit category, recipe fields (time, servings, ingredients, steps) appear automatically. All other categories show the post body field instead. Removed the manual toggle buttons and cleaned up related CSS. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
190 lines
7.2 KiB
HTML
190 lines
7.2 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="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>
|