commit 2a8a3d6a6315d5dd0119fb0090afb9c0193a59a4
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 01:38:15 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..2898ad1
--- /dev/null
+++ b/body.html
@@ -0,0 +1,71 @@
+<header>
+ <nav>
+ <div class="logo">MyFlix</div>
+ <div class="nav-links">
+ <a href="#home">Accueil</a>
+ <a href="#features">Fonctionnalités</a>
+ <a href="#create">Créer</a>
+ <a href="#about">À propos</a>
+ </div>
+ <button class="menu-toggle" aria-label="Menu">
+ <span></span>
+ <span></span>
+ <span></span>
+ </button>
+ </nav>
+</header>
+
+<main>
+ <section id="home" class="hero">
+ <div class="hero-content">
+ <h1>Créez des Films Uniques avec l'IA</h1>
+ <p>Donnez vie à vos idées grâce à notre technologie d'intelligence artificielle</p>
+ <button class="cta-button">Commencer</button>
+ </div>
+ </section>
+
+ <section id="features" class="features">
+ <h2>Fonctionnalités</h2>
+ <div class="features-grid">
+ <div class="feature-card">
+ <div class="feature-icon">🎬</div>
+ <h3>Génération IA</h3>
+ <p>Créez des scénarios uniques basés sur vos préférences</p>
+ </div>
+ <div class="feature-card">
+ <div class="feature-icon">🎨</div>
+ <h3>Style Personnalisé</h3>
+ <p>Choisissez parmi différents styles visuels</p>
+ </div>
+ <div class="feature-card">
+ <div class="feature-icon">🚀</div>
+ <h3>Export Rapide</h3>
+ <p>Téléchargez votre film en quelques clics</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="create" class="create-section">
+ <h2>Créez Votre Film</h2>
+ <div class="creator-interface">
+ <div class="input-group">
+ <label for="movie-prompt">Décrivez votre film</label>
+ <textarea id="movie-prompt" rows="4" placeholder="Ex: Un film d'aventure dans l'espace..."></textarea>
+ </div>
+ <button class="generate-button">Générer</button>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>MyFlix</h4>
+ <p>L'avenir du cinéma personnalisé</p>
+ </div>
+ <div class="footer-section">
+ <h4>Contact</h4>
+ <p>contact@myflix.scroll.pub</p>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..0fdf286
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://myflix.scroll.pub
+metaTags
+editButton /edit.html
+title MyFlix - Générateur de Films IA
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..4ae4b74
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_017Vsjk1NwLPj2bkUCifqd3Z",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a complete implementation:\n\n---domain---\nmyflix.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://myflix.scroll.pub\nmetaTags\neditButton /edit.html\ntitle MyFlix - Générateur de Films IA\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">MyFlix</div>\n <div class=\"nav-links\">\n <a href=\"#home\">Accueil</a>\n <a href=\"#features\">Fonctionnalités</a>\n <a href=\"#create\">Créer</a>\n <a href=\"#about\">À propos</a>\n </div>\n <button class=\"menu-toggle\" aria-label=\"Menu\">\n <span></span>\n <span></span>\n <span></span>\n </button>\n </nav>\n</header>\n\n<main>\n <section id=\"home\" class=\"hero\">\n <div class=\"hero-content\">\n <h1>Créez des Films Uniques avec l'IA</h1>\n <p>Donnez vie à vos idées grâce à notre technologie d'intelligence artificielle</p>\n <button class=\"cta-button\">Commencer</button>\n </div>\n </section>\n\n <section id=\"features\" class=\"features\">\n <h2>Fonctionnalités</h2>\n <div class=\"features-grid\">\n <div class=\"feature-card\">\n <div class=\"feature-icon\">🎬</div>\n <h3>Génération IA</h3>\n <p>Créez des scénarios uniques basés sur vos préférences</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">🎨</div>\n <h3>Style Personnalisé</h3>\n <p>Choisissez parmi différents styles visuels</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">🚀</div>\n <h3>Export Rapide</h3>\n <p>Téléchargez votre film en quelques clics</p>\n </div>\n </div>\n </section>\n\n <section id=\"create\" class=\"create-section\">\n <h2>Créez Votre Film</h2>\n <div class=\"creator-interface\">\n <div class=\"input-group\">\n <label for=\"movie-prompt\">Décrivez votre film</label>\n <textarea id=\"movie-prompt\" rows=\"4\" placeholder=\"Ex: Un film d'aventure dans l'espace...\"></textarea>\n </div>\n <button class=\"generate-button\">Générer</button>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>MyFlix</h4>\n <p>L'avenir du cinéma personnalisé</p>\n </div>\n <div class=\"footer-section\">\n <h4>Contact</h4>\n <p>contact@myflix.scroll.pub</p>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #6c63ff;\n --secondary-color: #2c2c54;\n --accent-color: #ff6b6b;\n --text-color: #333;\n --light-bg: #f9f9f9;\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 line-height: 1.6;\n color: var(--text-color);\n}\n\n/* Header & Navigation */\nheader {\n position: fixed;\n width: 100%;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n z-index: 1000;\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 padding: 1rem 5%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: bold;\n background: linear-gradient(45deg, var(--primary-color), var(--accent-color));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n.nav-links a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--text-color);\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n/* Hero Section */\n.hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #6c63ff0d 0%, #ff6b6b0d 100%);\n padding: 2rem;\n}\n\n.hero-content {\n text-align: center;\n max-width: 800px;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n background: linear-gradient(45deg, var(--primary-color), var(--accent-color));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n/* Features Section */\n.features {\n padding: 5rem 2rem;\n background-color: var(--light-bg);\n}\n\n.features h2 {\n text-align: center;\n margin-bottom: 3rem;\n}\n\n.features-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.feature-card {\n background: white;\n padding: 2rem;\n border-radius: 15px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease;\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n}\n\n.feature-icon {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n/* Create Section */\n.create-section {\n padding: 5rem 2rem;\n}\n\n.creator-interface {\n max-width: 800px;\n margin: 0 auto;\n}\n\n.input-group {\n margin-bottom: 2rem;\n}\n\ntextarea {\n width: 100%;\n padding: 1rem;\n border: 2px solid #ddd;\n border-radius: 10px;\n resize: vertical;\n font-family: inherit;\n}\n\n/* Buttons */\n.cta-button, .generate-button {\n padding: 1rem 2rem;\n font-size: 1.1rem;\n border: none;\n border-radius: 25px;\n background: linear-gradient(45deg, var(--primary-color), var(--accent-color));\n color: white;\n cursor: pointer;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.cta-button:hover, .generate-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(108, 99, 255, 0.3);\n}\n\n/* Footer */\nfooter {\n background: var(--secondary-color);\n color: white;\n padding: 3rem 2rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n/* Mobile Responsiveness */\n.menu-toggle {\n display: none;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .menu-toggle {\n display: flex;\n flex-direction: column;\n gap: 4px;\n background: none;\n border: none;\n cursor: pointer;\n }\n \n .menu-toggle span {\n width: 25px;\n height: 3px;\n background: var(--text-color);\n transition: 0.3s;\n }\n \n .hero h1 {\n font-size: 2.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n \n menuToggle?.addEventListener('click', () => {\n navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';\n });\n\n // Smooth scroll for navigation links\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-card').forEach(card => {\n card.style.opacity = '0';\n card.style.transform = 'translateY(20px)';\n card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';\n observer.observe(card);\n });\n\n // Generate button interaction\n const generateButton = document.querySelector('.generate-button');\n generateButton?.addEventListener('click', () => {\n const prompt = document.querySelector('#movie-prompt').value;\n if (prompt.trim()) {\n generateButton.textContent = 'Génération en cours...';\n generateButton.disabled = true;\n \n // Simulate AI processing\n setTimeout(() => {\n generateButton.textContent = 'Générer';\n generateButton.disabled = false;\n alert('Fonctionnalité en développement');\n }, 2000);\n }\n });\n});\n\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 323,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2848
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..d13be62
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# myflix.scroll.pub
+Website generated by Claude from prompt: MyFlix est une application web innovante qui permet aux utilisateurs de générer des films personnalisés en utilisant l'intelligence artificielle. L'application combine plusieurs technologies modernes pour offrir une expérience utilisateur fluide et intuitive.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..497864f
--- /dev/null
+++ b/script.js
@@ -0,0 +1,57 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu toggle
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ menuToggle?.addEventListener('click', () => {
+ navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
+ });
+
+ // Smooth scroll for navigation links
+ 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-card').forEach(card => {
+ card.style.opacity = '0';
+ card.style.transform = 'translateY(20px)';
+ card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+ observer.observe(card);
+ });
+
+ // Generate button interaction
+ const generateButton = document.querySelector('.generate-button');
+ generateButton?.addEventListener('click', () => {
+ const prompt = document.querySelector('#movie-prompt').value;
+ if (prompt.trim()) {
+ generateButton.textContent = 'Génération en cours...';
+ generateButton.disabled = true;
+
+ // Simulate AI processing
+ setTimeout(() => {
+ generateButton.textContent = 'Générer';
+ generateButton.disabled = false;
+ alert('Fonctionnalité en développement');
+ }, 2000);
+ }
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..125fff6
--- /dev/null
+++ b/style.css
@@ -0,0 +1,204 @@
+:root {
+ --primary-color: #6c63ff;
+ --secondary-color: #2c2c54;
+ --accent-color: #ff6b6b;
+ --text-color: #333;
+ --light-bg: #f9f9f9;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+}
+
+/* Header & Navigation */
+header {
+ position: fixed;
+ width: 100%;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ z-index: 1000;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.logo {
+ font-size: 1.8rem;
+ font-weight: bold;
+ background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+.nav-links a {
+ margin-left: 2rem;
+ text-decoration: none;
+ color: var(--text-color);
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+/* Hero Section */
+.hero {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(135deg, #6c63ff0d 0%, #ff6b6b0d 100%);
+ padding: 2rem;
+}
+
+.hero-content {
+ text-align: center;
+ max-width: 800px;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+/* Features Section */
+.features {
+ padding: 5rem 2rem;
+ background-color: var(--light-bg);
+}
+
+.features h2 {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+.features-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.feature-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 15px;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease;
+}
+
+.feature-card:hover {
+ transform: translateY(-5px);
+}
+
+.feature-icon {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+/* Create Section */
+.create-section {
+ padding: 5rem 2rem;
+}
+
+.creator-interface {
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.input-group {
+ margin-bottom: 2rem;
+}
+
+textarea {
+ width: 100%;
+ padding: 1rem;
+ border: 2px solid #ddd;
+ border-radius: 10px;
+ resize: vertical;
+ font-family: inherit;
+}
+
+/* Buttons */
+.cta-button, .generate-button {
+ padding: 1rem 2rem;
+ font-size: 1.1rem;
+ border: none;
+ border-radius: 25px;
+ background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
+ color: white;
+ cursor: pointer;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.cta-button:hover, .generate-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(108, 99, 255, 0.3);
+}
+
+/* Footer */
+footer {
+ background: var(--secondary-color);
+ color: white;
+ padding: 3rem 2rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+}
+
+/* Mobile Responsiveness */
+.menu-toggle {
+ display: none;
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .menu-toggle {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .menu-toggle span {
+ width: 25px;
+ height: 3px;
+ background: var(--text-color);
+ transition: 0.3s;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+}