Spaces:

duqing26
/

code-snapshot-studio

Sleeping

App Files Files Community

duqing2026 commited on 18 days ago

Commit

96b445e

1 Parent(s): 10c714c

升级优化

Browse files

Files changed (5) hide show

README.md +3 -2
app.py +8 -0
static/script.js +208 -0
static/style.css +37 -0
templates/index.html +37 -155

README.md CHANGED Viewed

@@ -15,14 +15,15 @@ Code Snapshot Studio 是一个专为开发者设计的代码截图生成工具
 ## ✨ 核心功能
-- **多语言支持**：支持 Python, JavaScript, Go, Rust, Java 等多种主流编程语言的语法高亮。
 - **主题切换**：内置 Tomorrow (Dark), Okaidia, Solarized Light, Twilight 等多种经典配色主题。
 - **高度定制**：
   - 调整内边距 (Padding)
-  - 切换背景风格 (渐变色/纯色)
   - 窗口控件开关 (Mac 风格红绿灯)
   - 行号显示开关
   - 自定义窗口标题
 - **高清导出**：基于 HTML2Canvas，一键导出 2x 分辨率的高清 PNG 图片。
 - **实时预览**：所见即所得的编辑体验。

 ## ✨ 核心功能
+- **多语言支持**：支持 Python, JavaScript, Go, Rust, Java 等多种主流编程语言的语法高亮，并内置丰富代码示例。
 - **主题切换**：内置 Tomorrow (Dark), Okaidia, Solarized Light, Twilight 等多种经典配色主题。
 - **高度定制**：
   - 调整内边距 (Padding)
+  - 切换多种精美背景风格 (渐变色/纯色)
   - 窗口控件开关 (Mac 风格红绿灯)
   - 行号显示开关
   - 自定义窗口标题
+- **移动端适配**：响应式设计，支持手机端操作。
 - **高清导出**：基于 HTML2Canvas，一键导出 2x 分辨率的高清 PNG 图片。
 - **实时预览**：所见即所得的编辑体验。

app.py CHANGED Viewed

@@ -11,5 +11,13 @@ def index():
 def send_static(path):
     return send_from_directory('static', path)
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860)

 def send_static(path):
     return send_from_directory('static', path)
+@app.errorhandler(404)
+def page_not_found(e):
+    return "Page Not Found", 404
+@app.errorhandler(500)
+def internal_server_error(e):
+    return "Internal Server Error", 500
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860)

static/script.js ADDED Viewed

	@@ -0,0 +1,208 @@

