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:
2026-06-16 15:37:45 +08:00
commit 6e0a1fbcbb
11350 changed files with 965674 additions and 0 deletions

View File

@@ -0,0 +1 @@

View File

@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.33301 13.3334L11.3717 10.2947C11.5344 10.132 11.5344 9.86817 11.3717 9.70545L8.33301 6.66675" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 292 B

View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.1382 5.86191C11.8778 5.60156 11.4557 5.60156 11.1954 5.86191L8.14113 8.91614C8.06324 8.99403 7.93696 8.99403 7.85907 8.91614L4.80484 5.86191C4.54449 5.60156 4.12238 5.60156 3.86203 5.86191C3.60168 6.12226 3.60168 6.54437 3.86203 6.80472L7.58106 10.5237C7.81249 10.7552 8.18771 10.7552 8.41914 10.5237L12.1382 6.80472C12.3985 6.54437 12.3985 6.12226 12.1382 5.86191Z" fill="#7D91A1"/>
</svg>

After

Width:  |  Height:  |  Size: 500 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 464 KiB

View File

@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5 10C18.5 14.6944 14.6944 18.5 10 18.5C5.30558 18.5 1.5 14.6944 1.5 10C1.5 5.30558 5.30558 1.5 10 1.5C14.6944 1.5 18.5 5.30558 18.5 10ZM11.0625 14.25C11.0625 14.8368 10.5868 15.3125 10 15.3125C9.4132 15.3125 8.9375 14.8368 8.9375 14.25C8.9375 13.6632 9.4132 13.1875 10 13.1875C10.5868 13.1875 11.0625 13.6632 11.0625 14.25ZM10 4.6875C9.4132 4.6875 8.9375 5.1632 8.9375 5.75V10C8.9375 10.5868 9.4132 11.0625 10 11.0625C10.5868 11.0625 11.0625 10.5868 11.0625 10V5.75C11.0625 5.1632 10.5868 4.6875 10 4.6875Z" fill="#1C72FD"/>
</svg>

After

Width:  |  Height:  |  Size: 681 B

View 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>