/* ===================================================================== ★★ ไฟล์นี้ใช้บน Cloudflare Pages เท่านั้น ★★ ห้ามนำไปวางในไฟล์ Stylesheet ของ Apps Script (ของ Apps Script ต้องมี ครอบ — ใช้ apps-script/Stylesheet.html) ===================================================================== */ /* ========================================================================== Stylesheet.html — ระบบประกาศผลคะแนน (แบบหลายแท็บ) มหาวิทยาลัยหัวเฉียวเฉลิมพระเกียรติ / คณะวิทยาศาสตร์และเทคโนโลยี -------------------------------------------------------------------------- เปลี่ยนสี : แก้ค่าตัวแปรใน :root หรือเพิ่มชุดใหม่แบบ html[data-theme="ชื่อธีม"] { ... } แล้วเพิ่มรายการใน THEMES ของ index.html ขนาดตัวอักษร : JavaScript ปรับ font-size ของ ทั้งไฟล์นี้ใช้หน่วย rem จึงขยาย/ย่อตามไปด้วยทั้งหน้า ========================================================================== */ /* ---------- 1. ตัวแปรสีหลัก (ธีมเริ่มต้น: ocean) ---------- */ :root { --c1: #051937; --c2: #092f61; --c3: #10468e; --c4: #195fbe; --c5: #2778f0; --accent: #195fbe; --accent-ink: #ffffff; --accent-soft: rgba(25, 95, 190, .10); --page-bg: #eef3fa; --surface: #ffffff; --ink: #16202e; --ink-soft: #5c6b80; --line: #dfe6ef; --th-bg: #f5f8fc; --zebra: #f9fbfe; --radius: 24px; --shadow: 0 12px 28px rgba(9, 32, 80, .12); --ring: rgba(39, 120, 240, .45); } /* ---------- 2. ชุดสีสำรอง ---------- */ html[data-theme="sunset"] { --c1: #4a1602; --c2: #7c2f08; --c3: #b04f10; --c4: #dd7a1e; --c5: #f5a742; --accent: #c05e11; --accent-soft: rgba(192, 94, 17, .12); --page-bg: #fdf4e9; --surface: #ffffff; --ink: #2c1a0b; --ink-soft: #7a6250; --line: #f0dfc9; --th-bg: #fdf3e6; --zebra: #fffaf2; --shadow: 0 12px 28px rgba(120, 60, 0, .14); --ring: rgba(221, 122, 30, .45); } html[data-theme="forest"] { --c1: #052e16; --c2: #0a4d26; --c3: #10763c; --c4: #189e54; --c5: #3fc77c; --accent: #10763c; --accent-soft: rgba(16, 118, 60, .12); --page-bg: #edf6f0; --surface: #ffffff; --ink: #10261a; --ink-soft: #55705f; --line: #d8e8de; --th-bg: #eff8f2; --zebra: #f7fcf9; --shadow: 0 12px 28px rgba(6, 60, 30, .13); --ring: rgba(24, 158, 84, .45); } html[data-theme="grape"] { --c1: #2a0845; --c2: #451a6d; --c3: #6a2c9e; --c4: #8f47c9; --c5: #b878e8; --accent: #6a2c9e; --accent-soft: rgba(106, 44, 158, .12); --page-bg: #f4eefb; --surface: #ffffff; --ink: #23113a; --ink-soft: #6a5a7d; --line: #e5d9f2; --th-bg: #f6f0fc; --zebra: #fbf8fe; --shadow: 0 12px 28px rgba(60, 20, 100, .14); --ring: rgba(143, 71, 201, .45); } html[data-theme="night"] { --c1: #05070d; --c2: #0d1220; --c3: #172236; --c4: #22304b; --c5: #35507e; --accent: #4d8df0; --accent-ink: #f2f7ff; --accent-soft: rgba(77, 141, 240, .20); --page-bg: #0a0e16; --surface: #141b28; --ink: #e8eef8; --ink-soft: #9aa8bd; --line: #253148; --th-bg: #1a2333; --zebra: #171f2d; --shadow: 0 12px 30px rgba(0, 0, 0, .55); --ring: rgba(77, 141, 240, .55); } /* ---------- 3. โครงหน้าเว็บ ---------- */ html { font-size: 16px; } /* JavaScript แก้ค่านี้เมื่อกดปุ่มขนาดตัวอักษร */ body { font-family: 'Sarabun', system-ui, sans-serif !important; background: var(--page-bg); color: var(--ink); transition: background-color .35s ease, color .35s ease; padding-bottom: 3rem; } ::placeholder { color: var(--ink-soft); opacity: .65; font-size: 1rem; text-align: center; } .d-none { display: none !important; } /* ---------- 4. แถบหัวเรื่อง + โลโก้ ---------- */ .app-navbar { position: relative; display: flex; align-items: center; gap: .9rem; padding: .75rem 1.1rem; border-radius: var(--radius); box-shadow: var(--shadow); color: #fff; background-image: linear-gradient(to right top, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5)); transition: background-image .35s ease, box-shadow .35s ease; } .brand-logo-link { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; flex: 0 0 3.4rem; border-radius: 16px; background: rgba(255, 255, 255, .92); color: var(--c3); font-size: 1.35rem; text-decoration: none; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; } .brand-logo-link:hover, .brand-logo-link:focus-visible { transform: translateY(-2px) scale(1.06); box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); background: #fff; } .brand-logo-link:active { transform: translateY(0) scale(.98); } .brand-logo-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .brand-logo { width: 100%; height: 100%; object-fit: contain; padding: 5px; } .navbar-title { flex: 1 1 auto; text-align: center; font-size: 1.05rem; font-weight: 600; line-height: 1.45; margin: 0; } /* ---------- 5. ปุ่มควบคุม (ขนาดตัวอักษร + ชุดสี) ---------- */ .control-dock { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; } .font-dock { display: flex; align-items: center; gap: .25rem; padding: .2rem .35rem; border-radius: 14px; background: rgba(255, 255, 255, .14); } .font-level { min-width: 3.1rem; text-align: center; font-size: .78rem; font-weight: 600; color: #fff; opacity: .9; } .ctrl-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 1.05rem; cursor: pointer; transition: background-color .2s ease, transform .2s ease, opacity .2s ease; } .ctrl-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .34); } .ctrl-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .ctrl-btn:disabled { opacity: .38; cursor: not-allowed; } #themeBtn:hover { transform: rotate(-12deg); } .fs-mark { font-weight: 700; line-height: 1; } .fs-mark-sm { font-size: .82rem; } .fs-mark-lg { font-size: 1.22rem; } .theme-dock { position: relative; } .theme-menu { position: absolute; top: 3.2rem; right: 0; z-index: 30; width: 14.5rem; padding: .75rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); animation: pop .18s ease-out; } .theme-menu[hidden] { display: none; } .theme-menu h6 { margin: 2px 4px .6rem; font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft); } .theme-option { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem; margin-bottom: 4px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink); font-size: .92rem; text-align: left; cursor: pointer; transition: background-color .18s ease, border-color .18s ease; } .theme-option:hover { background: var(--accent-soft); } .theme-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .theme-option[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; } .theme-option[aria-checked="true"]::after { content: "\2713"; margin-left: auto; color: var(--accent); font-weight: 700; } .swatch { width: 1.6rem; height: 1.6rem; flex: 0 0 1.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); } /* ---------- 6. การ์ด ---------- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem 1.25rem; text-align: center; transition: background-color .35s ease, border-color .35s ease; } .form-shell { max-width: 24rem; margin: 0 auto; } .stat-line { margin: 0 auto 1.25rem; max-width: 40rem; font-size: .98rem; line-height: 1.7; color: var(--ink-soft); } .form-control { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: .75rem 1rem; font-size: 1rem; text-align: center; } .form-control:focus { background: var(--surface); color: var(--ink); border-color: var(--accent); box-shadow: 0 0 0 .25rem var(--ring); } .btn-search { min-width: 12rem; padding: .7rem 1.6rem; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--c4), var(--c5)); color: var(--accent-ink); font-size: 1rem; font-weight: 600; box-shadow: 0 8px 18px var(--accent-soft); transition: transform .2s ease, filter .2s ease; } .btn-search:hover { transform: translateY(-2px); filter: brightness(1.06); color: var(--accent-ink); } .btn-search:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; } .btn-search:disabled { opacity: .65; transform: none; } .spinner-row { min-height: 1.25rem; } /* ---------- 7. ผลลัพธ์: ข้อมูลส่วนตัว ---------- */ .result-panel { text-align: left; animation: rise .3s ease-out; } .profile-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .profile-grid { flex: 1 1 18rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem 1.2rem; } .profile-item { display: flex; flex-direction: column; } .profile-label { font-size: .78rem; letter-spacing: .02em; color: var(--ink-soft); } .profile-value { font-size: 1rem; font-weight: 600; color: var(--ink); } .btn-ghost { flex: 0 0 auto; padding: .5rem .95rem; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink-soft); font-size: .88rem; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .btn-ghost:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- 8. แถบแท็บ ---------- */ .tabbar { display: flex; gap: .4rem; margin: 1.1rem 0 1rem; padding-bottom: .35rem; overflow-x: auto; scrollbar-width: thin; } .tab-btn { flex: 0 0 auto; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft); font-size: .93rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .tab-btn:hover { background: var(--accent-soft); color: var(--accent); } .tab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tab-btn.is-active { background: linear-gradient(135deg, var(--c4), var(--c5)); border-color: transparent; color: var(--accent-ink); box-shadow: 0 6px 14px var(--accent-soft); } .tab-panel { animation: rise .25s ease-out; } .tab-note { margin: 0 0 .7rem; font-size: .88rem; color: var(--ink-soft); } /* ---------- 9. ตารางคะแนน ---------- */ .app-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); color: var(--ink); font-size: .95rem; } .app-table th, .app-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle; } .app-table tr:last-child th, .app-table tr:last-child td { border-bottom: 0; } .app-table th { width: 46%; background: var(--th-bg); color: var(--ink); font-weight: 600; } .app-table tr:nth-child(even) td { background: var(--zebra); } .app-table tr.is-total th, .app-table tr.is-total td { background: var(--accent-soft); font-weight: 700; color: var(--ink); } .notice { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 16px; border: 1px dashed var(--line); background: var(--surface); color: var(--ink-soft); text-align: center; font-size: .95rem; } .updated-at { margin: 1rem 0 0; font-size: .8rem; color: var(--ink-soft); text-align: right; } /* ---------- 10. ท้ายหน้า ---------- */ .app-footer { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); text-align: center; color: var(--ink-soft); } .app-footer p { margin: 0; } .footer-org { font-size: .92rem; font-weight: 600; color: var(--ink); line-height: 1.6; } .footer-version { font-size: .82rem; margin-top: 4px !important; } /* ---------- 11. อนิเมชัน ---------- */ @keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---------- 12. จอเล็ก ---------- */ @media (max-width: 575.98px) { .app-navbar { flex-wrap: wrap; justify-content: center; text-align: center; } .navbar-title { order: 3; flex: 1 0 100%; font-size: .96rem; } .control-dock { flex: 0 0 auto; } .theme-menu { right: 0; } .app-table th { width: 50%; } .profile-head { gap: .75rem; } .btn-ghost { width: 100%; text-align: center; } } /* ========================================================================== ส่วนเพิ่มเติมสำหรับเวอร์ชัน Cloudflare Pages (ไม่มี Bootstrap) ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } .container { width: 100%; max-width: 60rem; margin: 0 auto; padding: 1.5rem 1rem; } img { max-width: 100%; } button { font-family: inherit; } .mb-3 { margin-bottom: 1rem; } .mt-1 { margin-top: .25rem; } .mt-3 { margin-top: 1rem; } .form-control { display: block; width: 100%; font-family: inherit; outline: 0; } .btn-search { cursor: pointer; } .table-responsive { width: 100%; overflow-x: auto; } /* ตัวหมุนระหว่างรอข้อมูล */ .spinner-row { display: flex; justify-content: center; gap: .45rem; min-height: 1.25rem; } .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--c4); animation: bounce .9s infinite ease-in-out; } .dot:nth-child(2) { animation-delay: .15s; background: var(--c5); } .dot:nth-child(3) { animation-delay: .3s; background: var(--c3); } @keyframes bounce { 0%, 80%, 100% { transform: scale(.55); opacity: .45; } 40% { transform: scale(1); opacity: 1; } } /* แถบแจ้งเตือนเมื่อยังไม่ได้ตั้งค่า API_URL */ .setup-warning { margin-bottom: 1rem; padding: .9rem 1.1rem; border-radius: 16px; border: 1px solid #f0c36d; background: #fff7e6; color: #7a5200; font-size: .9rem; line-height: 1.6; } .setup-warning code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 5px; }