Ai 编程实战(1)-让 Ai 帮你写一个前端页面

提示词：你是一个资深web前端开发工程师，精通前端当前的技术栈，精通各种前端设计规范，尤其擅长html5+css+javascript做页面。现在我需要做一个参考下方图片的html页面，请你用html5、css和javascript，参考网页设计规范，帮我生成一段可运行的html源代码。需要添加一些交互功能，例如倒计时。

你是一个资深web前端开发工程师，精通前端当前的技术栈，精通各种前端设计规范，尤其擅长html5+css+javascript做页面。现在我需要做一个参考下方图片的html页面，请你用html5、css和javascript，参考网页设计规范，帮我生成一段可运行的html源代码。需要添加一些交互功能，例如倒计时

具体如下，输入文字时，可以在下方导入附件图片。

此处因为目的很明确，是需要他是一名前端工程师，并且需要掌握很多技术，而且我还有需要参考的页面，所以直接告诉他我们要的是可以运行的页面并且按照这个页面做就行。不需要背景。

生成之后右侧可以预览，但是看了一会可以颜色不对，而且很多地方信息不够完善。需要继续优化

把你认为有差距的地方告诉 Ai，让他继续优化代码；比如此处顶部导航缺失、没有搜索框、字段颜色不对；那可以参考下让他修改：顶部的搜索框、导航栏、logo 等地方没有内容，需要继续调整。还有需要注意识别参考图片中的文字样式、字体颜色的区分

这是修改之后生成的页面，可以看到跟原画面其实比较接近了。对于一个初学者来说说能够快递的做出这个页面来已经很不错了。对于有经验的开发来说，这也算是一个半成品了，再去进行简单的调整也很快。所以这就是为什么建议大家都要认真学 Ai 编程；
代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>UniSat Inscribe for Fractal</title>    <style>        body, html {            font-family: Arial, sans-serif;            background-color: #1a1a1a;            color: #ffa500;            margin: 0;            padding: 0;            height: 100%;        }        .container {            display: flex;            flex-direction: column;            min-height: 100vh;        }        header {            background-color: #2a2a2a;            padding: 10px 20px;            display: flex;            justify-content: space-between;            align-items: center;        }        .logo {            font-size: 24px;            font-weight: bold;            color: #ffa500;        }        .search-bar {            display: flex;            align-items: center;            background-color: #3a3a3a;            border-radius: 20px;            padding: 5px 15px;        }        .search-bar input {            background: none;            border: none;            color: #ffffff;            padding: 5px;            width: 200px;        }        .search-bar input::placeholder {            color: #888;        }        nav {            display: flex;            gap: 20px;        }        nav a {            color: #ffa500;            text-decoration: none;        }        main {            flex-grow: 1;            display: flex;            justify-content: center;            align-items: center;            padding: 20px;        }        .content {            text-align: center;        }        h1 {            font-size: 2.5em;            margin-bottom: 10px;            color: #ffa500;        }        h2 {            font-size: 1.8em;            margin-bottom: 20px;            color: #ffa500;        }        .info-box {            background-color: rgba(255, 255, 255, 0.1);            border-radius: 5px;            padding: 15px;            margin-bottom: 20px;        }        .info-box p {            margin: 5px 0;            color: #ffffff;        }        .info-box span {            color: #ffa500;            font-weight: bold;        }        .countdown {            display: flex;            justify-content: center;            gap: 10px;            margin-bottom: 20px;        }        .countdown-item {            background-color: rgba(255, 255, 255, 0.1);            border-radius: 5px;            padding: 10px;            min-width: 70px;        }        .countdown-value {            font-size: 1.5em;            font-weight: bold;            color: #ffffff;        }        .countdown-label {            font-size: 0.8em;            color: #ffa500;        }        .short-countdown {            font-size: 1.2em;            margin-top: 20px;            color: #ffffff;        }        .short-countdown span {            color: #ffa500;            font-weight: bold;        }        .footer-text {            color: #ffffff;            font-size: 0.9em;        }</style></head><body>    <div class="container">        <header>            <div class="logo">UniSat</div>            <div class="search-bar">                <input type="text" placeholder="address/txid">            </div>            <nav>                <a href="#">Home</a>                <a href="#">Wallet</a>                <a href="#">Inscribe</a>                <a href="#">Explore</a>                <a href="#">Developer</a>            </nav>        </header>        <main>            <div class="content">                <h1>UniSat Inscribe for Fractal</h1>                <h2>Going live soon!</h2>                <div class="info-box">                    <p>Inscribe will begin at Block height <span>21000</span></p>                    <p>Current Block: <span id="currentBlock">20818</span></p>                    <p>Blocks Remaining: <span id="blocksRemaining">182</span></p>                </div>                <div class="countdown">                    <div class="countdown-item">                        <div class="countdown-value" id="days">00</div>                        <div class="countdown-label">Days</div>                    </div>                    <div class="countdown-item">                        <div class="countdown-value" id="hours">01</div>                        <div class="countdown-label">Hours</div>                    </div>                    <div class="countdown-item">                        <div class="countdown-value" id="minutes">29</div>                        <div class="countdown-label">Minutes</div>                    </div>                    <div class="countdown-item">                        <div class="countdown-value" id="seconds">28</div>                        <div class="countdown-label">Seconds</div>                    </div>                </div>                <p class="footer-text">Inscribe will be available once the block height reaches 21000. Stay tuned!</p>                <div class="short-countdown">                    Next update in: <span id="shortCountdown">03:00</span>                </div>            </div>        </main>    </div>    <script>        let mainCountdownTarget = new Date().getTime() + 92968000; // Set target time to about 1 day, 1 hour, 29 minutes, and 28 seconds from now        let shortCountdownSeconds = 180; // 3 minutes        function updateMainCountdown() {            const now = new Date().getTime();            const timeLeft = mainCountdownTarget - now;            const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));            const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));            const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));            const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);            document.getElementById('days').textContent = days.toString().padStart(2, '0');            document.getElementById('hours').textContent = hours.toString().padStart(2, '0');            document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');            document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');        }        function updateShortCountdown() {            const minutes = Math.floor(shortCountdownSeconds / 60);            const seconds = shortCountdownSeconds % 60;            document.getElementById('shortCountdown').textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            if (shortCountdownSeconds > 0) {                shortCountdownSeconds--;            } else {                // Reset short countdown                shortCountdownSeconds = 180;                // Decrease main countdown by 3 minutes                mainCountdownTarget -= 180000;                // Update block information                const currentBlock = parseInt(document.getElementById('currentBlock').textContent);                const newCurrentBlock = currentBlock + 1;                const blocksRemaining = 21000 - newCurrentBlock;                document.getElementById('currentBlock').textContent = newCurrentBlock;                document.getElementById('blocksRemaining').textContent = blocksRemaining;            }        }        // Update main countdown every second        setInterval(updateMainCountdown, 1000);        // Update short countdown every second        setInterval(updateShortCountdown, 1000);        // Initial call to set first values        updateMainCountdown();        updateShortCountdown();</script></body></html