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:
1
scratch-gui/competitio_login/assets/.gitkeep
Normal file
1
scratch-gui/competitio_login/assets/.gitkeep
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
3
scratch-gui/competitio_login/assets/btn-arrow.svg
Normal file
3
scratch-gui/competitio_login/assets/btn-arrow.svg
Normal 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 |
3
scratch-gui/competitio_login/assets/chevron-down.svg
Normal file
3
scratch-gui/competitio_login/assets/chevron-down.svg
Normal 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 |
BIN
scratch-gui/competitio_login/assets/login-bg.png
Normal file
BIN
scratch-gui/competitio_login/assets/login-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
17
scratch-gui/competitio_login/assets/login-illustration.svg
Normal file
17
scratch-gui/competitio_login/assets/login-illustration.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 464 KiB |
3
scratch-gui/competitio_login/assets/point.svg
Normal file
3
scratch-gui/competitio_login/assets/point.svg
Normal 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 |
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