Initial commit of 001code-html Scratch frontend project.
Includes scratch-gui, scratch-vm, scratch-blocks, scratch-render, scratch-l10n, and deployment config. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
393
scratch-gui/competitio_login/index.html
Normal file
393
scratch-gui/competitio_login/index.html
Normal file
@@ -0,0 +1,393 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>训练登录</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&family=Nunito:wght@800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
:root {
|
||||
--page-bg: #f0f4f9;
|
||||
--card-bg: #ffffff;
|
||||
--title: #1e1a4c;
|
||||
--text: #475569;
|
||||
--label: #000000;
|
||||
--field-bg: #f5f6f9;
|
||||
--placeholder: #7d91a1;
|
||||
--shadow: 0px 34px 44px -20px rgba(185, 206, 234, 0.25);
|
||||
--field-border: linear-gradient(164deg, rgba(226, 230, 255, 1) 24%, rgba(255, 234, 227, 1) 95%);
|
||||
--btn-gradient: linear-gradient(90deg, rgba(3, 161, 234, 1) 0%, rgba(32, 91, 175, 1) 100%);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Inter, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC",
|
||||
"Microsoft YaHei", Arial, sans-serif;
|
||||
background-color: var(--page-bg);
|
||||
background-image: url("assets/login-bg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center 51px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
max-width: 1111px;
|
||||
margin: 0 auto;
|
||||
padding: 133px 24px 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 63px;
|
||||
}
|
||||
|
||||
.illustration {
|
||||
width: 499px;
|
||||
height: 575px;
|
||||
object-fit: contain;
|
||||
margin-top: 114px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 549px;
|
||||
max-width: 100%;
|
||||
background: var(--card-bg);
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 10px;
|
||||
padding: 40px 35px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 19px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-family: Nunito, Inter, system-ui, sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 36px;
|
||||
line-height: 1.364;
|
||||
color: var(--title);
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 479px;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.info-line {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 1.2102272511;
|
||||
color: #475569;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #5380ea;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 479px;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.label-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 1.2102;
|
||||
color: var(--label);
|
||||
}
|
||||
|
||||
.label-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.control {
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
background: linear-gradient(var(--field-bg), var(--field-bg)) padding-box, var(--field-border) border-box;
|
||||
padding: 0 12px;
|
||||
font-family: "PingFang SC", Inter, system-ui, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.5714;
|
||||
color: var(--placeholder);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.control::placeholder {
|
||||
color: var(--placeholder);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.select-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
select.control {
|
||||
appearance: none;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
width: 180px;
|
||||
height: 48px;
|
||||
border-radius: 32px;
|
||||
border: 0;
|
||||
background: var(--btn-gradient);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.primary-btn-text {
|
||||
font-family: "Noto Sans SC", Inter, system-ui, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.4286;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.primary-btn-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 1.2102;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.meta-line {
|
||||
width: 441px;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 1.2102272511;
|
||||
color: #475569;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
color: #5380ea;
|
||||
}
|
||||
|
||||
.meta-value--contest {
|
||||
color: #e54a2a;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
max-width: 1040px;
|
||||
margin: auto auto 0;
|
||||
padding: 0 24px 18px;
|
||||
}
|
||||
|
||||
.footer-line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: var(--text);
|
||||
opacity: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
margin: 12px 0 0;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 1.2102;
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.content {
|
||||
max-width: 800px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.illustration {
|
||||
width: 360px;
|
||||
height: auto;
|
||||
margin-top: 114px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 520px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
body {
|
||||
background-position: center top;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.illustration {
|
||||
margin-top: 0;
|
||||
width: min(499px, 100%);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: min(549px, 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<main class="content" aria-label="训练登录">
|
||||
<img class="illustration" src="assets/login-illustration.svg" alt="" />
|
||||
|
||||
<section class="card" aria-label="登录卡片">
|
||||
<header class="card-header">
|
||||
<h1 class="title">灵丌编程训练平台</h1>
|
||||
<div class="info">
|
||||
<p class="info-line">赛练信息: 当前显示的姓名、选送单位相关信息为 灵丌编程（001CODE.com）平台注册信息。</p>
|
||||
<p class="info-line"><span class="info-label">赛练状态:</span><span class="info-value"> 已发布</span> <span class="info-label">赛练区域:</span><span class="info-value"> 全省</span></p>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<form class="form">
|
||||
<div class="field">
|
||||
<label for="phone">账号 *</label>
|
||||
<input id="phone" class="control" type="text" placeholder="请输入内容" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="password">密码 *</label>
|
||||
<input id="password" class="control" type="password" placeholder="请输入内容" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="label-row">
|
||||
<label for="platform">平台选择 *</label>
|
||||
<img class="label-icon" src="assets/point.svg" alt="" />
|
||||
</div>
|
||||
<div class="select-wrap">
|
||||
<select id="platform" class="control">
|
||||
<option selected>训练平台</option>
|
||||
</select>
|
||||
<img class="select-icon" src="assets/chevron-down.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="actions">
|
||||
<button class="primary-btn" type="button">
|
||||
<span class="primary-btn-text">验证并进入</span>
|
||||
<img class="primary-btn-icon" src="assets/btn-arrow.svg" alt="" />
|
||||
</button>
|
||||
<a class="register-link" href="#">注册账号</a>
|
||||
</div>
|
||||
|
||||
<p class="meta-line"><span class="meta-label">训练起止时间：</span><span class="meta-value"> 2025-07-15 2025-12-31</span></p>
|
||||
<p class="meta-line"><span class="meta-label">比赛时间：</span><span class="meta-value meta-value--contest"> 待定</span></p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-line" role="presentation"></div>
|
||||
<p class="footer-text">ICP备案号：<a href=" " target="_blank" style="color:#478ac9 ;">蜀ICP备2022002563号-5</a>
|
||||
公安备案号：<a href="https://beian.mps.gov.cn/" target="_blank" style="color:#478ac9 ;">川公网安备51011202000980号</a>
|
||||
© 灵丌编程（001CODE.COM）</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user