+const { createApp, ref, onMounted, watch, nextTick } = Vue;
+const codeSnippets = {
+    python: `def hello_world():
+    print("Hello, Trae!")
+    return True
+# Build something amazing
+if __name__ == "__main__":
+    hello_world()`,
+    javascript: `function greet(name) {
+    return \`Hello, \${name}!\`;
+}
+// Welcome to Code Snapshot Studio
+console.log(greet('Developer'));`,
+    typescript: `interface User {
+    id: number;
+    name: string;
+}
+const user: User = {
+    id: 1,
+    name: "Trae User"
+};
+console.log(user);`,
+    html: `<!DOCTYPE html>
+<html lang="en">
+<body>
+    <h1>Hello World</h1>
+    <p>Welcome to my website.</p>
+</body>
+</html>`,
+    css: `.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: #f0f0f0;
+}`,
+    java: `public class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}`,
+    go: `package main
+import "fmt"
+func main() {
+    fmt.Println("Hello, Go!")
+}`,
+    rust: `fn main() {
+    println!("Hello, Rust!");
+}`,
+    sql: `SELECT id, username, email
+FROM users
+WHERE status = 'active'
+ORDER BY created_at DESC;`,
+    bash: `#!/bin/bash
+echo "Starting deployment..."
+npm install
+npm run build
+echo "Done!"`,
+    json: `{
+    "name": "code-snapshot-studio",
+    "version": "1.0.0",
+    "private": true
+}`
+};
+createApp({
+    setup() {
+        const code = ref(codeSnippets.python);
+        const language = ref('python');
+        const theme = ref('tomorrow');
+        const padding = ref(64);
+        const showWindowControls = ref(true);
+        const showLineNumbers = ref(true);
+        const showShadow = ref(true);
+        const windowTitle = ref('main.py');
+        const snapshotCard = ref(null);
+        const codeBlock = ref(null);
+        const isExporting = ref(false);
+        const showSidebar = ref(true); // For mobile toggle
+        // Background presets
+        const backgrounds = [
+            { name: 'Gradient 1', value: 'linear-gradient(135deg, #FF9D6C 0%, #BB4E75 100%)' },
+            { name: 'Gradient 2', value: 'linear-gradient(135deg, #85FFBD 0%, #FFFB7D 100%)' },
+            { name: 'Gradient 3', value: 'linear-gradient(135deg, #8EC5FC 0%, #E0C3FC 100%)' },
+            { name: 'Gradient 4', value: 'linear-gradient(135deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)' },
+            { name: 'Solid Dark', value: '#1e293b' },
+            { name: 'Solid Light', value: '#f8fafc' },
+            { name: 'Mesh Gradient', value: 'radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%), radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%), radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%)' }
+        ];
+        const currentBg = ref(backgrounds[3]);
+        const themeBgColor = ref('#2d2d2d'); // Default for Tomorrow
+        const changeTheme = () => {
+            const link = document.getElementById('prism-theme');
+            const baseUrl = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism';
+            if (theme.value === 'default') {
+                link.href = `${baseUrl}.min.css`;
+                themeBgColor.value = '#f5f2f0';
+            } else {
+                link.href = `${baseUrl}-${theme.value}.min.css`;
+                // Update bg color approximation
+                if(theme.value === 'tomorrow') themeBgColor.value = '#2d2d2d';
+                if(theme.value === 'okaidia') themeBgColor.value = '#272822';
+                if(theme.value === 'solarizedlight') themeBgColor.value = '#fdf6e3';
+                if(theme.value === 'twilight') themeBgColor.value = '#141414';
+            }
+        };
+        const refreshHighlight = () => {
+            nextTick(() => {
+                if (window.Prism) {
+                    Prism.highlightAll();
+                }
+            });
+        };
+        // Auto-load snippet when language changes (if code is empty or matches another snippet)
+        const onLanguageChange = () => {
+            // Optional: You could ask user or just automatically switch if it's default
+            // For now, let's just refresh highlight
+            refreshHighlight();
+        };
+        const loadExample = () => {
+            if (codeSnippets[language.value]) {
+                code.value = codeSnippets[language.value];
+            }
+        };
+        watch([code, language, showLineNumbers], () => {
+            refreshHighlight();
+        });
+        onMounted(() => {
+            refreshHighlight();
+            // Check screen size for initial sidebar state
+            if (window.innerWidth < 1024) {
+                showSidebar.value = false;
+            }
+        });
+        const exportImage = async () => {
+            if (!snapshotCard.value || isExporting.value) return;
+            isExporting.value = true;
+            try {
+                // Wait for any renders
+                await nextTick();
+                const canvas = await html2canvas(snapshotCard.value, {
+                    scale: 2, // Retina support
+                    useCORS: true,
+                    backgroundColor: null,
+                    logging: false,
+                    allowTaint: true
+                });
+                const link = document.createElement('a');
+                link.download = `code-snapshot-${Date.now()}.png`;
+                link.href = canvas.toDataURL('image/png');
+                link.click();
+            } catch (err) {
+                console.error('Export failed:', err);
+                alert('导出失败，请重试');
+            } finally {
+                isExporting.value = false;
+            }
+        };
+        const toggleSidebar = () => {
+            showSidebar.value = !showSidebar.value;
+        };
+        return {
+            code,
+            language,
+            theme,
+            padding,
+            showWindowControls,
+            showLineNumbers,
+            showShadow,
+            windowTitle,
+            backgrounds,
+            currentBg,
+            snapshotCard,
+            codeBlock,
+            exportImage,
+            changeTheme,
+            refreshHighlight,
+            themeBgColor,
+            onLanguageChange,
+            loadExample,
+            isExporting,
+            showSidebar,
+            toggleSidebar
+        };
+    }
+}).mount('#app');

static/style.css ADDED Viewed

	@@ -0,0 +1,37 @@

+body {
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    background-color: #f3f4f6;
+}
+.preview-container {
+    transition: all 0.3s ease;
+    overflow: hidden;
+}
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+}
+.code-font {
+    font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
+}
+/* Mobile Sidebar Toggle Transition */
+.sidebar-transition {
+    transition: transform 0.3s ease-in-out;
+}

templates/index.html CHANGED Viewed

