Changes to radioscroll.pub.scroll.pub

+ // script.js

+ // 1. Désactiver le menu contextuel (clic droit)

+ document.addEventListener("contextmenu", function (e) {

+ e.preventDefault();

+ });

+ // Attendre que le DOM soit complètement chargé

+ document.addEventListener("DOMContentLoaded", function () {

+ // 2. Gestion du menu hamburger pour la navigation responsive

+ const hamburgerMenu = document.querySelector(".hamburger-menu");

+ const navMenu = document.querySelector(".nav-menu");

+ if (hamburgerMenu && navMenu) {

+ hamburgerMenu.addEventListener("click", () => {

+ navMenu.classList.toggle("active");

+ });

+ }

+ // 3. Affichage de l'heure en temps réel

+ function afficherHeure() {

+ const date = new Date();

+ const heure = date.toLocaleTimeString();

+ const horlogeElement = document.getElementById("horloge");

+ if (horlogeElement) {

+ horlogeElement.textContent = heure;

+ }

+ }

+ afficherHeure();

+ setInterval(afficherHeure, 1000);

+ // 4. Fonction pour passer en mode plein écran

+ function ouvrirPleinEcran() {

+ const element = document.documentElement;

+ if (element.requestFullscreen) {

+ element.requestFullscreen();

+ } else if (element.mozRequestFullScreen) {

+ element.mozRequestFullScreen();

+ } else if (element.webkitRequestFullscreen) {

+ element.webkitRequestFullscreen();

+ } else if (element.msRequestFullscreen) {

+ element.msRequestFullscreen();

+ }

+ }

+ // 5. Code du calendrier

+ const monthYear = document.getElementById("monthYear");

+ const daysContainer = document.getElementById("days");

+ const prevMonthBtn = document.getElementById("prevMonth");

+ const nextMonthBtn = document.getElementById("nextMonth");

+ const currentDay = document.getElementById("currentDay");

+ function displayCurrentDay() {

+ const day = localStorage.getItem("currentDay");

+ if (day && currentDay) {

+ currentDay.textContent = day;

+ }

+ }

+ displayCurrentDay();

+ let currentDate = new Date();

+ let currentMonth = currentDate.getMonth();

+ let currentYear = currentDate.getFullYear();

+ let today = currentDate.getDate();

+ function generateCalendar(month, year) {

+ monthYear.textContent = new Date(year, month).toLocaleString("fr-FR", {

+ month: "long",

+ year: "numeric",

+ daysContainer.innerHTML = "";

+ const firstDay = new Date(year, month, 1).getDay();

+ const daysInMonth = new Date(year, month + 1, 0).getDate();

+ for (let i = 0; i < firstDay; i++) {

+ const emptyDiv = document.createElement("div");

+ emptyDiv.classList.add("empty");

+ daysContainer.appendChild(emptyDiv);

+ }

+ for (let i = 1; i <= daysInMonth; i++) {

+ const dayDiv = document.createElement("div");

+ dayDiv.textContent = i;

+ daysContainer.appendChild(dayDiv);

+ if (

+ i === today &&

+ month === new Date().getMonth() &&

+ year === new Date().getFullYear()

+ ) {

+ dayDiv.style.backgroundColor = "#fff";

+ dayDiv.style.color = "#000";

+ }

+ }

+ }

+ function updateCalendar() {

+ generateCalendar(currentMonth, currentYear);

+ }

+ prevMonthBtn.addEventListener("click", () => {

+ currentMonth--;

+ if (currentMonth < 0) {

+ currentMonth = 11;

+ currentYear--;

+ }

+ updateCalendar();

+ updateCurrentDay();

+ nextMonthBtn.addEventListener("click", () => {

+ currentMonth++;

+ if (currentMonth > 11) {

+ currentMonth = 0;

+ currentYear++;

+ }

+ updateCalendar();

+ updateCurrentDay();

+ function updateCurrentDay() {

+ const today = new Date();

+ const day = today.getDate();

+ const dayName = today.toLocaleDateString("fr-FR", { weekday: "long" }); // Obtient le nom du jour

+ const formattedDate = `${dayName} ${day}`; // Formate la date

+ currentDay.textContent = formattedDate;

+ localStorage.setItem("currentDay", formattedDate); // Stocker la date formatée dans localStorage

+ }

+ updateCalendar();

+ updateCurrentDay();

+ // Mettre à jour le numéro du jour toutes les secondes

+ setInterval(updateCurrentDay, 1000);

+ // 6. Affichage du jour depuis localStorage

+ function displayCurrentDay() {

+ const day = localStorage.getItem("currentDay");

+ if (day && currentDay) {

+ currentDay.textContent = day;

+ }

+ }

+ displayCurrentDay();

+ });

+ function enregistrerNotes() {

+ try {

+ var notes = document.getElementById("notes").value;

+ var element = document.createElement("a");

+ element.setAttribute(

+ "href",

+ "data:text/plain;charset=utf-8," + encodeURIComponent(notes),

+ );

+ element.setAttribute("download", "notes.txt");

+ element.style.display = "none";

+ document.body.appendChild(element);

+ element.click();

+ document.body.removeChild(element);

+ } catch (error) {

+ console.error("Erreur lors de l'enregistrement des notes :", error);

+ alert(

+ "Erreur lors de l'enregistrement des notes. Veuillez vérifier la console.",

+ );

+ }

+ }

+ function enregistrerNotes() {

+ try {

+ var notes = document.getElementById("notes").value;

+ localStorage.setItem("notes", notes);

+ console.log("Notes enregistrées :", localStorage.getItem("notes")); // Ajout d'un log

+ alert("Notes enregistrées !");

+ } catch (error) {

+ console.error("Erreur lors de l'enregistrement des notes :", error);

+ alert(

+ "Erreur lors de l'enregistrement des notes. Veuillez vérifier la console.",

+ );

+ }

+ }

+ function importerNotes() {

+ try {

+ var notes = localStorage.getItem("notes");

+ if (notes) {

+ document.getElementById("notes").value = notes;

+ alert("Notes importées !");

+ } else {

+ alert("Aucune note enregistrée.");

+ }

+ } catch (error) {

+ console.error("Erreur lors de l'importation des notes :", error);

+ alert(

+ "Erreur lors de l'importation des notes. Veuillez vérifier la console.",

+ );

+ }

+ }

+ buildHtml

+ baseUrl https://radioscroll.pub

+ metaTags

+ editButton /edit.html

+ title Radio Scroll

+ style.css

+

+ header

+ class hero

+ nav

+ div Radio

+ class logo

+ div

+ class nav-links

+ a About

+ href #about

+ a Stations

+ href #stations

+ a Contact

+ href #contact

+ div

+ class hero-content

+ h1 Tune Into the Future

+ p Experience the next generation of radio streaming

+ a Explore Stations

+ class primary-button

+ href #stations

+ main

+ section

+ id about

+ class about

+ h2 About Radio Scroll

+ p Radio Scroll brings you the best in online radio streaming. Our platform is built with simplicity and elegance in mind, offering a seamless listening experience across all devices.

+ section

+ id stations

+ class stations

+ h2 Featured Stations

+ div

+ class station-grid

+ div

+ class station-card

+ div 🎶

+ class station-icon

+ h3 Jazz Lounge

+ p Smooth jazz and relaxing tunes

+ div

+ class station-card

+ div 🎧

+ class station-icon

+ h3 Rock Revolution

+ p Classic and modern rock hits

+ div

+ class station-card

+ div 🎤

+ class station-icon

+ h3 Pop Central

+ p Top 40 and trending pop music

+ div

+ class station-card

+ div 🎷

+ class station-icon

+ h3 Blues & Soul

+ p Deep blues and soulful melodies

+ section

+ id contact

+ class contact

+ h2 Get In Touch

+ p Have questions or suggestions? We'd love to hear from you.

+ form

+ class contact-form

+ input

+ type text

+ placeholder Your Name

+ input

+ type email

+ placeholder Your Email

+ textarea

+ placeholder Your Message

+ button

+ type submit

+ class submit-button

+ Send Message

+ footer

+ div

+ class footer-content

+ div

+ class footer-links

+ a Privacy Policy

+ href /privacy

+ a Terms of Service

+ href /terms

+ a Careers

+ href /careers

+ p Radio Scroll - Redefining online radio streaming

+

+ script.js

+ {

+ "id": "614dd4c4-b77c-4c16-abbd-b26c2e00c4b1",

+ "object": "chat.completion",

+ "created": 1742564809,

+ "model": "deepseek-chat",

+ "choices": [

+ {

+ "index": 0,

+ "message": {

+ "role": "assistant",

+ "content": "---domain---\nradioscroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://radioscroll.pub\nmetaTags\neditButton /edit.html\ntitle Radio Scroll\nstyle.css\n\nheader\n class hero\n nav\n div Radio\n class logo\n div\n class nav-links\n a About\n href #about\n a Stations\n href #stations\n a Contact\n href #contact\n div\n class hero-content\n h1 Tune Into the Future\n p Experience the next generation of radio streaming\n a Explore Stations\n class primary-button\n href #stations\nmain\n section\n id about\n class about\n h2 About Radio Scroll\n p Radio Scroll brings you the best in online radio streaming. Our platform is built with simplicity and elegance in mind, offering a seamless listening experience across all devices.\n section\n id stations\n class stations\n h2 Featured Stations\n div\n class station-grid\n div\n class station-card\n div 🎶\n class station-icon\n h3 Jazz Lounge\n p Smooth jazz and relaxing tunes\n div\n class station-card\n div 🎧\n class station-icon\n h3 Rock Revolution\n p Classic and modern rock hits\n div\n class station-card\n div 🎤\n class station-icon\n h3 Pop Central\n p Top 40 and trending pop music\n div\n class station-card\n div 🎷\n class station-icon\n h3 Blues & Soul\n p Deep blues and soulful melodies\n section\n id contact\n class contact\n h2 Get In Touch\n p Have questions or suggestions? We'd love to hear from you.\n form\n class contact-form\n input\n type text\n placeholder Your Name\n input\n type email\n placeholder Your Email\n textarea\n placeholder Your Message\n button\n type submit\n class submit-button\n Send Message\nfooter\n div\n class footer-content\n div\n class footer-links\n a Privacy Policy\n href /privacy\n a Terms of Service\n href /terms\n a Careers\n href /careers\n p Radio Scroll - Redefining online radio streaming\n\nscript.js\n---style.css---\n:root {\n --primary-color: #1a73e8;\n --secondary-color: #fbbc05;\n --background-color: #f5f5f5;\n --text-color: #202124;\n --card-bg: #ffffff;\n --shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n margin: 0;\n padding: 0;\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n padding: 4rem 1rem;\n text-align: center;\n}\n\n.nav-links {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-bottom: 2rem;\n}\n\n.primary-button {\n background: white;\n color: var(--primary-color);\n padding: 0.8rem 2rem;\n border-radius: 25px;\n text-decoration: none;\n font-weight: 600;\n transition: all 0.3s ease;\n}\n\n.primary-button:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow);\n}\n\n.station-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 2rem;\n}\n\n.station-card {\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 10px;\n box-shadow: var(--shadow);\n text-align: center;\n transition: transform 0.3s ease;\n}\n\n.station-card:hover {\n transform: translateY(-5px);\n}\n\n.station-icon {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.contact-form {\n max-width: 600px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\ninput, textarea {\n padding: 0.8rem;\n border: 1px solid #ddd;\n border-radius: 5px;\n font-size: 1rem;\n}\n\n.submit-button {\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 1rem;\n border-radius: 5px;\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\n.submit-button:hover {\n background: #1557b3;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n flex-direction: column;\n gap: 1rem;\n }\n \n .hero-content h1 {\n font-size: 2rem;\n }\n \n .station-grid {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\n// Smooth scrolling for anchor links\ndocument.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// Form submission handling\nconst contactForm = document.querySelector('.contact-form');\nif (contactForm) {\n contactForm.addEventListener('submit', (e) => {\n e.preventDefault();\n const formData = new FormData(contactForm);\n const data = Object.fromEntries(formData);\n \n // Here you would typically send the data to your server\n console.log('Form submitted:', data);\n \n // Show success message\n alert('Thank you for your message! We\\'ll get back to you soon.');\n contactForm.reset();\n });\n}\n\n// Add hover effects to station cards\nconst stationCards = document.querySelectorAll('.station-card');\nstationCards.forEach(card => {\n card.addEventListener('mouseenter', () => {\n card.style.transform = 'translateY(-5px)';\n card.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';\n });\n \n card.addEventListener('mouseleave', () => {\n card.style.transform = 'translateY(0)';\n card.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';\n });\n});\n---end---"

+ },

+ "logprobs": null,

+ "finish_reason": "stop"

+ }

+ ],

+ "usage": {

+ "prompt_tokens": 717,

+ "completion_tokens": 1471,

+ "total_tokens": 2188,

+ "prompt_tokens_details": {

+ "cached_tokens": 0

+ },

+ "prompt_cache_hit_tokens": 0,

+ "prompt_cache_miss_tokens": 717

+ },

+ "system_fingerprint": "fp_3a5770e1b4_prod0225"

+ }

+ # radioscroll.pub.scroll.pub

+

+ Prompt: website

+ Agent: deepseek

+ Model: deepseek-chat

+

+ ## User prompt

+ radio

+

+ ## System prompt

+ You are an expert web developer. Create a website based on this request: "radio"

+

+ Requirements:

+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)

+ - Create clean, semantic HTML5

+ - Make it mobile-responsive

+ - Follow modern best practices and accessibility guidelines

+ - Keep it simple but professional

+ - Use only relative links and no external resources

+ - Do not put a copyright symbol or all rights reserved in the footer.

+ - Make it beautiful. Dazzling. Advanced used of CSS.

+

+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.

+

+ For example:

+

+ header

+ class hero

+ nav

+ div Scroll

+ class logo

+ div

+ class nav-links

+ a Features

+ href #features

+ a Examples

+ href #examples

+ a Edit

+ href edit.html

+ a GitHub

+ class cta-button

+ href https://github.com/breck7/scroll

+ div

+ class hero-content

+ h1 Write Better with Scroll

+ p The extendible markup language that makes source beautiful and compiles to anything

+ a Get Started

+ class primary-button

+ href https://hub.scroll.pub/

+ main

+ section

+ id features

+ class features

+ h2 Why Scroll?

+ div

+ class feature-grid

+ div

+ class feature-card

+ div ⚡

+ class feature-icon

+ h3 Simple Syntax

+ p Like Markdown, but more powerful. No parentheses needed.

+ div

+ class feature-card

+ div 🧩

+ class feature-icon

+ h3 Extendible

+ p Build your own custom parsers.

+ div

+ class feature-card

+ div 🎨

+ class feature-icon

+ h3 Beautiful Output

+ p Create stunning documents with minimal effort.

+ div

+ class feature-card

+ div 🚀

+ class feature-icon

+ h3 Fast & Light

+ p Built on the efficient PPS Stack.

+ section

+ id examples

+ class code-demo

+ h2 See It In Action

+ div

+ class code-container

+ pre

+ class code-example

+ div

+ class code-output

+ footer

+ div

+ class footer-content

+ div

+ class footer-links

+ a Documentation

+ href https://scroll.pub/tutorial.html

+ a Community

+ href https://www.reddit.com/r/WorldWideScroll/

+ a Blog

+ href https://scroll.pub/blog

+ p Started by Breck Yunits. Evolved by a community.

+ https://twitter.com/breckyunits Breck Yunits

+ https://github.com/breck7/scroll/graphs/contributors community

+

+

+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:

+

+ ---domain---

+ (domainscroll.pub here)

+ ---index.scroll---

+ buildHtml

+ baseUrl https://(domainscroll.pub here)

+ metaTags

+ editButton /edit.html

+ title (Title here)

+ style.css

+

+ (body content here. no blank lines please.)

+

+ script.js

+ ---style.css---

+ (CSS content here)

+ ---script.js---

+ (JavaScript content here)

+ ---end---

+ // Smooth scrolling for anchor links

+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {

+ anchor.addEventListener('click', function (e) {

+ e.preventDefault();

+ document.querySelector(this.getAttribute('href')).scrollIntoView({

+ behavior: 'smooth'

+ });

+ });

+ });

+

+ // Form submission handling

+ const contactForm = document.querySelector('.contact-form');

+ if (contactForm) {

+ contactForm.addEventListener('submit', (e) => {

+ e.preventDefault();

+ const formData = new FormData(contactForm);

+ const data = Object.fromEntries(formData);

+

+ // Here you would typically send the data to your server

+ console.log('Form submitted:', data);

+

+ // Show success message

+ alert('Thank you for your message! We\'ll get back to you soon.');

+ contactForm.reset();

+ });

+ }

+

+ // Add hover effects to station cards

+ const stationCards = document.querySelectorAll('.station-card');

+ stationCards.forEach(card => {

+ card.addEventListener('mouseenter', () => {

+ card.style.transform = 'translateY(-5px)';

+ card.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';

+ });

+

+ card.addEventListener('mouseleave', () => {

+ card.style.transform = 'translateY(0)';

+ card.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';

+ });

+ });

+ :root {

+ --primary-color: #1a73e8;

+ --secondary-color: #fbbc05;

+ --background-color: #f5f5f5;

+ --text-color: #202124;

+ --card-bg: #ffffff;

+ --shadow: 0 2px 4px rgba(0,0,0,0.1);

+ }

+

+ body {

+ font-family: 'Segoe UI', system-ui, sans-serif;

+ line-height: 1.6;

+ color: var(--text-color);

+ background-color: var(--background-color);

+ margin: 0;

+ padding: 0;

+ }

+

+ .hero {

+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

+ color: white;

+ padding: 4rem 1rem;

+ text-align: center;

+ }

+

+ .nav-links {

+ display: flex;

+ justify-content: center;

+ gap: 2rem;

+ margin-bottom: 2rem;

+ }

+

+ .primary-button {

+ background: white;

+ color: var(--primary-color);

+ padding: 0.8rem 2rem;

+ border-radius: 25px;

+ text-decoration: none;

+ font-weight: 600;

+ transition: all 0.3s ease;

+ }

+

+ .primary-button:hover {

+ transform: translateY(-2px);

+ box-shadow: var(--shadow);

+ }

+

+ .station-grid {

+ display: grid;

+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

+ gap: 2rem;

+ padding: 2rem;

+ }

+

+ .station-card {

+ background: var(--card-bg);

+ padding: 2rem;

+ border-radius: 10px;

+ box-shadow: var(--shadow);

+ text-align: center;

+ transition: transform 0.3s ease;

+ }

+

+ .station-card:hover {

+ transform: translateY(-5px);

+ }

+

+ .station-icon {

+ font-size: 3rem;

+ margin-bottom: 1rem;

+ }

+

+ .contact-form {

+ max-width: 600px;

+ margin: 0 auto;

+ display: flex;

+ flex-direction: column;

+ gap: 1rem;

+ }

+

+ input, textarea {

+ padding: 0.8rem;

+ border: 1px solid #ddd;

+ border-radius: 5px;

+ font-size: 1rem;

+ }

+

+ .submit-button {

+ background: var(--primary-color);

+ color: white;

+ border: none;

+ padding: 1rem;

+ border-radius: 5px;

+ cursor: pointer;

+ transition: background 0.3s ease;

+ }

+

+ .submit-button:hover {

+ background: #1557b3;

+ }

+

+ @media (max-width: 768px) {

+ .nav-links {

+ flex-direction: column;

+ gap: 1rem;

+ }

+

+ .hero-content h1 {

+ font-size: 2rem;

+ }

+

+ .station-grid {

+ grid-template-columns: 1fr;

+ }

+ }