 | |  |  | 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>
复制代码
| |  | |  |
|