diff --git a/src/affilliate/script-redeem.js b/src/affilliate/script-redeem.js new file mode 100644 index 0000000..ae09335 --- /dev/null +++ b/src/affilliate/script-redeem.js @@ -0,0 +1,48 @@ + const html = document.documentElement; + const toggleBtn = document.getElementById('themeToggle'); + toggleBtn.addEventListener('click', () => { + html.dataset.theme = html.dataset.theme === 'dark' ? 'light' : 'dark'; + }); + + const codeInput = document.getElementById('code'); + const redeemBtn = document.getElementById('redeemBtn'); + const messageDiv = document.getElementById('message'); + + // UNDER DEV + const validCodes = ['CREA2025', 'MAXLWARE', 'WELCOME10', 'CODE123']; + + redeemBtn.addEventListener('click', async () => { + const code = codeInput.value.trim(); + if (!code) { + showMessage('Veuillez saisir un code.', 'error'); + return; + } + + redeemBtn.disabled = true; + const originalText = redeemBtn.innerHTML; + redeemBtn.innerHTML = ' Vérification...'; + + await new Promise(resolve => setTimeout(resolve, 2000)); + + let isValid = validCodes.includes(code.toUpperCase()); + + if (isValid) { + showMessage(`✅ Code "${code}" validé ! Vous bénéficiez maintenant de -10% sur votre prochaine commande.`, 'success'); + } else { + showMessage(`❌ Code invalide. Vérifiez votre code et réessayez.`, 'error'); + } + + redeemBtn.disabled = false; + redeemBtn.innerHTML = originalText; + }); + + function showMessage(text, type) { + messageDiv.className = `message ${type}`; + messageDiv.textContent = text; + setTimeout(() => { + if (messageDiv.className.includes(type)) { + messageDiv.style.display = 'none'; + } + }, 5000); + messageDiv.style.display = 'block'; + } diff --git a/src/affilliate/style-redeem.css b/src/affilliate/style-redeem.css new file mode 100644 index 0000000..c3248b7 --- /dev/null +++ b/src/affilliate/style-redeem.css @@ -0,0 +1,300 @@ + :root { + --bg: #ffffff; + --text: #111111; + --text-muted: #666666; + --card-bg: #f4f4f4; + --card-border: #e0e0e0; + --accent: #1a1a1a; + --accent-glow: rgba(26,26,26,0.12); + --input-bg: #ffffff; + --input-border: #cccccc; + --badge-bg: #111111; + --badge-text: #ffffff; + --section-alt: #f8f8f8; + --primary: #6e48aa; + --secondary: #9d50bb; + } + [data-theme="dark"] { + --bg: #0e0e11; + --text: #f0f0f0; + --text-muted: #888888; + --card-bg: #13131a; + --card-border: #222222; + --accent: #ffffff; + --accent-glow: rgba(110,72,170,0.15); + --input-bg: #1a1a22; + --input-border: #333333; + --badge-bg: #6e48aa; + --badge-text: #ffffff; + --section-alt: #0a0a0d; + } + + *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + html { scroll-behavior: smooth; } + + body { + font-family: 'Figtree', sans-serif; + background: var(--bg); + color: var(--text); + transition: background 0.3s, color 0.3s; + overflow-x: hidden; + } + + header { + position: sticky; + top: 0; + z-index: 100; + background: #000000; + border-bottom: 1px solid #1f1f1f; + padding: 0 48px; + height: 88px; + display: flex; + align-items: center; + justify-content: flex-end; + position: relative; + } + .logo-link { + position: absolute; + left: 50%; + transform: translateX(-50%); + display: flex; + align-items: center; + text-decoration: none; + transition: opacity 0.2s; + } + .logo-link:hover { opacity: 0.85; } + .logo-link img { + height: 52px; + width: auto; + object-fit: contain; + display: block; + } + .theme-toggle { + background: #1a1a1a; + border: 1px solid #333; + border-radius: 50px; + width: 56px; + height: 30px; + cursor: pointer; + position: relative; + display: flex; + align-items: center; + padding: 3px; + transition: background 0.3s; + flex-shrink: 0; + } + .theme-toggle::after { + content: ''; + width: 22px; + height: 22px; + border-radius: 50%; + background: #ffffff; + transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); + transform: translateX(0); + } + [data-theme="dark"] .theme-toggle::after { + transform: translateX(26px); + background: #f0f0f0; + } + .theme-icon { + position: absolute; + font-size: 11px; + right: 7px; + top: 50%; + transform: translateY(-50%); + transition: opacity 0.3s; + } + [data-theme="dark"] .theme-icon { opacity: 0; } + .theme-icon-dark { + position: absolute; + font-size: 11px; + left: 7px; + top: 50%; + transform: translateY(-50%); + opacity: 0; + transition: opacity 0.3s; + } + [data-theme="dark"] .theme-icon-dark { opacity: 1; } + + section { + min-height: calc(100vh - 88px - 280px); + display: flex; + align-items: center; + justify-content: center; + padding: 60px 24px; + } + .redeem-card { + max-width: 500px; + width: 100%; + background: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: 24px; + padding: 48px 36px; + text-align: center; + box-shadow: 0 8px 40px var(--accent-glow); + transition: box-shadow 0.3s; + } + .redeem-card h1 { + font-family: 'Syne', sans-serif; + font-weight: 800; + font-size: 32px; + margin-bottom: 12px; + color: var(--text); + } + .redeem-card p { + color: var(--text-muted); + margin-bottom: 32px; + font-size: 15px; + } + .input-group { + margin-bottom: 24px; + text-align: left; + } + .input-group label { + display: block; + font-family: 'Syne', sans-serif; + font-weight: 600; + font-size: 13px; + margin-bottom: 8px; + color: var(--text); + } + .code-input { + width: 100%; + padding: 14px 18px; + background: var(--input-bg); + border: 2px solid var(--input-border); + border-radius: 12px; + font-family: 'Syne Mono', monospace; + font-size: 16px; + color: var(--text); + outline: none; + transition: border-color 0.2s, box-shadow 0.2s; + } + .code-input:focus { + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(110,72,170,0.2); + } + .btn-redeem { + width: 100%; + padding: 14px; + background: linear-gradient(135deg, var(--primary), var(--secondary)); + color: white; + border: none; + border-radius: 50px; + font-family: 'Syne', sans-serif; + font-weight: 700; + font-size: 16px; + cursor: pointer; + transition: transform 0.2s, filter 0.2s; + } + .btn-redeem:hover:not(:disabled) { + transform: translateY(-2px); + filter: brightness(1.05); + } + .btn-redeem:disabled { + opacity: 0.7; + cursor: not-allowed; + } + .spinner { + display: inline-block; + width: 20px; + height: 20px; + border: 2px solid rgba(255,255,255,0.3); + border-top-color: white; + border-radius: 50%; + animation: spin 0.8s linear infinite; + margin-right: 8px; + vertical-align: middle; + } + @keyframes spin { + to { transform: rotate(360deg); } + } + .message { + margin-top: 24px; + padding: 12px; + border-radius: 12px; + font-size: 14px; + text-align: center; + display: none; + } + .message.success { + background: rgba(46, 204, 113, 0.15); + color: #2ecc71; + border: 1px solid rgba(46, 204, 113, 0.3); + display: block; + } + .message.error { + background: rgba(231, 76, 60, 0.15); + color: #e74c3c; + border: 1px solid rgba(231, 76, 60, 0.3); + display: block; + } + + footer { + background: #000000; + color: #ffffff; + padding: 60px 80px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; + border-top: 1px solid #1a1a1a; + } + .footer-left { text-align: center; } + .footer-logo-link { + display: inline-block; + margin-bottom: 16px; + transition: opacity 0.2s; + } + .footer-logo-link:hover { opacity: 0.8; } + .footer-logo-link img { + height: 48px; + width: auto; + object-fit: contain; + display: block; + margin: 0 auto; + } + .footer-desc { + font-size: 14px; + line-height: 1.7; + color: #888888; + max-width: 300px; + margin: 0 auto 16px auto; + } + .footer-copy { + font-family: 'Syne Mono', monospace; + font-size: 11px; + color: #444444; + letter-spacing: 0.05em; + margin-top: 8px; + } + .footer-right { + display: flex; + justify-content: flex-end; + gap: 60px; + } + .footer-col h5 { + font-family: 'Syne', sans-serif; + font-weight: 700; + font-size: 12px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #ffffff; + margin-bottom: 16px; + } + .footer-col ul { list-style: none; } + .footer-col ul li { margin-bottom: 10px; } + .footer-col ul li a { + color: #666666; + text-decoration: none; + font-size: 14px; + transition: color 0.2s; + } + .footer-col ul li a:hover { color: #ffffff; } + + @media (max-width: 960px) { + header { padding: 0 24px; height: 72px; } + .logo-link img { height: 40px; } + .redeem-card { padding: 36px 24px; } + footer { grid-template-columns: 1fr; padding: 48px 24px; } + .footer-right { justify-content: flex-start; } + } diff --git a/src/redeem.html b/src/redeem.html new file mode 100644 index 0000000..ce0c2c0 --- /dev/null +++ b/src/redeem.html @@ -0,0 +1,69 @@ + + + + + + Maxlware - Utiliser un code créateur + + + + + + + + +
+ + Logo bannière + + +
+ +
+
+

✨ Code créateur

+

Saisissez le code que vous avez reçu pour bénéficier de vos avantages.

+

⛔ La page est en cours de développement.

+
+ + +
+ +
+
+
+ + + + + +