commit 6b79d3f0efbc0a2a7f8ead4648a2528de2b23a7d
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 20:55:59 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..f1ee50a
--- /dev/null
+++ b/body.html
@@ -0,0 +1,30 @@
+<header>
+ <h1>DarkPlay</h1>
+ <div class="auth-section">
+ <button id="login-btn" class="gothic-btn">Sign in with Google</button>
+ </div>
+</header>
+
+<main>
+ <section class="playlist-creator">
+ <h2>Create New Entry</h2>
+ <form id="video-form">
+ <div class="form-group">
+ <input type="text" id="video-title" placeholder="Video Title" required>
+ </div>
+ <div class="form-group">
+ <input type="url" id="video-url" placeholder="YouTube URL" required>
+ </div>
+ <button type="submit" class="gothic-btn">Add Video</button>
+ </form>
+ </section>
+
+ <section class="playlist-container">
+ <h2>Your Dark Collection</h2>
+ <div id="video-list" class="video-grid"></div>
+ </section>
+</main>
+
+<footer>
+ <p>DarkPlay - Embrace the Shadows</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..55fa34d
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+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
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..30ce88b
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "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<header>\n <h1>DarkPlay</h1>\n <div class=\"auth-section\">\n <button id=\"login-btn\" class=\"gothic-btn\">Sign in with Google</button>\n </div>\n</header>\n\n<main>\n <section class=\"playlist-creator\">\n <h2>Create New Entry</h2>\n <form id=\"video-form\">\n <div class=\"form-group\">\n <input type=\"text\" id=\"video-title\" placeholder=\"Video Title\" required>\n </div>\n <div class=\"form-group\">\n <input type=\"url\" id=\"video-url\" placeholder=\"YouTube URL\" required>\n </div>\n <button type=\"submit\" class=\"gothic-btn\">Add Video</button>\n </form>\n </section>\n\n <section class=\"playlist-container\">\n <h2>Your Dark Collection</h2>\n <div id=\"video-list\" class=\"video-grid\"></div>\n </section>\n</main>\n\n<footer>\n <p>DarkPlay - Embrace the Shadows</p>\n</footer>\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 <h3>${video.title}</h3>\n <a href=\"${video.url}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"gothic-btn\">Watch</a>\n <button onclick=\"toggleVideoComplete(${video.id})\" class=\"gothic-btn\">\n ${video.completed ? 'Mark Incomplete' : 'Mark Complete'}\n </button>\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
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..1ef2c95
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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 )
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..699c59a
--- /dev/null
+++ b/script.js
@@ -0,0 +1,70 @@
+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 = `
+ <h3>${video.title}</h3>
+ <a href="${video.url}" target="_blank" rel="noopener noreferrer" class="gothic-btn">Watch</a>
+ <button onclick="toggleVideoComplete(${video.id})" class="gothic-btn">
+ ${video.completed ? 'Mark Incomplete' : 'Mark Complete'}
+ </button>
+ `;
+ 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();
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c645137
--- /dev/null
+++ b/style.css
@@ -0,0 +1,135 @@
+: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;
+ }
+}