commit 655f6e0a6c9494c9dc2c220d8930c6f001becd35
Author: root <root@hub.scroll.pub>
Date: 2024-12-31 04:42:43 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..fae892d
--- /dev/null
+++ b/body.html
@@ -0,0 +1,74 @@
+<header>
+ <nav>
+ <div class="logo">LuckySpins</div>
+ <button class="theme-toggle" aria-label="Toggle dark mode">🌙</button>
+ <button class="menu-toggle" aria-label="Toggle menu">☰</button>
+ <ul class="nav-links">
+ <li><a href="#games">Games</a></li>
+ <li><a href="#features">Features</a></li>
+ <li><a href="#leaderboard">Leaderboard</a></li>
+ <li><button class="login-btn">Login</button></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Welcome to LuckySpins</h1>
+ <p>Experience the thrill of premium online gaming</p>
+ <button class="cta-button">Play Now</button>
+ </section>
+
+ <section id="games" class="games-grid">
+ <h2>Featured Games</h2>
+ <div class="game-cards">
+ <article class="game-card">
+ <div class="game-image slot-machine"></div>
+ <h3>Slots</h3>
+ <button class="play-btn">Play</button>
+ </article>
+ <article class="game-card">
+ <div class="game-image blackjack"></div>
+ <h3>Blackjack</h3>
+ <button class="play-btn">Play</button>
+ </article>
+ <article class="game-card">
+ <div class="game-image roulette"></div>
+ <h3>Roulette</h3>
+ <button class="play-btn">Play</button>
+ </article>
+ </div>
+ </section>
+
+ <section id="features" class="features">
+ <h2>Premium Features</h2>
+ <div class="features-grid">
+ <div class="feature">
+ <span class="icon">🎮</span>
+ <h3>PvP Gaming</h3>
+ <p>Challenge real players</p>
+ </div>
+ <div class="feature">
+ <span class="icon">🎁</span>
+ <h3>Daily Bonuses</h3>
+ <p>Claim your rewards</p>
+ </div>
+ <div class="feature">
+ <span class="icon">📊</span>
+ <h3>Live Stats</h3>
+ <p>Track your progress</p>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-links">
+ <a href="#terms">Terms</a>
+ <a href="#privacy">Privacy</a>
+ <a href="#support">Support</a>
+ </div>
+ <p>LuckySpins - Play Responsibly</p>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..dd5bc46
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://luckyspins.scroll.pub
+metaTags
+editButton /edit.html
+title LuckySpins - Premium Online Casino Experience
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..17be197
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01PPUdD5KJ8Kepsnqi5UjisT",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create an elegant online casino website with the suggested specifications.\n\n---domain---\nluckyspins.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://luckyspins.scroll.pub\nmetaTags\neditButton /edit.html\ntitle LuckySpins - Premium Online Casino Experience\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">LuckySpins</div>\n <button class=\"theme-toggle\" aria-label=\"Toggle dark mode\">🌙</button>\n <button class=\"menu-toggle\" aria-label=\"Toggle menu\">☰</button>\n <ul class=\"nav-links\">\n <li><a href=\"#games\">Games</a></li>\n <li><a href=\"#features\">Features</a></li>\n <li><a href=\"#leaderboard\">Leaderboard</a></li>\n <li><button class=\"login-btn\">Login</button></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Welcome to LuckySpins</h1>\n <p>Experience the thrill of premium online gaming</p>\n <button class=\"cta-button\">Play Now</button>\n </section>\n\n <section id=\"games\" class=\"games-grid\">\n <h2>Featured Games</h2>\n <div class=\"game-cards\">\n <article class=\"game-card\">\n <div class=\"game-image slot-machine\"></div>\n <h3>Slots</h3>\n <button class=\"play-btn\">Play</button>\n </article>\n <article class=\"game-card\">\n <div class=\"game-image blackjack\"></div>\n <h3>Blackjack</h3>\n <button class=\"play-btn\">Play</button>\n </article>\n <article class=\"game-card\">\n <div class=\"game-image roulette\"></div>\n <h3>Roulette</h3>\n <button class=\"play-btn\">Play</button>\n </article>\n </div>\n </section>\n\n <section id=\"features\" class=\"features\">\n <h2>Premium Features</h2>\n <div class=\"features-grid\">\n <div class=\"feature\">\n <span class=\"icon\">🎮</span>\n <h3>PvP Gaming</h3>\n <p>Challenge real players</p>\n </div>\n <div class=\"feature\">\n <span class=\"icon\">🎁</span>\n <h3>Daily Bonuses</h3>\n <p>Claim your rewards</p>\n </div>\n <div class=\"feature\">\n <span class=\"icon\">📊</span>\n <h3>Live Stats</h3>\n <p>Track your progress</p>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-links\">\n <a href=\"#terms\">Terms</a>\n <a href=\"#privacy\">Privacy</a>\n <a href=\"#support\">Support</a>\n </div>\n <p>LuckySpins - Play Responsibly</p>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary: #6b21a8;\n --secondary: #d946ef;\n --background: #ffffff;\n --text: #1a1a1a;\n --accent: #f0abfc;\n --transition: all 0.3s ease;\n}\n\n[data-theme=\"dark\"] {\n --primary: #9333ea;\n --secondary: #d946ef;\n --background: #1a1a1a;\n --text: #ffffff;\n --accent: #c026d3;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n background: var(--background);\n color: var(--text);\n line-height: 1.6;\n transition: var(--transition);\n}\n\nheader {\n background: var(--primary);\n padding: 1rem;\n position: fixed;\n width: 100%;\n z-index: 100;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: white;\n text-shadow: 0 0 10px var(--accent);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--accent);\n}\n\n.login-btn {\n background: var(--secondary);\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 25px;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.login-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n}\n\nmain {\n padding-top: 80px;\n}\n\n.hero {\n height: 80vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n}\n\n.cta-button {\n background: white;\n color: var(--primary);\n padding: 1rem 2rem;\n border: none;\n border-radius: 25px;\n font-size: 1.2rem;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.cta-button:hover {\n transform: scale(1.05);\n box-shadow: 0 5px 20px rgba(0,0,0,0.2);\n}\n\n.games-grid {\n padding: 4rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.game-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.game-card {\n background: rgba(255,255,255,0.1);\n border-radius: 15px;\n padding: 1rem;\n text-align: center;\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255,255,255,0.1);\n transition: var(--transition);\n}\n\n.game-card:hover {\n transform: translateY(-5px);\n}\n\n.game-image {\n height: 200px;\n border-radius: 10px;\n margin-bottom: 1rem;\n background-size: cover;\n background-position: center;\n}\n\n.features {\n background: var(--primary);\n color: white;\n padding: 4rem 2rem;\n}\n\n.features-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 2rem auto 0;\n}\n\n.feature {\n text-align: center;\n padding: 2rem;\n background: rgba(255,255,255,0.1);\n border-radius: 15px;\n transition: var(--transition);\n}\n\n.feature:hover {\n transform: translateY(-5px);\n}\n\n.icon {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\nfooter {\n background: var(--primary);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\n.footer-links {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-bottom: 1rem;\n}\n\n.footer-links a {\n color: white;\n text-decoration: none;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .menu-toggle {\n display: block;\n }\n \n .hero h1 {\n font-size: 2.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const themeToggle = document.querySelector('.theme-toggle');\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n \n // Theme toggling\n themeToggle.addEventListener('click', () => {\n document.body.dataset.theme = document.body.dataset.theme === 'dark' ? 'light' : 'dark';\n themeToggle.textContent = document.body.dataset.theme === 'dark' ? '☀️' : '🌙';\n });\n\n // Mobile menu\n menuToggle.addEventListener('click', () => {\n navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';\n });\n\n // Smooth scroll\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Animation on scroll\n const observerOptions = {\n threshold: 0.1\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, observerOptions);\n\n document.querySelectorAll('.feature, .game-card').forEach(el => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(20px)';\n el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';\n observer.observe(el);\n });\n});\n\n---end---\n\nThis implementation creates a modern, responsive online casino website with smooth animations, dark mode support, and an elegant design. The color scheme uses rich purples and magentas for a premium feel, while maintaining good contrast and accessibility. The site includes all the basic functionality requested in the initial phase, with clean semantic HTML, modern CSS features, and vanilla JavaScript for interactivity."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 859,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2882
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..07c7f2a
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# luckyspins.scroll.pub
+Website generated by Claude from prompt: # Cahier des Charges - Casino en ligne ## 1. Fonctionnalités de Base - [x] Interface de jeu simple - [ ] Dark mode - [ ] Système de prédiction avec sliders - [ ] Calcul des probabilités et gains ## 2. Système d'Authentification - [ ] Inscription/Connexion utilisateur - [ ] Gestion des sessions - [ ] Tableau de bord utilisateur - [ ] Historique des parties ## 3. Modes de Jeu - [ ] Casino classique (vs maison) - [ ] Player vs Player - [ ] Mode gratuit (freerolls) - [ ] Boost caché pour nouveaux joueurs ## 4. Monétisation - [ ] Intégration système de paiement - [ ] Système de commission PvP - [ ] Emplacements publicitaires - [ ] Système de bonus payants ## 5. Engagement - [ ] Partage sur réseaux sociaux - [ ] Feed d'actualités/contenus - [ ] Système de classement - [ ] Compteur de gains en direct ## 6. Sécurité - [ ] Protection DDoS - [ ] Protection injections SQL - [ ] Rate limiting - [ ] Validation des entrées - [ ] Sessions sécurisées - [ ] Système anti-fraude ## 7. Backend - [ ] Base de données utilisateurs - [ ] Stockage transactions - [ ] API sécurisée - [ ] Système de backup ## 8. Stack Technique - Frontend: Next.js, TypeScript, Tailwind - Backend: Node.js - BDD: PostgreSQL avec Prisma - Auth: NextAuth.js ## 9. Priorités de Développement 1. MVP avec jeu basique 2. Système d'auth 3. Modes de jeu 4. Sécurité basique 5. Monétisation 6. Features d'engagement 7. Sécurité avancée ## 10. Métriques de Suivi - Nombre d'utilisateurs actifs - Taux de conversion - Rétention utilisateurs - Volume de transactions - Ratio gains/pertes ## 11. Aspects Légaux à Vérifier - [ ] Conformité réglementaire - [ ] CGU et mentions légales - [ ] Politique de confidentialité - [ ] Licence de jeu État actuel: Phase initiale Prochaine étape: Implémentation dark mode et sliders
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..49f1e22
--- /dev/null
+++ b/script.js
@@ -0,0 +1,47 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const themeToggle = document.querySelector('.theme-toggle');
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ // Theme toggling
+ themeToggle.addEventListener('click', () => {
+ document.body.dataset.theme = document.body.dataset.theme === 'dark' ? 'light' : 'dark';
+ themeToggle.textContent = document.body.dataset.theme === 'dark' ? '☀️' : '🌙';
+ });
+
+ // Mobile menu
+ menuToggle.addEventListener('click', () => {
+ navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
+ });
+
+ // Smooth scroll
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Animation on scroll
+ const observerOptions = {
+ threshold: 0.1
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, observerOptions);
+
+ document.querySelectorAll('.feature, .game-card').forEach(el => {
+ el.style.opacity = '0';
+ el.style.transform = 'translateY(20px)';
+ el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+ observer.observe(el);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..fd4e86a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,220 @@
+:root {
+ --primary: #6b21a8;
+ --secondary: #d946ef;
+ --background: #ffffff;
+ --text: #1a1a1a;
+ --accent: #f0abfc;
+ --transition: all 0.3s ease;
+}
+
+[data-theme="dark"] {
+ --primary: #9333ea;
+ --secondary: #d946ef;
+ --background: #1a1a1a;
+ --text: #ffffff;
+ --accent: #c026d3;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background: var(--background);
+ color: var(--text);
+ line-height: 1.6;
+ transition: var(--transition);
+}
+
+header {
+ background: var(--primary);
+ padding: 1rem;
+ position: fixed;
+ width: 100%;
+ z-index: 100;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: white;
+ text-shadow: 0 0 10px var(--accent);
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.nav-links a:hover {
+ color: var(--accent);
+}
+
+.login-btn {
+ background: var(--secondary);
+ color: white;
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 25px;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.login-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}
+
+main {
+ padding-top: 80px;
+}
+
+.hero {
+ height: 80vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ color: white;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+}
+
+.cta-button {
+ background: white;
+ color: var(--primary);
+ padding: 1rem 2rem;
+ border: none;
+ border-radius: 25px;
+ font-size: 1.2rem;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.cta-button:hover {
+ transform: scale(1.05);
+ box-shadow: 0 5px 20px rgba(0,0,0,0.2);
+}
+
+.games-grid {
+ padding: 4rem 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.game-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.game-card {
+ background: rgba(255,255,255,0.1);
+ border-radius: 15px;
+ padding: 1rem;
+ text-align: center;
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(255,255,255,0.1);
+ transition: var(--transition);
+}
+
+.game-card:hover {
+ transform: translateY(-5px);
+}
+
+.game-image {
+ height: 200px;
+ border-radius: 10px;
+ margin-bottom: 1rem;
+ background-size: cover;
+ background-position: center;
+}
+
+.features {
+ background: var(--primary);
+ color: white;
+ padding: 4rem 2rem;
+}
+
+.features-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 2rem auto 0;
+}
+
+.feature {
+ text-align: center;
+ padding: 2rem;
+ background: rgba(255,255,255,0.1);
+ border-radius: 15px;
+ transition: var(--transition);
+}
+
+.feature:hover {
+ transform: translateY(-5px);
+}
+
+.icon {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+footer {
+ background: var(--primary);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+}
+
+.footer-links {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ margin-bottom: 1rem;
+}
+
+.footer-links a {
+ color: white;
+ text-decoration: none;
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .menu-toggle {
+ display: block;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+}