Spaces:

duqing026
/

error-page-studio

Sleeping

App Files Files Community

duqing2026 commited on 16 days ago

Commit

2e4ea36

0 Parent(s):

Initial commit: Error Page Studio MVP

Browse files

Files changed (6) hide show

Dockerfile +10 -0
README.md +91 -0
app.py +39 -0
requirements.txt +2 -0
templates/export_theme.html +272 -0
templates/index.html +266 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,10 @@

+FROM python:3.9-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md ADDED Viewed

	@@ -0,0 +1,91 @@

+---
+title: 404 页面设计工坊
+emoji: 🚧
+colorFrom: red
+colorTo: gray
+sdk: docker
+pinned: false
+short_description: 可视化设计并导出带有小游戏的创意 404 页面
+---
+# 404 页面设计工坊 (Error Page Studio)
+[English](./README_EN.md) | 中文
+**404 页面设计工坊** 是一款专为独立开发者、创作者和初创公司设计的可视化工具，帮助你快速生成美观、有趣且能留住用户的 404 错误页面。
+不再让你的用户面对枯燥的 "Not Found" —— 用创意和游戏挽回流失的流量！
+## ✨ 核心功能
+- **🎨 多种主题风格**：
+  - **Modern (现代)**：简洁大气，适配大多数 SaaS 产品。
+  - **Retro (复古)**：极客风格，终端字体，致敬经典。
+  - **Minimal (极简)**：极致留白，专注于核心信息。
+- **👻 创意插画**：
+  - 内置幽灵 (Ghost)、机器人 (Robot)、心碎 (Broken Heart) 等纯 CSS/SVG 插画，无需外部资源。
+- **🎮 嵌入式小游戏**：
+  - **贪吃蛇 (Snake)**：一键开启。当用户迷路时，让他们玩把游戏冷静一下（有效降低跳出率！）。
+  - 游戏代码完全内嵌，无需额外依赖。
+- **⚡️ 实时预览**：
+  - 支持桌面端 (Desktop) 和移动端 (Mobile) 尺寸切换预览。
+  - 所见即所得。
+- **📦 一键导出**：
+  - 生成**单文件 HTML**。
+  - 所有 CSS、JS、SVG 全部内联 (Inlined)。
+  - 0 依赖，直接丢到你的 Nginx/Apache/Vercel 的 `public` 目录即可使用。
+## 🚀 快速开始
+### 在 Hugging Face Spaces 运行
+本项目已适配 Hugging Face Spaces (Docker SDK)。
+### 本地运行
+1. 克隆项目：
+```bash
+git clone https://github.com/your-username/error-page-studio.git
+cd error-page-studio
+```
+2. 安装依赖：
+```bash
+pip install -r requirements.txt
+```
+3. 启动服务：
+```bash
+python app.py
+```
+4. 访问：http://localhost:7860
+### Docker 运行
+```bash
+docker build -t error-page-studio .
+docker run -p 7860:7860 error-page-studio
+```
+## 🛠 技术栈
+- **Frontend**: Vue 3 (CDN), Tailwind CSS (CDN)
+- **Backend**: Flask (Python 3.9)
+- **Export Engine**: Jinja2 Template Rendering
+- **Deployment**: Docker
+## 📝 为什么要关注 404 页面？
+404 页面是用户体验中常被忽视的一环。一个好的 404 页面应该：
+1. **安抚用户情绪**（幽默、美观）。
+2. **提供解决方案**（返回首页按钮）。
+3. **留住用户**（小游戏、彩蛋）。
+---
+Made with ❤️ by [Du Qing]

app.py ADDED Viewed

	@@ -0,0 +1,39 @@

+from flask import Flask, render_template, request, send_file, make_response
+import io
+app = Flask(__name__)
+@app.route('/')
+def index():
+    return render_template('index.html')
+@app.route('/preview', methods=['POST'])
+def preview():
+    """
+    Returns the HTML for the preview iframe.
+    """
+    data = request.json
+    return render_template('export_theme.html', **data)
+@app.route('/download', methods=['POST'])
+def download():
+    """
+    Returns the HTML as a downloadable file.
+    """
+    data = request.json
+    html_content = render_template('export_theme.html', **data)
+    # Create a file-like object
+    mem = io.BytesIO()
+    mem.write(html_content.encode('utf-8'))
+    mem.seek(0)
+    return send_file(
+        mem,
+        as_attachment=True,
+        download_name='404.html',
+        mimetype='text/html'
+    )
+if __name__ == '__main__':
+    app.run(debug=True, port=7860, host='0.0.0.0')

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ flask
2	+ gunicorn

templates/export_theme.html ADDED Viewed

	@@ -0,0 +1,272 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }}</title>
