ai提示词生成的音乐考试类网站ui代码
代码语言：html
所属分类：其他
代码描述：ai提示词生成的音乐考试类网站ui代码，提示如下：你是一位专业的前端工程师与产品级 UI 设计专家，擅长根据产品需求生成完整的 HTML 原型图页面。现在你的任务是：设计pc端在线音乐考试类官网，可以手机或邮箱验证码登录后选择题库（免费或收费），收费题库支持微信或paypal支付，然后进入题库考试，有单选题多选题，输入题等，有错题集，页面简洁大气美观，将多个 UI 页面原型按模块平铺在一个画布中，所有模块应在一个页面中完整展示，并具备如下特性： 所有 UI 页面应嵌入在一个 HTML 文件中； 所有页面
代码标签： ai 提示词 生成 音乐 考试 网站 ui 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<title>在线音乐考试官网 · PC 原型画布</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<style>
:root{
--bg:#f5f7fb;
--canvas:#ffffffcc;
--panel:#fff;
--border:#e8eaf2;
--text:#1f2333;
--muted:#6a6f8d;
--primary:#5b6bff;
--primary-2:#7a5cff;
--accent:#00d4ff;
--success:#22c55e;
--warning:#f59e0b;
--danger:#ef4444;
--shadow: 0 12px 40px rgba(18,23,56,.08);
--radius:18px;
--gap:44px;
--module-w: 1280px;
--module-h: 800px;
}
*{ box-sizing: border-box }
html,body{ height:100% }
body{
margin:0; background:
radial-gradient(1200px 600px at 10% -10%, rgba(91,107,255,.15), transparent 60%),
radial-gradient(800px 400px at 100% 0%, rgba(0,212,255,.15), transparent 50%),
linear-gradient(180deg, #f9fbff, #f0f3ff);
font-family: ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,"Noto Sans CJK SC",sans-serif;
color:var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* HUD */
.hud{
position:fixed; left:18px; right:18px; top:14px; z-index:5;
display:flex; align-items:center; justify-content:space-between; gap:12px;
pointer-events:none;
}
.hud .brand{
pointer-events:auto;
display:flex; align-items:center; gap:10px; font-weight:900;
padding:10px 14px; border-radius:14px; background: rgba(255,255,255,.9);
border:1px solid rgba(0,0,0,.06); box-shadow: var(--shadow);
}
.hud .brand .tag{
font-size:12px; color:#475569; padding:4px 10px; border-radius:999px;
background:#f3f6ff; border:1px solid #e5e9ff; font-weight:700;
}
.hud .zoom{
pointer-events:auto; display:flex; align-items:center; gap:8px; background: rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.06);
padding:6px; border-radius:12px; box-shadow:var(--shadow);
}
.hud .zoom button{
width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:#fff; cursor:pointer; display:grid; place-items:center; color:#2b2f45;
}
.hud .zoom .label{ min-width:64px; text-align:center; font-weight:900 }
/* Viewport & Canvas */
#viewport{ position:fixed; inset:0; overflow:hidden; user-select:none; }
#viewport.space{ cursor:grab } #viewport.panning{ cursor:grabbing }
#canvas{
position:absolute; left:0; top:0; transform-origin:0 0; will-change: transform;
display:grid; gap:var(--gap); padding: 80px;
grid-template-columns: repeat(2, calc(var(--module-w) + 0px));
background: var(--canvas);
border-radius: 24px; box-shadow: 0 30px 80px rgba(18,23,56,.12);
}
/* Module */
.module{
position:relative; width: var(--module-w); height: var(--module-h);
background: var(--panel); border:1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow); overflow:hidden;
}
.module-title{
position:absolute; top:-14px; left:16px; z-index:2;
background: linear-gradient(135deg, var(--primary), #8b77ff);
color:#fff; font-weight:800; font-size:14px; padding:7px 12px; border-radius:999px; display:inline-flex; gap:8px; align-items:center;
box-shadow: 0 8px 24px rgba(91,107,255,.35);
}
/* Desktop page frame */
.desktop{
display:flex; flex-direction:column; height:100%;
}
.topbar{
height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 22px;
border-bottom:1px solid var(--border); background: linear-gradient(180deg, #ffffff, #fbfcff);
}
.nav-left, .nav-right{ display:flex; align-items:center; gap:16px }
.brand-lg{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:18px }
.brand-lg .dot{ width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); display:inline-block }
.nav a{ color:#3a3f65; text-decoration:none; font-weight:700; padding:8px 10px; border-radius:10px }
.nav a:hover{ background:#f3f6ff }
.btn{ appearance:none; border:1px solid var(--border); background:#fff; padding:10px 14px; border-radius:12px; font-weight:800; cursor:pointer; color:#24283c; box-shadow: 0 6px 16px rgba(23,26,60,.06) }
.btn:hover{ background:#f7f8ff }
.btn.primary{ background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff; border-color: transparent; box-shadow: 0 10px 20px rgba(91,107,255,.25) }
.btn.secondary{ background:#f3f6ff; border-color:#e5e9ff; color:#3b3f73 }
.btn.success{ background: linear-gradient(135deg, #16a34a,#22c55e); color:#fff; border:0 }
.btn.paypal{ background:#0147ff; color:#fff; border:0 }
.btn.wx{ background:#10b981; color:#fff; border:0 }
.btn.small{ padding:8px 10px; border-radius:10px; font-weight:700 }
.page{ flex:1; overflow:auto; background: linear-gradient(180deg, #ffffff, #fbfcff); }
.container{ max-width:1200px; margin:0 auto; padding:22px 24px }
/* Forms */
.segmented{ display:inline-flex; background:#f2f4ff; border:1px solid #e6e9ff; border-radius:12px; padding:4px; gap:6px }
.segmented button{ background:transparent; border:0; padding:8px 12px; border-radius:8px; font-weight:800; color:#4b4f7b; cursor:pointer }
.segmented .active{ background:#fff; color:var(--primary); box-shadow:0 6px 14px rgba(91,107,255,.15) }
.form{ display:grid; gap:14px }
.form-row{ display:flex; gap:10px; flex-wrap:wrap }
.form-group{ display:flex; flex-direction:column; gap:6px; flex:1 }
.form-group label{ font-size:12px; color:#6a6f8d; font-weight:700 }
.input, .select, .textarea{
width:100%; padding:12px 12px; border:1px solid #e7e9f6; border-radius:12px; outline:0; background:#fff; font-size:14px;
}
.input:focus, .select:focus, .textarea:focus{ border-color:#cfd4ff; box-shadow:0 0 0 4px rgba(91,107,255,.12) }
.input-append{ display:flex; gap:8px; align-items:center }
.hint{ color:#8a8fac; font-size:12px }
/* Cards & Lists & Badges */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px }
.card{ border:1px solid #edf0ff; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 10px 24px rgba(22,30,70,.06) }
.card .thumb{ height:180px; background:#eef1ff; position:relative; overflow:hidden }
.card .thumb img{ width:100%; height:100%; object-fit:cover }
.card .body{ padding:14px 14px 16px }
.row{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.row.wrap{ flex-wrap:wrap }
.muted{ color:var(--muted) }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid #e8ebff; font-weight:800 }
.badge.free{ background:#ecfdf5; color:#059669; border-color:#bbf7d0 }
.badge.paid{ background:#fef3c7; color:#b45309; border-color:#fde68a }
.badge.bought{ background:#eef2ff; color:#4f46e5; border-color:#e0e7ff }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#f4f6ff; border:1px solid #e6eaff; color:#3b3f73; font-weight:700; font-size:12px }
.divider{ height:1px; background:#f0f1f6; margin:16px 0 }
.progress{ height:10px; background:#eef1ff; border-radius:999px; overflow:hidden }
.progress .bar{ height:100%; background: linear-gradient(135deg, var(--primary), #8b77ff) }
/* Hero */
.hero{
display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:center; padding:24px; border:1px solid #e8eaf2; border-radius:16px;
background: radial-gradient(600px 280px at 0% 0%, rgba(91,107,255,.10), transparent 60%), #fff;
}
.hero h1{ margin:0 0 10px; font-size:36px; line-height:1.15; letter-spacing:.2px }
.hero p{ margin:0 0 16px; color:#52577a }
.hero .side img{ width:100%; border-radius:14px; border:1px solid #e8eaf2; box-shadow: 0 16px 40px rgba(91,107,255,.15) }
/* Exam */
.exam-wrap{ display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; height: calc(100% - 66px); }
.exam-left{ padding:16px; overflow:auto }
.exam-right{ padding:16px; border-left:1px solid var(--border); background:#fff; overflow:auto }
.exam-toolbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border); background:#fff }
.exam-toolbar .pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#f4f6ff; border:1px solid #e6eaff; font-weight:800; font-size:12px }
.q-title{ font-weight:900; font-size:18px; margin:12px 0 12px }
.option{ display:flex; gap:10px; align-items:flex-start; border:1px solid #edf0ff; background:#fff; border-radius:12px; padding:12px; margin-bottom:10px }
.option:hover{ border-color:#dde3ff; background:#fbfcff }
.answer-card{ display:grid; grid-template-columns: repeat(10, 1fr); gap:8px }
.answer-card .num{ display:grid; place-items:center; height:34px; border:1px solid #e8eaf2; border-radius:10px; font-weight:800; color:#5160ff; background:#f6f7ff }
.answer-card .num.solved{ color:#fff; background:linear-gradient(135deg, var(--primary), #8b77ff); border-color:transparent }
.exam-actions{ display:flex; gap:10px; align-items:center; justify-content:flex-end; padding:12px 0 }
/* Result ring */
.ring{ width:220px; height:220px; position:relative }
.ring svg{ transform: rotate(-90deg) }
.ring .label{ position:absolute; inset:0; display:grid; place-items:center; font-size:40px; font-weight:900 }
.kpis{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px }
/* Payment */
.pay-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.pay-box{ border:1px solid #edf0ff; border-radius:12px; padding:14px; background:#fff }
.pay-row{ display:flex; align-items:center; gap:10px; margin:8px 0 }
/* Helpers */
.skeleton{ background: linear-gradient(90deg,#eef0ff 25%, #f6f8ff 37%, #eef0ff 63%); background-size:400% 100%; animation: shimmer 1.2s infinite }
@keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.noselect{ user-select:none }
</style>
</head>
<body>
<div class="hud noselect">
<div class="brand"><span class="dot"></span> MusicExam <span class="tag"><i class="fa-solid fa-layer-group"></i> PC 原型画布</span></div>
<div class="zoom">
<button id="zoomOut" title="缩小"><i class="fa-solid fa-minus"></i></button>
<div id="zoomLabel" class="label">100%</div>
<button id="zoomIn" title="放大"><i class="fa-solid fa-plus"></i></button>
<button id="zoomFit" title="适配"><i class="fa-solid fa-expand"></i></button>
<button id="zoomReset" title="重置"><i class="fa-solid fa-rotate-right"></i></button>
<span class="tag" style="margin-left:8px">滚轮缩放 · 空格拖拽</span>
</div>
</div>
<div id="viewport" class="noselect">
<div id="canvas">
<!-- 首页 -->
<section class="module">
<div class="module-title"><i class="fa-solid fa-house"></i> 首页</div>
<div class="desktop">
<div class="topbar">
<div class="nav-left">
<div class="brand-lg"><span class="dot"></span> MusicExam</div>
<nav class="nav">
<a href="#">题库</a>
<a href=&quo.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0