Spaces:

noxoe
/

app-eorhrq-79

Running

App Files Files Community

noxoe commited on Nov 2, 2025

Commit

7beea13

verified ·

1 Parent(s): c2e0b1e

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +671 -19

index.html CHANGED Viewed

@@ -1,19 +1,671 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>成长助手 - 自我提升与事项记录</title>
+    <meta name="description" content="专注于个人成长和事项管理的智能助手，帮助您建立好习惯，记录重要事项，实现自我提升">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: #333;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        /* 顶部导航栏 */
+        .navbar {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            padding: 1rem 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .nav-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: white;
+            text-decoration: none;
+        }
+        .nav-links {
+            display: flex;
+            gap: 2rem;
+            list-style: none;
+        }
+        .nav-links a {
+            color: white;
+            text-decoration: none;
+            transition: opacity 0.3s;
+        }
+        .nav-links a:hover {
+            opacity: 0.8;
+        }
+        /* 主标题区域 */
+        .hero {
+            text-align: center;
+            padding: 4rem 0;
+            color: white;
+        }
+        .hero h1 {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(45deg, #fff, #f0f0f0);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .hero p {
+            font-size: 1.2rem;
+            opacity: 0.9;
+            margin-bottom: 2rem;
+        }
+        /* 功能卡片网格 */
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 2rem;
+            margin: 3rem 0;
+        }
+        .feature-card {
+            background: white;
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+        .feature-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #667eea, #764ba2);
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+        }
+        .feature-icon {
+            width: 60px;
+            height: 60px;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            border-radius: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 1.5rem;
+            color: white;
+            font-size: 1.5rem;
+        }
+        .feature-card h3 {
+            font-size: 1.3rem;
+            margin-bottom: 1rem;
+            color: #333;
+        }
+        .feature-card p {
+            color: #666;
+            line-height: 1.6;
+        }
+        /* 今日概览 */
+        .today-overview {
+            background: white;
+            border-radius: 20px;
+            padding: 2rem;
+            margin: 3rem 0;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        .overview-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+        }
+        .overview-header h2 {
+            font-size: 1.5rem;
+            color: #333;
+        }
+        .date-display {
+            color: #666;
+            font-size: 0.9rem;
+        }
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+            gap: 1.5rem;
+        }
+        .stat-item {
+            text-align: center;
+            padding: 1rem;
+            background: #f8f9fa;
+            border-radius: 15px;
+        }
+        .stat-number {
+            font-size: 2rem;
+            font-weight: bold;
+            color: #667eea;
+            margin-bottom: 0.5rem;
+        }
+        .stat-label {
+            color: #666;
+            font-size: 0.9rem;
+        }
+        /* 快速记录 */
+        .quick-add {
+            background: white;
+            border-radius: 20px;
+            padding: 2rem;
+            margin: 3rem 0;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        .quick-add h3 {
+            margin-bottom: 1.5rem;
+            color: #333;
+        }
+        .add-form {
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+        }
+        .add-input {
+            flex: 1;
+            padding: 1rem;
+            border: 2px solid #e9ecef;
+            border-radius: 12px;
+            font-size: 1rem;
+            transition: border-color 0.3s;
+        }
+        .add-input:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        .add-btn {
+            padding: 1rem 2rem;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: transform 0.2s;
+        }
+        .add-btn:hover {
+            transform: translateY(-2px);
+        }
+        /* 最近事项 */
+        .recent-items {
+            background: white;
+            border-radius: 20px;
+            padding: 2rem;
+            margin: 3rem 0;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        .recent-items h3 {
+            margin-bottom: 1.5rem;
+            color: #333;
+        }
+        .item-list {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+        .item {
+            display: flex;
+            align-items: center;
+            padding: 1rem;
+            background: #f8f9fa;
+            border-radius: 12px;
+            transition: background 0.3s;
+        }
+        .item:hover {
+            background: #e9ecef;
+        }
+        .item-checkbox {
+            width: 20px;
+            height: 20px;
+            margin-right: 1rem;
+            accent-color: #667eea;
+        }
+        .item-content {
+            flex: 1;
+        }
+        .item-title {
+            font-weight: 500;
+            margin-bottom: 0.25rem;
+        }
+        .item-time {
+            font-size: 0.85rem;
+            color: #666;
+        }
+        .item-category {
+            padding: 0.25rem 0.75rem;
+            background: #667eea;
+            color: white;
+            border-radius: 20px;
+            font-size: 0.8rem;
+        }
+        /* 页脚 */
+        .footer {
+            background: rgba(0, 0, 0, 0.2);
+            color: white;
+            text-align: center;
+            padding: 2rem 0;
+            margin-top: 4rem;
+        }
+        .footer p {
+            margin-bottom: 1rem;
+        }
+        .footer a {
+            color: #fff;
+            text-decoration: none;
+            padding: 0.5rem 1rem;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            transition: background 0.3s;
+        }
+        .footer a:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+        /* 响应式设计 */
+        @media (max-width: 768px) {
+            .hero h1 {
+                font-size: 2rem;
+            }
+            .nav-links {
+                display: none;
+            }
+            .add-form {
+                flex-direction: column;
+            }
+            .add-btn {
+                width: 100%;
+            }
+            .stats-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+        /* 动画 */
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .feature-card,
+        .today-overview,
+        .quick-add,
+        .recent-items {
+            animation: fadeInUp 0.6s ease-out;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航栏 -->
+    <nav class="navbar">
+        <div class="container">
+            <div class="nav-content">
+                <a href="#" class="logo">🌱 成长助手</a>
+                <ul class="nav-links">
+                    <li><a href="#goals">目标</a></li>
+                    <li><a href="#habits">习惯</a></li>
+                    <li><a href="#journal">日记</a></li>
+                    <li><a href="#progress">进度</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <!-- 主标题区域 -->
+    <section class="hero">
+        <div class="container">
+            <h1>记录成长，遇见更好的自己</h1>
+            <p>专注个人成长的智能助手，帮助您建立习惯、追踪目标、记录点滴进步</p>
+        </div>
+    </section>
+    <!-- 主内容区域 -->
+    <main class="container">
+        <!-- 今日概览 -->
+        <section class="today-overview">
+            <div class="overview-header">
+                <h2>今日概览</h2>
+                <div class="date-display" id="currentDate"></div>
+            </div>
+            <div class="stats-grid">
+                <div class="stat-item">
+                    <div class="stat-number" id="completedGoals">3</div>
+                    <div class="stat-label">已完成目标</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number" id="activeHabits">5</div>
+                    <div class="stat-label">活跃习惯</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number" id="writtenEntries">2</div>
+                    <div class="stat-label">今日记录</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number" id="streakDays">12</div>
+                    <div class="stat-label">连续天数</div>
+                </div>
+            </div>
+        </section>
+        <!-- 功能卡片 -->
+        <section class="features-grid">
+            <div class="feature-card" onclick="navigateTo('goals')">
+                <div class="feature-icon">🎯</div>
+                <h3>目标管理</h3>
+                <p>设定清晰的短期和长期目标，追踪完成进度，让每一步都更有方向感。</p>
+            </div>
+            <div class="feature-card" onclick="navigateTo('habits')">
+                <div class="feature-icon">📅</div>
+                <h3>习惯追踪</h3>
+                <p>建立积极的生活习惯，通过数据可视化展示您的坚持和进步。</p>
+            </div>
+            <div class="feature-card" onclick="navigateTo('journal')">
+                <div class="feature-icon">📝</div>
+                <h3>成长日记</h3>
+                <p>记录每日的思考、感悟和收获，见证自己的心智成长历程。</p>
+            </div>
+            <div class="feature-card" onclick="navigateTo('tasks')">
+                <div class="feature-icon">✅</div>
+                <h3>事项清单</h3>
+                <p>快速记录和管理待办事项，重要信息不错过，提升执行效率。</p>
+            </div>
+            <div class="feature-card" onclick="navigateTo('analytics')">
+                <div class="feature-icon">📊</div>
+                <h3>数据分析</h3>
+                <p>通过图表和统计了解自己的成长模式，发现优势和待改进之处。</p>
+            </div>
+            <div class="feature-card" onclick="navigateTo('insights')">
+                <div class="feature-icon">💡</div>
+                <h3>智能洞察</h3>
+                <p>基于您的行为数据，提供个性化的成长建议和行动方案。</p>
+            </div>
+        </section>
+        <!-- 快速记录事项 -->
+        <section class="quick-add">
+            <h3>快速记录新事项</h3>
+            <form class="add-form" onsubmit="addNewItem(event)">
+                <input
+                    type="text"
+                    class="add-input"
+                    placeholder="输入今天要完成的事项..."
+                    id="newItemInput"
+                    required
+                >
+                <select class="add-input" style="max-width: 150px;" id="itemCategory">
+                    <option value="work">工作</option>
+                    <option value="study">学习</option>
+                    <option value="health">健康</option>
+                    <option value="personal">个人</option>
+                </select>
+                <button type="submit" class="add-btn">添加</button>
+            </form>
+        </section>
+        <!-- 最近事项 -->
+        <section class="recent-items">
+            <h3>今日重要事项</h3>
+            <div class="item-list" id="itemList">
+                <div class="item">
+                    <input type="checkbox" class="item-checkbox" onchange="toggleItem(this)">
+                    <div class="item-content">
+                        <div class="item-title">完成项目规划文档</div>
+                        <div class="item-time">09:30</div>
+                    </div>
+                    <span class="item-category">工作</span>
+                </div>
+                <div class="item">
+                    <input type="checkbox" class="item-checkbox" onchange="toggleItem(this)" checked>
+                    <div class="item-content">
+                        <div class="item-title">30分钟晨间冥想</div>
+                        <div class="item-time">08:00</div>
+                    </div>
+                    <span class="item-category">健康</span>
+                </div>
+                <div class="item">
+                    <input type="checkbox" class="item-checkbox" onchange="toggleItem(this)">
+                    <div class="item-content">
+                        <div class="item-title">阅读《深度工作》第3章</div>
+                        <div class="item-time">20:00</div>
+                    </div>
+                    <span class="item-category">学习</span>
+                </div>
+                <div class="item">
+                    <input type="checkbox" class="item-checkbox" onchange="toggleItem(this)" checked>
+                    <div class="item-content">
+                        <div class="item-title">制定下周工作计划</div>
+                        <div class="item-time">17:00</div>
+                    </div>
+                    <span class="item-category">工作</span>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- 页脚 -->
+    <footer class="footer">
+        <div class="container">
+            <p>致力于帮助每个人实现自我成长和持续进步</p>
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
+        </div>
+    </footer>
+    <script>
+        // 显示当前日期
+        function updateDate() {
+            const now = new Date();
+            const options = {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+                weekday: 'long'
+            };
+            document.getElementById('currentDate').textContent = now.toLocaleDateString('zh-CN', options);
+        }
+        // 导航功能
+        function navigateTo(section) {
+            alert(`正在跳转到${section}页面...`);
+            // 这里可以添加实际的页面跳转逻辑
+        }
+        // 添加新事项
+        function addNewItem(event) {
+            event.preventDefault();
+            const input = document.getElementById('newItemInput');
+            const category = document.getElementById('itemCategory');
+            const itemList = document.getElementById('itemList');
+            const newItem = document.createElement('div');
+            newItem.className = 'item';
+            const now = new Date();
+            const timeString = now.toLocaleTimeString('zh-CN', {
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+            newItem.innerHTML = `
+                <input type="checkbox" class="item-checkbox" onchange="toggleItem(this)">
+                <div class="item-content">
+                    <div class="item-title">${input.value}</div>
+                    <div class="item-time">${timeString}</div>
+                </div>
+                <span class="item-category">${category.value}</span>
+            `;
+            itemList.insertBefore(newItem, itemList.firstChild);
+            // 更新统计数字
+            const currentCount = parseInt(document.querySelector('.stat-item .stat-number').textContent);
+            document.querySelector('.stat-item .stat-number').textContent = currentCount + 1;
+            // 清空输入框
+            input.value = '';
+            // 显示成功提示
+            showToast('事项添加成功！');
+        }
+        // 切换事项状态
+        function toggleItem(checkbox) {
+            const item = checkbox.closest('.item');
+            if (checkbox.checked) {
+                item.style.opacity = '0.6';
+                item.style.textDecoration = 'line-through';
+                showToast('事项已完成！');
+            } else {
+                item.style.opacity = '1';
+                item.style.textDecoration = 'none';
+            }
+        }
+        // 显示提示信息
+        function showToast(message) {
+            const toast = document.createElement('div');
+            toast.style.cssText = `
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                background: #667eea;
+                color: white;
+                padding: 1rem 2rem;
+                border-radius: 8px;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+                z-index: 1000;
+                animation: slideIn 0.3s ease-out;
+            `;
+            toast.textContent = message;
+            document.body.appendChild(toast);
+            setTimeout(() => {
+                toast.style.animation = 'slideOut 0.3s ease-out';
+                setTimeout(() => toast.remove(), 300);
+            }, 2000);
+        }
+        // 添加动画样式
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes slideIn {
+                from { transform: translateX(100%); opacity: 0; }
+                to { transform: translateX(0); opacity: 1; }
+            }
+            @keyframes slideOut {
+                from { transform: translateX(0); opacity: 1; }
+                to { transform: translateX(100%); opacity: 0; }
+            }
+        `;
+        document.head.appendChild(style);
+        // 页面加载完成后初始化
+        document.addEventListener('DOMContentLoaded', function() {
+            updateDate();
+            // 添加卡片点击动画
+            const cards = document.querySelectorAll('.feature-card');
+            cards.forEach((card, index) => {
+                card.style.animationDelay = `${index * 0.1}s`;
+            });
+        });
+        // 模拟数据更新
+        setInterval(() => {
+            const numbers = document.querySelectorAll('.stat-number');
+            numbers.forEach(num => {
+                const currentNum = parseInt(num.textContent);
+                if (Math.random() > 0.95) {
+                    num.textContent = currentNum + (Math.random() > 0.5 ? 1 : -1);
+                }
+            });
+        }, 10000);
+    </script>
+</body>
+</html>