@@ -13,57 +13,39 @@
     <link id="prism-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
     <!-- Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        body {
-            font-family: 'Inter', system-ui, -apple-system, sans-serif;
-            background-color: #f3f4f6;
-        }
-        .preview-container {
-            transition: all 0.3s ease;
-            overflow: hidden; /* Ensure content doesn't spill out */
-        }
-        /* Custom Scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: #cbd5e1;
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #94a3b8;
-        }
-        .code-font {
-            font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
-        }
-    </style>
 </head>
 <body class="h-screen flex flex-col overflow-hidden">
     <div id="app" class="flex-1 flex flex-col h-full">
         <!-- Header -->
-        <header class="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between shadow-sm z-10">
             <div class="flex items-center gap-3">
                 <div class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold">
                     <i class="fa-solid fa-camera"></i>
                 </div>
-                <h1 class="text-xl font-bold text-gray-800 tracking-tight">Code Snapshot Studio</h1>
             </div>
             <div class="flex items-center gap-4">
-                <button @click="exportImage" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 shadow-sm">
-                    <i class="fa-solid fa-download"></i>
-                    <span>导出 PNG</span>
                 </button>
             </div>
         </header>
         <!-- Main Content -->
-        <main class="flex-1 flex overflow-hidden">
             <!-- Sidebar Controls -->
-            <aside class="w-80 bg-white border-r border-gray-200 overflow-y-auto p-6 flex flex-col gap-6 shadow-[4px_0_24px_rgba(0,0,0,0.02)] z-10">
                 <!-- Code Input -->
                 <div class="flex flex-col gap-2">
@@ -74,19 +56,24 @@
                 <!-- Language & Theme -->
                 <div class="grid grid-cols-2 gap-4">
                     <div class="flex flex-col gap-2">
-                        <label class="text-sm font-semibold text-gray-700">语言</label>
-                        <select v-model="language" @change="refreshHighlight" class="w-full p-2 border border-gray-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-indigo-500 outline-none">
                             <option value="javascript">JavaScript</option>
                             <option value="python">Python</option>
-                            <option value="html">HTML</option>
-                            <option value="css">CSS</option>
                             <option value="java">Java</option>
                             <option value="go">Go</option>
                             <option value="rust">Rust</option>
                             <option value="sql">SQL</option>
                             <option value="bash">Bash</option>
                             <option value="json">JSON</option>
-                            <option value="typescript">TypeScript</option>
                         </select>
                     </div>
                     <div class="flex flex-col gap-2">
@@ -108,7 +95,8 @@
                         <button v-for="(bg, index) in backgrounds" :key="index"
                             @click="currentBg = bg"
                             :class="['w-8 h-8 rounded-full border-2 transition-all', currentBg.value === bg.value ? 'border-indigo-600 scale-110 shadow-md' : 'border-transparent hover:scale-105']"
-                            :style="{ background: bg.value }">
                         </button>
                     </div>
                 </div>
@@ -142,18 +130,18 @@
             </aside>
             <!-- Preview Area -->
-            <section class="flex-1 bg-gray-100 flex items-center justify-center p-8 overflow-auto relative">
                 <!-- Grid Background Pattern -->
                 <div class="absolute inset-0 opacity-[0.03]"
                     style="background-image: radial-gradient(#000 1px, transparent 1px); background-size: 20px 20px;">
                 </div>
                 <!-- The Snapshot Card -->
-                <div ref="snapshotCard" class="preview-container relative flex items-center justify-center min-w-[400px]"
                      :style="{ background: currentBg.value, padding: padding + 'px' }">
                     <!-- Window -->
-                    <div class="bg-[#1e1e1e] rounded-xl overflow-hidden min-w-[400px] max-w-4xl w-auto"
                          :class="{'shadow-2xl': showShadow, 'shadow-none': !showShadow}"
                          :style="{ backgroundColor: themeBgColor }">
@@ -166,13 +154,13 @@
                                 <div class="w-3 h-3 rounded-full bg-[#27c93f] border border-[#1aab29]"></div>
                             </div>
                             <!-- Title -->
-                            <div class="w-full text-center text-xs font-medium text-gray-400 font-sans select-none">
                                 {{ windowTitle }}
                             </div>
                         </div>
                         <!-- Code Content -->
-                        <div class="p-0 overflow-hidden">
                             <pre class="!m-0 !p-6 !bg-transparent text-sm leading-relaxed outline-none code-font"
                                  :class="{'line-numbers': showLineNumbers}"><code :class="'language-' + language" ref="codeBlock">{{ code }}</code></pre>
                         </div>
@@ -182,113 +170,7 @@
         </main>
     </div>
-    <script>
-        const { createApp, ref, onMounted, watch, nextTick } = Vue;
-        createApp({
-            setup() {
-                const code = ref(`def hello_world():
-    print("Hello, Trae!")
-    return True
-# Build something amazing
-if __name__ == "__main__":
-    hello_world()`);
-                const language = ref('python');
-                const theme = ref('tomorrow');
-                const padding = ref(64);
-                const showWindowControls = ref(true);
-                const showLineNumbers = ref(true);
-                const showShadow = ref(true);
-                const windowTitle = ref('main.py');
-                const snapshotCard = ref(null);
-                const codeBlock = ref(null);
-                // Background presets
-                const backgrounds = [
-                    { name: 'Gradient 1', value: 'linear-gradient(135deg, #FF9D6C 0%, #BB4E75 100%)' },
-                    { name: 'Gradient 2', value: 'linear-gradient(135deg, #85FFBD 0%, #FFFB7D 100%)' },
-                    { name: 'Gradient 3', value: 'linear-gradient(135deg, #8EC5FC 0%, #E0C3FC 100%)' },
-                    { name: 'Gradient 4', value: 'linear-gradient(135deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)' },
-                    { name: 'Solid Dark', value: '#1e293b' },
-                ];
-                const currentBg = ref(backgrounds[3]);
-                const themeBgColor = ref('#2d2d2d'); // Default for Tomorrow
-                const changeTheme = () => {
-                    const link = document.getElementById('prism-theme');
-                    const baseUrl = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism';
-                    if (theme.value === 'default') {
-                        link.href = `${baseUrl}.min.css`;
-                        themeBgColor.value = '#f5f2f0';
-                    } else {
-                        link.href = `${baseUrl}-${theme.value}.min.css`;
-                        // Update bg color approximation
-                        if(theme.value === 'tomorrow') themeBgColor.value = '#2d2d2d';
-                        if(theme.value === 'okaidia') themeBgColor.value = '#272822';
-                        if(theme.value === 'solarizedlight') themeBgColor.value = '#fdf6e3';
-                        if(theme.value === 'twilight') themeBgColor.value = '#141414';
-                    }
-                };
-                const refreshHighlight = () => {
-                    nextTick(() => {
-                        if (window.Prism) {
-                            Prism.highlightAll();
-                        }
-                    });
-                };
-                watch([code, language, showLineNumbers], () => {
-                    refreshHighlight();
-                });
-                onMounted(() => {
-                    refreshHighlight();
-                });
-                const exportImage = async () => {
-                    if (!snapshotCard.value) return;
-                    try {
-                        const canvas = await html2canvas(snapshotCard.value, {
-                            scale: 2, // Retina support
-                            useCORS: true,
-                            backgroundColor: null,
-                            logging: false
-                        });
-                        const link = document.createElement('a');
-                        link.download = `code-snapshot-${Date.now()}.png`;
-                        link.href = canvas.toDataURL('image/png');
-                        link.click();
-                    } catch (err) {
-                        console.error('Export failed:', err);
-                        alert('导出失败，请重试');
-                    }
-                };
-                return {
-                    code,
-                    language,
-                    theme,
-                    padding,
-                    showWindowControls,
-                    showLineNumbers,
-                    showShadow,
-                    windowTitle,
-                    backgrounds,
-                    currentBg,
-                    snapshotCard,
-                    codeBlock,
-                    exportImage,
-                    changeTheme,
-                    refreshHighlight,
-                    themeBgColor
-                };
-            }
-        }).mount('#app');
-    </script>
 </body>
-</html>

     <link id="prism-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
     <!-- Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Custom Styles -->
+    <link rel="stylesheet" href="/static/style.css">
 </head>
 <body class="h-screen flex flex-col overflow-hidden">
     <div id="app" class="flex-1 flex flex-col h-full">
         <!-- Header -->
+        <header class="bg-white border-b border-gray-200 px-4 lg:px-6 py-3 flex items-center justify-between shadow-sm z-30">
             <div class="flex items-center gap-3">
+                <button @click="toggleSidebar" class="lg:hidden text-gray-600 hover:text-indigo-600 transition-colors">
+                    <i class="fa-solid fa-bars text-xl"></i>
+                </button>
                 <div class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold">
                     <i class="fa-solid fa-camera"></i>
                 </div>
+                <h1 class="text-lg lg:text-xl font-bold text-gray-800 tracking-tight truncate">Code Snapshot Studio</h1>
             </div>
             <div class="flex items-center gap-4">
+                <button @click="exportImage" :disabled="isExporting"
+                    class="bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 text-white px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 shadow-sm whitespace-nowrap">
+                    <i v-if="!isExporting" class="fa-solid fa-download"></i>
+                    <i v-else class="fa-solid fa-spinner fa-spin"></i>
+                    <span>{{ isExporting ? '导出中...' : '导出 PNG' }}</span>
                 </button>
             </div>
         </header>
         <!-- Main Content -->
+        <main class="flex-1 flex overflow-hidden relative">
+            <!-- Mobile Backdrop -->
+            <div v-if="showSidebar" @click="showSidebar = false" class="fixed inset-0 bg-black/20 z-20 lg:hidden backdrop-blur-sm transition-opacity"></div>
             <!-- Sidebar Controls -->
+            <aside :class="['w-80 bg-white border-r border-gray-200 overflow-y-auto p-6 flex flex-col gap-6 shadow-[4px_0_24px_rgba(0,0,0,0.02)] z-30 absolute inset-y-0 left-0 lg:static sidebar-transition transform', showSidebar ? 'translate-x-0' : '-translate-x-full lg:translate-x-0']">
                 <!-- Code Input -->
                 <div class="flex flex-col gap-2">
                 <!-- Language & Theme -->
                 <div class="grid grid-cols-2 gap-4">
                     <div class="flex flex-col gap-2">
+                        <label class="text-sm font-semibold text-gray-700 flex justify-between items-center">
+                            语言
+                            <button @click="loadExample" class="text-xs text-indigo-600 hover:text-indigo-800 font-normal hover:underline" title="加载示例代码">
+                                示例
+                            </button>
+                        </label>
+                        <select v-model="language" @change="onLanguageChange" class="w-full p-2 border border-gray-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-indigo-500 outline-none">
                             <option value="javascript">JavaScript</option>
+                            <option value="typescript">TypeScript</option>
                             <option value="python">Python</option>
                             <option value="java">Java</option>
                             <option value="go">Go</option>
                             <option value="rust">Rust</option>
+                            <option value="html">HTML</option>
+                            <option value="css">CSS</option>
                             <option value="sql">SQL</option>
                             <option value="bash">Bash</option>
                             <option value="json">JSON</option>
                         </select>
                     </div>
                     <div class="flex flex-col gap-2">
                         <button v-for="(bg, index) in backgrounds" :key="index"
                             @click="currentBg = bg"
                             :class="['w-8 h-8 rounded-full border-2 transition-all', currentBg.value === bg.value ? 'border-indigo-600 scale-110 shadow-md' : 'border-transparent hover:scale-105']"
+                            :style="{ background: bg.value }"
+                            :title="bg.name">
                         </button>
                     </div>
                 </div>
             </aside>
             <!-- Preview Area -->
+            <section class="flex-1 bg-gray-100 flex items-center justify-center p-4 lg:p-8 overflow-auto relative w-full">
                 <!-- Grid Background Pattern -->
                 <div class="absolute inset-0 opacity-[0.03]"
                     style="background-image: radial-gradient(#000 1px, transparent 1px); background-size: 20px 20px;">
                 </div>
                 <!-- The Snapshot Card -->
+                <div ref="snapshotCard" class="preview-container relative flex items-center justify-center min-w-[300px] lg:min-w-[400px]"
                      :style="{ background: currentBg.value, padding: padding + 'px' }">
                     <!-- Window -->
+                    <div class="bg-[#1e1e1e] rounded-xl overflow-hidden min-w-[300px] max-w-[90vw] lg:max-w-4xl w-auto"
                          :class="{'shadow-2xl': showShadow, 'shadow-none': !showShadow}"
                          :style="{ backgroundColor: themeBgColor }">
                                 <div class="w-3 h-3 rounded-full bg-[#27c93f] border border-[#1aab29]"></div>
                             </div>
                             <!-- Title -->
+                            <div class="w-full text-center text-xs font-medium text-gray-400 font-sans select-none truncate px-12">
                                 {{ windowTitle }}
                             </div>
                         </div>
                         <!-- Code Content -->
+                        <div class="p-0 overflow-hidden overflow-x-auto">
                             <pre class="!m-0 !p-6 !bg-transparent text-sm leading-relaxed outline-none code-font"
                                  :class="{'line-numbers': showLineNumbers}"><code :class="'language-' + language" ref="codeBlock">{{ code }}</code></pre>
                         </div>
         </main>
     </div>
+    <!-- App Logic -->
+    <script src="/static/script.js"></script>
 </body>
+</html>