补全9月11日至13日课评：为13名学生创建请假文档，为5个班级创建总结文档
This commit is contained in:
chengzi
BIN
橙子老师介绍/上课照片/20250307_汪子杰_比V搞怪.jpg
Normal file
BIN
橙子老师介绍/上课照片/20250307_汪子杰_比V搞怪.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 835 KiB |
BIN
橙子老师介绍/上课照片/20250317_李承泽_搞怪比耶.jpg
Normal file
BIN
橙子老师介绍/上课照片/20250317_李承泽_搞怪比耶.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
BIN
橙子老师介绍/上课照片/20250317_杨翊弘_正面微笑.jpg
Normal file
BIN
橙子老师介绍/上课照片/20250317_杨翊弘_正面微笑.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
BIN
橙子老师介绍/上课照片/20250317_陈嘉博_微笑.jpg
Normal file
BIN
橙子老师介绍/上课照片/20250317_陈嘉博_微笑.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
BIN
橙子老师介绍/上课照片/20250322_谭俊研_比耶搞怪.jpg
Normal file
BIN
橙子老师介绍/上课照片/20250322_谭俊研_比耶搞怪.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
BIN
橙子老师介绍/上课照片/20250419_卢皓霖_正面微笑.jpg
Normal file
BIN
橙子老师介绍/上课照片/20250419_卢皓霖_正面微笑.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
BIN
橙子老师介绍/上课照片/20250513_张雨禾_比V搞怪.jpg
Normal file
BIN
橙子老师介绍/上课照片/20250513_张雨禾_比V搞怪.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
BIN
橙子老师介绍/上课照片/20250513_魏铭轩_比V微笑.jpg
Normal file
BIN
橙子老师介绍/上课照片/20250513_魏铭轩_比V微笑.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
BIN
橙子老师介绍/上课照片/20250516_欧俊宇_比V搞怪.jpg
Normal file
BIN
橙子老师介绍/上课照片/20250516_欧俊宇_比V搞怪.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 254 KiB |
BIN
橙子老师介绍/上课照片/20250516_谢明泓_比V微笑.jpg
Normal file
BIN
橙子老师介绍/上课照片/20250516_谢明泓_比V微笑.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
BIN
橙子老师介绍/上课照片/20250520_黄俊博_正面微笑.jpg
Normal file
BIN
橙子老师介绍/上课照片/20250520_黄俊博_正面微笑.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
BIN
橙子老师介绍/上课照片/20250523_杨林轩_比V微笑.jpg
Normal file
BIN
橙子老师介绍/上课照片/20250523_杨林轩_比V微笑.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
BIN
橙子老师介绍/上课照片/20250530_苏俊宇_比V开心.jpg
Normal file
BIN
橙子老师介绍/上课照片/20250530_苏俊宇_比V开心.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 305 KiB |
BIN
橙子老师介绍/上课照片/20250606_李梓宁_比V微笑.jpg
Normal file
BIN
橙子老师介绍/上课照片/20250606_李梓宁_比V微笑.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
BIN
橙子老师介绍/上课照片/20250607_王子墨_正面微笑.jpg
Normal file
BIN
橙子老师介绍/上课照片/20250607_王子墨_正面微笑.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
BIN
橙子老师介绍/上课照片/20251228_黄彦棋_微笑.jpg
Normal file
BIN
橙子老师介绍/上课照片/20251228_黄彦棋_微笑.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
BIN
橙子老师介绍/上课照片/20260403_郭艺嘉_专注操作.jpg
Normal file
BIN
橙子老师介绍/上课照片/20260403_郭艺嘉_专注操作.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
BIN
橙子老师介绍/上课照片/20260412_吴浩睿_和同学玩体感游戏.jpg
Normal file
BIN
橙子老师介绍/上课照片/20260412_吴浩睿_和同学玩体感游戏.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
BIN
橙子老师介绍/上课照片/20260418_王晨语_和同学微笑.jpg
Normal file
BIN
橙子老师介绍/上课照片/20260418_王晨语_和同学微笑.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
BIN
橙子老师介绍/上课照片/20260419_钟嘉逸_和同学操作电脑.jpg
Normal file
BIN
橙子老师介绍/上课照片/20260419_钟嘉逸_和同学操作电脑.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
BIN
橙子老师介绍/上课照片/20260426_梁境城_和同学背影.jpg
Normal file
BIN
橙子老师介绍/上课照片/20260426_梁境城_和同学背影.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
BIN
橙子老师介绍/上课照片/20260513_余浩宸_和同学专注看屏幕.jpg
Normal file
BIN
橙子老师介绍/上课照片/20260513_余浩宸_和同学专注看屏幕.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
BIN
橙子老师介绍/上课照片/20260513_林俊宇_专注看屏幕.jpg
Normal file
BIN
橙子老师介绍/上课照片/20260513_林俊宇_专注看屏幕.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
BIN
橙子老师介绍/上课照片/20260607_贺楚悦_侧面玩体感游戏.jpg
Normal file
BIN
橙子老师介绍/上课照片/20260607_贺楚悦_侧面玩体感游戏.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
BIN
橙子老师介绍/上课照片/20260620_彭煜腾_侧面操作.jpg
Normal file
BIN
橙子老师介绍/上课照片/20260620_彭煜腾_侧面操作.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
BIN
橙子老师介绍/上课照片/20260620_陈圆振_侧面专注.jpg
Normal file
BIN
橙子老师介绍/上课照片/20260620_陈圆振_侧面专注.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
BIN
橙子老师介绍/个人头像.jpg
Normal file
BIN
橙子老师介绍/个人头像.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
685
橙子老师介绍/橙子老师介绍.html
Normal file
685
橙子老师介绍/橙子老师介绍.html
Normal file
@@ -0,0 +1,685 @@
|
||||
<!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=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{
|
||||
--bg:#ffffff;
|
||||
--bg-soft:#f7f8fa;
|
||||
--card:#ffffff;
|
||||
--border:#eceef2;
|
||||
--ink:#1f2430;
|
||||
--ink-soft:#5c6470;
|
||||
--ink-faint:#9aa1ad;
|
||||
--accent:#ff8c1a;
|
||||
--accent-soft:#fff4e6;
|
||||
--accent-deep:#e67400;
|
||||
--green:#2f9e6e; --green-soft:#e8f7f0;
|
||||
--blue:#3d7bd9; --blue-soft:#eaf1fc;
|
||||
--radius:16px;
|
||||
--shadow:0 6px 24px rgba(31,36,48,.06);
|
||||
--shadow-sm:0 2px 10px rgba(31,36,48,.05);
|
||||
}
|
||||
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
|
||||
html,body{margin:0;padding:0;}
|
||||
body{
|
||||
font-family:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
|
||||
background:var(--bg);
|
||||
color:var(--ink);
|
||||
line-height:1.75;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
#app{max-width:640px;margin:0 auto;padding:0 20px 64px;}
|
||||
|
||||
/* ===== 沉浸式开场层 ===== */
|
||||
#splash{
|
||||
position:fixed;inset:0;z-index:999;
|
||||
background:#ffffff;
|
||||
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
||||
text-align:center;
|
||||
cursor:pointer;
|
||||
transition:opacity .75s ease,transform .75s ease;
|
||||
}
|
||||
#splash.out{opacity:0;transform:scale(1.08);pointer-events:none;}
|
||||
body.lock{overflow:hidden;height:100vh;}
|
||||
.splash-brand{
|
||||
position:absolute;top:44px;left:0;right:0;
|
||||
font-size:13px;font-weight:700;letter-spacing:2px;color:var(--ink-soft);
|
||||
}
|
||||
.splash-brand .dot{
|
||||
display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;
|
||||
background:linear-gradient(135deg,var(--accent),#ffb25e);
|
||||
vertical-align:middle;
|
||||
}
|
||||
.splash-orb{
|
||||
position:relative;
|
||||
width:132px;height:132px;border-radius:50%;
|
||||
background:linear-gradient(135deg,#ffb25e,var(--accent) 60%,var(--accent-deep));
|
||||
box-shadow:0 0 26px rgba(255,140,26,.45),0 0 60px rgba(255,140,26,.22);
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
padding:5px;
|
||||
margin-bottom:30px;
|
||||
animation:orbPop .9s cubic-bezier(.34,1.56,.64,1) both;
|
||||
}
|
||||
.splash-orb::after{
|
||||
content:"";
|
||||
position:absolute;inset:-12px;border-radius:50%;
|
||||
border:2px solid rgba(255,140,26,.4);
|
||||
animation:halo 2.4s ease-in-out infinite;
|
||||
}
|
||||
.splash-orb img{
|
||||
width:100%;height:100%;border-radius:50%;
|
||||
object-fit:cover;display:block;
|
||||
border:3px solid #fff;
|
||||
}
|
||||
.splash-title{
|
||||
font-size:36px;font-weight:900;letter-spacing:2px;margin:0 0 10px;
|
||||
opacity:0;animation:rise .7s ease .15s forwards;
|
||||
}
|
||||
.splash-sub{
|
||||
font-size:15px;color:var(--ink-soft);margin:0 0 8px;
|
||||
opacity:0;animation:rise .7s ease .3s forwards;
|
||||
}
|
||||
.splash-tags{
|
||||
display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;justify-content:center;
|
||||
opacity:0;animation:rise .7s ease .45s forwards;
|
||||
}
|
||||
.splash-tags span{
|
||||
font-size:12px;color:var(--ink-soft);background:var(--bg-soft);
|
||||
border:1px solid var(--border);padding:4px 12px;border-radius:999px;
|
||||
}
|
||||
.splash-enter{
|
||||
position:absolute;bottom:56px;left:0;right:0;
|
||||
display:flex;flex-direction:column;align-items:center;gap:10px;
|
||||
color:var(--ink-soft);font-size:13px;letter-spacing:3px;
|
||||
opacity:0;animation:rise .7s ease .6s forwards;
|
||||
}
|
||||
.splash-hint{
|
||||
position:absolute;bottom:26px;left:0;right:0;
|
||||
font-size:11px;color:var(--ink-faint);letter-spacing:1px;
|
||||
opacity:0;animation:rise .7s ease .75s forwards;
|
||||
}
|
||||
@keyframes orbPop{
|
||||
0%{opacity:0;transform:scale(.4) rotate(-12deg);}
|
||||
100%{opacity:1;transform:scale(1) rotate(0);}
|
||||
}
|
||||
@keyframes halo{
|
||||
0%,100%{transform:scale(1);opacity:.85;}
|
||||
50%{transform:scale(1.16);opacity:.3;}
|
||||
}
|
||||
|
||||
/* ===== 顶部导航条 ===== */
|
||||
.topbar{
|
||||
display:flex;align-items:center;justify-content:space-between;
|
||||
padding:18px 0 10px;
|
||||
}
|
||||
.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;}
|
||||
.topbar .brand .dot{
|
||||
width:10px;height:10px;border-radius:50%;
|
||||
background:linear-gradient(135deg,var(--accent),#ffb25e);
|
||||
box-shadow:0 0 0 4px var(--accent-soft);
|
||||
}
|
||||
.topbar .tag{font-size:12px;color:var(--ink-faint);font-weight:500;}
|
||||
|
||||
/* ===== 封面 Hero ===== */
|
||||
.hero{
|
||||
padding:36px 0 30px;
|
||||
text-align:center;
|
||||
opacity:0;transform:translateY(16px);
|
||||
}
|
||||
.hero.in{animation:rise .7s ease forwards;}
|
||||
.hero .photo{
|
||||
width:104px;height:104px;margin:0 auto 18px;
|
||||
border-radius:50%;
|
||||
background:var(--accent-soft);
|
||||
border:1px dashed #ffd9a8;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
font-size:40px;line-height:1;
|
||||
color:var(--accent-deep);
|
||||
overflow:hidden;
|
||||
}
|
||||
.hero .photo img{width:100%;height:100%;object-fit:cover;display:block;}
|
||||
.hero .photo .ph-tip{font-size:11px;color:var(--accent-deep);font-weight:500;}
|
||||
.hero h1{
|
||||
font-size:34px;font-weight:900;margin:0 0 6px;letter-spacing:.5px;
|
||||
}
|
||||
.hero .sub{
|
||||
font-size:16px;color:var(--ink-soft);font-weight:500;margin:0 0 18px;
|
||||
}
|
||||
.hero .sub b{color:var(--accent-deep);font-weight:700;}
|
||||
.hero .badge{
|
||||
display:inline-flex;align-items:center;gap:6px;
|
||||
background:var(--bg-soft);border:1px solid var(--border);
|
||||
color:var(--ink-soft);font-size:12.5px;font-weight:500;
|
||||
padding:6px 14px;border-radius:999px;
|
||||
}
|
||||
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px;}
|
||||
.chip{
|
||||
font-size:13px;font-weight:500;color:var(--ink-soft);
|
||||
background:var(--bg-soft);border:1px solid var(--border);
|
||||
padding:6px 14px;border-radius:999px;
|
||||
}
|
||||
.chip.accent{color:var(--accent-deep);background:var(--accent-soft);border-color:#ffd9a8;}
|
||||
|
||||
/* ===== 通用区块 ===== */
|
||||
.section{padding:34px 0 4px;}
|
||||
.section-head{margin-bottom:18px;}
|
||||
.section-head .kicker{
|
||||
display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;
|
||||
color:var(--accent-deep);background:var(--accent-soft);
|
||||
padding:4px 12px;border-radius:6px;margin-bottom:10px;
|
||||
}
|
||||
.section-head h2{font-size:23px;font-weight:900;margin:0;}
|
||||
.section-head p{margin:8px 0 0;color:var(--ink-soft);font-size:14.5px;}
|
||||
|
||||
.card{
|
||||
background:var(--card);
|
||||
border:1px solid var(--border);
|
||||
border-radius:var(--radius);
|
||||
box-shadow:var(--shadow-sm);
|
||||
padding:22px 22px 20px;
|
||||
margin-bottom:14px;
|
||||
}
|
||||
|
||||
/* ===== 关于我 ===== */
|
||||
.about-grid{display:grid;grid-template-columns:1fr;gap:14px;}
|
||||
@media(min-width:480px){.about-grid{grid-template-columns:1fr 1fr;}}
|
||||
.stat-box{
|
||||
border:1px solid var(--border);border-radius:12px;
|
||||
background:var(--bg-soft);padding:16px;
|
||||
}
|
||||
.stat-box .num{font-size:22px;font-weight:900;color:var(--ink);}
|
||||
.stat-box .num em{font-style:normal;color:var(--accent-deep);}
|
||||
.stat-box .lbl{font-size:13px;color:var(--ink-soft);margin-top:2px;}
|
||||
.about-text{font-size:15px;color:var(--ink);margin:0;}
|
||||
.about-text p{margin:0 0 12px;}
|
||||
.about-text p:last-child{margin-bottom:0;}
|
||||
.about-text strong{color:var(--accent-deep);font-weight:700;}
|
||||
|
||||
/* ===== 擅长方向 ===== */
|
||||
.skill-list{display:grid;grid-template-columns:1fr;gap:12px;}
|
||||
.skill{
|
||||
display:flex;gap:14px;align-items:flex-start;
|
||||
background:var(--card);border:1px solid var(--border);
|
||||
border-radius:12px;padding:16px 18px;
|
||||
}
|
||||
.skill .ico{
|
||||
flex:none;width:48px;height:48px;border-radius:12px;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
overflow:hidden;padding:6px;
|
||||
}
|
||||
.skill .ico img{
|
||||
width:100%;height:100%;object-fit:contain;
|
||||
display:block;
|
||||
}
|
||||
.skill .ico.kitten{background:var(--accent-soft);}
|
||||
.skill .ico.ai{background:var(--blue-soft);}
|
||||
.skill .ico.cpp{background:var(--green-soft);}
|
||||
.skill .body h3{margin:0 0 3px;font-size:16px;font-weight:700;}
|
||||
.skill .body .meta{font-size:12px;color:var(--ink-faint);font-weight:500;margin-bottom:4px;}
|
||||
.skill .body p{margin:0;font-size:14px;color:var(--ink-soft);}
|
||||
|
||||
/* ===== 给家长的话 ===== */
|
||||
.letter-note{font-size:15px;color:var(--ink);margin:0 0 16px;}
|
||||
.letter-note strong{color:var(--accent-deep);}
|
||||
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
|
||||
.steps li{
|
||||
display:flex;gap:12px;align-items:flex-start;
|
||||
border:1px solid var(--border);border-radius:12px;
|
||||
padding:12px 14px;background:var(--bg-soft);
|
||||
}
|
||||
.steps .no{
|
||||
flex:none;width:26px;height:26px;border-radius:8px;
|
||||
background:var(--accent);color:#fff;
|
||||
font-size:13px;font-weight:700;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
}
|
||||
.steps .txt{font-size:14px;color:var(--ink);}
|
||||
.steps .txt b{display:block;font-size:14.5px;margin-bottom:1px;}
|
||||
.steps .txt span{color:var(--ink-soft);}
|
||||
|
||||
/* ===== 教学理念 ===== */
|
||||
.principle{
|
||||
border-left:4px solid var(--accent);
|
||||
background:var(--bg-soft);
|
||||
border-radius:0 12px 12px 0;
|
||||
padding:16px 18px;margin-bottom:12px;
|
||||
}
|
||||
.principle h3{margin:0 0 4px;font-size:16px;font-weight:700;}
|
||||
.principle p{margin:0;font-size:14px;color:var(--ink-soft);}
|
||||
.quote{
|
||||
text-align:center;color:var(--ink-soft);font-size:14.5px;
|
||||
border-top:1px dashed var(--border);margin-top:18px;padding-top:16px;
|
||||
}
|
||||
.quote b{color:var(--accent-deep);font-weight:700;}
|
||||
|
||||
/* ===== 上课精彩片段 · 轮播 ===== */
|
||||
.carousel{
|
||||
position:relative;
|
||||
border:1px solid var(--border);
|
||||
border-radius:var(--radius);
|
||||
overflow:hidden;
|
||||
background:var(--card);
|
||||
box-shadow:var(--shadow-sm);
|
||||
}
|
||||
.car-track{
|
||||
display:flex;
|
||||
transition:transform .55s cubic-bezier(.25,.8,.35,1);
|
||||
}
|
||||
.car-slide{
|
||||
flex:none;width:100%;
|
||||
margin:0;position:relative;
|
||||
}
|
||||
.car-slide img{
|
||||
width:100%;height:340px;object-fit:cover;
|
||||
display:block;background:var(--bg-soft);
|
||||
}
|
||||
@media(min-width:480px){
|
||||
.car-slide img{height:400px;}
|
||||
}
|
||||
.car-btn{
|
||||
position:absolute;top:50%;transform:translateY(-50%);
|
||||
width:38px;height:38px;border-radius:50%;
|
||||
border:none;cursor:pointer;
|
||||
background:rgba(255,255,255,.9);
|
||||
color:var(--ink);font-size:24px;line-height:1;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
box-shadow:0 2px 8px rgba(31,36,48,.18);
|
||||
transition:background .2s,transform .2s;
|
||||
z-index:5;
|
||||
}
|
||||
.car-btn:hover{background:#fff;transform:translateY(-50%) scale(1.08);}
|
||||
.car-btn.prev{left:12px;}
|
||||
.car-btn.next{right:12px;}
|
||||
.car-dots{
|
||||
position:absolute;left:0;right:0;bottom:10px;
|
||||
display:flex;justify-content:center;gap:7px;z-index:5;
|
||||
}
|
||||
.car-dots button{
|
||||
width:8px;height:8px;border-radius:50%;
|
||||
border:none;cursor:pointer;padding:0;
|
||||
background:rgba(255,255,255,.55);
|
||||
transition:background .25s,width .25s;
|
||||
}
|
||||
.car-dots button.on{background:#fff;width:22px;border-radius:4px;}
|
||||
.gallery-note{
|
||||
margin:14px 0 0;text-align:center;font-size:12px;color:var(--ink-faint);
|
||||
}
|
||||
|
||||
/* ===== 结尾 ===== */
|
||||
.closing{text-align:center;padding:44px 0 8px;}
|
||||
.closing .line{
|
||||
width:36px;height:3px;border-radius:2px;
|
||||
background:linear-gradient(90deg,var(--accent),#ffb25e);
|
||||
margin:0 auto 18px;
|
||||
}
|
||||
.closing h2{font-size:22px;font-weight:900;margin:0 0 10px;}
|
||||
.closing p{margin:0 auto;max-width:420px;color:var(--ink-soft);font-size:14.5px;}
|
||||
.closing .sign{
|
||||
margin-top:20px;font-size:13px;color:var(--ink-faint);letter-spacing:1px;
|
||||
}
|
||||
.footer{
|
||||
text-align:center;font-size:11.5px;color:var(--ink-faint);
|
||||
margin-top:34px;padding-top:16px;border-top:1px solid var(--border);
|
||||
}
|
||||
|
||||
@keyframes rise{
|
||||
to{opacity:1;transform:translateY(0);}
|
||||
}
|
||||
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;}
|
||||
.reveal.in{opacity:1;transform:translateY(0);}
|
||||
</style>
|
||||
</head>
|
||||
<body class="lock">
|
||||
<div id="splash" role="button" aria-label="进入页面" tabindex="0">
|
||||
<div class="splash-brand"><span class="dot"></span>穹狼科创 · QONNWOLF</div>
|
||||
<div class="splash-orb"><img src="个人头像.jpg" alt="橙子老师头像"></div>
|
||||
<h1 class="splash-title">橙子老师</h1>
|
||||
<p class="splash-sub">把编程，变成一件好玩的事</p>
|
||||
<div class="splash-tags">
|
||||
<span>Kitten</span><span>AIAGENT</span><span>C++</span><span>GESP</span>
|
||||
</div>
|
||||
<div class="splash-enter">
|
||||
<span>轻触屏幕 · 进入</span>
|
||||
</div>
|
||||
<div class="splash-hint">计算机专业本科 · 三年少儿编程教学经验</div>
|
||||
</div>
|
||||
<div id="app">
|
||||
|
||||
<div class="topbar">
|
||||
<span class="brand"><span class="dot"></span>穹狼科创</span>
|
||||
<span class="tag">少儿编程教师</span>
|
||||
</div>
|
||||
|
||||
<!-- ===== 封面 ===== -->
|
||||
<header class="hero">
|
||||
<div class="photo" id="avatarSlot">
|
||||
<span class="ph-tip" id="avatarTip">橙子老师<br>照片位</span>
|
||||
</div>
|
||||
<h1>橙子老师</h1>
|
||||
<p class="sub">计算机专业本科 · 三年少儿编程教学经验</p>
|
||||
<span class="badge">🌟 信息学启蒙到信奥进阶</span>
|
||||
<div class="chips">
|
||||
<span class="chip accent">Kitten 图形化</span>
|
||||
<span class="chip">AIAGENT 创意编程</span>
|
||||
<span class="chip">C++ 信息奥赛</span>
|
||||
<span class="chip">GESP 考级</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ===== 关于我 ===== -->
|
||||
<section class="section">
|
||||
<div class="section-head">
|
||||
<span class="kicker">ABOUT</span>
|
||||
<h2>关于我</h2>
|
||||
</div>
|
||||
<div class="about-grid reveal">
|
||||
<div>
|
||||
<div class="stat-box">
|
||||
<div class="num"><em>3</em> 年+</div>
|
||||
<div class="lbl">少儿编程教学经验</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="stat-box">
|
||||
<div class="num">计算机专业本科</div>
|
||||
<div class="lbl">科班出身，懂算法也懂孩子</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card about-text reveal" style="margin-top:14px;">
|
||||
<p>我是橙子老师，计算机专业本科毕业，教龄三年，目前是<strong>穹狼科创</strong>的少儿编程教师，主带 2–6 年级的孩子。</p>
|
||||
<p>从图形化启蒙到算法刷题，我教过<strong>Kitten、AIAGENT、C++（信息奥赛）、GESP 考级</strong>四类课程，完整带过从零基础到能独立写算法的孩子。</p>
|
||||
<p>我上课不靠"你真棒"式的空话，更在意<strong>看见每个孩子具体做了什么</strong>：他卡在哪一步、为什么卡、怎么帮他迈过去——每个孩子节奏不同，我陪他按自己的步子走。</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 擅长方向 ===== -->
|
||||
<section class="section">
|
||||
<div class="section-head">
|
||||
<span class="kicker">EXPERTISE</span>
|
||||
<h2>擅长方向</h2>
|
||||
<p>从兴趣启蒙到信奥进阶，四段课程我都能带</p>
|
||||
</div>
|
||||
<div class="skill-list reveal">
|
||||
<div class="skill">
|
||||
<div class="ico kitten"><img src="课程图表/Kitten图标.png" alt="Kitten 图标"></div>
|
||||
<div class="body">
|
||||
<h3>Kitten 图形化编程</h3>
|
||||
<div class="meta">适合 2–3 年级 · 逻辑入门</div>
|
||||
<p>拖拽积木就能做出动画和小游戏，帮低年级孩子建立"顺序、循环、条件"的逻辑直觉，先爱上动手创造。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill">
|
||||
<div class="ico ai"><img src="课程图表/AIAgent图标.png" alt="AIAGENT 图标"></div>
|
||||
<div class="body">
|
||||
<h3>AIAGENT 创意编程</h3>
|
||||
<div class="meta">适合 3–5 年级 · AI 人机协作</div>
|
||||
<p>带孩子用 AI 辅助创作作品（动画、网页、小游戏），练的是创意表达 + 提示词思维 + 把想法落地的能力。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill">
|
||||
<div class="ico cpp"><img src="课程图表/C++图标.png" alt="C++ 图标"></div>
|
||||
<div class="body">
|
||||
<h3>C++ 信息奥赛 / GESP 考级</h3>
|
||||
<div class="meta">适合 4–6 年级 · 算法思维</div>
|
||||
<p>从基础语法到数组、循环、贪心等经典算法，配套 OJ 刷题训练，帮孩子把思路写成能跑通的代码，冲刺考级与竞赛。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 给家长的话 ===== -->
|
||||
<section class="section">
|
||||
<div class="section-head">
|
||||
<span class="kicker">FOR PARENTS</span>
|
||||
<h2>给家长的话</h2>
|
||||
</div>
|
||||
<div class="card reveal">
|
||||
<p class="letter-note">每周课后，我都会给每个孩子写一封<strong>专属家长信</strong>，不套模板，只讲您家孩子这周的真实情况，三件事：</p>
|
||||
<ol class="steps">
|
||||
<li>
|
||||
<span class="no">1</span>
|
||||
<span class="txt"><b>本周学了什么</b><span>知识点一条条列清楚，您不用问也知道课堂进度</span></span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="no">2</span>
|
||||
<span class="txt"><b>孩子的课堂表现</b><span>具体到一次发言、一次卡壳、一次主动求助</span></span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="no">3</span>
|
||||
<span class="txt"><b>回家可以做的一件小事</b><span>给孩子一个巩固的小任务，亲子一起动手</span></span>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="quote">课堂内外有任何想聊的，随时在<b>班级群</b>里找我～</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 教学理念 ===== -->
|
||||
<section class="section">
|
||||
<div class="section-head">
|
||||
<span class="kicker">PHILOSOPHY</span>
|
||||
<h2>我的教学理念</h2>
|
||||
</div>
|
||||
<div class="reveal">
|
||||
<div class="principle">
|
||||
<h3>看见具体行为</h3>
|
||||
<p>不说"你真棒"，说"你今天主动帮卡住的同学看代码，老师很欣慰"——夸到点子上，孩子才知道什么值得坚持。</p>
|
||||
</div>
|
||||
<div class="principle">
|
||||
<h3>肯定努力过程</h3>
|
||||
<p>"代码还没跑通，但你能一眼看出问题在哪一行，这就是程序员的直觉。"过程和结果，同样值得被看见。</p>
|
||||
</div>
|
||||
<div class="principle">
|
||||
<h3>给出具体方向</h3>
|
||||
<p>不空喊"继续加油"，而是"下次先把思路画在纸上，再动手写"——每个建议都要能直接落地。</p>
|
||||
</div>
|
||||
<div class="quote">孩子写下的代码可以推倒重来，但<b>逻辑思维、专注与抗挫力</b>，会成为他真正带得走的能力。</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 上课精彩片段 ===== -->
|
||||
<section class="section">
|
||||
<div class="section-head">
|
||||
<span class="kicker">CLASS MOMENTS</span>
|
||||
<h2>上课精彩片段</h2>
|
||||
<p>每一个孩子，都在课堂上发着光</p>
|
||||
</div>
|
||||
<div class="carousel reveal" id="classCarousel">
|
||||
<div class="car-track">
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20250307_汪子杰_比V搞怪.jpg" alt="汪子杰 比V搞怪">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20250317_陈嘉博_微笑.jpg" alt="陈嘉博 微笑">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20250317_李承泽_搞怪比耶.jpg" alt="李承泽 搞怪比耶">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20250317_杨翊弘_正面微笑.jpg" alt="杨翊弘 正面微笑">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20250322_谭俊研_比耶搞怪.jpg" alt="谭俊研 比耶搞怪">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20250419_卢皓霖_正面微笑.jpg" alt="卢皓霖 正面微笑">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20250513_魏铭轩_比V微笑.jpg" alt="魏铭轩 比V微笑">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20250513_张雨禾_比V搞怪.jpg" alt="张雨禾 比V搞怪">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20250516_欧俊宇_比V搞怪.jpg" alt="欧俊宇 比V搞怪">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20250516_谢明泓_比V微笑.jpg" alt="谢明泓 比V微笑">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20250520_黄俊博_正面微笑.jpg" alt="黄俊博 正面微笑">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20250523_杨林轩_比V微笑.jpg" alt="杨林轩 比V微笑">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20250530_苏俊宇_比V开心.jpg" alt="苏俊宇 比V开心">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20250606_李梓宁_比V微笑.jpg" alt="李梓宁 比V微笑">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20250607_王子墨_正面微笑.jpg" alt="王子墨 正面微笑">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20251228_黄彦棋_微笑.jpg" alt="黄彦棋 微笑">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20260403_郭艺嘉_专注操作.jpg" alt="郭艺嘉 专注操作">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20260412_吴浩睿_和同学玩体感游戏.jpg" alt="吴浩睿 和同学玩体感游戏">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20260418_王晨语_和同学微笑.jpg" alt="王晨语 和同学微笑">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20260419_钟嘉逸_和同学操作电脑.jpg" alt="钟嘉逸 和同学操作电脑">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20260426_梁境城_和同学背影.jpg" alt="梁境城 和同学背影">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20260513_林俊宇_专注看屏幕.jpg" alt="林俊宇 专注看屏幕">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20260513_余浩宸_和同学专注看屏幕.jpg" alt="余浩宸 和同学专注看屏幕">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20260607_贺楚悦_侧面玩体感游戏.jpg" alt="贺楚悦 侧面玩体感游戏">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20260620_陈圆振_侧面专注.jpg" alt="陈圆振 侧面专注">
|
||||
</figure>
|
||||
<figure class="car-slide">
|
||||
<img src="上课照片/20260620_彭煜腾_侧面操作.jpg" alt="彭煜腾 侧面操作">
|
||||
</figure>
|
||||
</div>
|
||||
<button class="car-btn prev" aria-label="上一张">‹</button>
|
||||
<button class="car-btn next" aria-label="下一张">›</button>
|
||||
<div class="car-dots"></div>
|
||||
</div>
|
||||
<p class="gallery-note">点击箭头或左右滑动浏览 · 自动播放中</p>
|
||||
</section>
|
||||
<!-- ===== 结尾 ===== -->
|
||||
<div class="closing reveal">
|
||||
<div class="line"></div>
|
||||
<h2>期待和你的孩子一起，<br>把编程变成一件好玩的事</h2>
|
||||
<p>愿我们携手，陪孩子把每一步走得踏实又快乐。</p>
|
||||
<div class="sign">橙子老师 · 穹狼科创</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">穹狼科创 QONNWOLF · 橙子老师个人介绍</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 沉浸式开场：点击进入
|
||||
(function(){
|
||||
var splash=document.getElementById('splash');
|
||||
if(!splash){document.body.classList.remove('lock');return;}
|
||||
var entered=false;
|
||||
function enter(){
|
||||
if(entered)return;
|
||||
entered=true;
|
||||
document.body.classList.remove('lock');
|
||||
splash.classList.add('out');
|
||||
window.scrollTo(0,0);
|
||||
var hero=document.querySelector('.hero');
|
||||
if(hero)hero.classList.add('in');
|
||||
setTimeout(function(){
|
||||
if(splash.parentNode)splash.parentNode.removeChild(splash);
|
||||
startReveal();
|
||||
},800);
|
||||
}
|
||||
splash.addEventListener('click',enter);
|
||||
splash.addEventListener('keydown',function(e){
|
||||
if(e.key==='Enter'||e.key===' '){e.preventDefault();enter();}
|
||||
});
|
||||
splash.addEventListener('touchstart',function(e){e.preventDefault();enter();},{passive:false});
|
||||
// 兜底：2.5s 后仍未进入也可点击
|
||||
})();
|
||||
// 滚动渐入
|
||||
function startReveal(){
|
||||
var els=document.querySelectorAll('.reveal');
|
||||
if(!('IntersectionObserver' in window)){
|
||||
els.forEach(function(el){el.classList.add('in');});
|
||||
return;
|
||||
}
|
||||
var io=new IntersectionObserver(function(entries){
|
||||
entries.forEach(function(e){
|
||||
if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}
|
||||
});
|
||||
},{threshold:.1});
|
||||
els.forEach(function(el){io.observe(el);});
|
||||
}
|
||||
// 上课精彩片段 · 轮播图
|
||||
(function(){
|
||||
var car=document.getElementById('classCarousel');
|
||||
if(!car)return;
|
||||
var track=car.querySelector('.car-track');
|
||||
var slides=car.querySelectorAll('.car-slide');
|
||||
var dotsBox=car.querySelector('.car-dots');
|
||||
var prevBtn=car.querySelector('.car-btn.prev');
|
||||
var nextBtn=car.querySelector('.car-btn.next');
|
||||
var n=slides.length;
|
||||
if(n<=1){if(prevBtn)prevBtn.style.display='none';if(nextBtn)nextBtn.style.display='none';return;}
|
||||
var idx=0, timer=null;
|
||||
// 生成圆点
|
||||
for(var i=0;i<n;i++){
|
||||
var d=document.createElement('button');
|
||||
d.type='button';d.setAttribute('aria-label','第'+(i+1)+'张');
|
||||
(function(k){d.addEventListener('click',function(){go(k);restart();});})(i);
|
||||
dotsBox.appendChild(d);
|
||||
}
|
||||
var dots=dotsBox.querySelectorAll('button');
|
||||
function go(i){
|
||||
idx=(i+n)%n;
|
||||
track.style.transform='translateX(-'+(idx*100)+'%)';
|
||||
for(var j=0;j<n;j++){dots[j].classList.toggle('on',j===idx);}
|
||||
}
|
||||
function restart(){if(timer)clearInterval(timer);timer=setInterval(function(){go(idx+1);},3500);}
|
||||
prevBtn.addEventListener('click',function(){go(idx-1);restart();});
|
||||
nextBtn.addEventListener('click',function(){go(idx+1);restart();});
|
||||
// 触摸/鼠标滑动
|
||||
var x0=null;
|
||||
car.addEventListener('touchstart',function(e){x0=e.touches[0].clientX;},{passive:true});
|
||||
car.addEventListener('touchend',function(e){
|
||||
if(x0===null)return;
|
||||
var dx=e.changedTouches[0].clientX-x0;
|
||||
if(Math.abs(dx)>40){go(dx<0?idx+1:idx-1);restart();}
|
||||
x0=null;
|
||||
},{passive:true});
|
||||
// 鼠标悬停暂停
|
||||
car.addEventListener('mouseenter',function(){if(timer)clearInterval(timer);});
|
||||
car.addEventListener('mouseleave',function(){restart();});
|
||||
go(0);restart();
|
||||
})();
|
||||
// 头像占位：放入橙子老师.jpg 后自动替换
|
||||
(function(){
|
||||
var tip=document.getElementById('avatarTip');
|
||||
var slot=document.getElementById('avatarSlot');
|
||||
if(!tip||!slot)return;
|
||||
var img=new Image();
|
||||
img.onload=function(){slot.innerHTML='';slot.appendChild(img);};
|
||||
img.onerror=function(){};
|
||||
img.src='个人头像.jpg';
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
橙子老师介绍/课程图表/AIAgent图标.png
Normal file
BIN
橙子老师介绍/课程图表/AIAgent图标.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
橙子老师介绍/课程图表/C++图标.png
Normal file
BIN
橙子老师介绍/课程图表/C++图标.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
橙子老师介绍/课程图表/Kitten图标.png
Normal file
BIN
橙子老师介绍/课程图表/Kitten图标.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Reference in New Issue
Block a user