Viewing: index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>batik77 Game Online x ่ฏพ็จๆถ้ด่กจ</title>
<style>
:root{--gap:10px;--radius:14px;--slot:64px;--grid-left:100px}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#fff;color:#0f172a}
.wrap{max-width:1200px;margin:0 auto;padding:16px}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 16px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.dot{width:14px;height:14px;border-radius:999px;border:1px solid #0002}
.c-park{background:#bbf7d0;border-color:#16a34a}
.c-2387{background:#fde68a;border-color:#eab308}
.c-2383{background:#a5f3fc;border-color:#06b6d4}
.c-2375{background:#e9d5ff;border-color:#a855f7}
.c-online{background:#fecdd3;border-color:#f43f5e}
.grid{display:grid;grid-template-columns: var(--grid-left) repeat(7,1fr)}
.cell{border-left:1px solid #e5e7eb;height:var(--slot)}
.time{padding:8px 10px;text-align:right;font-size:12px;color:#64748b;border-left:none}
.row-alt{background:#f8fafc}
.day-head{position:sticky;top:0;background:#ffffffcc;backdrop-filter:blur(6px);border-bottom:1px solid #e5e7eb;padding:8px 0;text-align:center;font-weight:600;z-index:2}
.event{position:absolute;left:6px;right:6px;border:1px solid #0002;border-radius:12px;box-shadow:0 1px 3px #0001;padding:8px;font-size:12px}
.event .t{opacity:.75;margin-bottom:2px}
.event .title{font-weight:600}
.col{position:relative}
@media (max-width: 900px){
.grid{grid-template-columns: 1fr}
.time{display:none}
.col{min-height:calc(var(--slot)*10)}
.day-head{position:static}
}
textarea.json{width:100%;height:220px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;padding:10px;border:1px solid #e5e7eb;border-radius:10px}
.error{color:#dc2626;font-size:12px;margin-top:4px}
.panel{border:1px solid #e5e7eb;border-radius:14px;padding:12px;margin-top:16px}
</style>
</head>
<body>
<div class="wrap">
<h2>่ฏพ็จๆถ้ด่กจ / Weekly Classes</h2>
<!-- Legend -->
<div class="legend">
<span class="chip"><span class="dot c-park"></span>ๅ
ฌๅญ</span>
<span class="chip"><span class="dot c-2387"></span>2387ไฟก</span>
<span class="chip"><span class="dot c-2383"></span>2383ๅ </span>
<span class="chip"><span class="dot c-2375"></span>2375็ฑ</span>
<span class="chip"><span class="dot c-online"></span>็ฝ่ฏพ</span>
</div>
<div id="root"></div>
<div class="panel">
<strong>็ผ่พๆฐๆฎ (JSON)๏ผ</strong>
<textarea id="json-editor" class="json"></textarea>
<div id="json-error" class="error" style="display:none;"></div>
</div>
</div>
<!-- React 18 UMD -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- Your compiled code -->
<script src="/app.js"></script>
</body>
</html>
Close