Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FLEXSHOP HAITI — Achete sèvis dijital fasil</title>
<link rel="canonical" href="https://flexshophaiti.com/">
<!-- ═══════════════════════════════════════════
════════════════════════════════════════════ -->
<link rel="icon" type="image/png" href="https://blogger.googleusercontent.com/img/a/AVvXsEhi8OlMqbiuX8BK2VCYDrmSiIpM5WZB2fxn8KEnlPTXYlI9YKL0PHzjomB-yX3qErUrec1YPXkMKHNoXu1Ulg8ZmcNbRgghp-QsumFKIJolyHOTZcbYqgKrQlJKKKEx7wE0VP2EZkoiQTZB3IJJByGYNVrC3kqD64EqEgCSpVidnPwedpYrE4Qd-nqHTs1c">
<link rel="apple-touch-icon" href="https://blogger.googleusercontent.com/img/a/AVvXsEhi8OlMqbiuX8BK2VCYDrmSiIpM5WZB2fxn8KEnlPTXYlI9YKL0PHzjomB-yX3qErUrec1YPXkMKHNoXu1Ulg8ZmcNbRgghp-QsumFKIJolyHOTZcbYqgKrQlJKKKEx7wE0VP2EZkoiQTZB3IJJByGYNVrC3kqD64EqEgCSpVidnPwedpYrE4Qd-nqHTs1c">
<!-- ═══════════════════════════════════════════
════════════════════════════════════════════ -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://flexshophaiti.com/">
<meta property="og:title" content="FLEXSHOP HAITI — Achete sèvis dijital fasil">
<meta property="og:description" content="Achte Gold, Diamants, Flex Pass ak lòt sèvis FlexCity fasil ann Ayiti. Peye ak MonCash oswa Natcash — san kat kredi.">
<meta property="og:image" content="https://blogger.googleusercontent.com/img/a/AVvXsEgVynksshxs1PiPPT6cWpDi9HjBoSvCR7BtKf2gwqLF3eq1FAwhRd18J_JQS1rb1wjfEhs3cnNs4Ta61D-6Se-C4pZX0aL31VH-u3AYI3Mv22MzlBzKQKu_Xv_ObpwHXtF4VPjObQOC79AzIDHpFwashm5fUs71-mhRoeVTlb3EEOdXvo0UTyvbeNTrcezu">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="fr_HT">
<meta property="og:site_name" content="FLEXSHOP HAITI">
<!-- Twitter / X Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="FLEXSHOP HAITI — Achete sèvis dijital fasil">
<meta name="twitter:description" content="Achte Gold, Diamants, Flex Pass ak lòt sèvis FlexCity fasil ann Ayiti. Peye ak MonCash oswa Natcash.">
<meta name="twitter:image" content="https://blogger.googleusercontent.com/img/a/AVvXsEgVynksshxs1PiPPT6cWpDi9HjBoSvCR7BtKf2gwqLF3eq1FAwhRd18J_JQS1rb1wjfEhs3cnNs4Ta61D-6Se-C4pZX0aL31VH-u3AYI3Mv22MzlBzKQKu_Xv_ObpwHXtF4VPjObQOC79AzIDHpFwashm5fUs71-mhRoeVTlb3EEOdXvo0UTyvbeNTrcezu">
<!-- SEO de baz -->
<meta name="description" content="Achte Gold, Diamants, Flex Pass ak lòt sèvis FlexCity fasil ann Ayiti. Peye ak MonCash oswa Natcash — san kat kredi.">
<meta name="theme-color" content="#07090f">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
<!-- Tabloid Scuzzball — font pou nimewo ak chif sou sit la -->
<link href="https://fonts.cdnfonts.com/css/tabloid-scuzzball" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<!--
╔══════════════════════════════════════════════════════════════════════╗
║ FLEXSHOP HAITI — GID KONFIGIRASYON POU DEVLOPÈ ║
╠══════════════════════════════════════════════════════════════════════╣
║ ║
╚══════════════════════════════════════════════════════════════════════╝
-->
<style>
/* ═══════════════════════════════════════════
VARIABLES & RESET
═══════════════════════════════════════════ */
:root {
--bg: #07090f;
--bg2: #0c0f1a;
--bg3: #111626;
--card: #151b2e;
--border: rgba(255,255,255,0.07);
--border2: rgba(99,179,255,0.2);
--accent: #3b82f6;
--accent2: #60a5fa;
--gold: #f59e0b;
--gold2: #fcd34d;
--green: #22c55e;
--red: #ef4444;
--purple: #a78bfa;
--text: #f1f5f9;
--text2: #94a3b8;
--text3: #64748b;
--font-numbers: 'Tabloid Scuzzball', 'Syne', sans-serif; /* Font pou tout nimewo */
--radius: 14px;
--shadow: 0 4px 24px rgba(0,0,0,0.5);
--shadow-lg: 0 8px 48px rgba(0,0,0,0.7);
--glow: 0 0 32px rgba(59,130,246,0.2);
--t: all 0.25s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:99px}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;opacity:0.35}
h1,h2,h3,h4,h5{font-family:'Syne',sans-serif;font-weight:700;line-height:1.15}
h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
h3{font-size:1.2rem}
/* ═══════════════════════════════════════════
NAVBAR
═══════════════════════════════════════════ */
#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 5%;height:68px;background:rgba(7,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:800;letter-spacing:-0.02em}
.nav-logo .logo-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:1rem}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links button{background:none;border:none;color:var(--text2);padding:6px 14px;border-radius:8px;font-size:0.88rem;font-weight:500;transition:var(--t)}
.nav-links button:hover,.nav-links button.active{color:var(--text);background:var(--bg3)}
.nav-auth{display:flex;gap:8px;align-items:center}
.btn-ghost{background:none;border:1px solid var(--border2);color:var(--accent2);padding:7px 18px;border-radius:8px;font-size:0.88rem;font-weight:500;transition:var(--t)}
.btn-ghost:hover{background:rgba(59,130,246,0.1)}
.btn-primary{background:linear-gradient(135deg,var(--accent),#2563eb);border:none;color:#fff;padding:8px 20px;border-radius:8px;font-size:0.88rem;font-weight:600;transition:var(--t);box-shadow:0 2px 12px rgba(59,130,246,0.3)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(59,130,246,0.45)}
.btn-outline{background:none;border:1px solid var(--border2);color:var(--text2);padding:12px 28px;border-radius:10px;font-size:1rem;font-weight:500;transition:var(--t)}
.btn-outline:hover{border-color:var(--accent);color:var(--text);background:rgba(59,130,246,0.05)}
.btn-danger{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);color:#f87171;padding:8px 18px;border-radius:8px;font-size:0.85rem;font-weight:500;transition:var(--t)}
.btn-danger:hover{background:rgba(239,68,68,0.2)}
.hamburger{display:none;background:none;border:none;color:var(--text);font-size:1.3rem;padding:6px}
@media(max-width:768px){
.nav-links,.nav-auth{display:none}
.hamburger{display:block}
.mobile-menu{position:fixed;top:68px;left:0;right:0;bottom:0;background:var(--bg2);z-index:999;display:flex;flex-direction:column;gap:4px;padding:20px;transform:translateX(100%);transition:transform 0.3s ease;overflow-y:auto}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu button{background:none;border:none;color:var(--text2);padding:14px 16px;border-radius:10px;font-size:1rem;text-align:left;transition:var(--t)}
.mobile-menu button:hover{background:var(--bg3);color:var(--text)}
.mobile-menu .mob-divider{height:1px;background:var(--border);margin:8px 0}
}
/* ═══════════════════════════════════════════
SPA ROUTING
═══════════════════════════════════════════ */
.section{display:none;min-height:100vh;padding-top:68px}
.section.active{display:block}
/* ═══════════════════════════════════════════
LOADING OVERLAY
═══════════════════════════════════════════ */
#loading-overlay{position:fixed;inset:0;background:var(--bg);z-index:99000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity 0.5s}
#loading-overlay.hide{opacity:0;pointer-events:none}
.spinner{width:44px;height:44px;border:3px solid rgba(59,130,246,0.2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ═══════════════════════════════════════════
HOME
═══════════════════════════════════════════ */
#sec-home{background:var(--bg);background-image:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(59,130,246,0.12) 0%,transparent 70%),radial-gradient(ellipse 40% 30% at 80% 60%,rgba(167,139,250,0.06) 0%,transparent 60%)}
/* Slideshow */
.slideshow-wrap{position:relative;width:100%;overflow:hidden;background:var(--bg2);border-bottom:1px solid var(--border)}
.slideshow-track{display:flex;transition:transform 0.6s cubic-bezier(.4,0,.2,1)}
.slide{min-width:100%;height:320px;object-fit:cover;display:block;flex-shrink:0}
@media(max-width:640px){.slide{height:200px}}
.slideshow-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.15);color:#fff;width:40px;height:40px;border-radius:50%;font-size:1rem;cursor:pointer;transition:var(--t);display:flex;align-items:center;justify-content:center;z-index:10}
.slideshow-btn:hover{background:rgba(59,130,246,0.7)}
.slideshow-btn.prev{left:14px}
.slideshow-btn.next{right:14px}
.slideshow-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.slideshow-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.35);cursor:pointer;transition:var(--t);border:none}
.slideshow-dot.active{background:#fff;width:20px;border-radius:99px}
.hero{min-height:calc(100vh - 68px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 5%}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.25);border-radius:99px;padding:6px 16px;font-size:0.8rem;font-weight:500;color:var(--accent2);margin-bottom:28px;animation:fadeUp 0.6s ease both}
.hero h1{animation:fadeUp 0.6s 0.1s ease both;background:linear-gradient(135deg,#fff 0%,var(--accent2) 50%,var(--purple) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;max-width:820px}
.hero p{color:var(--text2);font-size:1.1rem;max-width:560px;margin:20px auto 36px;animation:fadeUp 0.6s 0.2s ease both}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;animation:fadeUp 0.6s 0.3s ease both}
.hero-cta .btn-primary{padding:13px 32px;font-size:1rem;border-radius:10px}
.hero-floating{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:60px;animation:fadeUp 0.6s 0.4s ease both}
.float-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;display:flex;align-items:center;gap:12px;min-width:180px}
.float-card .fc-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.float-card .fc-label{font-size:0.8rem;color:var(--text2)}
.float-card .fc-val{font-family:var(--font-numbers);font-size:1rem;font-weight:700}
.stats-wrap{padding:0 5% 60px;max-width:800px;margin:0 auto}
.stats-bar{display:flex;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.stat-item{flex:1;text-align:center;padding:24px 16px;border-right:1px solid var(--border)}
.stat-item:last-child{border-right:none}
.stat-num{font-family:var(--font-numbers);font-size:1.8rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-label{font-size:0.8rem;color:var(--text3);margin-top:4px}
.tag{display:inline-block;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);color:var(--accent2);border-radius:99px;padding:4px 14px;font-size:0.78rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:12px}
.section-header{text-align:center;margin-bottom:48px}
.section-header p{color:var(--text2);max-width:500px;margin:12px auto 0}
.how-section{padding:80px 5%;max-width:1100px;margin:0 auto}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.step-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;position:relative;overflow:hidden;transition:var(--t)}
.step-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:var(--t)}
.step-card:hover{border-color:var(--border2);transform:translateY(-3px);box-shadow:var(--glow)}
.step-card:hover::before{opacity:1}
.step-num{font-family:'Syne',sans-serif;font-size:3rem;font-weight:800;color:rgba(59,130,246,0.1);position:absolute;right:16px;top:8px}
.step-icon{width:44px;height:44px;border-radius:12px;background:rgba(59,130,246,0.12);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:16px}
.step-card h3{margin-bottom:8px;font-size:1rem}
.step-card p{color:var(--text2);font-size:0.88rem}
.payment-section{padding:60px 5%;background:rgba(12,15,26,0.8);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.payment-inner{max-width:900px;margin:0 auto;text-align:center}
.payment-badges{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.pay-badge{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 28px;font-family:var(--font-numbers);font-size:1rem;font-weight:700;display:flex;align-items:center;gap:10px}
.pay-badge .dot{width:10px;height:10px;border-radius:50%}
/* ═══════════════════════════════════════════
SERVICES
═══════════════════════════════════════════ */
#sec-services{background:var(--bg2)}
.services-page{padding:60px 5%;max-width:1200px;margin:0 auto}
.service-group{margin-bottom:48px}
.group-header{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.group-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.group-header h3{font-size:1.15rem}
.group-header p{color:var(--text3);font-size:0.83rem;margin-top:2px}
.service-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.srv-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;cursor:pointer;transition:var(--t);position:relative;overflow:hidden}
.srv-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.srv-card.selected{border-color:var(--accent);background:rgba(59,130,246,0.08)}
.srv-card.selected .check-mark{display:flex}
.check-mark{display:none;position:absolute;top:10px;right:12px;background:var(--accent);color:#fff;width:20px;height:20px;border-radius:50%;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700}
.srv-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:12px}
.srv-card h4{font-size:0.92rem;font-weight:600;margin-bottom:4px}
.srv-card .srv-type{font-size:0.75rem;color:var(--text3)}
.srv-select-btn{margin-top:14px;width:100%;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);color:var(--accent2);padding:7px;border-radius:8px;font-size:0.8rem;font-weight:500;transition:var(--t)}
.srv-card:hover .srv-select-btn,.srv-card.selected .srv-select-btn{background:var(--accent);border-color:var(--accent);color:#fff}
/* ═══════════════════════════════════════════
ORDER
═══════════════════════════════════════════ */
#sec-order{background:var(--bg)}
.order-page{padding:60px 5%;max-width:720px;margin:0 auto}
.form-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:40px}
.form-group{margin-bottom:22px}
.form-group label{display:block;font-size:0.82rem;font-weight:600;color:var(--text2);margin-bottom:8px;letter-spacing:0.04em;text-transform:uppercase}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:12px 16px;border-radius:10px;font-size:0.95rem;transition:var(--t);outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,0.12)}
.form-group select option{background:var(--bg2)}
.form-group textarea{resize:vertical;min-height:80px}
/* Payment info box */
.payment-info-box{background:rgba(59,130,246,0.05);border:1px solid rgba(59,130,246,0.2);border-radius:14px;padding:20px;margin-bottom:24px}
.payment-info-box h4{color:var(--accent2);font-size:0.9rem;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:0.05em}
.pay-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--border)}
.pay-row:last-of-type{border-bottom:none;margin-bottom:10px}
.pay-method-tag{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;padding:3px 8px;border-radius:5px;flex-shrink:0}
.moncash-tag{background:rgba(230,57,70,0.15);color:#f87171}
.natcash-tag{background:rgba(245,158,11,0.15);color:var(--gold2)}
.pay-number{font-family:var(--font-numbers);font-size:1rem;font-weight:700;flex:1}
.pay-owner{font-size:0.82rem;color:var(--text3)}
.rate-info{display:inline-flex;align-items:center;gap:6px;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);color:var(--green);border-radius:8px;padding:6px 12px;font-size:0.82rem;font-weight:600}
/* Account type toggle */
.acct-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.acct-btn{padding:11px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);color:var(--text2);font-size:0.9rem;font-weight:500;transition:var(--t);display:flex;align-items:center;justify-content:center;gap:8px}
.acct-btn.active{background:rgba(59,130,246,0.12);border-color:var(--accent);color:var(--text)}
.acct-fields{display:none;flex-direction:column;gap:16px;margin-top:16px}
.acct-fields.active{display:flex}
.id-hint{font-size:0.78rem;color:var(--text3);margin-top:6px;display:flex;align-items:center;gap:6px}
.id-hint code{background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:2px 8px;font-family:monospace;font-size:0.82rem;color:var(--gold2)}
/* Warning box */
.warn-box{background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.22);border-radius:10px;padding:14px 16px;display:flex;gap:10px;align-items:flex-start;margin-top:4px}
.warn-box i{color:var(--gold);flex-shrink:0;margin-top:2px;font-size:0.9rem}
.warn-box p{font-size:0.83rem;color:var(--text2);line-height:1.55}
/* Upload area */
.upload-area{border:2px dashed var(--border);border-radius:12px;padding:32px;text-align:center;cursor:pointer;transition:var(--t);position:relative}
.upload-area:hover{border-color:var(--accent);background:rgba(59,130,246,0.04)}
.upload-icon{font-size:2rem;color:var(--accent);margin-bottom:10px}
.upload-area p{color:var(--text2);font-size:0.88rem}
.upload-hint{font-size:0.78rem;color:var(--text3);margin-top:6px}
.upload-preview{display:none;flex-direction:column;align-items:center;gap:8px}
.upload-preview img{max-height:120px;border-radius:8px;border:1px solid var(--border)}
.file-name-display{font-size:0.82rem;color:var(--accent2)}
.btn-submit{width:100%;padding:14px;border-radius:12px;font-size:1rem;font-weight:700;background:linear-gradient(135deg,var(--accent),#2563eb);border:none;color:#fff;transition:var(--t);box-shadow:0 4px 20px rgba(59,130,246,0.35)}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(59,130,246,0.5)}
.btn-submit:disabled{opacity:0.5;cursor:not-allowed;transform:none}
/* ═══════════════════════════════════════════
AUTH
═══════════════════════════════════════════ */
#sec-auth{background:var(--bg);background-image:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(59,130,246,0.08) 0%,transparent 70%)}
.auth-page{min-height:calc(100vh - 68px);display:flex;align-items:center;justify-content:center;padding:40px 20px}
.auth-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:44px 40px;width:100%;max-width:440px}
.auth-tabs{display:flex;background:var(--bg2);border-radius:10px;padding:4px;margin-bottom:32px}
.auth-tab{flex:1;text-align:center;padding:9px;border-radius:8px;font-size:0.88rem;font-weight:600;cursor:pointer;transition:var(--t);background:none;border:none;color:var(--text3)}
.auth-tab.active{background:var(--bg3);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,0.3)}
.auth-form{display:none;flex-direction:column;gap:14px}
.auth-form.active{display:flex}
.auth-form h3{font-size:1.3rem;margin-bottom:2px}
.auth-form > p{color:var(--text2);font-size:0.88rem}
.input-wrap{position:relative}
.input-wrap input{width:100%;background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:12px 16px 12px 44px;border-radius:10px;font-size:0.95rem;outline:none;transition:var(--t)}
.input-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,0.12)}
.input-wrap .inp-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:0.9rem}
.auth-form .btn-primary{padding:13px;font-size:1rem;border-radius:10px}
.auth-divider{display:flex;align-items:center;gap:12px;color:var(--text3);font-size:0.82rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.alert-box{border-radius:8px;padding:10px 14px;font-size:0.85rem;display:none}
.alert-box.show{display:block}
.alert-error{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);color:#f87171}
.alert-success{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);color:var(--green)}
/* Google button */
.btn-google{width:100%;background:var(--bg2);border:1px solid rgba(255,255,255,0.12);color:var(--text);padding:12px;border-radius:10px;font-size:0.9rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:10px;transition:var(--t)}
.btn-google:hover{border-color:rgba(255,255,255,0.25);background:var(--bg3)}
.google-logo{width:18px;height:18px}
/* Forgot password panel */
#form-forgot{display:none;flex-direction:column;gap:14px}
#form-forgot.active{display:flex}
.back-btn{display:inline-flex;align-items:center;gap:6px;font-size:0.85rem;color:var(--text3);cursor:pointer;background:none;border:none;padding:0;transition:var(--t)}
.back-btn:hover{color:var(--accent2)}
.forgot-link{text-align:right}
.forgot-link button{background:none;border:none;color:var(--accent2);font-size:0.82rem;padding:0;cursor:pointer}
.forgot-link button:hover{text-decoration:underline}
/* ═══════════════════════════════════════════
DASHBOARD
═══════════════════════════════════════════ */
#sec-dashboard{background:var(--bg2)}
.dash-page{padding:40px 5%;max-width:1100px;margin:0 auto}
.dash-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:36px}
.dash-user{display:flex;align-items:center;gap:14px}
.avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:1.2rem;font-weight:700;color:#fff;flex-shrink:0}
.user-info .uname{font-weight:600;font-size:0.95rem}
.user-info .uemail{font-size:0.8rem;color:var(--text3)}
.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:36px}
.dstat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px}
.dstat .ds-label{font-size:0.78rem;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.dstat .ds-val{font-family:var(--font-numbers);font-size:1.8rem;font-weight:700}
.table-wrap{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.table-head-bar{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
table{width:100%;border-collapse:collapse}
thead th{text-align:left;padding:14px 20px;font-size:0.78rem;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;border-bottom:1px solid var(--border)}
tbody tr{border-bottom:1px solid rgba(255,255,255,0.03);transition:var(--t)}
tbody tr:hover{background:rgba(255,255,255,0.02)}
tbody tr:last-child{border-bottom:none}
tbody td{padding:14px 20px;font-size:0.88rem;color:var(--text2);vertical-align:middle}
tbody td:first-child{color:var(--text);font-weight:500}
.status-badge{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:4px 12px;font-size:0.75rem;font-weight:600}
.status-badge::before{content:'●';font-size:0.55rem}
.status-pending{background:rgba(245,158,11,0.12);color:var(--gold)}
.status-processing{background:rgba(59,130,246,0.12);color:var(--accent2)}
.status-completed{background:rgba(34,197,94,0.1);color:var(--green)}
.empty-orders{text-align:center;padding:60px 20px}
.empty-orders i{font-size:3rem;color:var(--text3);margin-bottom:16px;display:block}
.empty-orders p{color:var(--text3)}
.tbl-responsive{overflow-x:auto}
/* ═══════════════════════════════════════════
ADMIN
═══════════════════════════════════════════ */
#sec-admin{background:var(--bg)}
.admin-page{padding:40px 5%;max-width:1200px;margin:0 auto}
.admin-topbar{display:flex;align-items:center;gap:12px;margin-bottom:36px;flex-wrap:wrap}
.admin-badge{background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.2);color:#f87171;border-radius:6px;padding:3px 10px;font-size:0.75rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase}
.admin-order-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 24px;display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;transition:var(--t)}
.admin-order-card:hover{border-color:var(--border2)}
.aoc-info{flex:1;min-width:200px}
.aoc-id{font-size:0.75rem;color:var(--text3);margin-bottom:4px;font-family:monospace}
.aoc-service{font-weight:700;font-size:0.95rem;margin-bottom:4px}
.aoc-meta{font-size:0.82rem;color:var(--text2);margin-top:3px;display:flex;align-items:center;gap:6px}
.aoc-status select{background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:8px 14px;border-radius:8px;font-size:0.85rem;outline:none;cursor:pointer;transition:var(--t)}
.aoc-status select:focus{border-color:var(--accent)}
.aoc-proof img{height:64px;border-radius:8px;border:1px solid var(--border);cursor:pointer;transition:var(--t)}
.aoc-proof img:hover{border-color:var(--accent)}
.aoc-date{font-size:0.75rem;color:var(--text3);white-space:nowrap}
/* ═══════════════════════════════════════════
LEGAL
═══════════════════════════════════════════ */
#sec-legal{background:var(--bg2)}
.legal-page{padding:60px 5%;max-width:800px;margin:0 auto}
.legal-tabs{display:flex;gap:8px;margin-bottom:36px;flex-wrap:wrap}
.legal-tab-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text2);padding:9px 20px;border-radius:8px;font-size:0.88rem;transition:var(--t)}
.legal-tab-btn.active{background:rgba(59,130,246,0.12);border-color:var(--accent);color:var(--accent2)}
.legal-section{display:none}
.legal-section.active{display:block}
.legal-section h2{margin-bottom:8px}
.legal-section>.legal-desc{color:var(--text2);margin-bottom:28px;font-size:0.9rem}
.legal-section h3{color:var(--accent2);margin:24px 0 10px;font-size:0.95rem;text-transform:uppercase;letter-spacing:0.05em}
.legal-section p{color:var(--text2);font-size:0.9rem;margin-bottom:12px;line-height:1.7}
.legal-section ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.legal-section ul li{display:flex;align-items:flex-start;gap:10px;color:var(--text2);font-size:0.9rem}
.legal-section ul li::before{content:'→';color:var(--accent);flex-shrink:0;margin-top:1px}
/* ═══════════════════════════════════════════
NOTIFICATION TOAST
═══════════════════════════════════════════ */
.notif{position:fixed;bottom:24px;right:24px;z-index:9500;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 20px;max-width:340px;display:flex;align-items:flex-start;gap:12px;box-shadow:var(--shadow-lg);transform:translateX(130%);transition:transform 0.35s cubic-bezier(.4,0,.2,1)}
.notif.show{transform:translateX(0)}
.notif-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.9rem}
.notif-title{font-weight:600;font-size:0.9rem;margin-bottom:3px}
.notif-msg{font-size:0.82rem;color:var(--text2)}
.notif.success .notif-icon{background:rgba(34,197,94,0.15);color:var(--green)}
.notif.error .notif-icon{background:rgba(239,68,68,0.1);color:var(--red)}
.notif.info .notif-icon{background:rgba(59,130,246,0.12);color:var(--accent)}
/* ═══════════════════════════════════════════
MODAL (image preview)
═══════════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:8000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.25s;padding:20px}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:16px;max-width:90vw;max-height:90vh;overflow:auto;padding:20px;text-align:center}
.modal-box img{max-width:100%;border-radius:8px;max-height:70vh;object-fit:contain}
.modal-close{margin:14px auto 0;background:var(--bg2);border:1px solid var(--border);color:var(--text2);padding:8px 28px;border-radius:8px;cursor:pointer;display:block;font-size:0.9rem;transition:var(--t)}
.modal-close:hover{border-color:var(--accent);color:var(--text)}
/* ═══════════════════════════════════════════
FOOTER
═══════════════════════════════════════════ */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:32px 5%;text-align:center}
.footer-logo{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:800;margin-bottom:10px}
footer p{color:var(--text3);font-size:0.82rem}
.footer-links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.footer-links button{background:none;border:none;color:var(--text3);font-size:0.82rem;cursor:pointer;transition:var(--t)}
.footer-links button:hover{color:var(--accent2)}
/* ═══════════════════════════════════════════
ANIMATIONS
═══════════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* ═══════════════════════════════════════════
SIPÒ KLIANTÈL
═══════════════════════════════════════════ */
#sec-support{background:var(--bg)}
/* Price calculator */
.price-calc-box{background:rgba(34,197,94,0.05);border:1px solid rgba(34,197,94,0.22);border-radius:12px;padding:16px 20px;margin-top:12px}
.price-calc-box .pcb-label{font-size:0.75rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.price-calc-box .pcb-result{display:flex;align-items:center;gap:12px}
.pcb-usd{font-family:var(--font-numbers);font-size:1.3rem;font-weight:800;color:var(--text2)}
.pcb-arrow{color:var(--text3);font-size:1rem}
.pcb-htg{font-family:var(--font-numbers);font-size:1.6rem;font-weight:800;color:var(--green)}
.pcb-htg::after{content:' Gdes';font-size:0.9rem;font-weight:600;color:var(--green);opacity:0.8}
/* Completed order glow */
.status-completed-row{background:rgba(34,197,94,0.04)!important}
/* Admin completion upload */
.completion-upload-area{border:2px dashed rgba(34,197,94,0.3);border-radius:10px;padding:16px;text-align:center;cursor:pointer;transition:var(--t);background:rgba(34,197,94,0.03)}
.completion-upload-area:hover{border-color:var(--green);background:rgba(34,197,94,0.07)}
.completion-upload-area p{font-size:0.82rem;color:var(--text3)}
.completion-thumb{max-height:60px;border-radius:6px;margin-top:8px;border:1px solid var(--border)}
/* Dashboard completion proof */
.completion-proof-btn{background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.25);color:var(--green);padding:4px 10px;border-radius:6px;font-size:0.78rem;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.completion-proof-btn:hover{background:rgba(34,197,94,0.2)}
/* ── TABLOID SCUZZBALL — font pou tout nimewo sou sit la ──
Règ global: tout element ki gen chif enpòtan ap itilize font sa a.
Pou ajoute lòt element: jis ajoute selecteur nan lis anba a.
*/
.step-num,
.aoc-id,
#display-rate,
#display-moncash,
#display-natcash,
.rate-info,
.rate-badge,
tbody td:first-child {
font-family: var(--font-numbers) !important;
letter-spacing: 0.01em;
}
@media(max-width:640px){
.form-card{padding:28px 20px}
.auth-card{padding:32px 20px}
.stats-bar{flex-direction:column}
.stat-item{border-right:none;border-bottom:1px solid var(--border)}
.stat-item:last-child{border-bottom:none}
thead{display:none}
tbody tr{display:flex;flex-direction:column;padding:12px 16px;gap:4px}
tbody td{padding:2px 0;border:none}
tbody td::before{content:attr(data-label)': ';font-size:0.72rem;color:var(--text3);text-transform:uppercase;font-weight:600}
.admin-order-card{flex-direction:column}
}
</style>
</head>
<body>
<!-- ═══════════════════════════════════════════
LOADING SCREEN
═══════════════════════════════════════════ -->
<div id="loading-overlay">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhi8OlMqbiuX8BK2VCYDrmSiIpM5WZB2fxn8KEnlPTXYlI9YKL0PHzjomB-yX3qErUrec1YPXkMKHNoXu1Ulg8ZmcNbRgghp-QsumFKIJolyHOTZcbYqgKrQlJKKKEx7wE0VP2EZkoiQTZB3IJJByGYNVrC3kqD64EqEgCSpVidnPwedpYrE4Qd-nqHTs1c"
alt="FLEXSHOP HAITI" style="height:52px;width:auto;border-radius:10px;margin-bottom:8px">
<div class="spinner"></div>
<p style="color:var(--text3);font-size:0.85rem">Ap chaje…</p>
</div>
<!-- ═══════════════════════════════════════════
NAVBAR
═══════════════════════════════════════════ -->
<nav id="navbar">
<div class="nav-logo" onclick="showSection('home')" style="cursor:pointer">
<!-- Logo navbar — chanje src si logo chanje -->
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhi8OlMqbiuX8BK2VCYDrmSiIpM5WZB2fxn8KEnlPTXYlI9YKL0PHzjomB-yX3qErUrec1YPXkMKHNoXu1Ulg8ZmcNbRgghp-QsumFKIJolyHOTZcbYqgKrQlJKKKEx7wE0VP2EZkoiQTZB3IJJByGYNVrC3kqD64EqEgCSpVidnPwedpYrE4Qd-nqHTs1c"
alt="FLEXSHOP HAITI" style="height:38px;width:auto;border-radius:8px;object-fit:contain">
</div>
<div class="nav-links">
<button onclick="showSection('home')" id="nav-home" class="active">Akèy</button>
<button onclick="showSection('services')" id="nav-services">Sèvis</button>
<button onclick="showSection('order')" id="nav-order">Kòmande</button>
<button onclick="showSection('dashboard')" id="nav-dashboard" style="display:none">
<i class="fas fa-shopping-basket"></i> Panye Mwen
</button>
<button onclick="showSection('legal')" id="nav-legal">Règleman</button>
<button onclick="showSection('support')" id="nav-support">💬 Sèvis Kliyantèl</button>
</div>
<div class="nav-auth" id="nav-auth-area"></div>
<button class="hamburger" onclick="toggleMobile()"><i class="fas fa-bars"></i></button>
</nav>
<!-- Mobile menu -->
<div class="mobile-menu" id="mobile-menu">
<button onclick="showSection('home');closeMobile()">🏠 Akèy</button>
<button onclick="showSection('services');closeMobile()">🛍 Sèvis</button>
<button onclick="showSection('order');closeMobile()">📦 Kòmande</button>
<button onclick="showSection('legal');closeMobile()">📜 Règleman</button>
<button onclick="showSection('support');closeMobile()">💬 Sèvis Kliyantèl</button>
<div class="mob-divider"></div>
<div id="mobile-auth-area"></div>
</div>
<!-- ═══════════════════════════════════════════
HOME
═══════════════════════════════════════════ -->
<section class="section active" id="sec-home">
<div class="hero">
<section class="section active" id="sec-home">
<!-- ── SLIDESHOW ── -->
<!-- KIJAN POU CHANJE IMAJ YO:
Chèche "SLIDESHOW_IMAGES" nan JavaScript anba
Ajoute oswa retire URL imaj nan tablo a -->
<div class="slideshow-wrap">
<div class="slideshow-track" id="slideshow-track"></div>
<button class="slideshow-btn prev" onclick="slidePrev()"><i class="fas fa-chevron-left"></i></button>
<button class="slideshow-btn next" onclick="slideNext()"><i class="fas fa-chevron-right"></i></button>
<div class="slideshow-dots" id="slideshow-dots"></div>
</div>
<div class="hero">
<div class="hero-badge"><i class="fas fa-shield-halved"></i> Platfòm Dijital Ayiti</div>
<h1>Achete tout bagay pou jwèt ou fasil</h1>
<p>Nou la poun' ede w jwenn tout sèvis dijital ou bezwen — san kat kredi. Peye ak <strong>Natcash</strong> oubyen <strong>MonCash</strong>, resevwa sèvis ou an byen rapid.</p>
<div class="hero-cta">
<button class="btn-primary" onclick="showSection('services')">
<i class="fas fa-store"></i> Gade Sèvis yo
</button>
<button class="btn-outline" onclick="showSection('auth');setAuthTab('signup')">
<i class="fas fa-user-plus"></i> Kreye Kont Gratis
</button>
<button class="btn-ghost" onclick="showSection('auth');setAuthTab('login')">
<i class="fas fa-sign-in-alt"></i> Konekte
</button>
<button class="btn-ghost" id="btn-install-app" onclick="installApp()" style="display:none;border-color:rgba(34,197,94,0.4);color:var(--green)">
<i class="fas fa-download"></i> Telechaje App
</button>
</div>
<div class="hero-floating">
<div class="float-card">
<div class="fc-icon" style="background:rgba(245,158,11,0.12);color:var(--gold)"><i class="fas fa-coins"></i></div>
<div><div class="fc-label">FlexCity Gold</div><div class="fc-val">500 – 77,500</div></div>
</div>
<div class="float-card">
<div class="fc-icon" style="background:rgba(59,130,246,0.12);color:var(--accent2)"><i class="fas fa-gem"></i></div>
<div><div class="fc-label">Diamants</div><div class="fc-val">100 – 5,600</div></div>
</div>
<div class="float-card">
<div class="fc-icon" style="background:rgba(167,139,250,0.12);color:var(--purple)"><i class="fas fa-star"></i></div>
<div><div class="fc-label">Flex Pass</div><div class="fc-val">Premium & Plus</div></div>
</div>
</div>
</div>
<div class="stats-wrap">
<div class="stats-bar">
<div class="stat-item"><div class="stat-num">500+</div><div class="stat-label">Kòmand Fèt</div></div>
<div class="stat-item"><div class="stat-num">2</div><div class="stat-label">Metòd Peman</div></div>
<div class="stat-item"><div class="stat-num">98%</div><div class="stat-label">Kliyan Satisfè</div></div>
<div class="stat-item"><div class="stat-num">24h</div><div class="stat-label">Sèvis Kliyantèl</div></div>
</div>
</div>
<div class="how-section">
<div class="section-header">
<span class="tag">Koman sa mache</span>
<h2>Senp, Rapid, Fyab</h2>
<p>4 etap senp pou jwenn sèvis ou an san pwoblèm</p>
</div>
<div class="steps-grid">
<div class="step-card"><div class="step-num">01</div><div class="step-icon"><i class="fas fa-user-plus"></i></div><h3>Kreye Kont</h3><p>Enskri gratis avèk imèl ak modpas ou.</p></div>
<div class="step-card"><div class="step-num">02</div><div class="step-icon"><i class="fas fa-store"></i></div><h3>Chwazi Sèvis</h3><p>Navige nan katalòg nou an epi chwazi sa w bezwen an.</p></div>
<div class="step-card"><div class="step-num">03</div><div class="step-icon"><i class="fas fa-mobile-alt"></i></div><h3>Peye ak (Natcash/MonCash)</h3><p>Voye peman an, pran screenshot kòm prèv.</p></div>
<div class="step-card"><div class="step-num">04</div><div class="step-icon"><i class="fas fa-paper-plane"></i></div><h3>Resevwa Sèvis</h3><p>Nou trete kòmand ou rapidman apre verifikasyon.</p></div>
</div>
</div>
<div class="payment-section">
<div class="payment-inner">
<span class="tag">Metòd Peman</span>
<h3 style="font-size:1.3rem;color:var(--text);margin-top:8px">Nou aksepte peman Ayisyen</h3>
<p style="color:var(--text2);margin-top:8px;font-size:0.9rem">Itilize Natcash oubyen MonCash — pa bezwen kat kredi entènasyonal.</p>
<div class="payment-badges">
<div class="pay-badge"><div class="dot" style="background:#e63946"></div> MonCash</div>
<div class="pay-badge"><div class="dot" style="background:#f59e0b"></div> Natcash</div>
</div>
</div>
</div>
<footer>
<div class="footer-logo">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhi8OlMqbiuX8BK2VCYDrmSiIpM5WZB2fxn8KEnlPTXYlI9YKL0PHzjomB-yX3qErUrec1YPXkMKHNoXu1Ulg8ZmcNbRgghp-QsumFKIJolyHOTZcbYqgKrQlJKKKEx7wE0VP2EZkoiQTZB3IJJByGYNVrC3kqD64EqEgCSpVidnPwedpYrE4Qd-nqHTs1c"
alt="FLEXSHOP HAITI" style="height:36px;width:auto;border-radius:8px;margin:0 auto 10px">
</div>
<div class="footer-links">
<button onclick="showSection('legal');setLegalTab('terms')">Tèm ak Kondisyon</button>
<button onclick="showSection('legal');setLegalTab('aml')">Politik AML</button>
<button onclick="showSection('services')">Sèvis</button>
<button onclick="showSection('support')">Sèvis Kliyantèl</button>
</div>
<p>© 2025 FLEXSHOP HAITI · Tout dwa rezève</p>
</footer>
</section>
<!-- ═══════════════════════════════════════════
SERVICES
═══════════════════════════════════════════ -->
<section class="section" id="sec-services">
<div class="services-page">
<div style="margin-bottom:36px">
<span class="tag">Katalòg</span>
<h2 style="margin-top:8px">Tout Sèvis Nou yo</h2>
<p style="color:var(--text2);margin-top:8px">Klike sou yon sèvis pou'w kòmande</p>
</div>
<div class="service-group">
<div class="group-header">
<div class="group-icon" style="background:rgba(245,158,11,0.12);color:var(--gold)"><i class="fas fa-coins"></i></div>
<div><h3>🔰 Top Up FlexCity par Compte</h3><p>Recharge kont FlexCity ou dirèkteman</p></div>
</div>
<div class="service-cards" id="cards-gold"></div>
</div>
<div class="service-group">
<div class="group-header">
<div class="group-icon" style="background:rgba(59,130,246,0.12);color:var(--accent2)"><i class="fas fa-gem"></i></div>
<div><h3>🏷️ Menu Diamants</h3><p>Achte diamant pou jwèt ak sèvis dijital</p></div>
</div>
<div class="service-cards" id="cards-diamonds"></div>
</div>
<div class="service-group">
<div class="group-header">
<div class="group-icon" style="background:rgba(167,139,250,0.12);color:var(--purple)"><i class="fas fa-star"></i></div>
<div><h3>🏷️ Flex Pass & autres</h3><p>Abonnman ak sèvis espesyal</p></div>
</div>
<div class="service-cards" id="cards-pass"></div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════
ORDER
═══════════════════════════════════════════ -->
<section class="section" id="sec-order">
<div class="order-page">
<div class="form-card">
<h2 style="margin-bottom:6px">📦 Fè yon Kòmand</h2>
<p style="color:var(--text2);font-size:0.9rem;margin-bottom:28px">Ranpli fòm sa a pou kòmande sèvis ou an</p>
<!-- ── PAYMENT INFO BOX ───────────────────────────── -->
<!--
PEMAN INFO — CHANJE ICI:
Pou mete nouvo nimewo oswa non pwopriyetè, chèche "PAYMENT_INFO" nan JavaScript anba.
-->
<div class="payment-info-box">
<h4><i class="fas fa-credit-card"></i> Kote Pou Voye Peman</h4>
<div class="pay-row">
<span class="pay-method-tag moncash-tag">MonCash</span>
<span class="pay-number" id="display-moncash">+509 3450 6105</span>
<span class="pay-owner" id="display-owner">Primier Alex</span>
</div>
<div class="pay-row">
<span class="pay-method-tag natcash-tag">Natcash</span>
<span class="pay-number" id="display-natcash">+509 5573 6990</span>
<span class="pay-owner" id="display-owner2">Primier Alex</span>
</div>
<div class="rate-info" id="display-rate">
<i class="fas fa-exchange-alt"></i> 1 USD = 170 Gdes
</div>
</div>
<div id="order-login-warn" style="display:none;background:rgba(245,158,11,0.07);border:1px solid rgba(245,158,11,0.2);border-radius:10px;padding:14px 16px;margin-bottom:20px;font-size:0.88rem;color:var(--text2)">
<i class="fas fa-lock" style="color:var(--gold)"></i>
<a href="#" onclick="showSection('auth')" style="color:var(--accent2)">Konekte oubyen kreye kont</a> pou kòmande.
</div>
<!-- Service -->
<div class="form-group">
<label>Sèvis</label>
<select id="order-service">
<option value="">-- Chwazi yon sèvis --</option>
<optgroup label="🔰 Top Up FlexCity par Compte">
<option>500 Gold</option><option>2100 Gold</option><option>6250 Gold</option>
<option>17,000 Gold</option><option>40,000 Gold</option><option>77,500 Gold</option>
</optgroup>
<optgroup label="🏷️ Menu Diamants">
<option>100 Diamonds</option><option>310 Diamonds</option><option>520 Diamonds</option>
<option>1160 Diamonds</option><option>2160 Diamonds</option><option>5600 Diamonds</option>
</optgroup>
<optgroup label="🏷️ Flex Pass & autres">
<option>Flex pass Premium</option><option>Flex pass Premium Plus</option>
<option>The Vault 10,000 Gold</option><option>The Vault 1675 Diamonds</option>
<option>No ads</option><option>Abonnement VIP CLUB</option>
<option>Mine d'Or 80%</option><option>Mine d'Or 70%</option>
<option>Mine d'Or 60%</option><option>Mine d'Or 40%</option>
</optgroup>
<optgroup label="➕ Lòt">
<option value="__other__">Lòt Sèvis (pa nan lis la)</option>
</optgroup>
</select>
<!-- Champ pou dekripsyon lòt sèvis -->
<div id="other-service-wrap" style="display:none;margin-top:12px">
<input type="text" id="other-service-name"
placeholder="Ekri non sèvis ou bezwen an..."
style="width:100%;background:var(--bg2);border:1px solid var(--accent);color:var(--text);padding:12px 16px;border-radius:10px;font-size:0.95rem;outline:none">
<div class="id-hint" style="margin-top:6px">
<i class="fas fa-info-circle" style="color:var(--accent2)"></i>
Dekri sèvis la ak kote ou wè l — nou ap konfime pri ak disponibilite
</div>
</div>
<!-- Price field + calculator -->
<div class="form-group">
<label>Pri Sèvis lan sou <a href="https://flexcity.app" target="_blank" style="color:var(--accent2);font-weight:600;text-transform:none">flexcity.app</a> <span style="color:var(--red);font-size:0.9em">*</span></label>
<div style="position:relative">
<span style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:0.9rem;pointer-events:none">$</span>
<input type="number" id="order-price-usd" placeholder="Egzanp: 4.19" min="0" step="0.01"
style="padding-left:30px" oninput="calcPrice(this.value)" required>
</div>
<div id="price-calc-result" class="price-calc-box" style="display:none">
<div class="pcb-label"><i class="fas fa-calculator"></i> Valè w ap peye an Goud</div>
<div class="pcb-result">
<span class="pcb-usd" id="pcb-usd-display"></span>
<span class="pcb-arrow"><i class="fas fa-long-arrow-alt-right"></i></span>
<span class="pcb-htg" id="pcb-htg-display"></span>
</div>
<div style="font-size:0.76rem;color:var(--text3);margin-top:8px">
<i class="fas fa-info-circle"></i> Baze sou 1 USD = <strong id="pcb-rate-label">170</strong> Gdes
</div>
</div>
<div class="id-hint" style="margin-top:8px">
<i class="fas fa-info-circle" style="color:var(--accent2)"></i>
Antre egzak pri ou wè sou <strong>flexcity.app</strong> — kalkil fèt otomatikman
</div>
</div>
<!-- Account type toggle -->
<div class="form-group">
<label>Tip Kont</label>
<div class="acct-toggle">
<button class="acct-btn active" id="btn-gameid" onclick="setAccountType('game_id')">
<i class="fas fa-gamepad"></i> ID Jwè
</button>
<button class="acct-btn" id="btn-emailacc" onclick="setAccountType('email')">
<i class="fas fa-envelope"></i> Imèl Kont
</button>
</div>
<!-- GAME ID fields -->
<div class="acct-fields active" id="fields-gameid">
<div>
<input type="text" id="order-gameid" placeholder="Antre ID Jwè ou a" maxlength="30">
<div class="id-hint">
<i class="fas fa-info-circle" style="color:var(--accent2)"></i>
Fòma ID: <code>#AA000A000AAA</code>
</div>
</div>
</div>
<!-- EMAIL account fields -->
<div class="acct-fields" id="fields-email">
<div>
<label style="font-size:0.78rem;color:var(--text3);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px;display:block">Gmail Kont Flex City</label>
<input type="email" id="order-flex-email" placeholder="exemple@gmail.com">
</div>
<div>
<label style="font-size:0.78rem;color:var(--text3);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px;display:block">Modpas Kont Flex City</label>
<div style="position:relative">
<input type="password" id="order-flex-password" placeholder="Modpas kont Flex City ou" style="padding-right:44px">
<button type="button" onclick="togglePwdVisibility('order-flex-password',this)" style="position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);font-size:0.9rem"><i class="fas fa-eye"></i></button>
</div>
</div>
<!-- ⚠️ WARNING -->
<div class="warn-box">
<i class="fas fa-triangle-exclamation"></i>
<p><strong style="color:var(--gold)">Avètisman Enpòtan:</strong> Si ou antre imèl oubyen modpas ou ak erè, FLEXSHOP HAITI pa responsab pou nenpòt pèt oubyen pwoblèm ki ka rive. Tcheke enfòmasyon ou yo avèk anpil swen anvan w soumèt kòmand lan.</p>
</div>
</div>
</div>
<!-- Notes -->
<div class="form-group">
<label>Nòt Adisyonèl <span style="color:var(--text3);font-weight:400">(opsyonèl)</span></label>
<textarea id="order-notes" placeholder="Bay deskripsyon oswa mete lyen sitweb kote wap achte sèvis la (egzanp: https://flexcity.app/...)"></textarea>
</div>
<!-- Upload proof -->
<div class="form-group">
<label>Prèv Peman (Screenshot)</label>
<div class="upload-area" id="upload-area" onclick="document.getElementById('proof-input').click()">
<input type="file" id="proof-input" accept="image/*" onchange="handleFileUpload(event)" style="display:none">
<div id="upload-placeholder">
<div class="upload-icon"><i class="fas fa-cloud-upload-alt"></i></div>
<p>Klike pou telechaje screenshot peman ou an</p>
<div class="upload-hint">PNG, JPG, JPEG — Maks 5MB</div>
</div>
<div class="upload-preview" id="upload-preview">
<img id="preview-img" src="" alt="preview">
<span class="file-name-display" id="file-name-disp"></span>
</div>
</div>
</div>
<button class="btn-submit" id="submit-order-btn" onclick="submitOrder()">
<i class="fas fa-paper-plane"></i> Voye Kòmand
</button>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════
AUTH
═══════════════════════════════════════════ -->
<section class="section" id="sec-auth">
<div class="auth-page">
<div class="auth-card">
<div style="display:flex;justify-content:center;margin-bottom:28px">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhi8OlMqbiuX8BK2VCYDrmSiIpM5WZB2fxn8KEnlPTXYlI9YKL0PHzjomB-yX3qErUrec1YPXkMKHNoXu1Ulg8ZmcNbRgghp-QsumFKIJolyHOTZcbYqgKrQlJKKKEx7wE0VP2EZkoiQTZB3IJJByGYNVrC3kqD64EqEgCSpVidnPwedpYrE4Qd-nqHTs1c"
alt="KFLEXSHOP HAITI" style="height:48px;width:auto;border-radius:10px">
</div>
<div class="auth-tabs" id="auth-tabs-bar">
<button class="auth-tab active" id="tab-login" onclick="setAuthTab('login')">Konekte</button>
<button class="auth-tab" id="tab-signup" onclick="setAuthTab('signup')">Kreye Kont</button>
</div>
<!-- ── LOGIN ── -->
<div class="auth-form active" id="form-login">
<h3>Bònjou ankò!</h3>
<p>Antre enfòmasyon ou pou konekte</p>
<div class="alert-box alert-error" id="login-error"></div>
<div class="input-wrap">
<i class="fas fa-envelope inp-icon"></i>
<input type="email" id="login-email" placeholder="Imèl ou">
</div>
<div class="input-wrap" style="position:relative">
<i class="fas fa-lock inp-icon"></i>
<input type="password" id="login-password" placeholder="Modpas ou" style="padding-right:44px">
<button type="button" onclick="togglePwdVisibility('login-password',this)" style="position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);font-size:0.9rem"><i class="fas fa-eye"></i></button>
</div>
<div class="forgot-link">
<button onclick="showForgot()">Modpas Bliye?</button>
</div>
<button class="btn-primary" onclick="doLogin()"><i class="fas fa-sign-in-alt"></i> Konekte</button>
<div class="auth-divider">oswa</div>
<button class="btn-google" onclick="doGoogleLogin()">
<!-- Google SVG logo -->
<svg class="google-logo" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
</svg>
Konekte ak Google
</button>
<p style="text-align:center;color:var(--text3);font-size:0.85rem">
Pa gen kont? <a href="#" onclick="setAuthTab('signup')" style="color:var(--accent2)">Kreye youn gratis</a>
</p>
</div>
<!-- ── SIGNUP ── -->
<div class="auth-form" id="form-signup">
<h3>Kreye Kont Gratis</h3>
<p>Enskri pou kòmande sèvis yo</p>
<div class="alert-box alert-error" id="signup-error"></div>
<div class="input-wrap">
<i class="fas fa-user inp-icon"></i>
<input type="text" id="signup-name" placeholder="Non konplè ou">
</div>
<div class="input-wrap">
<i class="fas fa-envelope inp-icon"></i>
<input type="email" id="signup-email" placeholder="Imèl ou">
</div>
<div class="input-wrap" style="position:relative">
<i class="fas fa-lock inp-icon"></i>
<input type="password" id="signup-password" placeholder="Kreye modpas (min. 6 karaktè)" style="padding-right:44px">
<button type="button" onclick="togglePwdVisibility('signup-password',this)" style="position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);font-size:0.9rem"><i class="fas fa-eye"></i></button>
</div>
<div class="input-wrap">
<i class="fas fa-lock inp-icon"></i>
<input type="password" id="signup-confirm" placeholder="Konfime modpas">
</div>
<button class="btn-primary" onclick="doSignup()"><i class="fas fa-user-plus"></i> Kreye Kont</button>
<div class="auth-divider">oswa</div>
<button class="btn-google" onclick="doGoogleLogin()">
<svg class="google-logo" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
</svg>
Kreye ak Google
</button>
<p style="text-align:center;color:var(--text3);font-size:0.85rem">
Gen kont deja? <a href="#" onclick="setAuthTab('login')" style="color:var(--accent2)">Konekte</a>
</p>
</div>
<!-- ── FORGOT PASSWORD ── -->
<div id="form-forgot">
<button class="back-btn" onclick="hideForgot()"><i class="fas fa-arrow-left"></i> Retounen</button>
<h3>Rekipere Kont Ou</h3>
<p style="color:var(--text2);font-size:0.88rem">Antre imèl ou an. Nou pral voye yon lyen pou w reyinisyalize modpas ou.</p>
<div class="alert-box alert-error" id="forgot-error"></div>
<div class="alert-box alert-success" id="forgot-success"></div>
<div class="input-wrap">
<i class="fas fa-envelope inp-icon"></i>
<input type="email" id="forgot-email" placeholder="Imèl ou">
</div>
<button class="btn-primary" style="padding:13px;font-size:1rem;border-radius:10px" onclick="doForgotPassword()">
<i class="fas fa-paper-plane"></i> Voye Lyen Reyinisyalizasyon
</button>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════
DASHBOARD
═══════════════════════════════════════════ -->
<section class="section" id="sec-dashboard">
<div class="dash-page">
<div class="dash-header">
<div>
<h2>Tableau de Bord</h2>
<p style="color:var(--text3);font-size:0.88rem;margin-top:4px">Swiv kòmand ou yo ak enfòmasyon kont ou</p>
</div>
<div style="display:flex;gap:10px;align-items:center">
<div class="dash-user">
<div class="avatar" id="dash-avatar">U</div>
<div class="user-info">
<div class="uname" id="dash-name">—</div>
<div class="uemail" id="dash-email">—</div>
</div>
</div>
<button class="btn-danger" onclick="doLogout()"><i class="fas fa-sign-out-alt"></i></button>
</div>
</div>
<!-- Bannè notifikasyon kòmand konplete -->
<div id="dash-completed-banner" style="display:none"></div>
<div class="dash-stats">
<div class="dstat"><div class="ds-label"><i class="fas fa-box" style="color:var(--accent)"></i> Total Kòmand</div><div class="ds-val" id="stat-total">0</div></div>
<div class="dstat"><div class="ds-label"><i class="fas fa-clock" style="color:var(--gold)"></i> An Atant</div><div class="ds-val" id="stat-pending" style="color:var(--gold)">0</div></div>
<div class="dstat"><div class="ds-label"><i class="fas fa-spinner" style="color:var(--accent2)"></i> An Trete</div><div class="ds-val" id="stat-processing" style="color:var(--accent2)">0</div></div>
<div class="dstat"><div class="ds-label"><i class="fas fa-check-circle" style="color:var(--green)"></i> Konplete</div><div class="ds-val" id="stat-completed" style="color:var(--green)">0</div></div>
</div>
<div class="table-wrap">
<div class="table-head-bar">
<h3><i class="fas fa-list-ul"></i> Istwa Kòmand yo</h3>
<button class="btn-primary" style="font-size:0.82rem;padding:7px 16px" onclick="showSection('order')">
<i class="fas fa-plus"></i> Nouvo Kòmand
</button>
</div>
<div id="dash-orders-content" class="tbl-responsive"></div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════
ADMIN PANEL
═══════════════════════════════════════════ -->
<section class="section" id="sec-admin">
<div class="admin-page">
<div class="admin-topbar">
<h2>Panel Administrasyon</h2>
<span class="admin-badge"><i class="fas fa-shield-halved"></i> Admin</span>
<button class="btn-danger" onclick="doLogout()" style="margin-left:auto"><i class="fas fa-sign-out-alt"></i> Dekonekte</button>
</div>
<div id="admin-stats-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:32px"></div>
<div class="table-wrap">
<div class="table-head-bar">
<h3><i class="fas fa-list"></i> Tout Kòmand yo</h3>
<span id="admin-order-count" style="background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:4px 12px;font-size:0.8rem;color:var(--text2)">0 kòmand</span>
</div>
<div id="admin-orders-list" style="padding:16px;display:flex;flex-direction:column;gap:12px"></div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════
LEGAL
═══════════════════════════════════════════ -->
<section class="section" id="sec-legal">
<div class="legal-page">
<div style="margin-bottom:28px">
<h2>Dokiman Legal</h2>
<p style="color:var(--text2);margin-top:8px">Tèm, kondisyon ak politik nou yo</p>
</div>
<div class="legal-tabs">
<button class="legal-tab-btn active" onclick="setLegalTab('terms')">📜 Tèm ak Kondisyon</button>
<button class="legal-tab-btn" onclick="setLegalTab('aml')">⚖️ Politik AML</button>
</div>
<div class="legal-section active" id="legal-terms">
<h2>Tèm ak Kondisyon Itilizasyon</h2>
<p class="legal-desc">Dènye mizajou: Janvye 2025 · Depi wap itilize FLEXSHOP HAITI, ou aksepte tout kondisyon ki endike anba a.</p>
<h3>1. Ranbousman</h3>
<ul><li>Pa gen ranbousman apre sèvis la te livre.</li><li>Asire w ou ban nou bon enfòmasyon kont ou anvan kòmande.</li><li>Yon fwa sèvis la livre, nou pa kapab ranbouse.</li></ul>
<h3>2. Enfòmasyon Kliyan</h3>
<ul><li>Ou responsab pou ban nou enfòmasyon kòrèk ak konplè.</li><li>ID jwè / imèl kont dwe ekzak.</li><li>Prèv peman dwe kòrèk ak lizib.</li></ul>
<h3>3. Tan Livrezon</h3>
<ul><li>Livrezon tipik: 1–24 zè apre verifikasyon peman.</li><li>Pèyòd cho ka pran plis tan.</li><li>Nou pa garanti yon delè espesifik.</li></ul>
<h3>4. Sèvis Tyès Pati</h3>
<ul><li>FLEXSHOP HAITI se yon revendè endepandan. Nou pa afilie ofisyèlman ak tiers.</li><li>Tout mak komèsyal ak non sèvis yo se pwopriyete pwopriyetè respektif yo.</li></ul>
<h3>5. Konpòtman Itilizatè</h3>
<ul><li>Entèdi itilize platfòm nan pou aktivite ilegal.</li><li>Entèdi fè fwod oubyen trich ak prèv peman.</li><li>Itilizasyon malfèzan ka mennen nan sispansyon kont definitif.</li></ul>
</div>
<div class="legal-section" id="legal-aml">
<h2>Politik Kont Blanchisman Kòb (AML)</h2>
<p class="legal-desc">KFLEXSHOP HAITI angaje pou konfòme avèk lwa ayisyen yo ak nòm entènasyonal kont blanchisman kòb.</p>
<h3>1. Sous Lajan Ilegal</h3>
<ul><li>Nou pa aksepte peman ki soti nan aktivite ilegal.</li><li>Tranzaksyon sispèk ka rejte san avètisman.</li></ul>
<h3>2. Verifikasyon Idantite</h3>
<ul><li>Nou ka mande prèv idantite pou gwo tranzaksyon.</li><li>Refize verifikasyon ka mennen nan sispansyon kont.</li></ul>
<h3>3. Tranzaksyon Sispèk</h3>
<ul><li>Tranzaksyon ki parèt sispèk yo ka bloke otomatikman.</li><li>Plizyè kòmand rapidman ka deklanche yon revizyon.</li></ul>
<h3>4. Konsekans Fremd</h3>
<ul><li>Kont ki enplike nan fwod yo bloke definitif.</li><li>Nou ka pran aksyon legal si nesesè.</li></ul>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════
SIPÒ KLIANTÈL
═══════════════════════════════════════════ -->
<section class="section" id="sec-support">
<div class="order-page">
<div class="form-card">
<h2 style="margin-bottom:6px">💬 Sèvis Kliyantèl</h2>
<p style="color:var(--text2);font-size:0.9rem;margin-bottom:28px">Ou gen yon pwoblèm? Ranpli fòm sa a epi nou ap kontakte ou nan yon ti tan.</p>
<div class="alert-box alert-error" id="support-error" style="margin-bottom:16px"></div>
<div class="alert-box alert-success" id="support-success" style="margin-bottom:16px"></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
<div class="form-group">
<label>Non <span style="color:var(--red)">*</span></label>
<input type="text" id="support-firstname" placeholder="Non ou">
</div>
<div class="form-group">
<label>Prenon <span style="color:var(--red)">*</span></label>
<input type="text" id="support-lastname" placeholder="Prenon ou">
</div>
</div>
<div class="form-group">
<label>Imèl <span style="color:var(--red)">*</span></label>
<div class="input-wrap" style="margin-top:0">
<i class="fas fa-envelope inp-icon"></i>
<input type="email" id="support-email" placeholder="imèl@exemple.com" style="padding-left:44px;background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:10px;font-size:0.95rem;outline:none;transition:var(--t);width:100%">
</div>
</div>
<div class="form-group">
<label>WhatsApp <span style="color:var(--red)">*</span></label>
<div class="input-wrap" style="margin-top:0">
<i class="fab fa-whatsapp inp-icon" style="color:#25d366"></i>
<input type="tel" id="support-whatsapp" placeholder="+509 XXXX XXXX" style="padding-left:44px;background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:10px;font-size:0.95rem;outline:none;transition:var(--t);width:100%">
</div>
</div>
<div class="form-group">
<label>Foto kòm Prèv <span style="color:var(--text3);font-weight:400">(opsyonèl)</span></label>
<div class="upload-area" id="support-upload-area" onclick="document.getElementById('support-proof-input').click()">
<input type="file" id="support-proof-input" accept="image/*" onchange="handleSupportUpload(event)" style="display:none">
<div id="support-upload-placeholder">
<div class="upload-icon"><i class="fas fa-camera"></i></div>
<p>Klike pou ajoute yon foto (screenshot, prèv, etc.)</p>
<div class="upload-hint">PNG, JPG — Maks 5MB</div>
</div>
<div class="upload-preview" id="support-upload-preview">
<img id="support-preview-img" src="" alt="preview">
<span class="file-name-display" id="support-file-name"></span>
</div>
</div>
</div>
<div class="form-group">
<label>Nòt Doleyans <span style="color:var(--red)">*</span></label>
<textarea id="support-message" placeholder="Eksplike pwoblèm ou an avèk detay..." style="min-height:120px"></textarea>
</div>
<button class="btn-submit" id="support-submit-btn" onclick="submitSupport()">
<i class="fas fa-paper-plane"></i> Voye Doleyans
</button>
</div>
</div>
</section>
<!-- NOTIFICATION TOAST -->
<div class="notif" id="notif">
<div class="notif-icon" id="notif-icon"><i class="fas fa-check"></i></div>
<div><div class="notif-title" id="notif-title"></div><div class="notif-msg" id="notif-msg"></div></div>
</div>
<!-- IMAGE MODAL -->
<div class="modal-overlay" id="modal-overlay" onclick="closeModal()">
<div class="modal-box" onclick="event.stopPropagation()">
<img id="modal-img" src="" alt="proof">
<button class="modal-close" onclick="closeModal()"><i class="fas fa-times"></i> Fèmen</button>
</div>
</div>
<!-- ═══════════════════════════════════════════════════════════════
JAVASCRIPT — SUPABASE + SPA LOGIC
═══════════════════════════════════════════════════════════════ -->
<script type="module">
/* ══════════════════════════════════════════════
① SUPABASE CONFIG
══════════════════════════════════════════════
*/
import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
const supabaseUrl = 'https://hitelfzpwpbsyxvkimhu.supabase.co';
const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImhpdGVsZnpwd3Bic3l4dmtpbWh1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzUyNTQzOTksImV4cCI6MjA5MDgzMDM5OX0.AQq9iejKJpUBTGe3stgZhxZZhfU0liKEnqeQUw2Y0no';
const supabase = createClient(supabaseUrl, supabaseKey, {
auth: {
autoRefreshToken: true,
persistSession: true,
detectSessionInUrl: true,
storageKey: 'flexshop-auth',
storage: window.localStorage,
lock: async (name, acquireTimeout, fn) => {
return await fn();
}
}
});
/* ══════════════════════════════════════════════
② PAYMENT INFO CONFIG
══════════════════════════════════════════════
*/
const PAYMENT_INFO = {
moncash: '+509 3450 6105',
natcash: '+509 5573 6990',
ownerName: 'Primier Alex'
};
/* ══════════════════════════════════════════════
③ TAU ECHANJ
══════════════════════════════════════════════
Pou chanje tau a, chanje SÈLMAN nòm ki apre "=":
Egzanp: const USD_TO_HTG = 185;
*/
const USD_TO_HTG = 170;
/* ══════════════════════════════════════════════
④ SERVICE CATALOG
══════════════════════════════════════════════
*/
const SERVICES = {
gold: [
{name:'500 Gold',icon:'🪙',type:'FlexCity'},
{name:'2100 Gold',icon:'🪙',type:'FlexCity'},
{name:'6250 Gold',icon:'💰',type:'FlexCity'},
{name:'17,000 Gold',icon:'💰',type:'FlexCity'},
{name:'40,000 Gold',icon:'🏆',type:'FlexCity'},
{name:'77,500 Gold',icon:'👑',type:'FlexCity'},
],
diamonds: [
{name:'100 Diamonds',icon:'💎',type:'Diamant'},
{name:'310 Diamonds',icon:'💎',type:'Diamant'},
{name:'520 Diamonds',icon:'💎',type:'Diamant'},
{name:'1160 Diamonds',icon:'💎',type:'Diamant'},
{name:'2160 Diamonds',icon:'💠',type:'Diamant'},
{name:'5600 Diamonds',icon:'💠',type:'Diamant'},
],
pass: [
{name:'Flex pass Premium',icon:'⭐',type:'Abonnman'},
{name:'Flex pass Premium Plus',icon:'🌟',type:'Abonnman'},
{name:'The Vault 10,000 Gold',icon:'🏛️',type:'Vault'},
{name:'The Vault 1675 Diamonds',icon:'🏛️',type:'Vault'},
{name:'No ads',icon:'🚫',type:'Sèvis'},
{name:'Abonnement VIP CLUB',icon:'💎',type:'VIP'},
{name:"Mine d'Or 80%",icon:'⛏️',type:"Mine d'Or"},
{name:"Mine d'Or 70%",icon:'⛏️',type:"Mine d'Or"},
{name:"Mine d'Or 60%",icon:'⛏️',type:"Mine d'Or"},
{name:"Mine d'Or 40%",icon:'⛏️',type:"Mine d'Or"},
]
};
/* ══════════════════════════════════════════════
HELPERS
══════════════════════════════════════════════ */
function sanitize(str){
if(!str) return '';
const d=document.createElement('div');
d.textContent=str;
return d.innerHTML;
}
function generateId(){
return 'ORD-'+Date.now().toString(36).toUpperCase()+'-'+Math.random().toString(36).substr(2,4).toUpperCase();
}
function formatDate(ts){
if(!ts) return '—';
const d = typeof ts === 'string' ? new Date(ts) : new Date(ts);
return d.toLocaleDateString('fr-HT',{day:'2-digit',month:'short',year:'numeric',hour:'2-digit',minute:'2-digit'});
}
let notifTO;
function showNotif(type, title, msg){
const el=document.getElementById('notif');
const icons={success:'fa-check',error:'fa-xmark',info:'fa-info-circle'};
el.className='notif '+type;
document.getElementById('notif-icon').innerHTML=`<i class="fas ${icons[type]||'fa-bell'}"></i>`;
document.getElementById('notif-title').textContent=title;
document.getElementById('notif-msg').textContent=msg;
el.classList.add('show');
clearTimeout(notifTO);
notifTO=setTimeout(()=>el.classList.remove('show'),4500);
}
function openModal(src){
document.getElementById('modal-img').src=src;
document.getElementById('modal-overlay').classList.add('open');
}
window.openModal = openModal;
window.closeModal=()=>document.getElementById('modal-overlay').classList.remove('open');
function statusBadge(s){
const map={pending:'An Atant',processing:'An Trete',completed:'Konplete ✓'};
const extra = s==='completed' ? 'box-shadow:0 0 10px rgba(34,197,94,0.3);' : '';
return `<span class="status-badge status-${s}" style="${extra}">${map[s]||s}</span>`;
}
/* ══════════════════════════════════════════════
SPA NAVIGATION
══════════════════════════════════════════════ */
window.showSection = function(name){
const sess = currentUser;
if((name==='dashboard'||name==='admin') && !sess){ showSection('auth'); return; }
if(name==='admin' && sess?.role!=='admin'){ showSection('dashboard'); return; }
document.querySelectorAll('.section').forEach(s=>s.classList.remove('active'));
document.querySelectorAll('.nav-links button').forEach(b=>b.classList.remove('active'));
const sec=document.getElementById('sec-'+name);
if(sec) sec.classList.add('active');
const nb=document.getElementById('nav-'+name);
if(nb) nb.classList.add('active');
window.scrollTo({top:0,behavior:'smooth'});
if(name==='dashboard') renderDashboard();
if(name==='admin') renderAdmin();
if(name==='services') renderServices();
if(name==='order') checkOrderAuth();
}
window.toggleMobile=()=>document.getElementById('mobile-menu').classList.toggle('open');
window.closeMobile=()=>document.getElementById('mobile-menu').classList.remove('open');
/* ══════════════════════════════════════════════
AUTH STATE
══════════════════════════════════════════════ */
let currentUser = null; // { id, name, email, role }
async function loadProfile(user) {
try {
const { data, error } = await supabase
.from('profiles')
.select('*')
.eq('id', user.id)
.single();
if (data) {
currentUser = {
id: user.id,
name: data.name || user.user_metadata?.full_name || 'Itilizatè',
email: user.email,
role: data.role || 'user'
};
} else {
// Kreye profil si pa egziste (pou Google login)
const name = user.user_metadata?.full_name || user.email.split('@')[0];
await supabase.from('profiles').insert({ id: user.id, name, email: user.email, role: 'user' });
currentUser = { id: user.id, name, email: user.email, role: 'user' };
}
updateNavAuth();
} catch(e) {
console.error('loadProfile error:', e);
currentUser = null;
updateNavAuth();
}
}
function updateNavAuth(){
const area=document.getElementById('nav-auth-area');
const mob=document.getElementById('mobile-auth-area');
if(currentUser){
// Montre bouton "Panye Mwen" nan nav-links
const dashBtn = document.getElementById('nav-dashboard');
if(dashBtn) dashBtn.style.display = 'block';
area.innerHTML=`
<button class="btn-ghost" onclick="showSection('dashboard')"><i class="fas fa-user"></i> ${sanitize(currentUser.name.split(' ')[0])}</button>
${currentUser.role==='admin'?`<button class="btn-ghost" style="color:#f87171" onclick="showSection('admin')"><i class="fas fa-shield-halved"></i> Admin</button>`:''}
<button class="btn-danger" onclick="doLogout()"><i class="fas fa-sign-out-alt"></i></button>`;
mob.innerHTML=`
<button onclick="showSection('dashboard');closeMobile()">🛒 Panye Mwen</button>
${currentUser.role==='admin'?`<button onclick="showSection('admin');closeMobile()">🛡️ Admin</button>`:''}
<button onclick="doLogout()">🚪 Dekonekte</button>`;
} else {
// Kache bouton "Panye Mwen" si pa konekte
const dashBtn = document.getElementById('nav-dashboard');
if(dashBtn) dashBtn.style.display = 'none';
area.innerHTML=`
<button class="btn-ghost" onclick="showSection('auth');setAuthTab('login')">Konekte</button>
<button class="btn-primary" onclick="showSection('auth');setAuthTab('signup')">Kreye Kont</button>`;
mob.innerHTML=`
<button onclick="showSection('auth');setAuthTab('login');closeMobile()">🔑 Konekte</button>
<button onclick="showSection('auth');setAuthTab('signup');closeMobile()">✨ Kreye Kont</button>`;
}
}
// ── AUTH INIT ──
async function initAuth() {
try {
const { data: { session } } = await supabase.auth.getSession();
if (session?.user) {
await loadProfile(session.user);
} else {
currentUser = null;
updateNavAuth();
}
} catch(e) {
currentUser = null;
updateNavAuth();
} finally {
document.getElementById('loading-overlay').classList.add('hide');
}
}
// Koute chanjman auth (login, logout, token refresh)
supabase.auth.onAuthStateChange(async (event, session) => {
if (event === 'SIGNED_IN' || event === 'TOKEN_REFRESHED') {
if (session?.user) await loadProfile(session.user);
}
if (event === 'SIGNED_OUT') {
currentUser = null;
updateNavAuth();
showSection('home');
}
});
// Rele init
initAuth();
/* ══════════════════════════════════════════════
AUTH FORMS
══════════════════════════════════════════════ */
window.setAuthTab = function(tab){
['login','signup'].forEach(t=>{
document.getElementById('tab-'+t)?.classList.toggle('active',t===tab);
document.getElementById('form-'+t)?.classList.toggle('active',t===tab);
});
document.getElementById('form-forgot').style.display='none';
document.getElementById('form-forgot').classList.remove('active');
document.getElementById('auth-tabs-bar').style.display='flex';
}
window.showForgot = function(){
document.getElementById('form-login').classList.remove('active');
document.getElementById('auth-tabs-bar').style.display='none';
const f=document.getElementById('form-forgot');
f.style.display='flex';
f.classList.add('active');
['forgot-error','forgot-success'].forEach(id=>{
const el=document.getElementById(id);
el.classList.remove('show');el.textContent='';
});
}
window.hideForgot = function(){
document.getElementById('form-forgot').style.display='none';
document.getElementById('form-forgot').classList.remove('active');
document.getElementById('auth-tabs-bar').style.display='flex';
document.getElementById('form-login').classList.add('active');
}
window.doForgotPassword = async function(){
const email=document.getElementById('forgot-email').value.trim();
const errEl=document.getElementById('forgot-error');
const okEl=document.getElementById('forgot-success');
errEl.classList.remove('show'); okEl.classList.remove('show');
if(!email){ errEl.textContent='Tanpri antre imèl ou.'; errEl.classList.add('show'); return; }
const {error} = await supabase.auth.resetPasswordForEmail(email, {
redirectTo: 'https://flexshophaiti.com/?reset=true'
});
if(error){ errEl.textContent='Erè: '+error.message; errEl.classList.add('show'); }
else { okEl.textContent='✅ Lyen voye! Tcheke imèl ou (ak dossier spam an).'; okEl.classList.add('show'); }
}
window.doLogin = async function(){
const email=document.getElementById('login-email').value.trim();
const password=document.getElementById('login-password').value;
const errEl=document.getElementById('login-error');
errEl.classList.remove('show');
if(!email||!password){ errEl.textContent='Ranpli tout chan yo.'; errEl.classList.add('show'); return; }
const {data,error} = await supabase.auth.signInWithPassword({email,password});
if(error){ errEl.textContent='Imèl oubyen modpas la pa kòrèk.'; errEl.classList.add('show'); return; }
showNotif('success','Koneksyon Reyisi!',`Bònjou ${data.user.user_metadata?.full_name||email} 👋`);
setTimeout(()=>showSection(currentUser?.role==='admin'?'admin':'dashboard'),400);
}
window.doSignup = async function(){
const name=document.getElementById('signup-name').value.trim();
const email=document.getElementById('signup-email').value.trim();
const password=document.getElementById('signup-password').value;
const confirm=document.getElementById('signup-confirm').value;
const errEl=document.getElementById('signup-error');
errEl.classList.remove('show');
if(!name||!email||!password||!confirm){ errEl.textContent='Ranpli tout chan yo.'; errEl.classList.add('show'); return; }
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){ errEl.textContent='Imèl la pa valid.'; errEl.classList.add('show'); return; }
if(password.length<6){ errEl.textContent='Modpas la dwe gen omwen 6 karaktè.'; errEl.classList.add('show'); return; }
if(password!==confirm){ errEl.textContent='Modpas yo pa menm.'; errEl.classList.add('show'); return; }
const {data,error} = await supabase.auth.signUp({email,password,options:{data:{full_name:name}}});
if(error){ errEl.textContent='Erè: '+error.message; errEl.classList.add('show'); return; }
// Kreye profil
if(data.user){
await supabase.from('profiles').upsert({id:data.user.id,name,email,role:'user'});
}
showNotif('success','Kont Kreye!',`Bònjou ${name}, byenvini! ✨`);
setTimeout(()=>showSection('dashboard'),600);
}
/* ══════════════════════════════════════════════
PRICE CALCULATOR — USD → GOUD SÈLMAN
══════════════════════════════════════════════
Moun nan antre pri an USD (jan li wè l sou flexcity.app).
Kalkil la fèt otomatikman: USD × USD_TO_HTG = Goud.
Pou chanje tau: chanje USD_TO_HTG = 170 anwo a.
*/
window.calcPrice = function(val){
const box = document.getElementById('price-calc-result');
const usdEl = document.getElementById('pcb-usd-display');
const htgEl = document.getElementById('pcb-htg-display');
const rateLabel= document.getElementById('pcb-rate-label');
const usd = parseFloat(val);
if(!val || isNaN(usd) || usd <= 0){
box.style.display = 'none';
return;
}
// Kalkil: arrondi 1 desimal
const htg = Math.round(usd * USD_TO_HTG * 10) / 10;
// Afiche USD kòm referans gri, Goud kòm rezilta vert
usdEl.textContent = `$${usd.toFixed(2)} USD`;
htgEl.textContent = htg.toFixed(1);
if(rateLabel) rateLabel.textContent = USD_TO_HTG;
box.style.display = 'block';
}
window.doGoogleLogin = async function(){
const {error} = await supabase.auth.signInWithOAuth({
provider:'google',
options:{ redirectTo: 'https://flexshophaiti.com' }
});
if(error) showNotif('error','Erè Google',error.message);
}
window.doLogout = async function(){
// Arrête auto-refresh lè moun dekonekte
if(dashRefreshInterval){
clearInterval(dashRefreshInterval);
dashRefreshInterval = null;
}
await supabase.auth.signOut();
currentUser=null;
updateNavAuth();
showNotif('info','Dekonekte','Ou te dekonekte avèk siksè.');
showSection('home');
}
/* ══════════════════════════════════════════════
TOGGLE PASSWORD VISIBILITY
══════════════════════════════════════════════ */
window.togglePwdVisibility = function(inputId, btn){
const inp=document.getElementById(inputId);
if(inp.type==='password'){ inp.type='text'; btn.innerHTML='<i class="fas fa-eye-slash"></i>'; }
else { inp.type='password'; btn.innerHTML='<i class="fas fa-eye"></i>'; }
}
/* ══════════════════════════════════════════════
FORGOT FORM SHOW
══════════════════════════════════════════════ */
window.showForgot = function(){
document.getElementById('form-login').classList.remove('active');
document.getElementById('auth-tabs-bar').style.display='none';
const f=document.getElementById('form-forgot');
f.style.display='flex';f.classList.add('active');
['forgot-error','forgot-success'].forEach(id=>{
const el=document.getElementById(id); el.classList.remove('show'); el.textContent='';
});
}
/* ══════════════════════════════════════════════
SERVICES RENDERING
══════════════════════════════════════════════ */
const GROUP_BG = {gold:'rgba(245,158,11,0.12)',diamonds:'rgba(59,130,246,0.12)',pass:'rgba(167,139,250,0.12)'};
const GROUP_CLR = {gold:'var(--gold)',diamonds:'var(--accent2)',pass:'var(--purple)'};
function renderServices(){
Object.keys(SERVICES).forEach(g=>{
const el=document.getElementById('cards-'+g);
if(!el) return;
el.innerHTML = SERVICES[g].map(s=>`
<div class="srv-card" data-service="${sanitize(s.name)}" onclick="selectService('${sanitize(s.name)}')">
<div class="check-mark">✓</div>
<div class="srv-icon" style="background:${GROUP_BG[g]};color:${GROUP_CLR[g]}">${s.icon}</div>
<h4>${sanitize(s.name)}</h4>
<div class="srv-type">${sanitize(s.type)}</div>
<button class="srv-select-btn">Chwazi Sèvis →</button>
</div>`).join('');
});
}
renderServices();
window.selectService = function(name){
document.querySelectorAll('.srv-card').forEach(c=>c.classList.remove('selected'));
const card=document.querySelector(`.srv-card[data-service="${name}"]`);
if(card) card.classList.add('selected');
showSection('order');
const sel=document.getElementById('order-service');
for(let o of sel.options){ if(o.value===name){o.selected=true;break;} }
showNotif('info','Sèvis Chwazi',`"${name}" — Ranpli fòm kòmand la.`);
}
/* ══════════════════════════════════════════════
ACCOUNT TYPE TOGGLE
══════════════════════════════════════════════ */
let selectedAccountType = 'game_id';
window.setAccountType = function(type){
selectedAccountType = type;
document.getElementById('btn-gameid').classList.toggle('active', type==='game_id');
document.getElementById('btn-emailacc').classList.toggle('active', type==='email');
document.getElementById('fields-gameid').classList.toggle('active', type==='game_id');
document.getElementById('fields-email').classList.toggle('active', type==='email');
}
/* ══════════════════════════════════════════════
FILE UPLOAD
══════════════════════════════════════════════ */
let uploadedFile = null;
window.handleFileUpload = function(e){
const file=e.target.files[0];
if(!file) return;
const ALLOWED=['image/png','image/jpeg','image/jpg','image/gif','image/webp'];
if(!ALLOWED.includes(file.type)){showNotif('error','Fòma pa valid','Telechaje yon imaj PNG, JPG, JPEG.');return;}
if(file.size>5*1024*1024){showNotif('error','Fichye twò gwo','Maksimòm 5MB.');return;}
uploadedFile = file;
const reader=new FileReader();
reader.onload=ev=>{
document.getElementById('upload-placeholder').style.display='none';
const pv=document.getElementById('upload-preview');
pv.style.display='flex';
document.getElementById('preview-img').src=ev.target.result;
document.getElementById('file-name-disp').textContent=file.name;
};
reader.readAsDataURL(file);
}
function checkOrderAuth(){
const loggedIn = !!currentUser;
const warn=document.getElementById('order-login-warn');
const btn=document.getElementById('submit-order-btn');
warn.style.display=loggedIn?'none':'block';
btn.disabled=!loggedIn;
}
/* ══════════════════════════════════════════════
ORDER SUBMISSION → SUPABASE
══════════════════════════════════════════════ */
// Spam protection
let lastOrderTime=0;
let orderCount=0;
window.submitOrder = async function(){
if(!currentUser){ showSection('auth'); return; }
const service = document.getElementById('order-service').value;
const priceUsdRaw= document.getElementById('order-price-usd').value;
const notes = document.getElementById('order-notes').value.trim();
const btn = document.getElementById('submit-order-btn');
const origTxt = btn.innerHTML;
let finalService = service;
if(service === '__other__'){
finalService = document.getElementById('other-service-name').value.trim();
if(!finalService){ showNotif('error','Sèvis Manke','Tanpri dekri sèvis ou bezwen an.'); return; }
finalService = '🔧 ' + finalService;
}
if(!service){ showNotif('error','Sèvis Manke','Tanpri chwazi yon sèvis.'); return; }return; }
// Validate price field
const priceUsd = parseFloat(priceUsdRaw);
if(!priceUsdRaw || isNaN(priceUsd) || priceUsd<=0){
showNotif('error','Pri Manke','Antre pri sèvis lan (nan USD) jan ou wè l sou flexcity.app.');
return;
}
if(!uploadedFile){ showNotif('error','Prèv Manke','Tanpri telechaje screenshot peman.'); return; }
// Validate account type fields
let game_id=null, flex_email=null, flex_password=null;
if(selectedAccountType==='game_id'){
game_id=document.getElementById('order-gameid').value.trim();
if(!game_id){ showNotif('error','ID Manke','Antre ID Jwè ou a.'); return; }
} else {
flex_email=document.getElementById('order-flex-email').value.trim();
flex_password=document.getElementById('order-flex-password').value;
if(!flex_email||!flex_password){ showNotif('error','Enfòmasyon Manke','Antre imèl ak modpas Flex City ou.'); return; }
}
// Spam protection
const now=Date.now();
if(now-lastOrderTime<60000){ orderCount++; if(orderCount>3){showNotif('error','Twò Vit','Tann 1 minit anvan soumèt ankò.');return;} }
else { orderCount=1; }
lastOrderTime=now;
btn.disabled=true;
btn.innerHTML='<i class="fas fa-spinner fa-spin"></i> Ap voye...';
try {
// A. Upload foto nan Supabase Storage (public bucket)
// ⚠️ ASIRE BUCKET "payment_proofs" SE PIBLIK — wè komantè nan tèt fichye a
const ext = uploadedFile.name.split('.').pop().toLowerCase();
const fileName = `${currentUser.id}_${Date.now()}.${ext}`;
const { error: storErr } = await supabase.storage
.from('payment_proofs')
.upload(fileName, uploadedFile, {
contentType: uploadedFile.type,
upsert: false
});
if(storErr) throw new Error('Storage: ' + storErr.message);
// Jwenn URL piblik foto a
const { data: urlData } = supabase.storage
.from('payment_proofs')
.getPublicUrl(fileName);
const proofUrl = urlData?.publicUrl || '';
// B. Mete kòmand nan table "orders"
const orderId = generateId();
const priceHtg = Math.round(priceUsd * USD_TO_HTG * 10) / 10;
const { error: dbErr } = await supabase.from('orders').insert([{
id: orderId,
user_id: currentUser.id,
user_name: currentUser.name,
user_email: currentUser.email,
service: finalService,
account_type: selectedAccountType,
game_id: game_id,
flex_email: flex_email,
flex_password: flex_password,
notes: notes,
price_usd: priceUsd,
price_htg: priceHtg,
proof_url: proofUrl,
status: 'pending',
created_at: new Date().toISOString(),
updated_at: new Date().toISOString()
}]);
if(dbErr) throw new Error('Database: ' + dbErr.message);
// Reset form
document.getElementById('order-service').value='';
document.getElementById('order-price-usd').value='';
document.getElementById('price-calc-result').style.display='none';
document.getElementById('order-gameid').value='';
document.getElementById('order-flex-email').value='';
document.getElementById('order-flex-password').value='';
document.getElementById('order-notes').value='';
document.getElementById('proof-input').value='';
uploadedFile=null;
document.getElementById('upload-placeholder').style.display='block';
document.getElementById('upload-preview').style.display='none';
document.querySelectorAll('.srv-card').forEach(c=>c.classList.remove('selected'));
setAccountType('game_id');
showNotif('success','Kòmand Soumèt! ✅',`#${orderId} — $${priceUsd.toFixed(2)} (${priceHtg} Gdes) — An atant verifikasyon.`);
setTimeout(()=>showSection('dashboard'),1800);
} catch(err){
console.error('Order error:',err);
showNotif('error','Erè Teknik', err.message || 'Tcheke koneksyon entènèt ou.');
} finally {
btn.disabled=false;
btn.innerHTML=origTxt;
}
}
/* ══════════════════════════════════════════════
DASHBOARD
══════════════════════════════════════════════ */
// Auto-refresh dashboard chak 30 sèkond
let dashRefreshInterval = null;
async function renderDashboard(){
if(!currentUser) return;
// Kòmanse auto-refresh si pa deja aktive
if(!dashRefreshInterval){
dashRefreshInterval = setInterval(async () => {
const activeSection = document.querySelector('.section.active');
if(activeSection?.id === 'sec-dashboard'){
await renderDashboard();
} else {
// Arrête refresh si moun kite dashboard
clearInterval(dashRefreshInterval);
dashRefreshInterval = null;
}
}, 30000); // 30 sèkond
}
document.getElementById('dash-name').textContent=currentUser.name;
document.getElementById('dash-email').textContent=currentUser.email;
document.getElementById('dash-avatar').textContent=currentUser.name.charAt(0).toUpperCase();
const {data:orders,error} = await supabase
.from('orders')
.select('*')
.eq('user_id', currentUser.id.toString())
.order('created_at',{ascending:false});
if(error){
console.error('Dashboard error:', error);
showNotif('error','Erè', 'Pa ka chaje kòmand yo: ' + error.message);
return;
}
// ── Bannè notifikasyon pou kòmand ki fèk konplete ──
const freshCompleted = orders.filter(o =>
o.status === 'completed' &&
o.completion_screenshot &&
(Date.now() - new Date(o.updated_at).getTime()) < 48 * 60 * 60 * 1000 // 48h
);
const bannerArea = document.getElementById('dash-completed-banner');
if(freshCompleted.length && bannerArea){
bannerArea.innerHTML = freshCompleted.map(o=>`
<div style="background:rgba(34,197,94,0.07);border:1px solid rgba(34,197,94,0.28);border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px">
<div style="width:40px;height:40px;border-radius:50%;background:rgba(34,197,94,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0">
<i class="fas fa-check-circle" style="color:var(--green);font-size:1.2rem"></i>
</div>
<div style="flex:1;min-width:180px">
<div style="font-weight:700;color:var(--green);font-size:0.92rem">Kòmand Konplete! 🎉</div>
<div style="color:var(--text2);font-size:0.83rem;margin-top:2px">${sanitize(o.service)} — ${sanitize(o.id)}</div>
</div>
${o.completion_screenshot
? `<button class="completion-proof-btn" onclick="openModal('${sanitize(o.completion_screenshot)}')">
<i class="fas fa-image"></i> Wè Rezilta Admin Voye
</button>`
: ''}
</div>`).join('');
bannerArea.style.display = 'block';
} else if(bannerArea){
bannerArea.style.display = 'none';
}
const pending = orders.filter(o=>o.status==='pending').length;
const processing= orders.filter(o=>o.status==='processing').length;
const completed = orders.filter(o=>o.status==='completed').length;
document.getElementById('stat-total').textContent=orders.length;
document.getElementById('stat-pending').textContent=pending;
document.getElementById('stat-processing').textContent=processing;
document.getElementById('stat-completed').textContent=completed;
const content=document.getElementById('dash-orders-content');
if(!orders.length){
content.innerHTML=`<div class="empty-orders"><i class="fas fa-inbox"></i><p>Ou pa gen okenn kòmand ankò.</p><button class="btn-primary" style="margin-top:16px;padding:10px 24px" onclick="showSection('order')"><i class="fas fa-plus"></i> Fè Premye Kòmand Ou</button></div>`;
return;
}
content.innerHTML=`
<table>
<thead><tr>
<th>ID</th><th>Sèvis</th><th>Pri</th><th>Dat</th><th>Statut</th><th>Prèv Peman</th><th>Rezilta</th>
</tr></thead>
<tbody>
${orders.map(o=>`
<tr class="${o.status==='completed'?'status-completed-row':''}">
<td data-label="ID">${sanitize(o.id)}</td>
<td data-label="Sèvis">${sanitize(o.service)}</td>
<td data-label="Pri">${o.price_usd?`<span style="color:var(--green);font-family:var(--font-numbers)">\$${parseFloat(o.price_usd).toFixed(2)}</span><br><span style="font-size:0.82rem;color:var(--gold);font-family:var(--font-numbers)">${(parseFloat(o.price_usd)*USD_TO_HTG).toFixed(1)} Gdes</span>`:'—'}</td>
<td data-label="Dat">${formatDate(o.created_at)}</td>
<td data-label="Statut">${statusBadge(o.status)}</td>
<td data-label="Prèv Peman">${o.proof_url?`<button onclick="openModal('${sanitize(o.proof_url)}')" style="background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);color:var(--accent2);padding:4px 10px;border-radius:6px;font-size:0.78rem;cursor:pointer"><i class="fas fa-image"></i> Gade</button>`:'—'}</td>
<td data-label="Rezilta">${o.completion_screenshot?`<button class="completion-proof-btn" onclick="openModal('${sanitize(o.completion_screenshot)}')"><i class="fas fa-check-circle"></i> Wè Rezilta</button>`:(o.status==='completed'?'<span style="color:var(--green);font-size:0.82rem">✅ Fèt</span>':'—')}</td>
</tr>`).join('')}
</tbody>
</table>`;
}
/* ══════════════════════════════════════════════
ADMIN PANEL
══════════════════════════════════════════════ */
async function renderAdmin(){
if(!currentUser||currentUser.role!=='admin') return;
const {data:orders} = await supabase.from('orders').select('*').order('created_at',{ascending:false});
const {data:profiles} = await supabase.from('profiles').select('*').neq('role','admin');
const orders_ = orders||[];
const profiles_= profiles||[];
const pending = orders_.filter(o=>o.status==='pending').length;
const processing= orders_.filter(o=>o.status==='processing').length;
const completed = orders_.filter(o=>o.status==='completed').length;
document.getElementById('admin-stats-grid').innerHTML=[
{label:'Total Kòmand',val:orders_.length,color:'var(--accent)',icon:'fa-box'},
{label:'Kliyan',val:profiles_.length,color:'var(--purple)',icon:'fa-users'},
{label:'An Atant',val:pending,color:'var(--gold)',icon:'fa-clock'},
{label:'An Trete',val:processing,color:'var(--accent2)',icon:'fa-spinner'},
{label:'Konplete',val:completed,color:'var(--green)',icon:'fa-check-circle'},
].map(s=>`<div class="dstat"><div class="ds-label"><i class="fas ${s.icon}" style="color:${s.color}"></i> ${s.label}</div><div class="ds-val" style="color:${s.color}">${s.val}</div></div>`).join('');
document.getElementById('admin-order-count').textContent=orders_.length+' kòmand';
const list=document.getElementById('admin-orders-list');
if(!orders_.length){ list.innerHTML='<p style="color:var(--text3);text-align:center;padding:32px">Pa gen kòmand ankò.</p>'; return; }
list.innerHTML=orders_.map(o=>`
<div class="admin-order-card" id="aoc-${o.id}" style="${o.status==='completed'?'border-color:rgba(34,197,94,0.3);background:rgba(34,197,94,0.03)':''}">
<div class="aoc-info">
<div class="aoc-id">${sanitize(o.id)}</div>
<div class="aoc-service">${sanitize(o.service)}</div>
<!-- Pri kliyan te bay -->
${o.price_usd?`<div class="aoc-meta" style="margin-top:4px">
<i class="fas fa-tag" style="color:var(--green)"></i>
<strong style="color:var(--green);font-family:var(--font-numbers)">$${parseFloat(o.price_usd).toFixed(2)}</strong>
<span style="color:var(--text3)">→</span>
<strong style="color:var(--gold2);font-family:var(--font-numbers)">${(parseFloat(o.price_usd)*USD_TO_HTG).toFixed(1)} Gdes</strong>
</div>`:''}
<div class="aoc-meta"><i class="fas fa-user" style="color:var(--text3)"></i> ${sanitize(o.user_name)} · ${sanitize(o.user_email)}</div>
${o.account_type==='game_id'
? `<div class="aoc-meta"><i class="fas fa-gamepad" style="color:var(--text3)"></i> ID: <strong>${sanitize(o.game_id)}</strong></div>`
: `<div class="aoc-meta"><i class="fas fa-envelope" style="color:var(--text3)"></i> <strong>${sanitize(o.flex_email)}</strong></div>`}
${o.notes?`<div class="aoc-meta" style="color:var(--text3);font-style:italic">"${sanitize(o.notes)}"</div>`:''}
</div>
<!-- Status selector -->
<div class="aoc-status">
${statusBadge(o.status)}
<select onchange="updateStatus('${o.id}',this.value)" style="margin-top:8px">
<option value="pending" ${o.status==='pending'?'selected':''}>⏳ An Atant</option>
<option value="processing" ${o.status==='processing'?'selected':''}>⚙️ An Trete</option>
<option value="completed" ${o.status==='completed'?'selected':''}>✅ Konplete</option>
</select>
<!-- Upload screenshot rezilta (pou voye bay kliyan) -->
<div style="margin-top:12px">
<div style="font-size:0.75rem;color:var(--text3);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.05em">
<i class="fas fa-image" style="color:var(--green)"></i> Screenshot Rezilta
</div>
<div class="completion-upload-area" onclick="document.getElementById('comp-upload-${o.id}').click()">
<input type="file" id="comp-upload-${o.id}" accept="image/*"
onchange="uploadCompletionProof('${o.id}', this)" style="display:none">
${o.completion_screenshot
? `<img src="${sanitize(o.completion_screenshot)}" class="completion-thumb" onclick="event.stopPropagation();openModal('${sanitize(o.completion_screenshot)}')">`
: `<p><i class="fas fa-upload" style="color:var(--green)"></i> Telechaje screenshot rezilta</p>`}
</div>
</div>
</div>
<!-- Prèv peman kliyan -->
${o.proof_url?`<div class="aoc-proof">
<div style="font-size:0.72rem;color:var(--text3);margin-bottom:4px">Prèv Peman</div>
<img src="${sanitize(o.proof_url)}" alt="proof" onclick="openModal('${sanitize(o.proof_url)}')">
</div>`:''}
<div class="aoc-date">${formatDate(o.created_at)}</div>
</div>`).join('');
}
window.updateStatus = async function(orderId, newStatus){
const { error } = await supabase.from('orders')
.update({ status: newStatus, updated_at: new Date().toISOString() })
.eq('id', orderId);
if(error){ showNotif('error','Erè', error.message); return; }
const labels = { pending:'An Atant', processing:'An Trete', completed:'Konplete ✅' };
if(newStatus === 'completed'){
// Imèl otomatik voye via Supabase Edge Function + Database Webhook
// (Wè gid konfigirasyon nan tèt fichye a — seksyon ⑧)
showNotif('success','✅ Kòmand Konplete!',
`Kòmand ${orderId} makle "Konplete". Si Edge Function konfigire, imèl notifikasyon ap voye bay kliyan an otomatikman.`);
} else {
showNotif('success','Statut Mete Ajou', `Kòmand ${orderId} → ${labels[newStatus]}`);
}
renderAdmin();
}
/* ══════════════════════════════════════════════
UPLOAD COMPLETION SCREENSHOT (Admin → Kliyan)
══════════════════════════════════════════════
Admin telechaje yon foto ki montre sèvis la livre.
URL foto a sovgade nan kolòn "completion_screenshot" nan orders.
Kliyan ka wè l nan dashboard li an.
*/
window.uploadCompletionProof = async function(orderId, inputEl){
const file = inputEl.files[0];
if(!file) return;
if(!['image/png','image/jpeg','image/jpg','image/webp'].includes(file.type)){
showNotif('error','Fòma pa valid','PNG, JPG, JPEG sèlman.'); return;
}
if(file.size > 8*1024*1024){ showNotif('error','Fichye twò gwo','Maks 8MB.'); return; }
showNotif('info','Ap telechaje...','Foto ap monte sou Supabase.');
const ext = file.name.split('.').pop().toLowerCase();
const fileName = `completion_${orderId}_${Date.now()}.${ext}`;
// Upload nan bucket "completion_proofs" (kreye l si li pa egziste)
// oswa itilize menm "payment_proofs" bucket la si w vle
const { error: storErr } = await supabase.storage
.from('payment_proofs') // ← Chanje pou "completion_proofs" si w vle separe
.upload(`completions/${fileName}`, file, { contentType: file.type, upsert: true });
if(storErr){ showNotif('error','Erè Upload', storErr.message); return; }
const { data: urlData } = supabase.storage
.from('payment_proofs')
.getPublicUrl(`completions/${fileName}`);
const screenshotUrl = urlData?.publicUrl || '';
// Sovgade URL nan kolòn completion_screenshot + mete statut completed otomatikman
const { error: dbErr } = await supabase.from('orders')
.update({
completion_screenshot: screenshotUrl,
status: 'completed',
updated_at: new Date().toISOString()
})
.eq('id', orderId);
if(dbErr){ showNotif('error','Erè Database', dbErr.message); return; }
showNotif('success','Screenshot Voye! ✅', 'Kliyan a ka wè foto rezilta a nan dashboard li.');
renderAdmin();
}
/* ══════════════════════════════════════════════
SLIDESHOW
══════════════════════════════════════════════
KIJAN POU CHANJE IMAJ YO:
Ranplase URL yo anba ak pwòp imaj pa ou yo.
Ajoute oswa retire liy nan tablo a jan ou vle.
*/
const SLIDESHOW_IMAGES = [
{
url: 'https://blogger.googleusercontent.com/img/a/AVvXsEgVynksshxs1PiPPT6cWpDi9HjBoSvCR7BtKf2gwqLF3eq1FAwhRd18J_JQS1rb1wjfEhs3cnNs4Ta61D-6Se-C4pZX0aL31VH-u3AYI3Mv22MzlBzKQKu_Xv_ObpwHXtF4VPjObQOC79AzIDHpFwashm5fUs71-mhRoeVTlb3EEOdXvo0UTyvbeNTrcezu',
alt: 'FLEXSHOP HAITI'
},
{
url: 'https://blogger.googleusercontent.com/img/a/AVvXsEgVynksshxs1PiPPT6cWpDi9HjBoSvCR7BtKf2gwqLF3eq1FAwhRd18J_JQS1rb1wjfEhs3cnNs4Ta61D-6Se-C4pZX0aL31VH-u3AYI3Mv22MzlBzKQKu_Xv_ObpwHXtF4VPjObQOC79AzIDHpFwashm5fUs71-mhRoeVTlb3EEOdXvo0UTyvbeNTrcezu',
alt: 'Sèvis FlexCity'
},
{
url: 'https://blogger.googleusercontent.com/img/a/AVvXsEgVynksshxs1PiPPT6cWpDi9HjBoSvCR7BtKf2gwqLF3eq1FAwhRd18J_JQS1rb1wjfEhs3cnNs4Ta61D-6Se-C4pZX0aL31VH-u3AYI3Mv22MzlBzKQKu_Xv_ObpwHXtF4VPjObQOC79AzIDHpFwashm5fUs71-mhRoeVTlb3EEOdXvo0UTyvbeNTrcezu',
alt: 'MonCash & Natcash'
}
];
let slideIndex = 0;
let slideTimer = null;
function initSlideshow(){
const track = document.getElementById('slideshow-track');
const dots = document.getElementById('slideshow-dots');
if(!track || !dots) return;
// Kreye imaj yo
track.innerHTML = SLIDESHOW_IMAGES.map(img =>
`<img class="slide" src="${img.url}" alt="${img.alt}" loading="lazy">`
).join('');
// Kreye dot yo
dots.innerHTML = SLIDESHOW_IMAGES.map((_,i) =>
`<button class="slideshow-dot${i===0?' active':''}" onclick="goToSlide(${i})"></button>`
).join('');
startSlideTimer();
}
function goToSlide(n){
slideIndex = (n + SLIDESHOW_IMAGES.length) % SLIDESHOW_IMAGES.length;
document.getElementById('slideshow-track').style.transform = `translateX(-${slideIndex * 100}%)`;
document.querySelectorAll('.slideshow-dot').forEach((d,i) => d.classList.toggle('active', i===slideIndex));
restartSlideTimer();
}
window.slideNext = () => goToSlide(slideIndex + 1);
window.slidePrev = () => goToSlide(slideIndex - 1);
function startSlideTimer(){
slideTimer = setInterval(() => slideNext(), 4000);
}
function restartSlideTimer(){
clearInterval(slideTimer);
startSlideTimer();
}
// Init slideshow lè paj chaje
initSlideshow();
/* ══════════════════════════════════════════════
LOT SÈVIS — toggle champ ekstra
══════════════════════════════════════════════ */
document.getElementById('order-service').addEventListener('change', function(){
const wrap = document.getElementById('other-service-wrap');
if(this.value === '__other__'){
wrap.style.display = 'block';
document.getElementById('other-service-name').focus();
} else {
wrap.style.display = 'none';
}
});
/* ══════════════════════════════════════════════
PWA INSTALL
══════════════════════════════════════════════ */
let deferredPrompt = null;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
const btn = document.getElementById('btn-install-app');
if(btn) btn.style.display = 'inline-flex';
});
window.installApp = async function(){
if(!deferredPrompt){ showNotif('info','Konsèy','Itilize Chrome sou Android pou enstale app la.'); return; }
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
if(outcome === 'accepted') showNotif('success','App Enstale! ✅','FLEXSHOP HAITI ajoute nan ekran ou.');
deferredPrompt = null;
document.getElementById('btn-install-app').style.display = 'none';
}
/* ══════════════════════════════════════════════
SIPÒ KLIANTÈL
══════════════════════════════════════════════ */
let supportUploadFile = null;
window.handleSupportUpload = function(e){
const file = e.target.files[0];
if(!file) return;
if(!['image/png','image/jpeg','image/jpg','image/webp'].includes(file.type)){
showNotif('error','Fòma pa valid','PNG, JPG sèlman.'); return;
}
if(file.size > 5*1024*1024){ showNotif('error','Fichye twò gwo','Maks 5MB.'); return; }
supportUploadFile = file;
const reader = new FileReader();
reader.onload = ev => {
document.getElementById('support-upload-placeholder').style.display = 'none';
document.getElementById('support-upload-preview').style.display = 'flex';
document.getElementById('support-preview-img').src = ev.target.result;
document.getElementById('support-file-name').textContent = file.name;
};
reader.readAsDataURL(file);
}
window.submitSupport = async function(){
const firstname = document.getElementById('support-firstname').value.trim();
const lastname = document.getElementById('support-lastname').value.trim();
const email = document.getElementById('support-email').value.trim();
const whatsapp = document.getElementById('support-whatsapp').value.trim();
const message = document.getElementById('support-message').value.trim();
const errEl = document.getElementById('support-error');
const okEl = document.getElementById('support-success');
const btn = document.getElementById('support-submit-btn');
errEl.classList.remove('show'); okEl.classList.remove('show');
if(!firstname || !lastname){ errEl.textContent='Tanpri antre non ak prenon ou.'; errEl.classList.add('show'); return; }
if(!email){ errEl.textContent='Tanpri antre imèl ou.'; errEl.classList.add('show'); return; }
if(!whatsapp){ errEl.textContent='Tanpri antre nimewo WhatsApp ou.'; errEl.classList.add('show'); return; }
if(!message){ errEl.textContent='Tanpri ekri nòt doleyans ou.'; errEl.classList.add('show'); return; }
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Ap voye...';
try {
let proofUrl = '';
// Upload foto si gen youn
if(supportUploadFile){
const ext = supportUploadFile.name.split('.').pop().toLowerCase();
const fileName = `support_${Date.now()}.${ext}`;
const { error: storErr } = await supabase.storage
.from('support_proofs')
.upload(fileName, supportUploadFile, { contentType: supportUploadFile.type, upsert: false });
if(!storErr){
const { data: urlData } = supabase.storage.from('support_proofs').getPublicUrl(fileName);
proofUrl = urlData?.publicUrl || '';
}
}
// Sovgade nan Supabase
const ticketId = 'TKT-' + Date.now().toString(36).toUpperCase();
const { error: dbErr } = await supabase.from('support_tickets').insert([{
id: ticketId,
name: firstname,
lastname: lastname,
email: email,
whatsapp: whatsapp,
message: message,
proof_url: proofUrl,
status: 'open',
created_at: new Date().toISOString()
}]);
if(dbErr) throw new Error(dbErr.message);
// Reset fòm
document.getElementById('support-firstname').value = '';
document.getElementById('support-lastname').value = '';
document.getElementById('support-email').value = '';
document.getElementById('support-whatsapp').value = '';
document.getElementById('support-message').value = '';
document.getElementById('support-proof-input').value = '';
supportUploadFile = null;
document.getElementById('support-upload-placeholder').style.display = 'block';
document.getElementById('support-upload-preview').style.display = 'none';
okEl.textContent = `✅ Doleyans ${ticketId} voye! Nou ap kontakte ou nan 24h.`;
okEl.classList.add('show');
showNotif('success','Doleyans Voye! 📨', 'Nou resevwa mesaj ou — nou ap reponn nan 24h.');
} catch(err){
errEl.textContent = 'Erè: ' + err.message;
errEl.classList.add('show');
showNotif('error','Erè','Pa ka voye doleyans la.');
} finally {
btn.disabled = false;
btn.innerHTML = '<i class="fas fa-paper-plane"></i> Voye Doleyans';
}
}
/* ══════════════════════════════════════════════
LEGAL TABS
══════════════════════════════════════════════ */
window.setLegalTab = function(tab){
document.querySelectorAll('.legal-tab-btn').forEach((b,i)=>b.classList.toggle('active',(i===0&&tab==='terms')||(i===1&&tab==='aml')));
document.getElementById('legal-terms').classList.toggle('active',tab==='terms');
document.getElementById('legal-aml').classList.toggle('active',tab==='aml');
}
/* ══════════════════════════════════════════════
PAYMENT INFO DISPLAY
(Se valè yo nan PAYMENT_INFO ak USD_TO_HTG anwo ki enpòtan)
══════════════════════════════════════════════ */
function initPaymentDisplay(){
document.getElementById('display-moncash').textContent = PAYMENT_INFO.moncash;
document.getElementById('display-natcash').textContent = PAYMENT_INFO.natcash;
document.getElementById('display-owner').textContent = PAYMENT_INFO.ownerName;
document.getElementById('display-owner2').textContent = PAYMENT_INFO.ownerName;
document.getElementById('display-rate').innerHTML =
`<i class="fas fa-exchange-alt"></i> 1 USD = ${USD_TO_HTG} Gdes`;
}
initPaymentDisplay();
/* ══════════════════════════════════════════════
INIT — Check URL pou password reset
══════════════════════════════════════════════ */
// ── TIMEOUT SEKIRITE pou loading overlay ──
// Si Supabase pa reponn nan 5 sèkond, kache overlay a kanmenm
setTimeout(() => {
document.getElementById('loading-overlay').classList.add('hide');
}, 5000);
const urlParams = new URLSearchParams(window.location.search);
if(urlParams.get('reset')==='true'){
showSection('auth');
setAuthTab('login');
document.getElementById('login-error').textContent='';
const ok=document.createElement('div');
ok.className='alert-box alert-success show';
ok.style.marginBottom='8px';
ok.textContent='Antre nouvo modpas ou nan Supabase lè yo mande w.';
document.getElementById('form-login').prepend(ok);
}
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
9
Requests
6
Domains
1030KB
Transfer Size
1116KB
Content Size
607.0ms
Dom Content Loaded
1,228.0ms
First Paint
1,225.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...