commit 8444af5889741f20a4cae4f77c44ce660b3a7c13
Author: root <root@hub.scroll.pub>
Date: 2025-01-07 21:21:50 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..0998d03
--- /dev/null
+++ b/body.html
@@ -0,0 +1,44 @@
+<header>
+ <div class="video-container">
+ <video autoplay muted loop id="landingVideo">
+ <source src="landing.mp4" type="video/mp4">
+ Your browser does not support the video tag.
+ </video>
+ </div>
+</header>
+
+<main>
+ <div class="home-indicator">
+ <img src="home.png" alt="Home" id="homeButton">
+ </div>
+
+ <section id="projects" class="hidden">
+ <div class="project-titles">
+ <h2 class="project-title" data-target="project1">Project One</h2>
+ <h2 class="project-title" data-target="project2">Project Two</h2>
+ <h2 class="project-title" data-target="project3">Project Three</h2>
+ </div>
+ </section>
+
+ <section id="project1" class="project-content hidden">
+ <div class="grid-container">
+ <div class="grid-item" data-video="video1.mp4">
+ <img src="thumb1.jpg" alt="Project 1 Image 1">
+ </div>
+ <div class="grid-item" data-video="video2.mp4">
+ <img src="thumb2.jpg" alt="Project 1 Image 2">
+ </div>
+ </div>
+ </section>
+
+ <div id="videoModal" class="modal hidden">
+ <div class="modal-content">
+ <span class="close">×</span>
+ <video controls id="modalVideo">
+ <source src="" type="video/mp4">
+ Your browser does not support the video tag.
+ </video>
+ <a href="" id="videoLink" target="_blank">View Original</a>
+ </div>
+ </div>
+</main>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..61d899b
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://showcase.scroll.pub
+metaTags
+editButton /edit.html
+title My Work Showcase
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..00ff6b4
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "711ad0df-a608-4b58-9f62-8c33ecc61bdf",
+ "object": "chat.completion",
+ "created": 1736284880,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nshowcase.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://showcase.scroll.pub\nmetaTags\neditButton /edit.html\ntitle My Work Showcase\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <div class=\"video-container\">\n <video autoplay muted loop id=\"landingVideo\">\n <source src=\"landing.mp4\" type=\"video/mp4\">\n Your browser does not support the video tag.\n </video>\n </div>\n</header>\n\n<main>\n <div class=\"home-indicator\">\n <img src=\"home.png\" alt=\"Home\" id=\"homeButton\">\n </div>\n\n <section id=\"projects\" class=\"hidden\">\n <div class=\"project-titles\">\n <h2 class=\"project-title\" data-target=\"project1\">Project One</h2>\n <h2 class=\"project-title\" data-target=\"project2\">Project Two</h2>\n <h2 class=\"project-title\" data-target=\"project3\">Project Three</h2>\n </div>\n </section>\n\n <section id=\"project1\" class=\"project-content hidden\">\n <div class=\"grid-container\">\n <div class=\"grid-item\" data-video=\"video1.mp4\">\n <img src=\"thumb1.jpg\" alt=\"Project 1 Image 1\">\n </div>\n <div class=\"grid-item\" data-video=\"video2.mp4\">\n <img src=\"thumb2.jpg\" alt=\"Project 1 Image 2\">\n </div>\n </div>\n </section>\n\n <div id=\"videoModal\" class=\"modal hidden\">\n <div class=\"modal-content\">\n <span class=\"close\">×</span>\n <video controls id=\"modalVideo\">\n <source src=\"\" type=\"video/mp4\">\n Your browser does not support the video tag.\n </video>\n <a href=\"\" id=\"videoLink\" target=\"_blank\">View Original</a>\n </div>\n </div>\n</main>\n---style.css---\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml, body {\n height: 100%;\n overflow: hidden;\n}\n\nheader {\n height: 100vh;\n position: relative;\n}\n\n.video-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n#landingVideo {\n min-width: 100%;\n min-height: 100%;\n object-fit: cover;\n}\n\n.home-indicator {\n position: fixed;\n bottom: 20px;\n right: 20px;\n z-index: 1000;\n cursor: pointer;\n}\n\n.home-indicator img {\n width: 40px;\n height: 40px;\n}\n\n.hidden {\n display: none;\n}\n\n.project-titles {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n}\n\n.project-title {\n font-size: 3rem;\n color: white;\n margin: 20px 0;\n cursor: pointer;\n transition: transform 0.3s ease;\n}\n\n.project-title:hover {\n transform: scale(1.1);\n}\n\n.grid-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n padding: 20px;\n}\n\n.grid-item {\n position: relative;\n cursor: pointer;\n overflow: hidden;\n}\n\n.grid-item img {\n width: 100%;\n height: auto;\n transition: transform 0.3s ease;\n}\n\n.grid-item:hover img {\n transform: scale(1.05);\n}\n\n.modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.9);\n z-index: 1001;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.modal-content {\n position: relative;\n max-width: 90%;\n max-height: 90%;\n}\n\n.close {\n position: absolute;\n top: 10px;\n right: 20px;\n color: white;\n font-size: 2rem;\n cursor: pointer;\n}\n\n#modalVideo {\n max-width: 100%;\n max-height: 80vh;\n}\n\n#videoLink {\n display: block;\n color: white;\n text-align: center;\n margin-top: 10px;\n}\n\n@media (max-width: 768px) {\n .project-title {\n font-size: 2rem;\n }\n \n .grid-container {\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const landingVideo = document.getElementById('landingVideo');\n const homeButton = document.getElementById('homeButton');\n const projectsSection = document.getElementById('projects');\n const projectContents = document.querySelectorAll('.project-content');\n const projectTitles = document.querySelectorAll('.project-title');\n const gridItems = document.querySelectorAll('.grid-item');\n const videoModal = document.getElementById('videoModal');\n const modalVideo = document.getElementById('modalVideo');\n const videoLink = document.getElementById('videoLink');\n const closeModal = document.querySelector('.close');\n\n // Landing page click handler\n landingVideo.addEventListener('click', function() {\n landingVideo.classList.add('hidden');\n projectsSection.classList.remove('hidden');\n });\n\n // Home button click handler\n homeButton.addEventListener('click', function() {\n projectsSection.classList.add('hidden');\n projectContents.forEach(content => content.classList.add('hidden'));\n landingVideo.classList.remove('hidden');\n });\n\n // Project title click handlers\n projectTitles.forEach(title => {\n title.addEventListener('click', function() {\n const target = this.dataset.target;\n projectsSection.classList.add('hidden');\n document.getElementById(target).classList.remove('hidden');\n });\n });\n\n // Grid item click handlers\n gridItems.forEach(item => {\n item.addEventListener('click', function() {\n const videoSrc = this.dataset.video;\n modalVideo.src = videoSrc;\n videoLink.href = videoSrc;\n videoModal.classList.remove('hidden');\n modalVideo.play();\n });\n });\n\n // Close modal handler\n closeModal.addEventListener('click', function() {\n videoModal.classList.add('hidden');\n modalVideo.pause();\n modalVideo.currentTime = 0;\n });\n\n // Close modal when clicking outside\n window.addEventListener('click', function(event) {\n if (event.target === videoModal) {\n videoModal.classList.add('hidden');\n modalVideo.pause();\n modalVideo.currentTime = 0;\n }\n });\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 393,
+ "completion_tokens": 1513,
+ "total_tokens": 1906,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 393
+ },
+ "system_fingerprint": "fp_3a5770e1b4"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..4e1e883
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# showcase1.scroll.pub
+Website generated by DeepSeek from prompt: i want to make a website to showcase my work, i want the site to start with a landing page that displays a full window size video / gif looping that once clicked on would navigate to the next page showing titles that animate when hovered over. once those titles are clicked on it navigates to another page. the whole time there is small home indicator on the bottom right corner of screen that goes back to initial page whenever clicked, it would be a png overlay. the pages that the titles would lead to would have a grid layout of images that would lead to a video player popout within the same page with a small link on the bottom to original video and an "x" indicator on the top right hand side to exit the playback. (only when a video is clicked)
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..f7da437
--- /dev/null
+++ b/script.js
@@ -0,0 +1,61 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const landingVideo = document.getElementById('landingVideo');
+ const homeButton = document.getElementById('homeButton');
+ const projectsSection = document.getElementById('projects');
+ const projectContents = document.querySelectorAll('.project-content');
+ const projectTitles = document.querySelectorAll('.project-title');
+ const gridItems = document.querySelectorAll('.grid-item');
+ const videoModal = document.getElementById('videoModal');
+ const modalVideo = document.getElementById('modalVideo');
+ const videoLink = document.getElementById('videoLink');
+ const closeModal = document.querySelector('.close');
+
+ // Landing page click handler
+ landingVideo.addEventListener('click', function() {
+ landingVideo.classList.add('hidden');
+ projectsSection.classList.remove('hidden');
+ });
+
+ // Home button click handler
+ homeButton.addEventListener('click', function() {
+ projectsSection.classList.add('hidden');
+ projectContents.forEach(content => content.classList.add('hidden'));
+ landingVideo.classList.remove('hidden');
+ });
+
+ // Project title click handlers
+ projectTitles.forEach(title => {
+ title.addEventListener('click', function() {
+ const target = this.dataset.target;
+ projectsSection.classList.add('hidden');
+ document.getElementById(target).classList.remove('hidden');
+ });
+ });
+
+ // Grid item click handlers
+ gridItems.forEach(item => {
+ item.addEventListener('click', function() {
+ const videoSrc = this.dataset.video;
+ modalVideo.src = videoSrc;
+ videoLink.href = videoSrc;
+ videoModal.classList.remove('hidden');
+ modalVideo.play();
+ });
+ });
+
+ // Close modal handler
+ closeModal.addEventListener('click', function() {
+ videoModal.classList.add('hidden');
+ modalVideo.pause();
+ modalVideo.currentTime = 0;
+ });
+
+ // Close modal when clicking outside
+ window.addEventListener('click', function(event) {
+ if (event.target === videoModal) {
+ videoModal.classList.add('hidden');
+ modalVideo.pause();
+ modalVideo.currentTime = 0;
+ }
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..1d84e5a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,140 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html, body {
+ height: 100%;
+ overflow: hidden;
+}
+
+header {
+ height: 100vh;
+ position: relative;
+}
+
+.video-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+#landingVideo {
+ min-width: 100%;
+ min-height: 100%;
+ object-fit: cover;
+}
+
+.home-indicator {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ z-index: 1000;
+ cursor: pointer;
+}
+
+.home-indicator img {
+ width: 40px;
+ height: 40px;
+}
+
+.hidden {
+ display: none;
+}
+
+.project-titles {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+}
+
+.project-title {
+ font-size: 3rem;
+ color: white;
+ margin: 20px 0;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+}
+
+.project-title:hover {
+ transform: scale(1.1);
+}
+
+.grid-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 20px;
+ padding: 20px;
+}
+
+.grid-item {
+ position: relative;
+ cursor: pointer;
+ overflow: hidden;
+}
+
+.grid-item img {
+ width: 100%;
+ height: auto;
+ transition: transform 0.3s ease;
+}
+
+.grid-item:hover img {
+ transform: scale(1.05);
+}
+
+.modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.9);
+ z-index: 1001;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.modal-content {
+ position: relative;
+ max-width: 90%;
+ max-height: 90%;
+}
+
+.close {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+ color: white;
+ font-size: 2rem;
+ cursor: pointer;
+}
+
+#modalVideo {
+ max-width: 100%;
+ max-height: 80vh;
+}
+
+#videoLink {
+ display: block;
+ color: white;
+ text-align: center;
+ margin-top: 10px;
+}
+
+@media (max-width: 768px) {
+ .project-title {
+ font-size: 2rem;
+ }
+
+ .grid-container {
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ }
+}
\ No newline at end of file