mainPage/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JUNE PVE 集成工作台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="icon" type="image/png" href="favicon.png">
    <!-- <link rel="stylesheet" href="all.min.css"> -->
    <script src="chart.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body data-theme="cyber">
    <!-- 粒子背景画布 -->
    <canvas id="particleCanvas"></canvas>

    <!-- 导航栏 -->
    <header class="navbar">
        <div class="container">
            <div class="navbar-brand">
                <span class="text-cyan">JUNE</span> <span class="text-orange">PVE</span> <span class="text-gray">工作台</span>
            </div>
            <nav class="navbar-nav">
                <a href="#monitor" class="nav-link active">监控中心</a>
                <a href="#tools" class="nav-link">核心服务</a>
                <a href="#dev" class="nav-link">开发环境</a>
                <a href="#blog" class="nav-link">博客</a>
                <a href="#lab" class="nav-link">技术实验室</a>
                <a href="#friends" class="nav-link">创意圈</a>
            </nav> 
        </div>
    </header>

    <!-- 英雄区 -->
    <section class="hero" id="monitor">
        <div class="container">
            <div class="hero-content" data-parallax="0.5">
                <div class="hero-text">
                    <h1><span class="text-cyan">全栈</span> 探索</h1>
                    <h2><span class="text-orange">系统</span> 架构</h2>
                    <p class="text-gray">技术实验与系统集成</p>
                </div>
                <div class="hero-chart" data-parallax="-0.2">
                    <div class="glass-card">
                        <canvas id="systemChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 服务网格 -->
    <section class="services" id="tools">
        <div class="container" data-parallax="0.3">
            <h2 class="section-title"><span class="text-cyan">核心</span> 服务</h2>
            <div class="service-grid">
                <div class="service-card glass-card">
                    <div class="service-icon"><i class="fas fa-server"></i></div>
                    <h3>Portainer</h3>
                    <p>容器管理平台</p>
                    <span class="status online"><i class="fas fa-circle"></i> 运行中</span>
                    <a id="portainerLink" href="#" class="service-link" target="_blank">访问 <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="service-card glass-card">
                    <div class="service-icon"><i class="fas fa-code-branch"></i></div>
                    <h3>Gitea</h3>
                    <p>代码托管平台</p>
                    <span class="status online"><i class="fas fa-circle"></i> 运行中</span>
                    <a id="giteaLink" href="#" class="service-link" target="_blank">访问 <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="service-card glass-card">
                    <div class="service-icon"><i class="fas fa-chart-line"></i></div>
                    <h3>Grafana</h3>
                    <p>数据可视化工具</p>
                    <span class="status online"><i class="fas fa-circle"></i> 运行中</span>
                    <a id="grafanaLink" href="#" class="service-link" target="_blank">访问 <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="service-card glass-card">
                    <div class="service-icon"><i class="fas fa-cogs"></i></div>
                    <h3>Jenkins</h3>
                    <p>持续集成/持续部署</p>
                    <span class="status online"><i class="fas fa-circle"></i> 运行中</span>
                    <a id="jenkinsLink" href="#" class="service-link" target="_blank">访问 <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="service-card glass-card">
                    <div class="service-icon"><i class="fas fa-database"></i></div>
                    <h3>PostgreSQL</h3>
                    <p>关系型数据库</p>
                    <span class="status online"><i class="fas fa-circle"></i> 运行中</span>
                    <a href="#" class="service-link" target="_blank">访问 <i class="fas fa-arrow-right"></i></a>
                </div>
                <div class="service-card glass-card">
                    <div class="service-icon"><i class="fas fa-shield-alt"></i></div>
                    <h3>Traefik</h3>
                    <p>反向代理与负载均衡</p>
                    <span class="status online"><i class="fas fa-circle"></i> 运行中</span>
                    <a href="#" class="service-link" target="_blank">访问 <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </section>

    <!-- 开发环境模块 -->
    <section class="dev-environment" id="dev">
        <div class="container" data-parallax="0.3">
            <h2 class="section-title"><span class="text-cyan">开发</span> 环境</h2>
            
            <!-- 开发环境状态概览 -->
            <div class="dev-status glass-card">
                <div class="status-header">
                    <h3>环境状态</h3>
                    <div class="status-indicator online">
                        <i class="fas fa-circle"></i> 所有服务正常运行
                    </div>
                </div>
                <div class="status-grid">
                    <div class="status-item">
                        <i class="fas fa-memory"></i>
                        <div class="status-info">
                            <p class="status-label">内存使用</p>
                            <p class="status-value">4.2GB / 16GB</p>
                        </div>
                    </div>
                    <div class="status-item">
                        <i class="fas fa-microchip"></i>
                        <div class="status-info">
                            <p class="status-label">CPU 负载</p>
                            <p class="status-value">18%</p>
                        </div>
                    </div>
                    <div class="status-item">
                        <i class="fas fa-database"></i>
                        <div class="status-info">
                            <p class="status-label">磁盘空间</p>
                            <p class="status-value">28GB / 128GB</p>
                        </div>
                    </div>
                    <div class="status-item">
                        <i class="fas fa-network-wired"></i>
                        <div class="status-info">
                            <p class="status-label">网络速度</p>
                            <p class="status-value">120MB/s</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 开发工具网格 -->
            <div class="dev-tools-grid">
                <div class="tool-card glass-card">
                    <div class="tool-icon"><i class="fas fa-code"></i></div>
                    <h3>VS Code</h3>
                    <p>集成开发环境</p>
                    <a href="#" class="tool-link" target="_blank">启动 <i class="fas fa-play"></i></a>
                </div>
                <div class="tool-card glass-card">
                    <div class="tool-icon"><i class="fas fa-terminal"></i></div>
                    <h3>终端</h3>
                    <p>命令行工具集</p>
                    <a href="#" class="tool-link" target="_blank">打开 <i class="fas fa-terminal"></i></a>
                </div>
                <div class="tool-card glass-card">
                    <div class="tool-icon"><i class="fas fa-database"></i></div>
                    <h3>数据库管理</h3>
                    <p>数据库可视化工具</p>
                    <a href="#" class="tool-link" target="_blank">启动 <i class="fas fa-play"></i></a>
                </div>
                <div class="tool-card glass-card">
                    <div class="tool-icon"><i class="fas fa-server"></i></div>
                    <h3>服务管理</h3>
                    <p>开发服务控制面板</p>
                    <a href="#" class="tool-link" target="_blank">打开 <i class="fas fa-cogs"></i></a>
                </div>
            </div>
            
            <!-- 语言与框架支持 -->
            <div class="language-support glass-card">
                <h3>支持的语言与框架</h3>
                <div class="language-tags">
                    <span class="language-tag"><i class="fab fa-js"></i> JavaScript</span>
                    <span class="language-tag"><i class="fab fa-python"></i> Python</span>
                    <span class="language-tag"><i class="fab fa-java"></i> Java</span>
                    <span class="language-tag"><i class="fab fa-node-js"></i> Node.js</span>
                    <span class="language-tag"><i class="fab fa-react"></i> React</span>
                    <span class="language-tag"><i class="fab fa-vuejs"></i> Vue</span>
                    <span class="language-tag"><i class="fab fa-angular"></i> Angular</span>
                    <span class="language-tag"><i class="fab fa-golang"></i> Go</span>
                    <span class="language-tag"><i class="fab fa-php"></i> PHP</span>
                    <span class="language-tag"><i class="fab fa-rust"></i> Rust</span>
                </div>
            </div>
            
            <!-- 快速启动项目 -->
            <div class="quick-start glass-card">
                <h3>快速启动项目</h3>
                <div class="project-templates">
                    <div class="template-card">
                        <h4>前端项目</h4>
                        <p>React / Vue / Angular 模板</p>
                        <button class="template-button glow-button">创建</button>
                    </div>
                    <div class="template-card">
                        <h4>后端服务</h4>
                        <p>Node.js / Python / Go 模板</p>
                        <button class="template-button glow-button">创建</button>
                    </div>
                    <div class="template-card">
                        <h4>全栈应用</h4>
                        <p>MERN / MEAN / Django 模板</p>
                        <button class="template-button glow-button">创建</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 最新思绪区域 -->
    <section class="latest-thoughts" id="blog">
        <div class="container" data-parallax="0.2">
            <h2 class="section-title"><span class="text-cyan">最新思路</span></h2>
            <div class="thoughts-grid">
                <article class="thought-card glass-card" onclick="window.open('/blog/post1', '_blank')">
                    <div class="thought-image" style="background-image: url('./static/code1.avif');"></div>
                    <div class="thought-content">
                        <h3>赛博朋克时代的前端架构思考</h3>
                        <p class="thought-excerpt">探索在快速变化的技术环境中，如何构建可维护的前端系统...</p>
                        <p class="thought-date">2023-05-15</p>
                        <span class="read-more">继续阅读 <i class="fas fa-arrow-right"></i></span>
                    </div>
                </article>
                <article class="thought-card glass-card" onclick="window.open('/blog/post2', '_blank')">
                    <div class="thought-image" style="background-image: url('./static/code2.avif');"></div>
                    <div class="thought-content">
                        <h3>从0到1搭建个人技术栈</h3>
                        <p class="thought-excerpt">分享我如何构建这个集成工作台，以及选择各组件的思考过程...</p>
                        <p class="thought-date">2023-05-08</p>
                        <span class="read-more">继续阅读 <i class="fas fa-arrow-right"></i></span>
                    </div>
                </article>
                <article class="thought-card glass-card" onclick="window.open('/blog/post3', '_blank')">
                    <div class="thought-image" style="background-image: url('./static/code3.avif');"></div>
                    <div class="thought-content">
                        <h3>未来界面：玻璃拟态与全息效果</h3>
                        <p class="thought-excerpt">深入探讨现代UI设计中的玻璃拟态趋势及其实现技巧...</p>
                        <p class="thought-date">2023-05-01</p>
                        <span class="read-more">继续阅读 <i class="fas fa-arrow-right"></i></span>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <!-- 技术实验室 -->
    <section class="tech-lab" id="lab">
        <div class="container" data-parallax="0.2">
            <h2 class="section-title"><span class="text-cyan">技术实验室</span></h2>
            <div class="lab-grid">
                <div class="lab-card glass-card">
                    <div class="lab-icon"><i class="fas fa-robot"></i></div>
                    <h3>AI 实验</h3>
                    <p>探索机器学习与深度学习的前沿应用</p>
                    <a href="#" class="lab-link" target="_blank">进入实验室 <i class="fas fa-flask"></i></a>
                </div>
                <div class="lab-card glass-card">
                    <div class="lab-icon"><i class="fas fa-microchip"></i></div>
                    <h3>边缘计算</h3>
                    <p>研究在边缘设备上的高效计算方案</p>
                    <a href="#" class="lab-link" target="_blank">进入实验室 <i class="fas fa-flask"></i></a>
                </div>
                <div class="lab-card glass-card">
                    <div class="lab-icon"><i class="fas fa-vr-cardboard"></i></div>
                    <h3>XR 技术</h3>
                    <p>探索虚拟现实与增强现实的开发</p>
                    <a href="#" class="lab-link" target="_blank">进入实验室 <i class="fas fa-flask"></i></a>
                </div>
                <!-- 添加聊天实验室 -->
                <div class="lab-card glass-card">
                    <div class="lab-icon"><i class="fas fa-comment-dots"></i></div>
                    <h3>实时通信</h3>
                    <p>基于WebSocket的聊天系统实现</p>
                    <a href="#chat-app" class="lab-link" target="_blank">进入实验室 <i class="fas fa-flask"></i></a>
                </div>
                <!-- 其他实验室 -->
            </div>
        </div>
    </section>

    <!-- 创意圈区域 -->
    <section class="creative-circle" id="friends">
        <div class="container" data-parallax="0.1">
            <h2 class="section-title"><span class="text-cyan">创意圈</span></h2>
            <div class="circle-grid">
                <div class="friend-card glass-card">
                    <div class="friend-avatar" style="background-image: url('');"></div>
                    <h3>摄影师</h3>
                    <p>独立摄影 | 数字游民</p>
                    <div class="friend-social">
                        <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                        <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
                    </div>
                    <button class="glow-button">了解详情</button>
                </div>
                <div class="friend-card glass-card">
                    <div class="friend-avatar" style="background-image: url('');"></div>
                    <h3>开发者</h3>
                    <p>全栈开发 | 技术作家</p>
                    <div class="friend-social">
                        <a href="#" target="_blank"><i class="fab fa-github"></i></a>
                        <a href="#" target="_blank"><i class="fab fa-dev"></i></a>
                    </div>
                    <button class="glow-button">了解详情</button>
                </div>
                <div class="friend-card glass-card">
                    <div class="friend-avatar" style="background-image: url('');"></div>
                    <h3>设计师</h3>
                    <p>UI/UX设计 | 创意大师</p>
                    <div class="friend-social">
                        <a href="#" target="_blank"><i class="fab fa-behance"></i></a>
                        <a href="#" target="_blank"><i class="fab fa-dribbble"></i></a>
                    </div>
                    <button class="glow-button">了解详情</button>
                </div>
                <div class="friend-card glass-card">
                    <div class="friend-avatar" style="background-image: url('');"></div>
                    <h3>音乐人</h3>
                    <p>音频工程 | 音乐制作人</p>
                    <div class="friend-social">
                        <a href="#" target="_blank"><i class="fab fa-soundcloud"></i></a>
                        <a href="#" target="_blank"><i class="fab fa-spotify"></i></a>
                    </div>
                    <button class="glow-button">了解详情</button>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p class="text-gray">&copy; 2025 <span class="text-cyan">JUNE</span> <span class="text-orange">PVE</span> 工作台. 保留所有权利.</p>
        </div>
    </footer>

    <!-- 视觉风格切换器 -->
    <div class="theme-switcher">
        <button id="themeToggle" class="theme-button"><i class="fas fa-sun"></i></button>
        <div id="themeMenu" class="theme-menu glass-card">
            <div class="theme-option active" data-theme="cyber">
                <span class="theme-dot" style="background-color: #00ffeb"></span>
                <span>赛博朋克 (Cyber)</span>
            </div>
            <div class="theme-option" data-theme="minimal">
                <span class="theme-dot" style="background-color: #ffffff"></span>
                <span>极简黑白 (Minimal)</span>
            </div>
            <div class="theme-option" data-theme="gallery">
                <span class="theme-dot" style="background-color: #ff758f"></span>
                <span>粉蓝画廊 (Gallery)</span>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>