sixclockweb-flash
/
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>SixClock 最新版固件烧录工具</title>
    <style>
        .background-primary {
            background-color: #3498db;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .background-primary:hover {
            background-color: #2980b9;
        }

        .background-secondary {
            background-color: #2c3e50;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }

        .text-center {
            text-align: center;
        }

        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #e9e9e9;

            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        table tbody tr:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }

        header {
            background-color: #2c3e50;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }

        header h1 {
            margin: 0;
        }

        nav ul {
            padding: 0;
            list-style: none;
        }

        nav ul li {
            display: inline;
            margin-right: 20px;
        }

        main {
            margin: 20px;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            flex-grow: 1;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table,
        th,
        td {
            border: 1px solid #ddd;
        }

        th,
        td {
            padding: 10px;
            text-align: left;
        }

        footer {
            background-color: #2c3e50;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            bottom: 0;
            width: 100%;
        }

        footer p {
            margin: 5px 0;
        }


        .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: #3498db;
            opacity: 0;
            transform-origin: center;
        }

        @keyframes explode-flyout {
            0% {
                transform: scale(0) rotate(0deg);
                opacity: 1;
            }

            50% {
                opacity: 1;
            }

            100% {
                transform: scale(3) rotate(360deg);
                opacity: 0;
            }
        }

        @keyframes explode-expand {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            100% {
                transform: scale(2);
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <header class="background-secondary text-center">
        <h1>SixClock 最新版固件烧录工具(更新于2024-06-22)</h1>
        <p>本固件为16M flash专用</p>
        <nav>
            <ul>
                <li><a href="https://gitee.com/yes-six/sixclock" class="background-primary">查看仓库主页</a></li>
                <li><a href="https://gitee.com/yes-six/sixclock/wikis" class="background-primary">查看产品说明</a></li>
            </ul>
        </nav>
    </header>


    <main>
        <div id="main" style="display: none;"> </div>

        <br>
        <script type="module" src="https://unpkg.com/esp-web-tools@7.3.1/dist/web/install-button.js?module" async
            defer></script>

        <table>
            <thead>
                <tr>
                    <th scope="col">版本信息</th>
                    <th scope="col">操作</th>
                    <th scope="col">描述</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>20240327-test测试使用 请勿下载</td>
                    <td><esp-web-install-button id="installButton1"
                            manifest="webflash/manifest20240327test.json"></esp-web-install-button></td>
                    <td>测试固件，请勿下载</td>
                </tr>
                <tr>
                    <td>20240328-V2.1</td>
                    <td><esp-web-install-button id="installButton3"
                            manifest="webflash/manifest16M20240328.json"></esp-web-install-button></td>
                    <td>首次更新</td>
                </tr>
                <tr>
                    <td>20240407-V2.2</td>
                    <td><esp-web-install-button id="installButton3"
                            manifest="webflash/manifest16M20240407.json"></esp-web-install-button></td>
                    <td>修复了一些bug</td>
                </tr>
                <tr>
                    <td>20240622-V2.3</td>
                    <td><esp-web-install-button id="installButton4"
                            manifest="webflash/manifest16M20240622.json"></esp-web-install-button></td>
                    <td>1.修复下班计时调整时间后仍为负数的问题
                        2.电子书添加自动翻页功能
                        3.优化初始引导的逻辑顺序</td>
                </tr>
            </tbody>
        </table>
        <br>
        <p><span>NOTE1: 请确认已将其它软件从此串口断开连接 (e.g. 各种串口监视器、EspFlashtool)</span></p>
        <p><span>NOTE2: ⭐重要⭐Windows电脑请先至沁恒下载CH343驱动Windows版本，否则可能无法下载成功，<a
                    href="https://www.wch.cn/downloads/CH343SER_EXE.html"
                    class="background-primary">点我跳转Windows沁恒驱动下载页面</a></span></p>
        <p><span>NOTE3: ⭐重要⭐MACOS电脑请先至沁恒下载CH343驱动MACOS版本，否则可能无法下载成功，<a
                    href="https://www.wch.cn/downloads/CH341SER_MAC_ZIP.html"
                    class="background-primary">点我跳转MACOS沁恒驱动下载页面</a></span></p>
        <p><span>NOTE4: ⭐重要⭐下载完成后，请戳一下背面复位孔进行复位重启，即可使用</span></p>
        <p><span>NOTE5: 如果烧录不进去，提示wait packet header、sync 2nd等信息，请<a href="https://gitee.com/yes-six/sixclock/issues"
                    class="background-primary">点击这里提交Issues</a>反馈。</span></p>
        <p><span>NOTE6: 背面的小孔是复位用的，不是BOOT或GPIO0，烧录过程中不要戳它。</span></p>
    </main>
    <script>
        try {
            if ('serial' in navigator) {
                document.getElementById("notSupported").style.display = 'none';
                document.getElementById("main").style.display = 'block';
            } else {
                document.getElementById("notSupported").style.display = 'block';
                document.getElementById("main").style.display = 'none';
            }
        } catch (error) {
            console.error("Error checking navigator.serial:", error);
            document.getElementById("notSupported").style.display = 'block';
            document.getElementById("main").style.display = 'none';
            alert("页面遇到错误，请尝试更换浏览器或联系管理员。");
        }
    </script>

    <script>
        document.addEventListener('click', function (event) {
            if (event.target.tagName.toLowerCase() === 'a' || event.target.tagName.toLowerCase() === 'button') return;
            const centerParticle = createParticle(event.pageX, event.pageY, 'explode-expand');
            centerParticle.style.width = '20px';
            centerParticle.style.height = '20px';
            centerParticle.style.backgroundColor = '#3498db';
            centerParticle.style.opacity = '1';
            document.body.appendChild(centerParticle);
            setTimeout(() => centerParticle.remove(), 300);
            for (let i = 0; i < 60; i++) {
                const particle = createParticle(
                    event.pageX + (Math.random() - 0.5) * 60,
                    event.pageY + (Math.random() - 0.5) * 60,
                    'explode-flyout'
                );
                particle.style.width = `${3 + Math.random()}px`;
                particle.style.height = particle.style.width;
                particle.style.backgroundColor = `hsl(${Math.random() * 360}, 50%, 50%)`;
                particle.style.animationDuration = `${Math.random() * 0.8 + 0.5}s`;
                document.body.appendChild(particle);
                setTimeout(() => particle.remove(), 2000);
            }
        });

        function createParticle(x, y, animationName) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.left = x + 'px';
            particle.style.top = y + 'px';
            particle.style.animation = `${animationName} 1s ease-out forwards`;
            return particle;
        }
    </script>

    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?663f3e39f34f4e5bfa28d556c244bfe7";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>


    <footer>
        <div id="notSupported" style="display: none;">这个浏览器不支持网页端串口，建议使用Chrome或者Edge</div>

        <p>网页烧录工具原工具：<a href="https://github.com/esphome/esp-web-tools" class="background-primary">EspWebTools</a></p>
        <p>&copy; 2024 Sixclock. All Rights Reserved.</p>
    </footer>


</body>

</html>