<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>SereniQ — Hitta ditt lugn</title>
<meta name="description" content="SereniQ — stresshantering och mental klarhet. Prova freemium-andningsövning direkt på sidan. Registrera dig för beta."/>
<link rel="icon" href="data:,">
<style>
:root{
--bg:#faf7f8;
--ink:#0b1b23;
--card:#ffffff;
--panel:#fbfbff;
--turq:#52E9EC;
--vio:#7B58EF;
--muted:#72849a;
--accent-grad: linear-gradient(90deg,var(--turq),var(--vio));
--radius:18px;
--shadow-lg: 0 30px 80px rgba(11,16,32,0.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
background: var(--bg); color:var(--ink); line-height:1.5;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit; text-decoration:none}
/* Header */
header{position:sticky; top:0; z-index:40;
background: linear-gradient(90deg,#47e1df33 0%, #b48af333 100%);
backdrop-filter: blur(6px); box-shadow:0 6px 20px rgba(11,16,32,0.08);
}
.wrap{max-width:1100px; margin:0 auto; padding:22px}
.header-inner{display:flex;align-items:center;gap:16px}
.logo-img{height:50px; width:auto}
.brand{
display:flex; flex-direction:column; line-height:1.05;
}
.brand .title{font-weight:800; letter-spacing:.2px}
.brand .tag{font-size:12px; color:var(--muted)}
nav{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
nav a{
padding:10px 16px; border-radius:999px; font-weight:700;
background: var(--accent-grad); color:#fff; box-shadow:0 10px 24px rgba(123,88,239,0.18);
transition: transform .12s ease, opacity .15s ease;
}
nav a:hover{transform:translateY(-1px); opacity:.95}
/* Buttons */
.btn{padding:12px 22px;border-radius:999px;font-weight:800;cursor:pointer;border:none}
.btn.primary{background:var(--accent-grad); color:white; box-shadow:0 14px 40px rgba(82,233,236,0.12)}
.btn.ghost{background:#fff;border:1px solid rgba(0,0,0,0.08);color:#08313a}
/* Hero */
.hero{background: linear-gradient(120deg, rgba(82,233,236,0.12), rgba(123,88,239,0.16)); padding:64px 0 52px;}
.hero .grid{display:grid;grid-template-columns:1fr 460px;gap:28px;align-items:center}
.hero h1{font-size:36px;margin:0 0 12px;color:#08313a}
.hero p{margin:0 0 20px;color:#155055}
.hero .hero-cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* Cards & grids */
.card{background:linear-gradient(180deg, var(--card), var(--panel)); border-radius:20px; padding:28px; box-shadow:var(--shadow-lg);}
section{padding:48px 0}
.two-col{display:grid; grid-template-columns:1fr 420px; gap:28px; align-items:start}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
.feature{background:#fff;padding:18px;border-radius:12px;box-shadow:0 18px 40px rgba(10,20,30,0.04)}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.video-card{background:linear-gradient(180deg,#fff,#f9f9ff);border-radius:12px;padding:12px;box-shadow:0 12px 30px rgba(10,20,30,0.04)}
/* Andningswidget */
#sereniq-breathe { max-width:100%; margin:0 auto; }
#sereniq-breathe{
--sq-grad-start: var(--turq);
--sq-grad-end: var(--vio);
--sq-text: #EAF6FF;
--sq-muted: #9fb3c8;
--sq-in:4s; --sq-hold:2s; --sq-out:6s; --sq-total: calc(var(--sq-in) + var(--sq-hold) + var(--sq-out));
}
#sereniq-breathe .sq-wrap{
position:relative; isolation:isolate; text-align:center;
padding:44px 20px 56px; border-radius:18px; overflow:hidden;
background: linear-gradient(180deg, rgba(82,233,236,0.15), rgba(123,88,239,0.25));
box-shadow: 0 30px 80px rgba(3,6,12,0.45); color:var(--sq-text);
}
#sereniq-breathe .sq-circle{
width:min(40vmin,260px); aspect-ratio:1; margin:8px auto 16px; border-radius:50%;
background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 35%, rgba(255,255,255,.08) 60%, rgba(255,255,255,0) 72%);
filter: drop-shadow(0 0 34px rgba(123,88,239,.32)) drop-shadow(0 0 78px rgba(82,233,236,.22));
transform-origin:center; animation: sq-breathe var(--sq-total) linear infinite; animation-play-state: paused;
}
#sereniq-breathe.is-running .sq-circle{ animation-play-state: running; }
#sereniq-breathe .sq-halo{
position:absolute; inset:0;
background:
radial-gradient(45% 45% at 50% 45%, rgba(82,233,236,0.55), transparent 70%),
radial-gradient(50% 50% at 50% 55%, rgba(163,133,249,0.45), transparent 80%),
radial-gradient(65% 65% at 50% 50%, rgba(123,88,239,0.40), transparent 90%);
mix-blend-mode:screen; pointer-events:none; animation: sq-halo var(--sq-total) ease-in-out infinite;
animation-play-state: paused; border-radius:50%;
}
#sereniq-breathe.is-running .sq-halo{ animation-play-state: running; }
@keyframes sq-breathe{ 0%{transform:scale(.78);opacity:.88} 40%{transform:scale(1.15);opacity:.96} 60%{transform:scale(1.15);opacity:.96} 100%{transform:scale(.78);opacity:.88} }
@keyframes sq-halo{ 0%{opacity:.50;transform:scale(.9)} 40%{opacity:.9;transform:scale(1.1)} 60%{opacity:.9;transform:scale(1.1)} 100%{opacity:.50;transform:scale(0.9)} }
.sq-title{ font-weight:800; margin:18px 0 6px; color:var(--sq-text); font-size:18px; }
.sq-instr{ color:var(--sq-muted); margin-bottom:12px }
.sq-controls{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:8px }
.sq-btn{ cursor:pointer; border-radius:999px; padding:8px 12px; border:1px solid rgba(255,255,255,.08); color:#fff;
background:linear-gradient(90deg,var(--sq-grad-start),var(--sq-grad-end)); font-weight:700}
.sq-btn[aria-pressed="true"]{ box-shadow:0 8px 24px rgba(123,88,239,.22) inset }
.sq-run{ margin-top:12px; display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap }
.sq-progress{ color:var(--muted); margin-left:6px; font-weight:700 }
.sq-done{ margin-top:18px; display:none }
/* Collab / invest */
.collab{ text-align:center; padding:60px 20px; background:linear-gradient(180deg,#faf7f8,#eef0ff);}
.collab h2{font-size:28px;margin-bottom:12px;color:#123}
.collab p{color:#444;margin-bottom:20px}
/* Forms */
.signup{display:flex;gap:8px;align-items:center}
input[type="email"]{padding:12px;border-radius:999px;border:1px solid rgba(11,16,24,0.06);flex:1}
form.interest{display:grid;gap:12px;margin-top:20px}
input,select,textarea{padding:12px;border-radius:12px;border:1px solid rgba(0,0,0,.12);font-size:15px;width:100%}
small.muted{color:var(--muted);font-size:13px}
/* Footer */
footer{padding:28px 0;background:linear-gradient(180deg,#fff,#f7f8fb);border-top:1px solid rgba(11,16,24,0.06)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.foot a{color:var(--muted); text-decoration:underline}
/* Responsive */
@media (max-width:980px){
.hero .grid{grid-template-columns:1fr; text-align:center}
.two-col{grid-template-columns:1fr; padding:0 18px}
.video-grid{grid-template-columns:1fr}
.features{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
nav{display:none}
.hero h1{font-size:26px}
.wrap{padding:18px}
}
</style>
</head>
<body>
<!-- HEADER -->
<header aria-label="SereniQ topbar">
<div class="wrap header-inner">
<img class="logo-img" alt="SereniQ" src="https://sereniqapp.com/wp-content/uploads/2025/09/SerenIQ-Logga-2024-11-30-22_51_34.png">
<div class="brand">
<div class="title">SereniQ</div>
<div class="tag">Find your inner balance</div>
</div>
<nav aria-label="Huvudmeny">
<a href="#om">Om</a>
<a href="#freemium">Andas nu</a>
<a href="#videos">Videoguider</a>
<a href="#premium">Premium</a>
<a href="#business">Företag</a>
<a href="#kontakt">Kontakt</a>
</nav>
</div>
</header>
<main>
<!-- HERO + FREEMIUM -->
<section class="hero" id="top">
<div class="wrap">
<div class="grid">
<div>
<h1>Hitta ditt lugn, var du än är</h1>
<p>SereniQ kombinerar enkla, vetenskapligt inspirerade övningar med varma digitala verktyg. Prova en andningsövning direkt — ingen inloggning krävs.</p>
<div class="hero-cta">
<button class="btn primary" onclick="document.querySelector('#freemium').scrollIntoView({behavior:'smooth'})">Börja andas med SereniQ</button>
<a class="btn ghost" href="#premium">Se premium</a>
</div>
<p style="margin-top:16px;color:var(--muted)">Notera: andningswidgeten är ett smakprov av freemium-upplevelsen — appen kommer innehålla mer personligt anpassat innehåll.</p>
</div>
<div class="card" id="freemium">
<h3 style="margin:0 0 8px;color:#123">Prova kort: andas nu</h3>
<div style="font-size:13px;color:var(--muted);margin-bottom:10px">En snabb väg till lugn — enkelt, gratis och direkt.</div>
<!-- Andningswidget -->
<div id="sereniq-breathe">
<div class="sq-wrap" role="region" aria-label="Andningsövning">
<div class="sq-circle" aria-hidden="true"></div>
<div class="sq-halo" aria-hidden="true"></div>
<div class="sq-ui">
<h2 class="sq-title">Börja andas med SereniQ</h2>
<p class="sq-instr" id="sq-instr" aria-live="polite">Välj tempo och tryck Start.</p>
<div class="sq-controls" aria-label="Tempo">
<button class="sq-btn" data-preset="4-2-6" aria-pressed="true">4–2–6</button>
<button class="sq-btn" data-preset="4-4-4" aria-pressed="false">4–4–4</button>
<button class="sq-btn" data-preset="5-5-5" aria-pressed="false">5–5–5</button>
</div>
<div class="sq-run">
<button id="sq-start" class="sq-btn">Starta</button>
<button id="sq-stop" class="sq-btn" style="display:none;">Stoppa</button>
<span id="sq-progress" class="sq-progress" aria-live="polite"></span>
</div>
<p id="sq-done" class="sq-done">Bra jobbat! 🌿 Återkom när du vill och återta kontrollen över ditt mående med SereniQ™.</p>
</div>
</div>
</div>
<!-- Ljudkontroll -->
<div style="margin-top:14px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap">
<label for="audio-volume" style="font-size:13px;color:var(--muted)">Ljud</label>
<button class="btn" id="audio-toggle">Ljud av</button>
<input type="range" id="audio-volume" min="0" max="1" step="0.05" value="0.5" style="width:140px">
<small class="muted">Spelar lugnt bakgrundsljud.</small>
</div>
</div>
</div>
</div>
</section>
<!-- OM -->
<section id="om">
<div class="wrap card">
<h3>Varför SereniQ?</h3>
<p class="muted">Globalt ökar belastningen av stressrelaterade problem. SereniQ fokuserar på tidig insats — enkla verktyg som kan hjälpa innan sjukskrivning blir aktuellt.</p>
<div style="display:flex;gap:18px;margin-top:18px;flex-wrap:wrap">
<div style="min-width:220px">
<strong>Fakta</strong>
<p class="muted">Efterfrågan på digitala välmåendeverktyg ökar stadigt. Vårt mål: hjälpa miljontals användare världen över.</p>
</div>
<div style="min-width:220px">
<strong>Vision</strong>
<p class="muted">Bygga ett globalt healthtech-unicorn som kombinerar teknik, psykologi och mänsklig värme.</p>
</div>
</div>
</div>
</section>
<!-- VIDEOS -->
<section id="videos">
<div class="wrap">
<h2>Snabba övningar & videoguider</h2>
<p class="muted">Små, enkla sessioner för kroppskännedom, andning och fokus.</p>
<div class="video-grid" style="margin-top:12px">
<div class="video-card">
<iframe width="100%" height="180" src="https://www.youtube.com/embed/jZCjVm8DWwk" title="Kroppsscanning 10 min" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h4 style="margin:10px 0 6px">Kroppsscanning – 10 min</h4>
<p class="muted" style="margin:0">Svensk guidning för att slappna av i kroppen och släppa spänningar.</p>
</div>
<div class="video-card">
<iframe width="100%" height="180" src="https://www.youtube.com/embed/v7oO5SJaFpM" title="Kroppsscanning 24 min" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h4 style="margin:10px 0 6px">Kroppsscanning – 24 min</h4>
<p class="muted" style="margin:0">Längre pass för djup avslappning – låt kroppen landa.</p>
</div>
<div class="video-card">
<iframe width="100%" height="180" src="https://www.youtube.com/embed/2LrSq5vKTy8" title="Kort vila 5 min" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h4 style="margin:10px 0 6px">Kort vila – 5 min</h4>
<p class="muted" style="margin:0">Snabb guidning för att landa och hitta fokus.</p>
</div>
</div>
</div>
</section>
<!-- PREMIUM -->
<section id="premium">
<div class="wrap two-col">
<div class="card">
<h3>Vad du får i Premium</h3>
<p class="muted">Personligt anpassade program, längre sessioner & djupare analys. Ett verktyg för att förebygga skadlig stress.</p>
<div class="features">
<div class="feature"><strong>Fokusstöd</strong><p class="muted">Skräddarsydda övningar för ADHD & koncentration.</p></div>
<div class="feature"><strong>Sömn & återhämtning</strong><p class="muted">Program för bättre sömncykler.</p></div>
<div class="feature"><strong>Stresshantering</strong><p class="muted">Praktiska moduler för vardaglig stressreduktion.</p></div>
</div>
<div style="margin-top:18px">
<button class="btn primary" onclick="alert('Intresse mottaget — vi kontaktar dig när Premium är live')">Intresseanmälan Premium</button>
</div>
</div>
<aside class="card">
<h4>Snart: mer i Freemium</h4>
<p class="muted">Vi lägger till fler korta övningar (fokus, andning, body scan) så du kan få hjälp redan här på sidan.</p>
</aside>
</div>
</section>
<!-- FÖRETAG -->
<section id="business">
<div class="wrap card">
<h3>Företag — Business Plus</h3>
<p class="muted">Företagslicenser för att minska sjukfrånvaro och öka välmående. Pilotprogram och smidig onboarding.</p>
<button class="btn primary" onclick="window.location.href='mailto:beta@sereniqapp.com?subject=F%C3%B6retagsintresse%20SereniQ'">Skicka företagsförfrågan</button>
</div>
</section>
<!-- COLLAB / INVEST -->
<section class="collab">
<h2>Är du affärsängel — eller vill samarbeta för en friskare värld?</h2>
<p>SereniQ söker långsiktiga partnerskap och smart kapital. Vi bygger ett globalt healthtech-unicorn med omtanke i centrum.</p>
<a class="btn primary" href="mailto:beta@sereniqapp.com?subject=Samarbete%20/%20Investment%20SereniQ">Kontakta oss</a>
</section>
<!-- KONTAKT / INTRESSE -->
<section id="kontakt">
<div class="wrap two-col">
<div class="card">
<h3>Vill du testa SereniQ tidigt?</h3>
<p class="muted">Anmäl dig för tidig access och beta-inbjudningar. Vi skickar uppdateringar och exklusiva tester.</p>
<form id="signup-form" class="signup" onsubmit="event.preventDefault(); handleSignup();">
<input id="signup-email" type="email" placeholder="Din e-post" required />
<button class="btn primary" type="submit">Registrera mig</button>
</form>
<div id="signup-msg" style="margin-top:10px;color:var(--muted)"></div>
</div>
<aside class="card">
<h4>Intresseanmälan — samarbete</h4>
<p class="muted">Cofounder, investerare, utvecklare, volontär? Skriv några rader.</p>
<form class="interest" action="https://formspree.io/f/mnnqgqzo" method="POST">
<label>Jag är intresserad av:</label>
<select name="interest" required>
<option value="beta">Beta-test</option>
<option value="cofounder">Cofounder</option>
<option value="investor">Investering</option>
<option value="volunteer">Volontär</option>
<option value="developer">Utveckling</option>
<option value="uiux">UI/UX</option>
<option value="ai">AI-specialist</option>
</select>
<input type="email" name="email" placeholder="Din e-post" required>
<textarea name="message" rows="3" placeholder="Berätta mer (frivilligt)"></textarea>
<small class="muted">När du klickar Skicka godkänner du att SereniQ lagrar dina uppgifter för kontakt & nyheter.</small>
<button type="submit" class="btn primary">Skicka</button>
</form>
</aside>
</div>
</section>
</main>
<!-- FOOTER -->
<footer>
<div class="wrap foot">
<div>
<strong>SereniQ</strong>
<div class="muted">© <span id="yr"></span> SereniQ</div>
</div>
<div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap">
<small class="muted"><a href="#gdpr">GDPR & Terms</a></small>
<small class="muted">Disclaimer: Innehållet ersätter inte vård.</small>
<small class="muted"><a href="mailto:beta@sereniqapp.com">beta@sereniqapp.com</a></small>
</div>
</div>
</footer>
<!-- AUDIO (bakgrund) -->
<audio id="sq-audio" src="https://sereniqapp.com/wp-content/uploads/2025/09/RainBirds.mp3" preload="auto" loop></audio>
<script>
/* År i footer */
document.getElementById('yr').textContent = new Date().getFullYear();
/* Smidig ankar-scroll */
document.querySelectorAll('a[href^="#"]').forEach(a=>{
a.addEventListener('click', e=>{
const id=a.getAttribute('href').slice(1), el=document.getElementById(id);
if(el){ e.preventDefault(); el.scrollIntoView({behavior:'smooth'}); }
});
});
/* Andningswidget + ljud (animationen startar korrekt via .is-running) */
(function(){
const root = document.querySelector('#sereniq-breathe');
if(!root) return;
const instr = root.querySelector('#sq-instr');
const btns = root.querySelectorAll('.sq-btn[data-preset]');
const start = root.querySelector('#sq-start');
const stopB = root.querySelector('#sq-stop');
const done = root.querySelector('#sq-done');
const prog = root.querySelector('#sq-progress');
const audioEl = document.getElementById('sq-audio');
const audioBtn = document.getElementById('audio-toggle');
const vol = document.getElementById('audio-volume');
let inDur=4, holdDur=2, outDur=6;
let timers=[], ticker=null, running=false, cycles=0;
const maxCycles=3;
function clearTimers(){ timers.forEach(t=>clearTimeout(t)); timers=[]; if(ticker){ clearInterval(ticker); ticker=null; } }
function countdown(label, secs){
if(ticker) clearInterval(ticker);
let remain = Math.round(secs);
instr.textContent = `${label} (${remain}s)…`;
ticker = setInterval(()=>{
remain--;
if(remain <= 0){ clearInterval(ticker); ticker=null; }
else instr.textContent = `${label} (${remain}s)…`;
},1000);
}
function setTempo(i,h,o){
inDur=i; holdDur=h; outDur=o;
root.style.setProperty('--sq-in', i+'s');
root.style.setProperty('--sq-hold', h+'s');
root.style.setProperty('--sq-out', o+'s');
root.style.setProperty('--sq-total', (i+h+o)+'s');
// restart CSS animations so they sync with the new tempo
const circle = root.querySelector('.sq-circle');
const halo = root.querySelector('.sq-halo');
[circle,halo].forEach(el=>{ el.style.animation='none'; void el.offsetWidth; el.style.animation=''; });
}
function toggleRun(on){
running=on;
root.classList.toggle('is-running', on);
start.style.display=on?'none':'inline-block';
stopB.style.display=on?'inline-block':'none';
done.style.display='none';
prog.textContent=on?`Cykel ${cycles+1} av ${maxCycles}`:'';
}
function phase(){
if(!running) return;
if(cycles>=maxCycles){ return finish(); }
countdown('Andas in', inDur);
timers.push(setTimeout(()=>{ if(!running) return;
countdown('Håll', holdDur);
timers.push(setTimeout(()=>{ if(!running) return;
countdown('Andas ut', outDur);
timers.push(setTimeout(()=>{ if(!running) return;
cycles++;
if(cycles>=maxCycles){ finish(); }
else { prog.textContent=`Cykel ${cycles+1} av ${maxCycles}`; phase(); }
}, outDur*1000));
}, holdDur*1000));
}, inDur*1000));
}
function startRun(){
clearTimers(); cycles=0;
toggleRun(true);
// starta ljud om användaren redan slagit på det (dvs inte pausat)
if(audioEl && !audioEl.paused){ audioEl.currentTime=0; audioEl.play().catch(()=>{}); }
phase();
}
function stopRun(){
clearTimers();
toggleRun(false);
instr.textContent='Övning avbruten.';
}
function finish(){
clearTimers();
toggleRun(false);
instr.textContent='';
done.style.display='block';
}
// Presets
btns.forEach(b=>{
b.addEventListener('click',()=>{
btns.forEach(x=>x.setAttribute('aria-pressed','false'));
b.setAttribute('aria-pressed','true');
const [i,h,o]=b.dataset.preset.split('-').map(Number);
setTempo(i,h,o);
});
});
// Ljud-kontroller
if(vol){ vol.addEventListener('input', e=>{ audioEl.volume = Number(e.target.value); }); }
if(audioBtn){
audioBtn.addEventListener('click', ()=>{
if(audioEl.paused){
audioEl.play().then(()=>{ audioBtn.textContent='Ljud på'; }).catch(()=>{ /* autoplay block */ });
}else{
audioEl.pause(); audioBtn.textContent='Ljud av';
}
});
}
start.addEventListener('click',startRun);
stopB.addEventListener('click',stopRun);
// init
setTempo(4,2,6);
})();
/* Enkel “signup” (lokal – byt till backend sen) */
function handleSignup(){
const email = document.getElementById('signup-email').value.trim();
const msg = document.getElementById('signup-msg');
if(!email || !email.includes('@')){ msg.textContent='Ange en giltig e-postadress.'; return; }
const list = JSON.parse(localStorage.getItem('sereniq_signups')||'[]');
list.push({email,ts:new Date().toISOString()});
localStorage.setItem('sereniq_signups', JSON.stringify(list));
msg.textContent = 'Tack! Vi hör av oss när betan är redo.';
document.getElementById('signup-form').reset();
}
</script>
</body>
</html> jag testade lite.. jag kom fram till detta.. se kod och bild... jag tycker att vi behöver någon bakgrundsbild ja. ja om vi inte begår stöld av någons material genom att använda deras material på vår sida så kör på fler övningar.