Homepage: Difference between revisions
No edit summary |
No edit summary |
||
| Line 801: | Line 801: | ||
<div style="max-width:1100px;margin:0 auto"> | <div style="max-width:1100px;margin:0 auto"> | ||
<div style="display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom: | <div style="display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px"> | ||
<div> | <div> | ||
<div | <div style="font-size:.73rem;font-weight:700;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px">— Fresh & Recent</div> | ||
<h2 id="latest-h" style="font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--text);letter-spacing:-.025em">Latest Articles</h2> | <h2 id="latest-h" style="font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--text);letter-spacing:-.025em">Latest Articles</h2> | ||
</div> | </div> | ||
<div style="display:flex;gap:8px"> | <div style="display:flex;align-items:center;gap:8px"> | ||
< | <div style="position:relative"> | ||
<input id="latest-search-input" type="text" placeholder="Search latest…" oninput="filterLatestCards(this.value)" style="background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 14px 9px 36px;color:var(--text);font-size:.88rem;width:200px;outline:none" /> | |||
</ | <svg style="position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.5" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35"/></svg> | ||
<button onclick="scrollLatest(1)" style="width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center; | </div> | ||
<button onclick="scrollLatest(-1)" style="width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center">‹</button> | |||
<button onclick="scrollLatest(1)" style="width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center">›</button> | |||
</div> | </div> | ||
</div> | </div> | ||
<div id="latest-deck" style="display:flex;gap: | <div id="latest-deck" style="display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:none"> | ||
<a href="https://alphax.wiki/Impact_of_Dating_Apps_on_Gay_Life" class="latest-card"> | <a href="https://alphax.wiki/Impact_of_Dating_Apps_on_Gay_Life" class="latest-card"> | ||
<div class="latest-title">Impact of Dating Apps on Gay Life</div> | <div class="latest-title">Impact of Dating Apps on Gay Life</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Dating</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/The_Loneliness_Epidemic_No_One_Talks_About_%E2%80%94_and_Why_It%E2%80%99s_Killing_Us" class="latest-card"> | <a href="https://alphax.wiki/The_Loneliness_Epidemic_No_One_Talks_About_%E2%80%94_and_Why_It%E2%80%99s_Killing_Us" class="latest-card"> | ||
<div class="latest-title">The Loneliness Epidemic No One Talks About — and Why It’s Killing Us</div> | |||
<div class="latest-title">The Loneliness Epidemic No One Talks About — and Why | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<div class="latest-date">2026</div> | <span class="tag t-white">Identity</span> | ||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Food_Play" class="latest-card"> | <a href="https://alphax.wiki/Food_Play" class="latest-card"> | ||
<div class="latest-title">Food Play</div> | <div class="latest-title">Food Play</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Kink</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Neoprene_Fetish" class="latest-card"> | <a href="https://alphax.wiki/Neoprene_Fetish" class="latest-card"> | ||
<div class="latest-title">Neoprene Fetish</div> | <div class="latest-title">Neoprene Fetish</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Watersports" class="latest-card"> | <a href="https://alphax.wiki/Watersports" class="latest-card"> | ||
<div class="latest-title">Watersports</div> | <div class="latest-title">Watersports</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Boots_Fetish" class="latest-card"> | <a href="https://alphax.wiki/Boots_Fetish" class="latest-card"> | ||
<div class="latest-title">Boots Fetish</div> | <div class="latest-title">Boots Fetish</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Tattoos_Fetish" class="latest-card"> | <a href="https://alphax.wiki/Tattoos_Fetish" class="latest-card"> | ||
<div class="latest-title">Tattoos Fetish</div> | <div class="latest-title">Tattoos Fetish</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Piercings_Fetish" class="latest-card"> | <a href="https://alphax.wiki/Piercings_Fetish" class="latest-card"> | ||
<div class="latest-title">Piercings Fetish</div> | <div class="latest-title">Piercings Fetish</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Spandex_and_Lycra_Fetish" class="latest-card"> | <a href="https://alphax.wiki/Spandex_and_Lycra_Fetish" class="latest-card"> | ||
<div class="latest-title">Spandex and Lycra Fetish</div> | <div class="latest-title">Spandex and Lycra Fetish</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Masks_Fetish" class="latest-card"> | <a href="https://alphax.wiki/Masks_Fetish" class="latest-card"> | ||
<div class="latest-title">Masks Fetish</div> | <div class="latest-title">Masks Fetish</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Uniforms_Fetish" class="latest-card"> | <a href="https://alphax.wiki/Uniforms_Fetish" class="latest-card"> | ||
<div class="latest-title">Uniforms Fetish</div> | <div class="latest-title">Uniforms Fetish</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Socks_and_Used_Clothing_Fetish" class="latest-card"> | <a href="https://alphax.wiki/Socks_and_Used_Clothing_Fetish" class="latest-card"> | ||
<div class="latest-title">Socks and Used Clothing Fetish</div> | <div class="latest-title">Socks and Used Clothing Fetish</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Hands_and_Gloves_Fetish" class="latest-card"> | <a href="https://alphax.wiki/Hands_and_Gloves_Fetish" class="latest-card"> | ||
<div class="latest-title">Hands and Gloves Fetish</div> | <div class="latest-title">Hands and Gloves Fetish</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Muscle_Worship" class="latest-card"> | <a href="https://alphax.wiki/Muscle_Worship" class="latest-card"> | ||
<div class="latest-title">Muscle Worship</div> | <div class="latest-title">Muscle Worship</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Armpits_Fetish" class="latest-card"> | <a href="https://alphax.wiki/Armpits_Fetish" class="latest-card"> | ||
<div class="latest-title">Armpits Fetish</div> | <div class="latest-title">Armpits Fetish</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Hair_Fetish" class="latest-card"> | <a href="https://alphax.wiki/Hair_Fetish" class="latest-card"> | ||
<div class="latest-title">Hair Fetish</div> | <div class="latest-title">Hair Fetish</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Sneakers_and_Sportswear_Fetish" class="latest-card"> | <a href="https://alphax.wiki/Sneakers_and_Sportswear_Fetish" class="latest-card"> | ||
<div class="latest-title">Sneakers and Sportswear Fetish</div> | <div class="latest-title">Sneakers and Sportswear Fetish</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Underwear_Fetish" class="latest-card"> | <a href="https://alphax.wiki/Underwear_Fetish" class="latest-card"> | ||
<div class="latest-title">Underwear Fetish</div> | <div class="latest-title">Underwear Fetish</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Sweat_and_Musk_Fetish" class="latest-card"> | <a href="https://alphax.wiki/Sweat_and_Musk_Fetish" class="latest-card"> | ||
<div class="latest-title">Sweat and Musk Fetish</div> | <div class="latest-title">Sweat and Musk Fetish</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
<a href="https://alphax.wiki/Latex_and_Rubber_Fetish" class="latest-card"> | <a href="https://alphax.wiki/Latex_and_Rubber_Fetish" class="latest-card"> | ||
<div class="latest-title">Latex and Rubber Fetish</div> | <div class="latest-title">Latex and Rubber Fetish</div> | ||
<div class="latest-date">2026</div> | <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto"> | ||
<span class="tag t-white">Fetish</span> | |||
<div class="latest-date">2026</div> | |||
</div> | |||
</a> | </a> | ||
</div> | </div> | ||
</div> | |||
</section> | </section> | ||
| Line 1,257: | Line 1,299: | ||
/* Latest deck scroll */ | /* Latest deck scroll */ | ||
function scrollLatest(dir) { | function scrollLatest(dir) { | ||
document.getElementById('latest-deck').scrollBy({ left: dir * 520, behavior: 'smooth' }); | document.getElementById('latest-deck').scrollBy({ left: dir * 520, behavior: 'smooth' } | ||
function filterLatestCards(query) { | |||
const q = query.toLowerCase().trim(); | |||
const cards = document.querySelectorAll('#latest-deck .latest-card'); | |||
cards.forEach(function(card) { | |||
const title = card.querySelector('.latest-title'); | |||
const text = title ? title.textContent.toLowerCase() : ''; | |||
card.style.display = (!q || text.includes(q)) ? '' : 'none'; | |||
}); | |||
}); | |||
} | } | ||