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,
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: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,
input {
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:.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.checked){selected=radios.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.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>
页:
[1]