AIWROK软件H5交互演示黄色主题

信息发布软件

	AIWROK软件H5交互演示黄色主题 <!DOCTYPE html> <html lang="zh-CN"> <head>     <meta charset="UTF-8">     <title>AIWROK H5交互演示 - 黄色主题</title>     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">     <style>         /* 全局样式重置 */         * {             margin: 0;             padding: 0;             box-sizing: border-box;         }         /* 黄色主题配色方案 */         :root {             --primary-color: #FFD700; /* 金黄色 */             --secondary-color: #FFA500; /* 橙黄色 */             --accent-color: #FF6B00; /* 橙红色 */             --dark-color: #333333;             --light-color: #FFFFFF;             --gray-color: #666666;             --success-color: #4CAF50;             --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);             --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);         }         /* 全局背景和字体 */         body {             background: linear-gradient(135deg, var(--dark-color) 0%, #1a1a1a 100%);             color: var(--dark-color);             font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;             line-height: 1.6;             padding: 20px;             min-height: 100vh;             background-attachment: fixed;         }         /* 主容器 */         .container {             max-width: 800px;             margin: 0 auto;             background: var(--light-color);             border-radius: 20px;             padding: 40px;             box-shadow: var(--shadow);             animation: fadeInUp 0.6s ease-out;         }         /* 标头容器样式 */         .header {             text-align: center;             margin-bottom: 50px;             padding: 30px 20px;             background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.1) 100%);             border-radius: 15px;             border: 2px solid rgba(255, 215, 0, 0.2);             position: relative;             overflow: hidden;             animation: fadeInUp 0.8s ease-out;         }         /* 标头装饰元素 */         .header::before {             content: '';             position: absolute;             top: -50%;             left: -50%;             width: 200%;             height: 200%;             background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);             animation: float 6s ease-in-out infinite;         }         /* 标头logo */         .header-logo {             position: relative;             display: inline-block;             width: 80px;             height: 80px;             margin-bottom: 20px;             z-index: 1;         }         .logo-circle {             position: absolute;             top: 0;             left: 0;             width: 100%;             height: 100%;             border-radius: 50%;             background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);             box-shadow: 0 8px 32px rgba(255, 215, 0, 0.3);             animation: pulse 2s infinite;         }         .logo-text {             position: absolute;             top: 50%;             left: 50%;             transform: translate(-50%, -50%);             font-size: 2rem;             font-weight: 800;             color: var(--dark-color);             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);         }         /* 标头标题 */         .header-title {             position: relative;             color: var(--primary-color);             font-size: 2.8rem;             font-weight: 800;             margin-bottom: 10px;             text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);             letter-spacing: 1px;             z-index: 1;         }         /* 标头副标题 */         .header-subtitle {             position: relative;             color: var(--gray-color);             font-size: 1.2rem;             font-weight: 500;             margin-bottom: 20px;             z-index: 1;         }         /* 标头装饰线 */         .header-divider {             position: relative;             width: 120px;             height: 4px;             background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);             border-radius: 2px;             margin: 0 auto 20px;             box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);             z-index: 1;         }         /* 装饰线动画 */         .header-divider::before {             content: '';             position: absolute;             top: -2px;             left: -2px;             right: -2px;             bottom: -2px;             background: linear-gradient(90deg, var(--secondary-color) 0%, var(--primary-color) 100%);             border-radius: 4px;             z-index: -1;             animation: shimmer 2s infinite;         }         /* 标题悬浮动画 */         @keyframes float {             0%, 100% { transform: rotate(0deg) translate(0, 0); }             50% { transform: rotate(5deg) translate(10px, -10px); }         }         /* 光泽动画 */         @keyframes shimmer {             0% { background-position: -100% 0; }             100% { background-position: 100% 0; }         }         /* 标题样式（保持兼容） */         h1 {             color: var(--primary-color);             text-align: center;             font-size: 2.5rem;             margin-bottom: 40px;             font-weight: 700;             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);             animation: pulse 2s infinite;         }         /* 表单组样式 */         .form-group {             margin-bottom: 30px;             animation: fadeInUp 0.6s ease-out var(--delay);         }         /* 标签样式 */         label {             display: block;             font-size: 1.2rem;             font-weight: 600;             margin-bottom: 10px;             color: var(--gray-color);             transition: var(--transition);         }         /* 输入控件样式 */         input[type="text"],         select {             width: 100%;             padding: 15px 20px;             font-size: 1rem;             border: 2px solid #e0e0e0;             border-radius: 12px;             background: var(--light-color);             transition: var(--transition);             box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);         }         /* 输入控件聚焦效果 */         input[type="text"]:focus,         select:focus {             outline: none;             border-color: var(--primary-color);             box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.1), inset 0 2px 8px rgba(0, 0, 0, 0.05);             transform: translateY(-2px);         }         /* 单选框和复选框容器 */         .radio-group,         .checkbox-group {             display: flex;             flex-wrap: wrap;             gap: 20px;             margin-top: 10px;         }         /* 单选框和复选框项 */         .radio-item,         .checkbox-item {             display: flex;             align-items: center;             gap: 8px;             cursor: pointer;             transition: var(--transition);             padding: 10px 15px;             border-radius: 8px;             border: 2px solid transparent;         }         /* 单选框和复选框悬停效果 */         .radio-item:hover,         .checkbox-item:hover {             background: rgba(255, 215, 0, 0.1);             border-color: rgba(255, 215, 0, 0.3);         }         /* 单选框和复选框样式 */         input[type="radio"],         input[type="checkbox"] {             width: 20px;             height: 20px;             accent-color: var(--primary-color);             cursor: pointer;         }         /* 按钮容器 */         .button-container {             display: grid;             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));             gap: 15px;             margin-top: 40px;         }         /* 按钮样式 */         button {             position: relative;             padding: 18px 24px;             font-size: 1rem;             font-weight: 600;             color: var(--dark-color);             background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);             border: none;             border-radius: 12px;             cursor: pointer;             transition: var(--transition);             box-shadow: var(--shadow);             overflow: hidden;             text-transform: uppercase;             letter-spacing: 0.5px;         }         /* 按钮悬停效果 */         button:hover {             transform: translateY(-3px);             box-shadow: 0 12px 40px rgba(255, 215, 0, 0.3);         }         /* 按钮点击效果 */         button:active {             transform: translateY(-1px);         }         /* 按钮动画效果 */         button::before {             content: '';             position: absolute;             top: 0;             left: -100%;             width: 100%;             height: 100%;             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);             transition: var(--transition);         }         /* 按钮动画触发 */         button:hover::before {             left: 100%;         }         /* 成功状态按钮 */         button.success {             background: linear-gradient(135deg, var(--success-color) 0%, #45a049 100%);             color: var(--light-color);         }         /* 警告状态按钮 */         button.warning {             background: linear-gradient(135deg, var(--accent-color) 0%, #ff5722 100%);             color: var(--light-color);         }         /* 页面加载动画 */         @keyframes fadeInUp {             from {                 opacity: 0;                 transform: translateY(30px);             }             to {                 opacity: 1;                 transform: translateY(0);             }         }         /* 标题脉冲动画 */         @keyframes pulse {             0%, 100% {                 transform: scale(1);             }             50% {                 transform: scale(1.05);             }         }         /* 渐变背景动画 */         @keyframes gradientShift {             0% {                 background-position: 0% 50%;             }             50% {                 background-position: 100% 50%;             }             100% {                 background-position: 0% 50%;             }         }         /* 响应式设计 */         @media (max-width: 768px) {             .container {                 padding: 20px;             }             h1 {                 font-size: 2rem;             }             .button-container {                 grid-template-columns: 1fr;             }         }         /* 表单组延迟动画 */         .form-group:nth-child(1) { --delay: 0.1s; }         .form-group:nth-child(2) { --delay: 0.2s; }         .form-group:nth-child(3) { --delay: 0.3s; }         .form-group:nth-child(4) { --delay: 0.4s; }         /* 加载特效样式 */         .loader-container {             position: fixed;             top: 0;             left: 0;             width: 100%;             height: 100%;             background: linear-gradient(135deg, var(--dark-color) 0%, #1a1a1a 100%);             display: flex;             flex-direction: column;             justify-content: center;             align-items: center;             z-index: 9999;             transition: opacity 0.8s ease-out, visibility 0.8s ease-out;         }         .loader {             position: relative;             width: 120px;             height: 120px;             margin-bottom: 20px;         }         .loader-ring {             position: absolute;             top: 0;             left: 0;             width: 100%;             height: 100%;             border: 4px solid transparent;             border-top: 4px solid var(--primary-color);             border-radius: 50%;             animation: spin 1.5s linear infinite;         }         .loader-ring:nth-child(2) {             width: 80%;             height: 80%;             top: 10%;             left: 10%;             border-top: 4px solid var(--secondary-color);             animation: spin 2s linear infinite reverse;         }         .loader-ring:nth-child(3) {             width: 60%;             height: 60%;             top: 20%;             left: 20%;             border-top: 4px solid var(--accent-color);             animation: spin 1s linear infinite;         }         @keyframes spin {             0% { transform: rotate(0deg); }             100% { transform: rotate(360deg); }         }         .loader-text {             font-size: 2rem;             font-weight: 700;             color: var(--primary-color);             text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);             animation: pulse 2s infinite;             letter-spacing: 2px;         }         /* 加载完成后隐藏加载器 */         .loader-container.hidden {             opacity: 0;             visibility: hidden;         }     </style>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body>     <!-- 加载特效 -->     <div class="loader-container">         <div class="loader">             <div class="loader-ring"></div>             <div class="loader-ring"></div>             <div class="loader-ring"></div>         </div>         <div class="loader-text">AIWROK</div>     </div>         <div class="container">         <!-- 新标头 -->         <div class="header">             <div class="header-logo">                 <div class="logo-circle"></div>                 <div class="logo-text">A</div>             </div>             <div class="header-divider"></div>             <h1 class="header-title">AIWROK</h1>             <p class="header-subtitle">交流QQ群711841924群</p>         </div>                  <form>             <!-- 文本框 -->             <div class="form-group">                 <label for="input1">输入框</label>                 <input type="text" id="input1" name="input1" value="我是输入框" placeholder="请输入内容...">             </div>             <!-- 单选按钮 -->             <div class="form-group">                 <label>单选按钮</label>                 <div class="radio-group">                     <div class="radio-item">                         <input type="radio" id="radio1" name="radiogroup" value="radio1" checked>                         <label for="radio1">选项1</label>                     </div>                     <div class="radio-item">                         <input type="radio" id="radio2" name="radiogroup" value="radio2">                         <label for="radio2">选项2</label>                     </div>                     <div class="radio-item">                         <input type="radio" id="radio3" name="radiogroup" value="radio3">                         <label for="radio3">选项3</label>                     </div>                 </div>             </div>             <!-- 复选框 -->             <div class="form-group">                 <label>复选框</label>                 <div class="checkbox-group">                     <div class="checkbox-item">                         <input type="checkbox" id="check1" name="check1" value="check1" checked>                         <label for="check1">选项1</label>                     </div>                     <div class="checkbox-item">                         <input type="checkbox" id="check2" name="check2" value="check2">                         <label for="check2">选项2</label>                     </div>                     <div class="checkbox-item">                         <input type="checkbox" id="check3" name="check3" value="check3">                         <label for="check3">选项3</label>                     </div>                 </div>             </div>             <!-- 下拉框 -->             <div class="form-group">                 <label for="dropdown">下拉框</label>                 <select id="dropdown" name="dropdown">                     <option value="option1">选项1</option>                     <option value="option2">选项2</option>                     <option value="option3">选项3</option>                     <option value="option4">选项4</option>                 </select>             </div>             <!-- 功能按钮组 -->             <div class="button-container">                 <button type="button" onclick="if(window.at && window.at.callFun){window.at.callFun('main','hello');window.at.callFun('main',JSON.stringify({action:'showToast',message:'调用原生方法成功'}));}else{alert('调用原生方法失败：window.at.callFun 不可用');}">调用原生方法</button>                                 <button type="button" onclick="if(window.at && window.at.runJs){window.at.runJs('function webjs(){if(typeof printl!==\'undefined\'){printl(\'你好\');}}');window.at.callFun('main',JSON.stringify({action:'showToast',message:'执行脚本代码成功'}));}else{alert('执行脚本代码失败：window.at.runJs 不可用');}">执行脚本代码</button>                                 <button type="button" onclick="if(window.at && window.at.runJsFile){window.at.runJsFile('主脚本.js');window.at.callFun('main',JSON.stringify({action:'showToast',message:'执行脚本文件成功'}));}else{alert('执行脚本文件失败：window.at.runJsFile 不可用');}">执行脚本文件</button>                                 <button type="button" onclick="var inputValue=document.getElementById('input1').value;if(window.at && window.at.runJs){window.at.runJs('function webjs(){var h5InputValue=\''+inputValue+'\';if(typeof printl!==\'undefined\'){printl(\'从H5接收到的值: \'+h5InputValue);}}');window.at.callFun('main',JSON.stringify({action:'showToast',message:'传递文本框值成功'}));}else{alert('传递控件值失败：window.at.runJs 不可用');}">传递文本框值</button>                                 <button type="button" onclick="var check1=document.getElementById('check1').checked;var check2=document.getElementById('check2').checked;var check3=document.getElementById('check3').checked;var data={action:'showCheckbox',selected:[check1?'选项1':'',check2?'选项2':'',check3?'选项3':''].filter(Boolean)};if(window.at && window.at.callFun){window.at.callFun('main',JSON.stringify(data));window.at.callFun('main',JSON.stringify({action:'showToast',message:'传递复选框状态成功'}));}else{alert('传递复选框状态失败');}">传递复选框状态</button>                                 <button type="button" onclick="var radios=document.getElementsByName('radiogroup');var selected='';for(var i=0;i<radios.length;i++){if(radios[i].checked){selected=radios[i].value;break;}}var data={action:'showRadio',value:selected};if(window.at && window.at.callFun){window.at.callFun('main',JSON.stringify(data));window.at.callFun('main',JSON.stringify({action:'showToast',message:'传递单选框状态成功'}));}else{alert('传递单选框状态失败');}">传递单选框状态</button>                                 <button type="button" onclick="var select=document.getElementById('dropdown');var value=select.options[select.selectedIndex].value;var data={action:'showDropdown',value:value};if(window.at && window.at.callFun){window.at.callFun('main',JSON.stringify(data));window.at.callFun('main',JSON.stringify({action:'showToast',message:'传递下拉框状态成功'}));}else{alert('传递下拉框状态失败');}">传递下拉框状态</button>                                 <button type="button" onclick="var message='这是一个来自H5的消息';var data={action:'showToast',message:message};if(window.at && window.at.callFun){window.at.callFun('main',JSON.stringify(data));}else{alert('显示吐司失败');}">显示吐司消息</button>             </div>         </form>     </div>     <!-- 页面加载完成通知 -->     <script>         // 页面加载完成后通知原生并隐藏加载特效         window.onload = function() {             // 隐藏加载特效             setTimeout(function() {                 var loader = document.querySelector('.loader-container');                 if (loader) {                     loader.classList.add('hidden');                 }             }, 1000);                          // 通知原生应用             if (window.at && window.at.callFun) {                 window.at.callFun('main', JSON.stringify({ action: 'pageLoaded' }));             }         };     </script> </body> </html> 复制代码