Spaces:
Runtime error
Runtime error
| <html lang="zh"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>URL Parser & Screenshot Tool</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| line-height: 1.6; | |
| padding: 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| background-color: #f5f5f5; | |
| } | |
| .container { | |
| background-color: white; | |
| padding: 2rem; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| h1 { | |
| color: #333; | |
| margin-bottom: 1.5rem; | |
| text-align: center; | |
| } | |
| .input-group { | |
| margin-bottom: 2rem; | |
| } | |
| #inputBox { | |
| width: 100%; | |
| padding: 0.8rem; | |
| font-size: 1rem; | |
| border: 2px solid #ddd; | |
| border-radius: 4px; | |
| transition: border-color 0.3s; | |
| } | |
| #inputBox:focus { | |
| outline: none; | |
| border-color: #007bff; | |
| } | |
| #urls { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.8rem; | |
| } | |
| #urls a { | |
| color: #007bff; | |
| text-decoration: none; | |
| padding: 0.5rem; | |
| background-color: #f8f9fa; | |
| border-radius: 4px; | |
| transition: background-color 0.3s; | |
| } | |
| #urls a:hover { | |
| background-color: #e9ecef; | |
| text-decoration: underline; | |
| } | |
| .screenshot-btn { | |
| display: inline-block; | |
| padding: 0.4rem 0.8rem; | |
| margin-left: 0.5rem; | |
| background-color: #28a745; | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 0.9rem; | |
| transition: background-color 0.3s; | |
| } | |
| .screenshot-btn:hover { | |
| background-color: #218838; | |
| } | |
| .preview-container { | |
| margin-top: 1rem; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .preview-image { | |
| max-width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| .loading { | |
| text-align: center; | |
| padding: 2rem; | |
| color: #666; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>URL 解析 & 截图工具</h1> | |
| <div class="input-group"> | |
| <input type="text" | |
| id="inputBox" | |
| placeholder="粘贴包含URL的文本..." | |
| onblur="parseUrls()" | |
| onchange="parseUrls()"> | |
| </div> | |
| <div id="urls"></div> | |
| <div id="preview-container" class="preview-container" style="display: none;"> | |
| <div id="loading" class="loading">加载中...</div> | |
| <img id="preview-image" class="preview-image" style="display: none;"> | |
| </div> | |
| </div> | |
| <script> | |
| async function takeScreenshot(url) { | |
| const previewContainer = document.getElementById('preview-container'); | |
| const loading = document.getElementById('loading'); | |
| const previewImage = document.getElementById('preview-image'); | |
| previewContainer.style.display = 'block'; | |
| loading.style.display = 'block'; | |
| previewImage.style.display = 'none'; | |
| try { | |
| const response = await fetch(`/screenshot?url=${encodeURIComponent(url)}`); | |
| if (response.ok) { | |
| const blob = await response.blob(); | |
| const imageUrl = URL.createObjectURL(blob); | |
| previewImage.src = imageUrl; | |
| previewImage.style.display = 'block'; | |
| } else { | |
| loading.textContent = '截图失败，请重试'; | |
| } | |
| } catch (error) { | |
| loading.textContent = '截图失败，请重试'; | |
| } finally { | |
| loading.style.display = 'none'; | |
| } | |
| } | |
| function parseUrls() { | |
| const inputBox = document.getElementById('inputBox'); | |
| const pastedText = inputBox.value; | |
| const urlPattern = /(\b(?:https?:\/\/)?(?:[\da-z\.-]+)\.(?:[a-z\.]{2,6})(?:[\/\w\.-]*)*\/?(?:\?[^\s]*)?)/gi; | |
| const urls = pastedText.match(urlPattern); | |
| if (urls) { | |
| const urlsContainer = document.getElementById('urls'); | |
| urlsContainer.innerHTML = ''; | |
| urls.forEach(url => { | |
| let fullUrl = url; | |
| if (!/^https?:\/\//i.test(url)) { | |
| fullUrl = 'https://' + url; | |
| } | |
| const urlContainer = document.createElement('div'); | |
| urlContainer.style.display = 'flex'; | |
| urlContainer.style.alignItems = 'center'; | |
| const linkElement = document.createElement('a'); | |
| linkElement.href = fullUrl; | |
| linkElement.textContent = fullUrl; | |
| linkElement.target = '_blank'; | |
| const screenshotBtn = document.createElement('button'); | |
| screenshotBtn.textContent = '截图'; | |
| screenshotBtn.className = 'screenshot-btn'; | |
| screenshotBtn.onclick = () => { | |
| takeScreenshot(fullUrl); | |
| }; | |
| urlContainer.appendChild(linkElement); | |
| urlContainer.appendChild(screenshotBtn); | |
| urlsContainer.appendChild(urlContainer); | |
| }); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |