body.html
Changed around line 1
+
+
DarkPlay
+
+
+
+
+
+
+
+
Create New Entry
+
+
+
+
+
+
+
+
+
+
+
+
+
Your Dark Collection
+
+
+
+
+
+
DarkPlay - Embrace the Shadows
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://darkplay.scroll.pub
+ metaTags
+ description "Track your dark aesthetic YouTube playlists in gothic style"
+ keywords "youtube, playlist, tracker, gothic, dark aesthetic"
+ editButton /edit.html
+ title DarkPlay - Gothic YouTube Playlist Tracker
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01Wyfi9bxywxSC89rqmRbGTZ",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's my solution for a gothic YouTube playlist tracker website:\n\n---domain---\ndarkplay.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://darkplay.scroll.pub\nmetaTags\n description \"Track your dark aesthetic YouTube playlists in gothic style\"\n keywords \"youtube, playlist, tracker, gothic, dark aesthetic\"\neditButton /edit.html\ntitle DarkPlay - Gothic YouTube Playlist Tracker\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n \n\n\n \n \n\n \n \n \n\n\n\n---style.css---\n:root {\n --primary-color: #1a0f1f;\n --accent-color: #6b0f1a;\n --text-color: #e6e6e6;\n --border-color: #3d2842;\n --shadow-color: rgba(0, 0, 0, 0.5);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: \"Crimson Text\", Georgia, serif;\n background-color: var(--primary-color);\n color: var(--text-color);\n line-height: 1.6;\n background-image: linear-gradient(45deg, #130b15 25%, transparent 25%),\n linear-gradient(-45deg, #130b15 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #130b15 75%),\n linear-gradient(-45deg, transparent 75%, #130b15 75%);\n background-size: 20px 20px;\n}\n\nheader {\n padding: 2rem;\n background: linear-gradient(to bottom, #2a1f2d, var(--primary-color));\n border-bottom: 2px solid var(--border-color);\n text-align: center;\n}\n\nh1 {\n font-size: 3.5rem;\n text-transform: uppercase;\n letter-spacing: 0.5rem;\n margin-bottom: 1rem;\n text-shadow: 0 0 10px var(--accent-color);\n}\n\n.gothic-btn {\n background-color: var(--accent-color);\n color: var(--text-color);\n border: none;\n padding: 0.8rem 1.5rem;\n font-family: inherit;\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 0 10px var(--shadow-color);\n border-radius: 2px;\n}\n\n.gothic-btn:hover {\n background-color: #8b1423;\n transform: translateY(-2px);\n}\n\nmain {\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n}\n\n.playlist-creator {\n background: rgba(26, 15, 31, 0.8);\n padding: 2rem;\n border: 1px solid var(--border-color);\n margin-bottom: 3rem;\n box-shadow: 0 0 20px var(--shadow-color);\n}\n\n.form-group {\n margin-bottom: 1rem;\n}\n\ninput {\n width: 100%;\n padding: 0.8rem;\n background: rgba(0, 0, 0, 0.2);\n border: 1px solid var(--border-color);\n color: var(--text-color);\n font-family: inherit;\n}\n\n.video-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.video-card {\n background: rgba(26, 15, 31, 0.8);\n border: 1px solid var(--border-color);\n padding: 1rem;\n transition: all 0.3s ease;\n position: relative;\n}\n\n.video-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 5px 15px var(--shadow-color);\n}\n\n.video-card.completed {\n border-color: var(--accent-color);\n}\n\n.video-card h3 {\n margin-bottom: 1rem;\n font-size: 1.2rem;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: linear-gradient(to top, #2a1f2d, var(--primary-color));\n border-top: 2px solid var(--border-color);\n margin-top: 3rem;\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2.5rem;\n }\n \n main {\n padding: 1rem;\n }\n \n .video-grid {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const videoForm = document.getElementById('video-form');\n const videoList = document.getElementById('video-list');\n const loginBtn = document.getElementById('login-btn');\n \n let videos = JSON.parse(localStorage.getItem('videos')) || [];\n \n function saveVideos() {\n localStorage.setItem('videos', JSON.stringify(videos));\n }\n \n function addVideo(title, url) {\n const video = {\n id: Date.now(),\n title,\n url,\n completed: false\n };\n videos.push(video);\n saveVideos();\n renderVideos();\n }\n \n function toggleVideoComplete(id) {\n videos = videos.map(video => {\n if (video.id === id) {\n return { ...video, completed: !video.completed };\n }\n return video;\n });\n saveVideos();\n renderVideos();\n }\n \n function renderVideos() {\n videoList.innerHTML = '';\n videos.forEach(video => {\n const videoCard = document.createElement('div');\n videoCard.className = `video-card ${video.completed ? 'completed' : ''}`;\n videoCard.innerHTML = `\n
DarkPlay
\n\n \n
\n${video.title}
\n Watch\n \n `;\n videoList.appendChild(videoCard);\n });\n }\n \n videoForm.addEventListener('submit', (e) => {\n e.preventDefault();\n const titleInput = document.getElementById('video-title');\n const urlInput = document.getElementById('video-url');\n \n if (titleInput.value && urlInput.value) {\n addVideo(titleInput.value, urlInput.value);\n titleInput.value = '';\n urlInput.value = '';\n }\n });\n \n loginBtn.addEventListener('click', () => {\n // Google OAuth implementation would go here\n alert('Google Sign-in functionality would be implemented here');\n });\n \n // Initial render\n renderVideos();\n});\n\n---end---\n\nThis creates a gothic-themed YouTube playlist tracker with a dark, elegant design. Key features include:\n\n1. Dark color scheme with gothic accents\n2. Responsive grid layout for video cards\n3. Local storage for saving videos\n4. Completion tracking for each video\n5. Google sign-in placeholder\n6. Beautiful gradient backgrounds and subtle patterns\n7. Hover effects and animations\n8. Accessible form controls\n9. Mobile-responsive design\n10. SEO-friendly structure\n\nThe design uses CSS grid for layout, custom properties for theming, and modern JavaScript for functionality. The gothic aesthetic is achieved through dark colors, elegant typography, and subtle decorative elements.\n\nNote: The Google OAuth implementation is not included as it would require API keys and external dependencies. That would need to be implemented separately using Google's OAuth 2.0 API."+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 313,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2299
+ }
+ }
readme.scroll
Changed around line 1
+ # darkplay.scroll.pub
+ Website generated by Claude from prompt: a very aesthetic gothic looking website where youtube links can be posted along with title in a sequence and which keeps track of all the videos being completed in the youtube playlist ( via syncing youtube account gmail with it )
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const videoForm = document.getElementById('video-form');
+ const videoList = document.getElementById('video-list');
+ const loginBtn = document.getElementById('login-btn');
+
+ let videos = JSON.parse(localStorage.getItem('videos')) || [];
+
+ function saveVideos() {
+ localStorage.setItem('videos', JSON.stringify(videos));
+ }
+
+ function addVideo(title, url) {
+ const video = {
+ id: Date.now(),
+ title,
+ url,
+ completed: false
+ };
+ videos.push(video);
+ saveVideos();
+ renderVideos();
+ }
+
+ function toggleVideoComplete(id) {
+ videos = videos.map(video => {
+ if (video.id === id) {
+ return { ...video, completed: !video.completed };
+ }
+ return video;
+ });
+ saveVideos();
+ renderVideos();
+ }
+
+ function renderVideos() {
+ videoList.innerHTML = '';
+ videos.forEach(video => {
+ const videoCard = document.createElement('div');
+ videoCard.className = `video-card ${video.completed ? 'completed' : ''}`;
+ videoCard.innerHTML = `
+
${video.title}
+ Watch
+
+ ${video.completed ? 'Mark Incomplete' : 'Mark Complete'}
+
+ `;
+ videoList.appendChild(videoCard);
+ });
+ }
+
+ videoForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+ const titleInput = document.getElementById('video-title');
+ const urlInput = document.getElementById('video-url');
+
+ if (titleInput.value && urlInput.value) {
+ addVideo(titleInput.value, urlInput.value);
+ titleInput.value = '';
+ urlInput.value = '';
+ }
+ });
+
+ loginBtn.addEventListener('click', () => {
+ // Google OAuth implementation would go here
+ alert('Google Sign-in functionality would be implemented here');
+ });
+
+ // Initial render
+ renderVideos();
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #1a0f1f;
+ --accent-color: #6b0f1a;
+ --text-color: #e6e6e6;
+ --border-color: #3d2842;
+ --shadow-color: rgba(0, 0, 0, 0.5);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: "Crimson Text", Georgia, serif;
+ background-color: var(--primary-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ background-image: linear-gradient(45deg, #130b15 25%, transparent 25%),
+ linear-gradient(-45deg, #130b15 25%, transparent 25%),
+ linear-gradient(45deg, transparent 75%, #130b15 75%),
+ linear-gradient(-45deg, transparent 75%, #130b15 75%);
+ background-size: 20px 20px;
+ }
+
+ header {
+ padding: 2rem;
+ background: linear-gradient(to bottom, #2a1f2d, var(--primary-color));
+ border-bottom: 2px solid var(--border-color);
+ text-align: center;
+ }
+
+ h1 {
+ font-size: 3.5rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5rem;
+ margin-bottom: 1rem;
+ text-shadow: 0 0 10px var(--accent-color);
+ }
+
+ .gothic-btn {
+ background-color: var(--accent-color);
+ color: var(--text-color);
+ border: none;
+ padding: 0.8rem 1.5rem;
+ font-family: inherit;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 0 10px var(--shadow-color);
+ border-radius: 2px;
+ }
+
+ .gothic-btn:hover {
+ background-color: #8b1423;
+ transform: translateY(-2px);
+ }
+
+ main {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+ }
+
+ .playlist-creator {
+ background: rgba(26, 15, 31, 0.8);
+ padding: 2rem;
+ border: 1px solid var(--border-color);
+ margin-bottom: 3rem;
+ box-shadow: 0 0 20px var(--shadow-color);
+ }
+
+ .form-group {
+ margin-bottom: 1rem;
+ }
+
+ input {
+ width: 100%;
+ padding: 0.8rem;
+ background: rgba(0, 0, 0, 0.2);
+ border: 1px solid var(--border-color);
+ color: var(--text-color);
+ font-family: inherit;
+ }
+
+ .video-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 2rem;
+ }
+
+ .video-card {
+ background: rgba(26, 15, 31, 0.8);
+ border: 1px solid var(--border-color);
+ padding: 1rem;
+ transition: all 0.3s ease;
+ position: relative;
+ }
+
+ .video-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 5px 15px var(--shadow-color);
+ }
+
+ .video-card.completed {
+ border-color: var(--accent-color);
+ }
+
+ .video-card h3 {
+ margin-bottom: 1rem;
+ font-size: 1.2rem;
+ }
+
+ footer {
+ text-align: center;
+ padding: 2rem;
+ background: linear-gradient(to top, #2a1f2d, var(--primary-color));
+ border-top: 2px solid var(--border-color);
+ margin-top: 3rem;
+ }
+
+ @media (max-width: 768px) {
+ h1 {
+ font-size: 2.5rem;
+ }
+
+ main {
+ padding: 1rem;
+ }
+
+ .video-grid {
+ grid-template-columns: 1fr;
+ }
+ }