+    <style>
+        :root {
+            --bg-color: {{ bgColor }};
+            --text-color: {{ textColor }};
+            --accent-color: {{ accentColor }};
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            text-align: center;
+            overflow-x: hidden;
+        }
+        .container {
+            max-width: 600px;
+            padding: 20px;
+        }
+        h1 {
+            font-size: 5rem;
+            margin: 0;
+            line-height: 1;
+            font-weight: 800;
+            color: var(--accent-color);
+        }
+        p {
+            font-size: 1.5rem;
+            margin: 20px 0;
+            opacity: 0.8;
+        }
+        .btn {
+            display: inline-block;
+            padding: 12px 24px;
+            background-color: var(--accent-color);
+            color: var(--bg-color);
+            text-decoration: none;
+            border-radius: 6px;
+            font-weight: 600;
+            transition: opacity 0.2s;
+            margin-top: 20px;
+        }
+        .btn:hover {
+            opacity: 0.9;
+        }
+        /* Retro Theme Overrides */
+        {% if theme == 'retro' %}
+        body {
+            font-family: 'Courier New', Courier, monospace;
+        }
+        h1 {
+            text-shadow: 2px 2px 0px var(--text-color);
+        }
+        .btn {
+            border-radius: 0;
+            border: 2px solid var(--text-color);
+            background: transparent;
+            color: var(--text-color);
+        }
+        .btn:hover {
+            background: var(--text-color);
+            color: var(--bg-color);
+        }
+        {% endif %}
+        /* Minimal Theme Overrides */
+        {% if theme == 'minimal' %}
+        h1 {
+            font-size: 3rem;
+            font-weight: 300;
+        }
+        p {
+            font-size: 1rem;
+        }
+        .btn {
+            border-radius: 50px;
+        }
+        {% endif %}
+        /* Illustrations */
+        .illustration {
+            margin-bottom: 30px;
+            height: 150px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .ghost {
+            font-size: 100px;
+            animation: float 3s ease-in-out infinite;
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        /* Game Container */
+        #game-container {
+            margin-top: 40px;
+            display: none;
+            border: 2px solid var(--text-color);
+            padding: 10px;
+            background: rgba(0,0,0,0.05);
+        }
+        canvas {
+            background: var(--bg-color);
+            display: block;
+        }
+        .game-toggle {
+            margin-top: 20px;
+            font-size: 0.9rem;
+            cursor: pointer;
+            text-decoration: underline;
+            color: var(--accent-color);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="illustration">
+            {% if illustration == 'ghost' %}
+                <div class="ghost">👻</div>
+            {% elif illustration == 'robot' %}
+                <div class="ghost">🤖</div>
+            {% elif illustration == 'broken' %}
+                <div class="ghost">💔</div>
+            {% elif illustration == 'planet' %}
+                <div class="ghost">🪐</div>
+            {% endif %}
+        </div>
+        <h1>{{ title }}</h1>
+        <p>{{ message }}</p>
+        <a href="{{ buttonLink }}" class="btn">{{ buttonText }}</a>
+        {% if showGame %}
+        <div class="game-toggle" onclick="toggleGame()">Play Snake while you wait?</div>
+        <div id="game-container">
+            <canvas id="gameCanvas" width="300" height="300"></canvas>
+            <div style="font-size: 0.8rem; margin-top: 5px;">Use Arrow Keys to Move</div>
+        </div>
+        <script>
+            let gameRunning = false;
+            let canvas, ctx;
+            let snake = [{x: 10, y: 10}];
+            let food = {x: 15, y: 15};
+            let dx = 0;
+            let dy = 0;
+            let score = 0;
+            let gridSize = 15;
+            let tileCount = 20;
+            let gameInterval;
+            function toggleGame() {
+                const container = document.getElementById('game-container');
+                if (container.style.display === 'block') {
+                    container.style.display = 'none';
+                    gameRunning = false;
+                    clearInterval(gameInterval);
+                } else {
+                    container.style.display = 'block';
+                    if (!canvas) initGame();
+                    resetGame();
+                }
+            }
+            function initGame() {
+                canvas = document.getElementById('gameCanvas');
+                ctx = canvas.getContext('2d');
+                document.addEventListener('keydown', keyDownEvent);
+            }
+            function resetGame() {
+                snake = [{x: 10, y: 10}];
+                food = {x: 15, y: 15};
+                dx = 0;
+                dy = 0;
+                score = 0;
+                gameRunning = true;
+                if (gameInterval) clearInterval(gameInterval);
+                gameInterval = setInterval(drawGame, 100);
+            }
+            function drawGame() {
+                if (!gameRunning) return;
+                // Move snake
+                const head = {x: snake[0].x + dx, y: snake[0].y + dy};
+                // Wrap around
+                if (head.x < 0) head.x = tileCount - 1;
+                if (head.x >= tileCount) head.x = 0;
+                if (head.y < 0) head.y = tileCount - 1;
+                if (head.y >= tileCount) head.y = 0;
+                // Check collision with self
+                for (let i = 0; i < snake.length; i++) {
+                    if (head.x === snake[i].x && head.y === snake[i].y) {
+                        // Game Over logic (soft reset)
+                        snake = [{x: 10, y: 10}];
+                        dx = 0;
+                        dy = 0;
+                    }
+                }
+                snake.unshift(head);
+                // Check food
+                if (head.x === food.x && head.y === food.y) {
+                    score++;
+                    food = {
+                        x: Math.floor(Math.random() * tileCount),
+                        y: Math.floor(Math.random() * tileCount)
+                    };
+                } else {
+                    snake.pop();
+                }
+                // Draw
+                ctx.fillStyle = '{{ bgColor }}';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                // Snake
+                ctx.fillStyle = '{{ accentColor }}';
+                for (let i = 0; i < snake.length; i++) {
+                    ctx.fillRect(snake[i].x * gridSize, snake[i].y * gridSize, gridSize - 2, gridSize - 2);
+                }
+                // Food
+                ctx.fillStyle = '{{ textColor }}';
+                ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
+            }
+            function keyDownEvent(e) {
+                switch(e.keyCode) {
+                    case 37: if(dx !== 1) { dx = -1; dy = 0; } break;
+                    case 38: if(dy !== 1) { dx = 0; dy = -1; } break;
+                    case 39: if(dx !== -1) { dx = 1; dy = 0; } break;
+                    case 40: if(dy !== -1) { dx = 0; dy = 1; } break;
+                }
+            }
+        </script>
+        {% endif %}
+    </div>
+</body>
+</html>

templates/index.html ADDED Viewed

	@@ -0,0 +1,266 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Error Page Studio | 404 页面设计工坊</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        [v-cloak] { display: none; }
+        .color-input-wrapper {
+            position: relative;
+            overflow: hidden;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            border: 2px solid #e5e7eb;
+        }
+        .color-input {
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-800 h-screen overflow-hidden">
+    <div id="app" v-cloak class="flex h-full">
+        <!-- Sidebar / Config -->
+        <div class="w-1/3 min-w-[350px] bg-white border-r border-gray-200 flex flex-col h-full z-10 shadow-lg">
+            <div class="p-5 border-b border-gray-100 flex items-center justify-between">
+                <h1 class="text-xl font-bold text-gray-900"><i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>Error Page Studio</h1>
+                <span class="text-xs bg-red-100 text-red-600 px-2 py-1 rounded-full">Beta</span>
+            </div>
+            <div class="flex-1 overflow-y-auto p-5 space-y-6">
+                <!-- Theme Selection -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-3">Theme Style</label>
+                    <div class="grid grid-cols-3 gap-2">
+                        <button
+                            v-for="t in ['modern', 'retro', 'minimal']"
+                            :key="t"
+                            @click="config.theme = t"
+                            :class="{'ring-2 ring-red-500 bg-red-50': config.theme === t, 'bg-gray-50 hover:bg-gray-100': config.theme !== t}"
+                            class="p-2 rounded-lg border border-gray-200 text-sm capitalize transition-all"
+                        >
+                            {{ t }}
+                        </button>
+                    </div>
+                </div>
+                <!-- Colors -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-3">Colors</label>
+                    <div class="flex space-x-6">
+                        <div class="flex flex-col items-center">
+                            <div class="color-input-wrapper" :style="{ backgroundColor: config.bgColor }">
+                                <input type="color" v-model="config.bgColor" class="color-input">
+                            </div>
+                            <span class="text-xs mt-1 text-gray-500">Bg</span>
+                        </div>
+                        <div class="flex flex-col items-center">
+                            <div class="color-input-wrapper" :style="{ backgroundColor: config.textColor }">
+                                <input type="color" v-model="config.textColor" class="color-input">
+                            </div>
+                            <span class="text-xs mt-1 text-gray-500">Text</span>
+                        </div>
+                        <div class="flex flex-col items-center">
+                            <div class="color-input-wrapper" :style="{ backgroundColor: config.accentColor }">
+                                <input type="color" v-model="config.accentColor" class="color-input">
+                            </div>
+                            <span class="text-xs mt-1 text-gray-500">Accent</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Content -->
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Heading</label>
+                        <input type="text" v-model="config.title" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-red-500 focus:border-red-500 text-sm">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
+                        <textarea v-model="config.message" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-red-500 focus:border-red-500 text-sm"></textarea>
+                    </div>
+                </div>
+                <!-- Button -->
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Button Text</label>
+                        <input type="text" v-model="config.buttonText" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Button Link</label>
+                        <input type="text" v-model="config.buttonLink" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm">
+                    </div>
+                </div>
+                <!-- Illustration -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-3">Illustration</label>
+                    <div class="grid grid-cols-4 gap-2">
+                        <button
+                            v-for="ill in illustrations"
+                            :key="ill.id"
+                            @click="config.illustration = ill.id"
+                            :class="{'ring-2 ring-red-500 bg-red-50': config.illustration === ill.id}"
+                            class="p-2 rounded-lg border border-gray-200 text-2xl flex items-center justify-center hover:bg-gray-50"
+                        >
+                            {{ ill.icon }}
+                        </button>
+                    </div>
+                </div>
+                <!-- Game -->
+                <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg border border-gray-200">
+                    <div>
+                        <span class="block text-sm font-medium text-gray-900">Embedded Game</span>
+                        <span class="block text-xs text-gray-500">Add Snake game for retention</span>
+                    </div>
+                    <label class="relative inline-flex items-center cursor-pointer">
+                        <input type="checkbox" v-model="config.showGame" class="sr-only peer">
+                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-500"></div>
+                    </label>
+                </div>
+            </div>
+            <!-- Footer Actions -->
+            <div class="p-5 border-t border-gray-200 bg-gray-50">
+                <button
+                    @click="download"
+                    class="w-full flex items-center justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all"
+                >
+                    <i class="fas fa-download mr-2"></i> Download HTML
+                </button>
+            </div>
+        </div>
+        <!-- Preview Area -->
+        <div class="flex-1 bg-gray-100 flex flex-col relative overflow-hidden">
+            <div class="absolute top-4 right-4 z-10 flex space-x-2 bg-white rounded-lg shadow p-1">
+                <button @click="viewMode = 'desktop'" :class="{'text-red-500 bg-red-50': viewMode === 'desktop'}" class="p-2 rounded hover:bg-gray-50 transition-colors"><i class="fas fa-desktop"></i></button>
+                <button @click="viewMode = 'mobile'" :class="{'text-red-500 bg-red-50': viewMode === 'mobile'}" class="p-2 rounded hover:bg-gray-50 transition-colors"><i class="fas fa-mobile-alt"></i></button>
+            </div>
+            <div class="flex-1 flex items-center justify-center p-8 overflow-hidden">
+                <div
+                    class="bg-white shadow-2xl transition-all duration-300 overflow-hidden relative"
+                    :style="{
+                        width: viewMode === 'desktop' ? '100%' : '375px',
+                        height: viewMode === 'desktop' ? '100%' : '667px',
+                        maxHeight: '100%',
+                        borderRadius: viewMode === 'desktop' ? '8px' : '20px',
+                        border: viewMode === 'mobile' ? '8px solid #333' : 'none'
+                    }"
+                >
+                    <iframe id="preview-frame" class="w-full h-full border-none"></iframe>
+                    <!-- Loading Overlay -->
+                    <div v-if="loading" class="absolute inset-0 bg-white/50 flex items-center justify-center backdrop-blur-sm">
+                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-red-500"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        const { createApp, ref, watch, onMounted } = Vue;
+        createApp({
+            setup() {
+                const viewMode = ref('desktop');
+                const loading = ref(false);
+                const config = ref({
+                    theme: 'modern',
+                    title: '404',
+                    message: 'Oops! The page you are looking for has vanished into the void.',
+                    buttonText: 'Back to Safety',
+                    buttonLink: '/',
+                    bgColor: '#ffffff',
+                    textColor: '#1f2937',
+                    accentColor: '#ef4444',
+                    showGame: false,
+                    illustration: 'ghost'
+                });
+                const illustrations = [
+                    { id: 'ghost', icon: '👻' },
+                    { id: 'robot', icon: '🤖' },
+                    { id: 'broken', icon: '💔' },
+                    { id: 'planet', icon: '🪐' }
+                ];
+                let debounceTimer;
+                const updatePreview = async () => {
+                    loading.value = true;
+                    try {
+                        const response = await fetch('/preview', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(config.value)
+                        });
+                        const html = await response.text();
+                        const frame = document.getElementById('preview-frame');
+                        if (frame) {
+                            frame.srcdoc = html;
+                        }
+                    } catch (error) {
+                        console.error('Preview error:', error);
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+                const debouncedUpdate = () => {
+                    clearTimeout(debounceTimer);
+                    debounceTimer = setTimeout(updatePreview, 500);
+                };
+                const download = async () => {
+                    try {
+                        const response = await fetch('/download', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(config.value)
+                        });
+                        const blob = await response.blob();
+                        const url = window.URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.href = url;
+                        a.download = '404.html';
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
+                    } catch (error) {
+                        console.error('Download error:', error);
+                        alert('Download failed. Please try again.');
+                    }
+                };
+                watch(config, debouncedUpdate, { deep: true });
+                onMounted(() => {
+                    updatePreview();
+                });
+                return {
+                    config,
+                    viewMode,
+                    illustrations,
+                    loading,
+                    download
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>