How are you feeling today?
\n\n \n \n \n \n \n \n
\n \n
\n Your Perfect Song
\n\n \n \n
\n \n \n 
body.html
Changed around line 1
+
+
+
MoodTunes
+
Music for every emotion
+
+
+
+
+
+
How are you feeling today?
+
+
+
+ Joyful
+
+
+
+ Nostalgic
+
+
+
+ Adventurous
+
+
+
+ Mellow
+
+
+
+ Energetic
+
+
+
+ Romantic
+
+
+
+
+
+
+
Your Perfect Song
+
+
+
+
+
+
+
+
+
+
+
+
Made with passion by MoodTunes
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://moodtunes.scroll.pub
+ metaTags
+ editButton /edit.html
+ title MoodTunes - Your Emotion-Driven Music Recommender
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01KtbNVTWqMVdtchCK3bMyt8",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create this for you with the domain \"moodtunes.scroll.pub\" - it's short, memorable, and perfectly describes the service.\n\n---domain---\nmoodtunes.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://moodtunes.scroll.pub\nmetaTags\neditButton /edit.html\ntitle MoodTunes - Your Emotion-Driven Music Recommender\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n \n \n\n\n \n \n\n \n \n \n\n\n---style.css---\n:root {\n --primary-color: #6c5ce7;\n --secondary-color: #a8a4e6;\n --background-color: #f8f9fa;\n --text-color: #2d3436;\n --card-shadow: 0 8px 30px rgba(0,0,0,0.12);\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n padding: 2rem 1rem;\n text-align: center;\n color: white;\n box-shadow: var(--card-shadow);\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n}\n\n.tagline {\n font-size: 1.2rem;\n opacity: 0.9;\n}\n\nmain {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.mood-selector h2 {\n text-align: center;\n margin-bottom: 2rem;\n font-size: 1.8rem;\n}\n\n.mood-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 1.5rem;\n padding: 1rem;\n}\n\n.mood-btn {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 1.5rem;\n border: none;\n background: white;\n border-radius: 15px;\n cursor: pointer;\n transition: var(--transition);\n box-shadow: var(--card-shadow);\n}\n\n.mood-btn:hover {\n transform: translateY(-5px);\n box-shadow: 0 12px 40px rgba(0,0,0,0.15);\n}\n\n.mood-icon {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n}\n\n.recommendation {\n margin-top: 3rem;\n}\n\n.recommendation-card {\n background: white;\n padding: 2rem;\n border-radius: 20px;\n box-shadow: var(--card-shadow);\n text-align: center;\n max-width: 600px;\n margin: 0 auto;\n}\n\n.song-details {\n margin: 2rem 0;\n}\n\n.song-title {\n font-size: 1.5rem;\n font-weight: bold;\n margin-bottom: 0.5rem;\n}\n\n.song-artist {\n color: #666;\n}\n\nbutton {\n padding: 0.8rem 1.5rem;\n border: none;\n border-radius: 25px;\n background: var(--primary-color);\n color: white;\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n margin: 0.5rem;\n}\n\nbutton:hover {\n background: var(--secondary-color);\n}\n\n.back-btn {\n background: transparent;\n color: var(--primary-color);\n border: 2px solid var(--primary-color);\n}\n\n.hidden {\n display: none;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n margin-top: 3rem;\n background: white;\n box-shadow: 0 -5px 20px rgba(0,0,0,0.05);\n}\n\n@media (max-width: 768px) {\n .mood-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n \n h1 {\n font-size: 2rem;\n }\n \n .mood-btn {\n padding: 1rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const moodSelector = document.querySelector('.mood-selector');\n const recommendation = document.querySelector('.recommendation');\n const songTitle = document.querySelector('.song-title');\n const songArtist = document.querySelector('.song-artist');\n const newSongBtn = document.querySelector('.new-song-btn');\n const backBtn = document.querySelector('.back-btn');\n \n // Sample song database\n const songDatabase = {\n joyful: [\n { title: \"Happy\", artist: \"Pharrell Williams\" },\n { title: \"I Got You (I Feel Good)\", artist: \"James Brown\" },\n { title: \"Walking on Sunshine\", artist: \"Katrina & The Waves\" }\n ],\n nostalgic: [\n { title: \"Yesterday\", artist: \"The Beatles\" },\n { title: \"Time After Time\", artist: \"Cyndi Lauper\" },\n { title: \"Sweet Dreams\", artist: \"Eurythmics\" }\n ],\n adventurous: [\n { title: \"Eye of the Tiger\", artist: \"Survivor\" },\n { title: \"Born to Run\", artist: \"Bruce Springsteen\" },\n { title: \"The Final Countdown\", artist: \"Europe\" }\n ],\n mellow: [\n { title: \"Chasing Cars\", artist: \"Snow Patrol\" },\n { title: \"Hallelujah\", artist: \"Jeff Buckley\" },\n { title: \"The Sound of Silence\", artist: \"Simon & Garfunkel\" }\n ],\n energetic: [\n { title: \"Can't Hold Us\", artist: \"Macklemore & Ryan Lewis\" },\n { title: \"Uptown Funk\", artist: \"Mark Ronson ft. Bruno Mars\" },\n { title: \"I Gotta Feeling\", artist: \"The Black Eyed Peas\" }\n ],\n romantic: [\n { title: \"Perfect\", artist: \"Ed Sheeran\" },\n { title: \"All of Me\", artist: \"John Legend\" },\n { title: \"At Last\", artist: \"Etta James\" }\n ]\n };\n\n let currentMood = '';\n\n function getRandomSong(mood) {\n const songs = songDatabaseood];\n return songs[Math.floor(Math.random() * songs.length)];\n }\n\n function showRecommendation(mood) {\n const song = getRandomSong(mood);\n songTitle.textContent = song.title;\n songArtist.textContent = song.artist;\n moodSelector.classList.add('hidden');\n recommendation.classList.remove('hidden');\n currentMood = mood;\n }\n\n // Event Listeners\n document.querySelectorAll('.mood-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n showRecommendation(btn.dataset.mood);\n });\n });\n\n newSongBtn.addEventListener('click', () => {\n showRecommendation(currentMood);\n });\n\n backBtn.addEventListener('click', () => {\n moodSelector.classList.remove('hidden');\n recommendation.classList.add('hidden');\n });\n});\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 341,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2576
+ }
+ }
readme.scroll
Changed around line 1
+ # moodtunes.scroll.pub
+ Website generated by Claude from prompt: Discover your perfect soundtrack with our mood-based song recommender. Simply select from a set of pre-defined mood tags—whether you’re feeling joyful, nostalgic, adventurous, or mellow—and let the site curate the ideal song to match your vibe. Music tailored to your emotions, one click away!
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const moodSelector = document.querySelector('.mood-selector');
+ const recommendation = document.querySelector('.recommendation');
+ const songTitle = document.querySelector('.song-title');
+ const songArtist = document.querySelector('.song-artist');
+ const newSongBtn = document.querySelector('.new-song-btn');
+ const backBtn = document.querySelector('.back-btn');
+
+ // Sample song database
+ const songDatabase = {
+ joyful: [
+ { title: "Happy", artist: "Pharrell Williams" },
+ { title: "I Got You (I Feel Good)", artist: "James Brown" },
+ { title: "Walking on Sunshine", artist: "Katrina & The Waves" }
+ ],
+ nostalgic: [
+ { title: "Yesterday", artist: "The Beatles" },
+ { title: "Time After Time", artist: "Cyndi Lauper" },
+ { title: "Sweet Dreams", artist: "Eurythmics" }
+ ],
+ adventurous: [
+ { title: "Eye of the Tiger", artist: "Survivor" },
+ { title: "Born to Run", artist: "Bruce Springsteen" },
+ { title: "The Final Countdown", artist: "Europe" }
+ ],
+ mellow: [
+ { title: "Chasing Cars", artist: "Snow Patrol" },
+ { title: "Hallelujah", artist: "Jeff Buckley" },
+ { title: "The Sound of Silence", artist: "Simon & Garfunkel" }
+ ],
+ energetic: [
+ { title: "Can't Hold Us", artist: "Macklemore & Ryan Lewis" },
+ { title: "Uptown Funk", artist: "Mark Ronson ft. Bruno Mars" },
+ { title: "I Gotta Feeling", artist: "The Black Eyed Peas" }
+ ],
+ romantic: [
+ { title: "Perfect", artist: "Ed Sheeran" },
+ { title: "All of Me", artist: "John Legend" },
+ { title: "At Last", artist: "Etta James" }
+ ]
+ };
+
+ let currentMood = '';
+
+ function getRandomSong(mood) {
+ const songs = songDatabaseood];
+ return songs[Math.floor(Math.random() * songs.length)];
+ }
+
+ function showRecommendation(mood) {
+ const song = getRandomSong(mood);
+ songTitle.textContent = song.title;
+ songArtist.textContent = song.artist;
+ moodSelector.classList.add('hidden');
+ recommendation.classList.remove('hidden');
+ currentMood = mood;
+ }
+
+ // Event Listeners
+ document.querySelectorAll('.mood-btn').forEach(btn => {
+ btn.addEventListener('click', () => {
+ showRecommendation(btn.dataset.mood);
+ });
+ });
+
+ newSongBtn.addEventListener('click', () => {
+ showRecommendation(currentMood);
+ });
+
+ backBtn.addEventListener('click', () => {
+ moodSelector.classList.remove('hidden');
+ recommendation.classList.add('hidden');
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #6c5ce7;
+ --secondary-color: #a8a4e6;
+ --background-color: #f8f9fa;
+ --text-color: #2d3436;
+ --card-shadow: 0 8px 30px rgba(0,0,0,0.12);
+ --transition: all 0.3s ease;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ background: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ }
+
+ header {
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ padding: 2rem 1rem;
+ text-align: center;
+ color: white;
+ box-shadow: var(--card-shadow);
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .tagline {
+ font-size: 1.2rem;
+ opacity: 0.9;
+ }
+
+ main {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ }
+
+ .mood-selector h2 {
+ text-align: center;
+ margin-bottom: 2rem;
+ font-size: 1.8rem;
+ }
+
+ .mood-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ gap: 1.5rem;
+ padding: 1rem;
+ }
+
+ .mood-btn {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 1.5rem;
+ border: none;
+ background: white;
+ border-radius: 15px;
+ cursor: pointer;
+ transition: var(--transition);
+ box-shadow: var(--card-shadow);
+ }
+
+ .mood-btn:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 12px 40px rgba(0,0,0,0.15);
+ }
+
+ .mood-icon {
+ font-size: 2rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .recommendation {
+ margin-top: 3rem;
+ }
+
+ .recommendation-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 20px;
+ box-shadow: var(--card-shadow);
+ text-align: center;
+ max-width: 600px;
+ margin: 0 auto;
+ }
+
+ .song-details {
+ margin: 2rem 0;
+ }
+
+ .song-title {
+ font-size: 1.5rem;
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+ }
+
+ .song-artist {
+ color: #666;
+ }
+
+ button {
+ padding: 0.8rem 1.5rem;
+ border: none;
+ border-radius: 25px;
+ background: var(--primary-color);
+ color: white;
+ font-weight: 600;
+ cursor: pointer;
+ transition: var(--transition);
+ margin: 0.5rem;
+ }
+
+ button:hover {
+ background: var(--secondary-color);
+ }
+
+ .back-btn {
+ background: transparent;
+ color: var(--primary-color);
+ border: 2px solid var(--primary-color);
+ }
+
+ .hidden {
+ display: none;
+ }
+
+ footer {
+ text-align: center;
+ padding: 2rem;
+ margin-top: 3rem;
+ background: white;
+ box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
+ }
+
+ @media (max-width: 768px) {
+ .mood-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ .mood-btn {
+ padding: 1rem;
+ }
+ }