Initial commit: tykkää.fi sivusto
- Julkaisualusta resepteille, neuloville, vinkeille - PHP-backend (api.php) palvelinpuolen datalle - Admin-paneeli salasanasuojauksella - Kuvaupload (upload.php) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
202
index.html
Normal file
202
index.html
Normal file
@@ -0,0 +1,202 @@
|
||||
<!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" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HEADER -->
|
||||
<header>
|
||||
<div class="header-inner">
|
||||
<div class="logo">
|
||||
<span class="logo-icon">🍳</span>
|
||||
<h1>tykkää.fi</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>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<h2 data-i18n="hero_title"></h2>
|
||||
<p data-i18n="hero_desc"></p>
|
||||
<a href="#posts" class="btn" data-i18n="hero_btn"></a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 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>
|
||||
<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-row">
|
||||
<div class="form-group">
|
||||
<label>Kategoria</label>
|
||||
<select id="sub-category"></select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Emoji</label>
|
||||
<input type="text" id="sub-emoji" placeholder="🍽️" maxlength="4" />
|
||||
</div>
|
||||
</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>
|
||||
Reference in New Issue
Block a user