Changes to subly.scroll.pub

root

20 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Subly
+   Instant video subtitles in your language
+ 
+ 
+ 
+   
+     
+     
+     
+   
+ 
+   
+     
+       
+         
+       
+     
+     
+       
+     
+   
+ 
+ 
+ 
+   Made with ❤️ for accessible video content
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://subly.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Subly - Instant Video Subtitles
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "904e48b5-8f02-472e-963b-509d0f6ae2f8",
+   "object": "chat.completion",
+   "created": 1735826637,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nsubly.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://subly.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Subly - Instant Video Subtitles\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  Subly\n  Instant video subtitles in your language
\n\n\n\n  \n    \n    \n    \n  \n\n  \n    \n      \n        \n      \n    
\n    \n      
\n    
\n  \n\n\n\n  Made with ❤️ for accessible video content
\n\n---style.css---\n:root {\n  --primary-color: #2563eb;\n  --secondary-color: #1e40af;\n  --background-color: #f8fafc;\n  --text-color: #1e293b;\n  --border-radius: 8px;\n  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\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, 'Open Sans', 'Helvetica Neue', sans-serif;\n  background-color: var(--background-color);\n  color: var(--text-color);\n  line-height: 1.6;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\nheader {\n  text-align: center;\n  padding: 2rem;\n  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n  color: white;\n  margin-bottom: 2rem;\n}\n\nheader h1 {\n  font-size: 2.5rem;\n  margin-bottom: 0.5rem;\n}\n\nmain {\n  flex: 1;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 0 1rem;\n  width: 100%;\n}\n\n.input-section {\n  display: grid;\n  gap: 1rem;\n  margin-bottom: 2rem;\n}\n\ninput, select, button {\n  padding: 0.75rem;\n  border: 1px solid #ddd;\n  border-radius: var(--border-radius);\n  font-size: 1rem;\n}\n\nbutton {\n  background-color: var(--primary-color);\n  color: white;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.2s;\n}\n\nbutton:hover {\n  background-color: var(--secondary-color);\n}\n\n.result-section {\n  display: none;\n}\n\n.video-container {\n  position: relative;\n  padding-bottom: 56.25%;\n  height: 0;\n  overflow: hidden;\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow);\n  margin-bottom: 1rem;\n}\n\n.video-container video {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.subtitle-display {\n  background: white;\n  padding: 1rem;\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow);\n  min-height: 60px;\n}\n\n.subtitle-text {\n  font-size: 1.1rem;\n  text-align: center;\n}\n\nfooter {\n  text-align: center;\n  padding: 1rem;\n  margin-top: 2rem;\n  background-color: white;\n}\n\n@media (max-width: 600px) {\n  header h1 {\n    font-size: 2rem;\n  }\n  \n  .input-section {\n    grid-template-columns: 1fr;\n  }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  const videoUrlInput = document.getElementById('video-url');\n  const languageSelect = document.getElementById('language-select');\n  const generateBtn = document.getElementById('generate-btn');\n  const resultSection = document.querySelector('.result-section');\n  const videoElement = document.querySelector('video');\n  const subtitleTrack = document.querySelector('track');\n  const subtitleText = document.querySelector('.subtitle-text');\n\n  generateBtn.addEventListener('click', async () => {\n    const videoUrl = videoUrlInput.value;\n    const language = languageSelect.value;\n\n    if (!videoUrl) {\n      alert('Please enter a video URL');\n      return;\n    }\n\n    try {\n      // Simulate subtitle generation (replace with actual API call)\n      const subtitles = await generateSubtitles(videoUrl, language);\n      \n      // Update video source and subtitles\n      videoElement.src = videoUrl;\n      subtitleTrack.src = subtitles;\n      \n      // Show result section\n      resultSection.classList.remove('hidden');\n      \n      // Update displayed subtitle text\n      videoElement.textTracks[0].mode = 'hidden';\n      videoElement.textTracks[0].oncuechange = () => {\n        const cue = videoElement.textTracks[0].activeCues[0];\n        subtitleText.textContent = cue ? cue.text : '';\n      };\n    } catch (error) {\n      console.error('Error:', error);\n      alert('Failed to generate subtitles. Please try again.');\n    }\n  });\n\n  // Mock subtitle generation function\n  function generateSubtitles(videoUrl, language) {\n    return new Promise((resolve) => {\n      setTimeout(() => {\n        // This would be replaced with actual subtitle file URL\n        resolve(`/subtitles/${language}.vtt`);\n      }, 1000);\n    });\n  }\n});\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 253,
+     "completion_tokens": 1374,
+     "total_tokens": 1627,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 253
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # subly.scroll.pub

+ Website generated by DeepSeek from prompt: 帮我创建一个网站，用户只需要输入视频链接，既可以选择语言既可以看到对应语言的字幕。

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   const videoUrlInput = document.getElementById('video-url');
+   const languageSelect = document.getElementById('language-select');
+   const generateBtn = document.getElementById('generate-btn');
+   const resultSection = document.querySelector('.result-section');
+   const videoElement = document.querySelector('video');
+   const subtitleTrack = document.querySelector('track');
+   const subtitleText = document.querySelector('.subtitle-text');
+ 
+   generateBtn.addEventListener('click', async () => {
+     const videoUrl = videoUrlInput.value;
+     const language = languageSelect.value;
+ 
+     if (!videoUrl) {
+       alert('Please enter a video URL');
+       return;
+     }
+ 
+     try {
+       // Simulate subtitle generation (replace with actual API call)
+       const subtitles = await generateSubtitles(videoUrl, language);
+ 
+       // Update video source and subtitles
+       videoElement.src = videoUrl;
+       subtitleTrack.src = subtitles;
+ 
+       // Show result section
+       resultSection.classList.remove('hidden');
+ 
+       // Update displayed subtitle text
+       videoElement.textTracks[0].mode = 'hidden';
+       videoElement.textTracks[0].oncuechange = () => {
+         const cue = videoElement.textTracks[0].activeCues[0];
+         subtitleText.textContent = cue ? cue.text : '';
+       };
+     } catch (error) {
+       console.error('Error:', error);
+       alert('Failed to generate subtitles. Please try again.');
+     }
+   });
+ 
+   // Mock subtitle generation function
+   function generateSubtitles(videoUrl, language) {
+     return new Promise((resolve) => {
+       setTimeout(() => {
+         // This would be replaced with actual subtitle file URL
+         resolve(`/subtitles/${language}.vtt`);
+       }, 1000);
+     });
+   }
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #2563eb;
+   --secondary-color: #1e40af;
+   --background-color: #f8fafc;
+   --text-color: #1e293b;
+   --border-radius: 8px;
+   --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+   background-color: var(--background-color);
+   color: var(--text-color);
+   line-height: 1.6;
+   min-height: 100vh;
+   display: flex;
+   flex-direction: column;
+ }
+ 
+ header {
+   text-align: center;
+   padding: 2rem;
+   background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+   color: white;
+   margin-bottom: 2rem;
+ }
+ 
+ header h1 {
+   font-size: 2.5rem;
+   margin-bottom: 0.5rem;
+ }
+ 
+ main {
+   flex: 1;
+   max-width: 800px;
+   margin: 0 auto;
+   padding: 0 1rem;
+   width: 100%;
+ }
+ 
+ .input-section {
+   display: grid;
+   gap: 1rem;
+   margin-bottom: 2rem;
+ }
+ 
+ input, select, button {
+   padding: 0.75rem;
+   border: 1px solid #ddd;
+   border-radius: var(--border-radius);
+   font-size: 1rem;
+ }
+ 
+ button {
+   background-color: var(--primary-color);
+   color: white;
+   border: none;
+   cursor: pointer;
+   transition: background-color 0.2s;
+ }
+ 
+ button:hover {
+   background-color: var(--secondary-color);
+ }
+ 
+ .result-section {
+   display: none;
+ }
+ 
+ .video-container {
+   position: relative;
+   padding-bottom: 56.25%;
+   height: 0;
+   overflow: hidden;
+   border-radius: var(--border-radius);
+   box-shadow: var(--shadow);
+   margin-bottom: 1rem;
+ }
+ 
+ .video-container video {
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+ }
+ 
+ .subtitle-display {
+   background: white;
+   padding: 1rem;
+   border-radius: var(--border-radius);
+   box-shadow: var(--shadow);
+   min-height: 60px;
+ }
+ 
+ .subtitle-text {
+   font-size: 1.1rem;
+   text-align: center;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 1rem;
+   margin-top: 2rem;
+   background-color: white;
+ }
+ 
+ @media (max-width: 600px) {
+   header h1 {
+     font-size: 2rem;
+   }
+ 
+   .input-section {
+     grid-template-columns: 1fr;
+   }
+ }