Add user registration/login, persistent likes, category hiding, and contact email

- User auth: register (nickname + password + email), login, logout with PHP sessions
- Persistent likes: logged-in users' likes saved to users.json, anonymous via session
- "Tykkäämäni" filter button next to search — filter liked posts, combinable with search
- Hide empty/sparse categories from filter buttons until posts exist
- Replace broken contact form with simple mailto link (info@tykkaa.fi)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-08 11:08:22 +02:00
parent f14913cb4b
commit 5dfbbacf39
4 changed files with 443 additions and 70 deletions

View File

@@ -17,6 +17,7 @@
<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>
<div class="user-area" id="userArea"></div>
<nav>
<a href="#posts" data-i18n="nav_posts"></a>
<a href="#about" data-i18n="nav_about"></a>
@@ -29,7 +30,10 @@
<!-- SEARCH & FILTER -->
<section class="controls" id="posts">
<div class="container">
<input type="text" id="search" data-i18n-ph="search_ph" oninput="filterPosts()" />
<div class="search-row">
<input type="text" id="search" data-i18n-ph="search_ph" oninput="filterPosts()" />
<button class="likes-filter-btn" id="likesFilterBtn" onclick="toggleLikesFilter()">❤️ Tykkäämäni</button>
</div>
<div class="filters" id="categoryFilters"></div>
<div class="filters sub-filters" id="subCategoryFilters"></div>
<button class="add-post-btn" onclick="openSubmitModal()">✏️ Lisää julkaisu</button>
@@ -60,12 +64,7 @@
<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>
<a href="mailto:info@tykkaa.fi" class="contact-email">info@tykkaa.fi</a>
</div>
</section>
@@ -190,6 +189,14 @@
<img id="lightboxImg" src="" alt="" onclick="event.stopPropagation()" />
</div>
<!-- AUTH MODAL -->
<div class="modal-overlay" id="authOverlay" onclick="closeAuthModal()">
<div class="modal" onclick="event.stopPropagation()" style="max-width:420px">
<button class="modal-close" onclick="closeAuthModal()"></button>
<div id="authContent"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>