chaib/atlas-academy
1
0
Fork 0
Code Issues Pull requests Releases Packages Wiki Activity Actions
atlas-academy/static/shop.html
Atlas Developer 03829a38b2 feat: Atlas Academy — Odoo eLearning platform, full fusion 
9-course Dutch e-learning platform fused onto atlasacademy.nl via Caddy
reverse proxy. Odoo 19 Community as course engine (website_slides), static
HTML for marketing front. Single Odoo account system.

- static/: 8 marketing pages (index, pricing, coaching, leerpad, over, shop, bisl, esf)
- backend/odoo_relay.py: lead relay Flask service (POST /academy-lead → Odoo CRM)
- caddy/academy.caddyfile: full Caddy config with Odoo proxy + auth rewrites
- docs/: ARCHITECTURE, USERFLOW, COURSES, DEPLOYMENT, SECURITY, ODOO

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-23 00:48:45 +02:00

204 lines
15 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Atlas Academy Shop — refurbished zakelijke laptops, desktops, monitoren en kassasystemen. Getest, 24 maanden garantie, afhalen in Tilburg. Direct bestellen op atlasworks.nl.">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Atlas Academy Shop — Hardware voor operators">
<meta property="og:description" content="Refurbished zakelijke laptops, desktops en kassasystemen. Getest, 24 maanden garantie, afhalen in Tilburg.">
<meta property="og:image" content="https://atlasacademy.nl/assets/logo.png">
<meta property="og:url" content="https://atlasacademy.nl/shop.html">
<title>Shop — Atlas Academy</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JBWZWZMKBC"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-JBWZWZMKBC');</script>
<style>
:root{--bg:#080C18;--card:#0B1220;--border:rgba(55,65,81,.5);--accent:#3B82F6;--purple:#8B5CF6;--green:#22C55E;--txt:#E2E8F0;--muted:#6B7280;--font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--radius:10px;--radius-lg:16px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--font);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:#93C5FD}
img{max-width:100%;display:block}
.container{width:100%;max-width:1140px;margin:0 auto;padding:0 24px}
nav{position:sticky;top:0;z-index:100;background:rgba(8,12,24,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);height:64px;display:flex;align-items:center}
.nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1140px;margin:0 auto;padding:0 24px}
.nav-logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:17px;text-decoration:none}
.nav-logo img{width:32px;height:32px;object-fit:contain;filter:brightness(0) invert(1)}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{color:rgba(255,255,255,.7);font-size:14px;font-weight:500}
.nav-links a:hover{color:#fff}
.nav-cta .btn{padding:9px 18px;font-size:13px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:var(--radius);font-size:15px;font-weight:700;cursor:pointer;transition:all .25s;border:none;text-decoration:none;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--purple));color:#fff;box-shadow:0 0 32px rgba(59,130,246,.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 48px rgba(59,130,246,.6);color:#fff}
.btn-lg{padding:18px 36px;font-size:17px}
.btn-block{width:100%;justify-content:center}
.gradient-text{background:linear-gradient(135deg,#fff 0,#93C5FD 50%,#C4B5FD 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero{padding:72px 0 32px;text-align:center}
.hero-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.hero h1{font-size:clamp(28px,4vw,48px);font-weight:900;margin-bottom:16px}
.hero p{color:var(--muted);font-size:18px;max-width:640px;margin:0 auto}
.trust-bar{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;padding:24px 0;border-bottom:1px solid var(--border);margin-bottom:40px}
.trust-item{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;font-weight:500}
.trust-item span{font-size:20px}
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:32px}
.filter-btn{padding:9px 18px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s}
.filter-btn:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.filter-btn.active{background:linear-gradient(135deg,var(--accent),var(--purple));color:#fff;border-color:transparent}
.shop-section{padding:0 0 80px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:rgba(59,130,246,.45)}
.card-img{aspect-ratio:4/3;background:#0a0f1c;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--border)}
.card-img img{width:100%;height:100%;object-fit:contain;padding:16px}
.card-body{display:flex;flex-direction:column;flex:1;padding:18px 18px 20px}
.card-badge{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:10px;background:rgba(59,130,246,.12);color:#93C5FD;border:1px solid rgba(59,130,246,.25)}
.card-badge.pos{background:rgba(139,92,246,.12);color:#C4B5FD;border-color:rgba(139,92,246,.25)}
.card-badge.bundle{background:rgba(34,197,94,.12);color:#86EFAC;border-color:rgba(34,197,94,.25)}
.card-title{font-size:15px;font-weight:700;color:#fff;line-height:1.4;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:62px}
.card-price-row{display:flex;align-items:baseline;gap:8px;margin-top:auto;margin-bottom:14px}
.card-price{font-size:26px;font-weight:900;background:linear-gradient(135deg,var(--green),#4ADE80);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.card-price-vat{font-size:12px;color:var(--muted)}
.card .btn{font-size:13px;padding:12px 18px}
.state{text-align:center;padding:60px 0;color:var(--muted)}
.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}
.count-line{text-align:center;color:var(--muted);font-size:13px;margin-bottom:28px}
.what-section{padding:72px 0;background:#050810;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;text-align:center}
.section-title{font-size:clamp(24px,3vw,36px);font-weight:800;text-align:center;margin-bottom:48px}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;text-align:center}
.feature-icon{font-size:36px;margin-bottom:16px}
.feature-title{font-size:16px;font-weight:800;color:#fff;margin-bottom:8px}
.feature-desc{font-size:13px;color:var(--muted);line-height:1.6}
.cta-section{padding:72px 0;text-align:center}
.cta-section h2{font-size:clamp(22px,3vw,32px);font-weight:800;margin-bottom:12px}
.cta-section p{color:var(--muted);font-size:16px;max-width:520px;margin:0 auto 32px}
footer{background:#03060f;border-top:1px solid var(--border);padding:40px 0 24px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-copy{font-size:12px;color:var(--muted)}
@media(max-width:900px){.product-grid{grid-template-columns:repeat(2,1fr)}.features-grid{grid-template-columns:1fr}}
@media(max-width:768px){.nav-links{display:none}}
@media(max-width:560px){.product-grid{grid-template-columns:1fr}.trust-bar{gap:20px}}
</style>
</head>
<body>
<nav>
<div class="nav-inner">
<a href="index.html" class="nav-logo"><img src="assets/logo.png" alt="Atlas Academy" width="32" height="32"> Atlas Academy</a>
<ul class="nav-links">
<li><a href="cursussen.html">Cursussen</a></li>
<li><a href="leerpad.html">Leerpad</a></li>
<li><a href="coaching.html">Coaching</a></li>
<li><a href="pricing.html">Prijzen</a></li>
<li><a href="shop.html" style="color:#fff;font-weight:700">Shop</a></li>
<li><a href="over.html">Over</a></li>
<li><a href="/web/login?redirect=%2Fslides">Inloggen</a></li>
</ul>
<div class="nav-cta"><a href="mailto:info@atlascorporation.nl" class="btn btn-primary">Start gratis →</a></div>
</div>
</nav>
<section class="hero"><div class="container">
<p class="hero-label">Atlas Hardware</p>
<h1 class="gradient-text">De machines waar wij zelf op draaien</h1>
<p>Refurbished zakelijke laptops, desktops, monitoren en kassasystemen. Getest, met 24 maanden garantie. Bestellen en betalen gaat veilig via atlasworks.nl.</p>
</div></section>
<div class="container"><div class="trust-bar">
<div class="trust-item"><span>✅</span> Uitgebreid getest</div>
<div class="trust-item"><span>🔒</span> 24 maanden garantie</div>
<div class="trust-item"><span>📍</span> Afhalen in Tilburg</div>
<div class="trust-item"><span>💳</span> Veilig betalen via iDEAL</div>
</div></div>
<section class="shop-section"><div class="container">
<div class="filters" id="filters">
<button class="filter-btn active" data-type="all">Alles</button>
<button class="filter-btn" data-type="laptop">Laptops</button>
<button class="filter-btn" data-type="desktop">Desktops</button>
<button class="filter-btn" data-type="monitor">Monitoren</button>
<button class="filter-btn" data-type="bundle">Werkplekken</button>
<button class="filter-btn" data-type="pos">Kassa &amp; POS</button>
<button class="filter-btn" data-type="accessory">Accessoires</button>
</div>
<p class="count-line" id="countLine"></p>
<div id="shopState" class="state"><div class="spinner"></div>Producten laden…</div>
<div class="product-grid" id="grid" style="display:none"></div>
</div></section>
<section class="what-section"><div class="container">
<p class="section-label">Waarom hier kopen</p>
<h2 class="section-title gradient-text">Geen verrassingen — wel werkende hardware</h2>
<div class="features-grid">
<div class="feature-card"><div class="feature-icon">🔍</div><div class="feature-title">Volledig getest</div><div class="feature-desc">Elke machine doorloopt een meerpunts-checklist: scherm, toetsenbord, batterij, SSD, WiFi, poorten — alles werkt of we leveren hem niet.</div></div>
<div class="feature-card"><div class="feature-icon">🛠️</div><div class="feature-title">24 maanden garantie</div><div class="feature-desc">Gaat er iets stuk? Breng hem langs in Tilburg en we fixen het of ruilen om. Geen gezeur met retourlabels of callcenters.</div></div>
<div class="feature-card"><div class="feature-icon">💳</div><div class="feature-title">Zakelijke factuur</div><div class="feature-desc">Netjes op naam van je bedrijf, BTW verrekenbaar. Veilig afrekenen via iDEAL op atlasworks.nl — geen marktplaats-gedoe.</div></div>
</div>
</div></section>
<section class="cta-section"><div class="container">
<h2 class="gradient-text">Vraag of advies nodig?</h2>
<p>Twijfel je welke machine bij je past? Stuur een mail en we denken met je mee — afhalen in Tilburg of verzenden kan ook.</p>
<a href="mailto:info@atlascorporation.nl?subject=Hardware advies" class="btn btn-primary btn-lg">Stel je vraag →</a>
</div></section>
<footer><div class="container"><div class="footer-inner">
<p class="footer-copy">&copy; 2026 Atlas Corporation — Tilburg, Nederland</p>
<p class="footer-copy"><a href="mailto:info@atlascorporation.nl">info@atlascorporation.nl</a></p>
</div></div></footer>
<script>
(function(){
var FEED='https://www.atlasworks.nl/academy-feed.php';
var TYPE_LABEL={laptop:'Laptop',desktop:'Desktop',monitor:'Monitor',accessory:'Accessoire',bundle:'Werkplek',pos:'Kassa / POS',other:'Hardware'};
var grid=document.getElementById('grid');
var stateEl=document.getElementById('shopState');
var countLine=document.getElementById('countLine');
var all=[];var current='all';
function euro(n){try{return '€'+Number(n).toLocaleString('nl-NL',{minimumFractionDigits:0,maximumFractionDigits:0});}catch(e){return '€'+n;}}
function esc(s){return String(s).replace(/[&<>"']/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];});}
function track(p){if(window.gtag){gtag('event','select_item',{item_id:String(p.id),item_name:p.title});}}
function card(p){
var badgeClass=(p.type==='pos')?'pos':(p.type==='bundle'?'bundle':'');
var label=TYPE_LABEL[p.type]||'Hardware';
var img=p.img?'<img src="'+esc(p.img)+'" alt="'+esc(p.title)+'" loading="lazy">':'';
var a=document.createElement('article');
a.className='card';a.setAttribute('data-type',p.type);
a.innerHTML='<a class="card-img" href="'+esc(p.url)+'" target="_blank" rel="noopener" aria-label="'+esc(p.title)+'">'+img+'</a>'
+'<div class="card-body">'
+'<span class="card-badge '+badgeClass+'">'+esc(label)+'</span>'
+'<h3 class="card-title">'+esc(p.title)+'</h3>'
+'<div class="card-price-row"><span class="card-price">'+euro(p.price)+'</span><span class="card-price-vat">excl. BTW</span></div>'
+'<a class="btn btn-primary btn-block" href="'+esc(p.url)+'" target="_blank" rel="noopener">Bekijk &amp; koop op atlasworks.nl &rarr;</a>'
+'</div>';
var links=a.querySelectorAll('a[href]');
for(var i=0;i<links.length;i++){links[i].addEventListener('click',function(){track(p);});}
return a;
}
function render(){
var list=(current==='all')?all:all.filter(function(p){return p.type===current;});
grid.innerHTML='';
if(!list.length){grid.style.display='none';stateEl.style.display='block';stateEl.innerHTML='Geen producten in deze categorie.';countLine.textContent='';return;}
stateEl.style.display='none';grid.style.display='grid';
list.forEach(function(p){grid.appendChild(card(p));});
countLine.textContent=list.length+' product'+(list.length===1?'':'en')+' beschikbaar';
}
document.getElementById('filters').addEventListener('click',function(e){
var b=e.target.closest('.filter-btn');if(!b)return;
current=b.getAttribute('data-type');
var btns=this.querySelectorAll('.filter-btn');
for(var i=0;i<btns.length;i++){btns[i].classList.toggle('active',btns[i]===b);}
render();
});
fetch(FEED,{mode:'cors'}).then(function(r){if(!r.ok)throw new Error('HTTP '+r.status);return r.json();}).then(function(d){
all=(d.products||[]).filter(function(p){return p.url&&p.price;});
var fb=document.querySelectorAll('.filter-btn');
for(var i=0;i<fb.length;i++){
var t=fb[i].getAttribute('data-type');if(t==='all')continue;
var has=all.some(function(p){return p.type===t;});
if(!has)fb[i].style.display='none';
}
render();
}).catch(function(err){
stateEl.innerHTML='Het assortiment kon niet geladen worden. Bekijk alle hardware direct op <a href="https://atlasworks.nl/assortiment/" target="_blank" rel="noopener">atlasworks.nl</a>.';
});
})();
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink