品牌星 HTML 代码工具

代码编辑器

<!DOCTYPE html>
<html>
<head>
    <title>示例页面 - 品牌星代码工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        h1 {
            color: #3a86ff;
            text-align: center;
            margin-bottom: 20px;
        }
        .feature-list {
            margin: 20px 0;
            padding-left: 20px;
        }
        .feature-list li {
            margin: 10px 0;
            padding: 8px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }
        .btn {
            background-color: #3a86ff;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin: 10px 5px;
            font-weight: 600;
            transition: all 0.3s;
        }
        .btn:hover {
            background-color: #2a75ff;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(58, 134, 255, 0.4);
        }
        .home-link {
            display: inline-block;
            margin-top: 25px;
            color: #8338ec;
            text-decoration: none;
            font-weight: 600;
            padding: 10px 20px;
            border: 2px solid #8338ec;
            border-radius: 8px;
            transition: all 0.3s;
        }
        .home-link:hover {
            background-color: #8338ec;
            color: white;
            text-decoration: none;
        }
        .preview-note {
            background-color: #e9f7fe;
            padding: 15px;
            border-radius: 8px;
            margin-top: 25px;
            border-left: 4px solid #3a86ff;
        }
        .code-example {
            background-color: #1a1a2e;
            color: #f0f0f0;
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1><i class="fas fa-code"></i> 欢迎使用品牌星代码工具</h1>
        <p>这是一个示例页面，展示了代码工具的全屏预览功能。您可以在左侧编辑器中修改代码，然后点击"在新窗口全屏预览效果"按钮查看结果。</p>
        
        <div class="preview-note">
            <h3><i class="fas fa-info-circle"></i> 预览说明</h3>
            <p>点击下方按钮将在新窗口中全屏预览您的代码效果。在新窗口中，您可以按ESC键或点击关闭按钮返回编辑器。</p>
        </div>
        
        <h3>主要功能：</h3>
        <ul class="feature-list">
            <li><i class="fas fa-check-circle" style="color: #06d6a0;"></i> 实时HTML/CSS/JavaScript编辑</li>
            <li><i class="fas fa-check-circle" style="color: #06d6a0;"></i> 新窗口全屏预览</li>
            <li><i class="fas fa-check-circle" style="color: #06d6a0;"></i> 代码一键复制</li>
            <li><i class="fas fa-check-circle" style="color: #06d6a0;"></i> 响应式设计支持</li>
        </ul>
        
        <div class="code-example">
            
            <span style="color: #ff79c6;">&lt;div</span> <span style="color: #8be9fd;">class</span>=<span style="color: #f1fa8c;">"example"</span><span style="color: #ff79c6;">&gt;</span>
            <br>&nbsp;&nbsp;<span style="color: #ff79c6;">&lt;p</span><span style="color: #ff79c6;">&gt;</span>您的代码将在这里渲染<span style="color: #ff79c6;">&lt;/p</span><span style="color: #ff79c6;">&gt;</span>
            <br><span style="color: #ff79c6;">&lt;/div</span><span style="color: #ff79c6;">&gt;</span>
        </div>
        
        <button class="btn" onclick="showMessage()">
            <i class="fas fa-rocket"></i> 点击测试交互效果
        </button>
        
        <button class="btn" style="background-color: #06d6a0;" onclick="changeTheme()">
            <i class="fas fa-palette"></i> 切换主题颜色
        </button>
        
        <div id="message" style="margin-top: 30px; padding: 20px; background-color: #f0f8ff; border-radius: 10px; display: none;">
            <h3>交互结果区域</h3>
            <p>这里将显示交互结果...</p>
        </div>
        
        <p style="margin-top: 30px; text-align: center;">
            <a href="http://www.pinpaixing.com/" target="_blank" class="home-link">
                <i class="fas fa-home"></i> 访问品牌星首页 - 获取更多工具和资源
            </a>
        </p>
    </div>
    
    <script>
        function showMessage() {
            const messageDiv = document.getElementById('message');
            messageDiv.style.display = 'block';
            const now = new Date();
            messageDiv.innerHTML = `
                <h3><i class="fas fa-check-circle" style="color: #06d6a0;"></i> 交互测试成功！</h3>
                <p>这是一个通过JavaScript动态生成的内容。</p>
                <p><strong>当前时间:</strong> \${now.toLocaleString()}</p>
                <p><strong>页面URL:</strong> \${window.location.href}</p>
                <p><strong>用户代理:</strong> \${navigator.userAgent}</p>
                <p><a href="http://www.pinpaixing.com/" target="_blank" style="color: #8338ec; font-weight: bold;">
                    <i class="fas fa-external-link-alt"></i> 探索品牌星更多工具
                </a></p>
            `;
        }
        
        function changeTheme() {
            const colors = ['#3a86ff', '#06d6a0', '#8338ec', '#ff006e', '#ff7b00'];
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            document.querySelectorAll('.btn').forEach(btn => {
                if (!btn.style.backgroundColor.includes('06d6a0')) {
                    btn.style.backgroundColor = randomColor;
                }
            });
            document.querySelector('h1').style.color = randomColor;
            document.querySelector('.home-link').style.borderColor = randomColor;
            document.querySelector('.home-link').style.color = randomColor;
            document.querySelector('.home-link').addEventListener('mouseover', function() {
                this.style.backgroundColor = randomColor;
            });
        }
        
        // 模拟页面加载效果
        window.addEventListener('load', function() {
            console.log('示例页面加载完成');
            document.querySelector('h1').style.opacity = '0';
            document.querySelector('h1').style.transform = 'translateY(-20px)';
            document.querySelector('h1').style.transition = 'opacity 0.5s, transform 0.5s';
            
            setTimeout(() => {
                document.querySelector('h1').style.opacity = '1';
                document.querySelector('h1').style.transform = 'translateY(0)';
            }, 300);
        });
    </script>
</body>
</html>

预览控制台

品牌星首页点击上方按钮预览效果

新窗口全屏预览

点击"在新窗口全屏预览效果"按钮，将在新窗口中全屏显示您的代码运行结果。

这提供了更好的预览体验，尤其是对于需要测试响应式设计的项目。