atlas-academy/static/index.html
Atlas Developer b1fed1989a feat: subscription model — Mollie recurring + course gating
- mollie_enroll.py rewritten: Mollie Customer → sequenceType=first payment
  → Subscription API → recurring webhook → Odoo enrollment / removal
- SQLite subscriber + payments tracking (/opt/atlas/academy/subscriptions.db)
- Plans: Starter €20/mo, Pro €49/mo with per-plan Odoo channel enrollment
- Courses 1-5,7-10 set to invite-only; course 6 (IT-Basis) free sample
- index.html: subscription CTAs, removed coming-soon waitlist language
- pricing.html: CTAs → /betalen?plan= (live Mollie), Free → /web/signup
- betaald.html: subscription success messaging with login CTA
- Mollie live key active, Odoo provider ID=11 enabled
2026-06-23 01:43:57 +02:00

229 lines
No EOL
9.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#080c18">
<meta name="description" content="Atlas Academy — 9 praktijkcursussen voor ondernemers. Lean, Sales, AI, BiSL, Strategie en meer. Vanaf €20/maand, maandelijks opzegbaar.">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Atlas Academy — Online leerplatform">
<meta property="og:description" content="9 cursussen voor ondernemers die bouwen. Lean, Sales, Strategisch Denken, AI, BiSL en meer. Vanaf €20/maand.">
<meta property="og:image" content="https://atlasacademy.nl/og-card.png">
<meta property="og:url" content="https://atlasacademy.nl">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<title>Atlas Academy — Praktijkcursussen voor ondernemers</title>
<link rel="icon" type="image/png" href="/atlas-icon.png">
<!-- GA4 -->
<!-- Google Tag (GT-MR2TH3RQ rollup G-2S7SWHG9TH) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GT-MR2TH3RQ"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag("js",new Date());gtag("config","GT-MR2TH3RQ",{linker:{domains:["atlascorporation.nl","atlasagency.nl","atlaspos.nl","atlasworks.nl","www.atlasworks.nl"],accept_incoming:true}});gtag("config","G-JBWZWZMKBC");</script>
<style>
:root {
--bg: hsl(222,48%,8%);
--surface: hsl(223,42%,12%);
--border: rgba(78,160,255,.12);
--brand: #2E80FF;
--brand-glow: rgba(46,128,255,.35);
--gold: #D4A24C;
--gold-glow: rgba(212,162,76,.25);
--text: #eef2ff;
--text-2: #7a8aab;
--text-3: #4a5a7b;
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--radius: 12px;
--radius-lg: 20px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--bg);
color:var(--text);
font-family:var(--font);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:40px 24px;
}
a{color:var(--brand);text-decoration:none;transition:color .2s}
a:hover{color:#6fb4ff}
/* Starfield canvas */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
/* Main card */
.main{position:relative;z-index:1;max-width:480px;width:100%}
/* Icon ring */
.icon-wrap{display:flex;justify-content:center;margin-bottom:32px}
.icon-ring{position:relative;width:88px;height:88px}
.icon-ring svg{position:absolute;inset:0;animation:spin-slow 20s linear infinite}
.icon-ring svg:nth-child(2){animation-direction:reverse;animation-duration:14s}
.icon-ring img{position:absolute;inset:50%;transform:translate(-50%,-50%);width:48px;height:48px;z-index:1}
@keyframes spin-slow{to{transform:rotate(360deg)}}
/* Badge */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;background:rgba(46,128,255,.08);border:1px solid rgba(46,128,255,.2);border-radius:999px;font-size:11px;font-weight:700;color:var(--brand);letter-spacing:.07em;text-transform:uppercase;margin:0 auto 20px;width:fit-content}
.badge::before{content:'';width:5px;height:5px;background:var(--brand);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 6px var(--brand)}50%{opacity:.3;box-shadow:0 0 2px var(--brand)}}
h1{font-size:clamp(36px,6vw,56px);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:8px;text-align:center}
.gradient{background:linear-gradient(135deg,#fff 0%,#93c5fd 40%,#D4A24C 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sub{font-size:17px;color:var(--text-2);text-align:center;margin-bottom:44px;line-height:1.55}
/* Card */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.card h2{font-size:18px;font-weight:700;margin-bottom:6px}
.card p{font-size:14px;color:var(--text-2);margin-bottom:24px}
.form-group{display:flex;flex-direction:column;gap:12px}
.form-group input{
background:rgba(255,255,255,.04);
border:1px solid rgba(78,160,255,.15);
border-radius:var(--radius);
padding:14px 16px;
color:var(--text);
font-size:15px;
outline:none;
transition:border-color .25s,box-shadow .25s;
font-family:var(--font);
width:100%
}
.form-group input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
.form-group input::placeholder{color:var(--text-3)}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:15px 28px;border-radius:var(--radius);font-size:15px;font-weight:700;
cursor:pointer;transition:all .25s;border:none;text-decoration:none;
width:100%;font-family:var(--font);letter-spacing:.01em
}
.btn-primary{
background:linear-gradient(135deg,var(--brand),#1a5dc7);
color:#fff;
box-shadow:0 0 28px var(--brand-glow);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(46,128,255,.5);color:#fff}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.success{display:none;color:#4ade80;font-size:14px;margin-top:16px;font-weight:600;text-align:center}
.success.visible{display:block}
/* Footer */
.footer{position:relative;z-index:1;display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.footer a{font-size:13px;color:var(--text-3);transition:color .2s}
.footer a:hover{color:var(--text)}
.footer .sep{color:var(--text-3);opacity:.4}
.footer-copy{margin-top:12px;font-size:11px;color:var(--text-3);text-align:center}
@media(max-width:480px){
.card{padding:24px}
body{padding:32px 16px}
}
</style>
<style>#planet-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,hsl(222,48%,8%) 100%)}</style>
</head>
<body>
<div id="planet-bg" aria-hidden="true" style="position:fixed;inset:0;z-index:0;background:url(assets/euatlas.png) center/cover no-repeat;opacity:.35;pointer-events:none"></div>
<canvas id="stars" aria-hidden="true"></canvas>
<div class="main">
<div class="icon-wrap">
<div class="icon-ring">
<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="44" cy="44" r="40" stroke="#D4A24C" stroke-width="1" stroke-dasharray="4 6" opacity="0.5"/>
<circle cx="44" cy="4" r="2" fill="#D4A24C" opacity="0.7"/>
<circle cx="84" cy="44" r="2" fill="#D4A24C" opacity="0.7"/>
<circle cx="44" cy="84" r="2" fill="#D4A24C" opacity="0.7"/>
<circle cx="4" cy="44" r="2" fill="#D4A24C" opacity="0.7"/>
</svg>
<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="44" cy="44" r="34" stroke="#2E80FF" stroke-width="1" stroke-dasharray="3 5" opacity="0.4"/>
</svg>
<img src="/atlas-icon.png" alt="Atlas Academy" width="48" height="48" onerror="this.style.display='none'">
</div>
</div>
<div style="text-align:center">
<div class="badge">Nu live</div>
</div>
<h1 class="gradient">Atlas Academy</h1>
<p class="sub">9 cursussen · BiSL examentrainer · groepscoaching<br>Direct toegang — maandelijks opzegbaar.</p>
<div class="card">
<h2>Start jouw abonnement</h2>
<p style="margin-bottom:16px">Alle 9 cursussen, BiSL examentrainer en groepscoaching — alles in één plan.</p>
<ul style="list-style:none;margin-bottom:20px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text-2)">
<li>✓ Lean, Sales, AI, Strategie, BiSL &amp; meer</li>
<li>✓ Kennischecks na elke les</li>
<li>✓ Groepscoaching 1×/maand via Zoom</li>
</ul>
<div class="form-group">
<a href="/betalen?plan=starter" class="btn btn-primary" style="text-decoration:none">Start voor €20/maand →</a>
<a href="/web/signup?redirect=%2Fslides" class="btn" style="text-decoration:none;background:rgba(255,255,255,.06);color:var(--text);border:1px solid rgba(78,160,255,.25)">Gratis proberen (1 cursus)</a>
</div>
</div>
</div>
<div style="position:relative;z-index:1;text-align:center;margin-top:20px;font-size:13px;color:#7a8aab">
Al een account? <a href="/web/login?redirect=%2Fslides" style="color:#2E80FF;font-weight:700">Inloggen →</a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="/pricing.html" style="color:#2E80FF;font-weight:600">Bekijk prijzen</a>
</div>
<script>
/* ── Starfield ── */
(function(){
var c=document.getElementById('stars'),x=c.getContext('2d'),s=[],N=0,w=0,h=0,dpr=1,raf=0;
function size(){
dpr=Math.min(window.devicePixelRatio||1,2);
w=c.width=Math.floor(innerWidth*dpr);h=c.height=Math.floor(innerHeight*dpr);
c.style.width=innerWidth+'px';c.style.height=innerHeight+'px';
N=Math.max(50,Math.min(180,Math.round(innerWidth*innerHeight/10000)));
}
function init(){
s=[];
for(var i=0;i<N;i++) s.push({
x:Math.random()*w,y:Math.random()*h,
r:(Math.random()*1.4+0.2)*dpr,
a:Math.random()*0.55+0.15,
va:Math.random()*0.008+0.002,
vx:(Math.random()*0.12+0.01)*dpr,
vy:(Math.random()*0.05+0.006)*dpr,
p:Math.random()*6.283,
col:i%11===0?'#E8C46A':(i%5===0?'#8ab4f8':'#ffffff')
});
}
function draw(){
x.clearRect(0,0,w,h);
for(var i=0;i<N;i++){
var t=s[i];t.x-=t.vx;t.y+=t.vy;t.p+=t.va;
if(t.x<-2)t.x=w+2;if(t.y>h+2)t.y=-2;
var al=t.a+Math.sin(t.p)*0.25;
al=al<0?0:al>1?1:al;
x.globalAlpha=al;x.fillStyle=t.col;
x.beginPath();x.arc(t.x,t.y,t.r,0,6.283);x.fill();
}
raf=requestAnimationFrame(draw);
}
function start(){size();init();draw()}
start();
var rt;addEventListener('resize',function(){
clearTimeout(rt);rt=setTimeout(function(){
if(raf)cancelAnimationFrame(raf);start();
},200);
});
})();
</script>
</body>
</html>