phuocntb/rikkei_simple_care
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix ui
All checks were successful
Deploy on Master Change / deploy (push) Successful in 1m15s
Details

Browse Source
This commit is contained in:
Nguyễn Phước
2026-07-13 10:04:56 +07:00
parent 58c96609b6
commit b4c3155564
11 changed files with 587 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
client/app.go
View File

@@ -16,6 +16,7 @@ import (
"io" "io"
"log" "log"
"mime/multipart" "mime/multipart"
"net"
"net/http" "net/http"
"net/url" "net/url"
"os" "os"
@@ -154,6 +155,7 @@ type App struct {
wifiRejected bool wifiRejected bool
quitDialogShown bool quitDialogShown bool
monitoringTornDown bool monitoringTornDown bool
localBrowserActive bool // trình duyệt local — chỉ cho phép localhost
chatUnread int chatUnread int
replyStaffID uint replyStaffID uint
fetchAppsMu sync.Mutex fetchAppsMu sync.Mutex
@@ -276,6 +278,9 @@ func (a *App) startup(ctx context.Context) {
// Khởi chạy vòng lặp đọc local storage của trang Rikkei Portal khi chưa đăng nhập // Khởi chạy vòng lặp đọc local storage của trang Rikkei Portal khi chưa đăng nhập
go a.authStorageScanner() go a.authStorageScanner()
// Chặn thoát localhost khi đang dùng trình duyệt local
go a.localBrowserGuardLoop()
} }
func (a *App) handleGuardViolation(kind, reason string) { func (a *App) handleGuardViolation(kind, reason string) {
@@ -588,6 +593,7 @@ func (a *App) startLocalServer() {
w.Header().Set("Access-Control-Allow-Methods", "GET, OPTIONS") w.Header().Set("Access-Control-Allow-Methods", "GET, OPTIONS")
return return
} }
a.setLocalBrowserActive(false)
go func() { go func() {
guard.SuppressFor(5 * time.Second) guard.SuppressFor(5 * time.Second)
runtime.WindowReloadApp(a.ctx) runtime.WindowReloadApp(a.ctx)
@@ -604,6 +610,46 @@ func (a *App) startLocalServer() {
go a.purgeWebViewDiskCache() go a.purgeWebViewDiskCache()
w.Write([]byte("ok")) w.Write([]byte("ok"))
}) })
mux.HandleFunc("/local-browser", func(w http.ResponseWriter, r *http.Request) {
blocked := strings.TrimSpace(r.URL.Query().Get("blocked"))
from := strings.TrimSpace(r.URL.Query().Get("from"))
w.Header().Set("Content-Type", "text/html; charset=utf-8")
notice := ""
if blocked == "1" {
notice = `<div class="notice">Đã chặn liên kết ngoài mạng. Trình duyệt này chỉ mở <strong>localhost</strong> / <strong>127.0.0.1</strong>.</div>`
if from != "" {
notice += `<div class="notice-sub">Đã chặn: ` + html.EscapeString(from) + `</div>`
}
}
_, _ = fmt.Fprintf(w, localBrowserHTML, notice)
})
mux.HandleFunc("/local-browser-go", func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Access-Control-Allow-Origin", "*")
if r.Method == "OPTIONS" {
w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
return
}
raw := strings.TrimSpace(r.URL.Query().Get("url"))
if raw == "" {
http.Error(w, "missing url", http.StatusBadRequest)
return
}
if !strings.Contains(raw, "://") {
raw = "http://" + raw
}
if !isLoopbackURL(raw) {
http.Error(w, "only localhost allowed", http.StatusForbidden)
return
}
a.mu.Lock()
a.localBrowserActive = true
a.mu.Unlock()
go func() {
guard.SuppressFor(3 * time.Second)
runtime.WindowExecJS(a.ctx, fmt.Sprintf("window.location.href = %q", raw))
}()
w.Write([]byte("ok"))
})
go func() { go func() {
_ = server.ListenAndServe() _ = server.ListenAndServe()
@@ -690,6 +736,94 @@ document.addEventListener('keydown', function(e){
</body> </body>
</html>` </html>`
const localBrowserHTML = `<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trình duyệt Local — Simple Care</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Segoe UI,system-ui,sans-serif;background:#f5f7fa;color:#1a2332;min-height:100vh;display:flex;flex-direction:column}
.bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff;border-bottom:1px solid #e4e9f0;flex-wrap:wrap}
.bar button{border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer;font-weight:600;white-space:nowrap}
.btn-back{background:#fff;color:#bb2126;border:1px solid #bb2126}
.btn-back:hover{background:#fde8e9}
.btn-go{background:#bb2126;color:#fff;border:1px solid #bb2126}
.btn-go:hover{background:#9e1c22}
.addr{flex:1;min-width:220px;padding:8px 12px;border:1px solid #e4e9f0;border-radius:8px;font-size:13px}
.addr:focus{outline:2px solid rgba(187,33,38,.25);border-color:#bb2126}
.main{flex:1;padding:28px 20px;max-width:720px;margin:0 auto;width:100%%}
h1{font-size:1.35rem;margin-bottom:8px;color:#bb2126}
.lead{color:#5a6a7e;font-size:0.95rem;margin-bottom:18px;line-height:1.5}
.notice{background:#fde8e9;color:#9e1c22;border:1px solid #f5c2c4;border-radius:10px;padding:12px 14px;margin-bottom:10px;font-size:0.9rem}
.notice-sub{font-size:0.8rem;color:#8b99a8;margin-bottom:14px;word-break:break-all}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{background:#fff;border:1px solid #e4e9f0;border-radius:999px;padding:6px 12px;font-size:12px;cursor:pointer;color:#bb2126;font-weight:600}
.chip:hover{background:#fde8e9;border-color:#bb2126}
.hint{margin-top:22px;font-size:12px;color:#8b99a8;line-height:1.5}
</style>
</head>
<body>
<div class="bar">
<button type="button" class="btn-back" onclick="goHome()">← Về trang chính</button>
<input class="addr" id="addr" type="url" placeholder="http://localhost:3000" spellcheck="false" />
<button type="button" class="btn-go" onclick="goLocal()">Mở</button>
</div>
<div class="main">
%s
<h1>Trình duyệt Local</h1>
<p class="lead">Chỉ dùng để xem bài làm chạy trên máy bạn (<strong>localhost</strong> / <strong>127.0.0.1</strong>). Mọi link online (GitHub, Google, …) đều bị chặn tại đây.</p>
<div class="chips">
<button type="button" class="chip" onclick="fill('http://localhost:3000')">localhost:3000</button>
<button type="button" class="chip" onclick="fill('http://localhost:5173')">localhost:5173</button>
<button type="button" class="chip" onclick="fill('http://127.0.0.1:8080')">127.0.0.1:8080</button>
<button type="button" class="chip" onclick="fill('http://localhost:5500')">localhost:5500</button>
</div>
<p class="hint">Mẹo: chạy dự án (npm run dev / Live Server), dán URL vào ô trên rồi bấm Mở. Về trang chính: nút ← hoặc menu Simple Care → Ctrl+H.</p>
</div>
<script>
function fill(u){ document.getElementById('addr').value = u; }
function goHome(){
fetch('http://127.0.0.1:34115/exam-close').catch(function(){});
}
function isLoopback(raw){
try {
if (!raw) return false;
if (raw.indexOf('://') < 0) raw = 'http://' + raw;
var u = new URL(raw);
if (u.protocol !== 'http:' && u.protocol !== 'https:') return false;
var h = (u.hostname || '').toLowerCase();
if (h === 'localhost' || h === '127.0.0.1' || h === '::1' || h === '[::1]') return true;
if (/^127\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(h)) return true;
return false;
} catch (e) { return false; }
}
async function goLocal(){
var raw = (document.getElementById('addr').value || '').trim();
if (!raw) { alert('Nhập URL localhost'); return; }
if (!isLoopback(raw)) {
alert('Chỉ được mở localhost / 127.0.0.1');
return;
}
if (raw.indexOf('://') < 0) raw = 'http://' + raw;
try {
var res = await fetch('http://127.0.0.1:34115/local-browser-go?url=' + encodeURIComponent(raw));
if (!res.ok) {
alert('Không mở được — chỉ localhost');
return;
}
} catch (e) {
location.href = raw;
}
}
document.getElementById('addr').addEventListener('keydown', function(e){
if (e.key === 'Enter') { e.preventDefault(); goLocal(); }
});
</script>
</body>
</html>`
// loadSession nạp session từ file cục bộ // loadSession nạp session từ file cục bộ
func (a *App) loadSession() { func (a *App) loadSession() {
a.mu.Lock() a.mu.Lock()
@@ -808,6 +942,7 @@ func (a *App) GetStudentInfo() map[string]any {
// NavigateToLogin chuyển WebView đến trang đăng nhập Rikkei Portal // NavigateToLogin chuyển WebView đến trang đăng nhập Rikkei Portal
func (a *App) NavigateToLogin() { func (a *App) NavigateToLogin() {
a.setLocalBrowserActive(false)
a.mu.Lock() a.mu.Lock()
a.expectingLogin = true a.expectingLogin = true
a.mu.Unlock() a.mu.Unlock()
@@ -1844,10 +1979,88 @@ func (a *App) examStudentContext() (int64, *StudentExamSnapshot, error) {
// ReturnToDashboard quay lại giao diện chính của app (giữ cookie WebView2). // ReturnToDashboard quay lại giao diện chính của app (giữ cookie WebView2).
func (a *App) ReturnToDashboard() { func (a *App) ReturnToDashboard() {
a.setLocalBrowserActive(false)
guard.SuppressFor(5 * time.Second) guard.SuppressFor(5 * time.Second)
runtime.WindowReloadApp(a.ctx) runtime.WindowReloadApp(a.ctx)
} }
func (a *App) setLocalBrowserActive(on bool) {
a.mu.Lock()
a.localBrowserActive = on
a.mu.Unlock()
}
func isLoopbackURL(raw string) bool {
raw = strings.TrimSpace(raw)
if raw == "" {
return false
}
if !strings.Contains(raw, "://") {
raw = "http://" + raw
}
u, err := url.Parse(raw)
if err != nil || u.Host == "" {
return false
}
scheme := strings.ToLower(u.Scheme)
if scheme != "http" && scheme != "https" {
return false
}
host := strings.ToLower(u.Hostname())
if host == "localhost" {
return true
}
ip := net.ParseIP(host)
return ip != nil && ip.IsLoopback()
}
func (a *App) localBrowserGuardLoop() {
ticker := time.NewTicker(500 * time.Millisecond)
defer ticker.Stop()
for range ticker.C {
a.mu.Lock()
active := a.localBrowserActive && a.ctx != nil && !a.monitoringTornDown
ctx := a.ctx
a.mu.Unlock()
if !active {
continue
}
// Nếu hostname không phải loopback → đá về trang local-browser
runtime.WindowExecJS(ctx, `
(function(){
try {
var h = (location.hostname || '').toLowerCase();
var ok = h === 'localhost' || h === '127.0.0.1' || h === '::1' || h === '[::1]' || /^127\.\d+\.\d+\.\d+$/.test(h);
if (!ok) {
location.href = 'http://127.0.0.1:34115/local-browser?blocked=1&from=' + encodeURIComponent(location.href);
}
} catch (e) {}
})();
`)
}
}
// OpenGitHub mở github.com trong WebView (về trang chính: Ctrl+H).
func (a *App) OpenGitHub() {
a.setLocalBrowserActive(false)
guard.SuppressFor(5 * time.Second)
runtime.WindowExecJS(a.ctx, `window.location.href = 'https://github.com'`)
}
// OpenGoogleTranslate mở Google Dịch trong WebView.
func (a *App) OpenGoogleTranslate() {
a.setLocalBrowserActive(false)
guard.SuppressFor(5 * time.Second)
runtime.WindowExecJS(a.ctx, `window.location.href = 'https://translate.google.com/?sl=auto&tl=vi'`)
}
// OpenLocalBrowser mở trình duyệt chỉ cho phép localhost (test bài làm local).
func (a *App) OpenLocalBrowser() {
a.setLocalBrowserActive(true)
guard.SuppressFor(5 * time.Second)
runtime.WindowExecJS(a.ctx, `window.location.href = 'http://127.0.0.1:34115/local-browser'`)
}
// ReloadExamPage — F5: làm mới trang / iframe đang mở (trắc nghiệm). // ReloadExamPage — F5: làm mới trang / iframe đang mở (trắc nghiệm).
func (a *App) ReloadExamPage() { func (a *App) ReloadExamPage() {
guard.SuppressFor(3 * time.Second) guard.SuppressFor(3 * time.Second)
@@ -1928,6 +2141,7 @@ func (a *App) openExamWebView(targetURL, title string) error {
if targetURL == "" { if targetURL == "" {
return errors.New("không có nội dung để mở") return errors.New("không có nội dung để mở")
} }
a.setLocalBrowserActive(false)
// URL local (PDF/resource): khung exam-view. URL ngoài (quiz): mở top-level giữ first-party cookies/session. // URL local (PDF/resource): khung exam-view. URL ngoài (quiz): mở top-level giữ first-party cookies/session.
if isLocalExamURL(targetURL) { if isLocalExamURL(targetURL) {
wrapper := fmt.Sprintf( wrapper := fmt.Sprintf(

271
client/frontend/src/app.css
View File

@@ -18,10 +18,12 @@
--offline-light: #fdeaea; --offline-light: #fdeaea;
--shadow-sm: 0 1px 3px rgba(26, 35, 50, 0.05); --shadow-sm: 0 1px 3px rgba(26, 35, 50, 0.05);
--shadow-md: 0 4px 16px rgba(26, 35, 50, 0.07); --shadow-md: 0 4px 16px rgba(26, 35, 50, 0.07);
--radius-sm: 8px; --radius-sm: 7px;
--radius-md: 12px; --radius-md: 10px;
--radius-lg: 16px; --radius-lg: 12px;
--transition: 0.2s ease; --transition: 0.2s ease;
--page-pad: 0.75rem 0.9rem;
--card-pad: 0.95rem 1rem;
} }
* { * {
@@ -32,7 +34,8 @@
html { html {
height: 100%; height: 100%;
overflow: hidden; overflow-x: hidden;
overflow-y: auto;
} }
body { body {
@@ -40,18 +43,22 @@ body {
background-color: var(--bg-main); background-color: var(--bg-main);
color: var(--text-primary); color: var(--text-primary);
font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
overflow: hidden; font-size: 14px;
height: 100%; overflow-x: hidden;
overflow-y: auto;
min-height: 100%;
height: auto;
width: 100%; width: 100%;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
#app { #app {
width: 100%; width: 100%;
height: 100%; min-height: 100%;
max-height: 100vh; height: auto;
display: flex; max-height: none;
overflow: hidden; display: block;
overflow: visible;
} }
/* ── Cards ── */ /* ── Cards ── */
@@ -60,7 +67,7 @@ body {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
padding: 1.75rem; padding: var(--card-pad);
transition: var(--transition); transition: var(--transition);
} }
@@ -70,10 +77,10 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; min-height: 100%;
padding: 1.5rem; padding: 1rem;
background: var(--bg-main); background: var(--bg-main);
overflow: hidden; overflow: visible;
} }
.login-prompt-container .card { .login-prompt-container .card {
@@ -94,8 +101,8 @@ body {
} }
.brand-logo-img { .brand-logo-img {
width: 42px; width: 34px;
height: 42px; height: 34px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
object-fit: cover; object-fit: cover;
flex-shrink: 0; flex-shrink: 0;
@@ -103,8 +110,8 @@ body {
} }
.login-brand-row .brand-logo-img { .login-brand-row .brand-logo-img {
width: 48px; width: 40px;
height: 48px; height: 40px;
} }
.login-logo { .login-logo {
@@ -159,11 +166,13 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; min-height: 100%;
max-height: 100vh; height: auto;
padding: 1.25rem 1.5rem; max-height: none;
padding: var(--page-pad);
padding-bottom: 1.25rem;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: visible;
animation: fadeIn 0.35s ease-out; animation: fadeIn 0.35s ease-out;
} }
@@ -171,10 +180,14 @@ body {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 0.65rem;
padding-bottom: 0.85rem; padding-bottom: 0.55rem;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
flex-shrink: 0; flex-shrink: 0;
position: sticky;
top: 0;
z-index: 20;
background: var(--bg-main);
} }
.brand { .brand {
@@ -184,15 +197,15 @@ body {
} }
.brand-logo { .brand-logo {
width: 38px; width: 32px;
height: 38px; height: 32px;
background: var(--accent); background: var(--accent);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 800; font-weight: 800;
font-size: 0.85rem; font-size: 0.75rem;
color: white; color: white;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -205,25 +218,27 @@ body {
.brand-name { .brand-name {
font-weight: 800; font-weight: 800;
font-size: 1.05rem; font-size: 0.95rem;
letter-spacing: -0.3px; letter-spacing: -0.3px;
color: var(--text-primary); color: var(--text-primary);
line-height: 1.2; line-height: 1.2;
} }
.brand-sub { .brand-sub {
font-size: 0.7rem; font-size: 0.62rem;
font-weight: 500; font-weight: 500;
color: var(--accent); color: var(--accent);
} }
.main-grid { .main-grid {
display: grid; display: grid;
grid-template-columns: minmax(220px, 260px) 1fr; grid-template-columns: minmax(180px, 220px) 1fr;
gap: 1rem; gap: 0.75rem;
flex: 1; flex: none;
min-height: 0; min-height: 0;
overflow: hidden; height: auto;
overflow: visible;
align-items: start;
} }
/* ── Profile Card ── */ /* ── Profile Card ── */
@@ -232,25 +247,25 @@ body {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
height: 100%; height: auto;
min-height: 0; min-height: 0;
overflow-y: auto; overflow: visible;
justify-content: flex-start; justify-content: flex-start;
padding-top: 1rem; padding-top: 0.75rem;
} }
.avatar-container { .avatar-container {
position: relative; position: relative;
margin-bottom: 1.25rem; margin-bottom: 0.75rem;
} }
.avatar { .avatar {
width: 84px; width: 68px;
height: 84px; height: 68px;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
border: 3px solid var(--accent-light); border: 2px solid var(--accent-light);
padding: 3px; padding: 2px;
background: var(--bg-subtle); background: var(--bg-subtle);
} }
@@ -276,7 +291,7 @@ body {
.student-name { .student-name {
margin: 0; margin: 0;
font-size: 1.2rem; font-size: 1.05rem;
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
letter-spacing: -0.3px; letter-spacing: -0.3px;
@@ -285,12 +300,12 @@ body {
.student-code { .student-code {
background: var(--accent-light); background: var(--accent-light);
color: var(--accent); color: var(--accent);
padding: 3px 10px; padding: 2px 8px;
border-radius: 6px; border-radius: 6px;
font-size: 0.8rem; font-size: 0.72rem;
font-weight: 700; font-weight: 700;
margin-top: 0.4rem; margin-top: 0.3rem;
margin-bottom: 0.5rem; margin-bottom: 0.35rem;
border: 1px solid rgba(187, 33, 38, 0.15); border: 1px solid rgba(187, 33, 38, 0.15);
letter-spacing: 0.3px; letter-spacing: 0.3px;
display: inline-block; display: inline-block;
@@ -299,22 +314,22 @@ body {
.student-email { .student-email {
margin: 0; margin: 0;
color: var(--text-muted); color: var(--text-muted);
font-size: 0.82rem; font-size: 0.75rem;
} }
.divider { .divider {
width: 100%; width: 100%;
height: 1px; height: 1px;
background: var(--border-color); background: var(--border-color);
margin: 1.25rem 0; margin: 0.75rem 0;
} }
.profile-info-row { .profile-info-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
font-size: 0.82rem; font-size: 0.75rem;
margin-bottom: 0.6rem; margin-bottom: 0.4rem;
} }
.profile-info-row span { .profile-info-row span {
@@ -330,17 +345,17 @@ body {
.right-column { .right-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.85rem; gap: 0.65rem;
overflow: hidden; overflow: visible;
height: 100%; height: auto;
min-height: 0; min-height: 0;
} }
.status-banner { .status-banner {
padding: 0.75rem 1rem; padding: 0.55rem 0.75rem;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 0.75rem; gap: 0.55rem;
border-left: 3px solid var(--accent); border-left: 3px solid var(--accent);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -393,13 +408,13 @@ body {
.exam-panel { .exam-panel {
border: 1px solid #c4b5fd; border: 1px solid #c4b5fd;
background: linear-gradient(135deg, #faf5ff 0%, #fff 100%); background: linear-gradient(135deg, #faf5ff 0%, #fff 100%);
padding: 1rem 1.15rem; padding: 0.75rem 0.9rem;
margin-bottom: 0.75rem; margin-bottom: 0;
} }
.exam-panel-desc { .exam-panel-desc {
margin: 0 0 0.85rem; margin: 0 0 0.65rem;
font-size: 0.85rem; font-size: 0.78rem;
color: var(--text-secondary); color: var(--text-secondary);
} }
@@ -410,6 +425,38 @@ body {
align-items: center; align-items: center;
} }
.tools-panel {
margin-bottom: 0;
padding: 0.75rem 0.9rem;
border: 1px solid #f5c2c4;
background: linear-gradient(135deg, #fff8f8 0%, #fff 100%);
}
.tools-panel-desc {
margin: 0 0 0.65rem;
font-size: 0.78rem;
color: var(--text-secondary);
}
.tools-panel-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.btn-tool {
background: #fff;
color: var(--accent);
border: 1px solid var(--accent);
padding: 0.4rem 0.75rem;
font-size: 0.78rem;
}
.btn-tool:hover {
background: var(--accent-light);
}
.exam-wait, .exam-done { .exam-wait, .exam-done {
font-size: 0.82rem; font-size: 0.82rem;
color: var(--text-muted); color: var(--text-muted);
@@ -608,7 +655,7 @@ body {
.stats-grid { .stats-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 0.65rem; gap: 0.5rem;
} }
.stats-grid--two { .stats-grid--two {
@@ -957,9 +1004,10 @@ body {
} }
.shifts-wrap { .shifts-wrap {
flex: 1; flex: none;
min-height: 0; min-height: 0;
overflow: auto; max-height: none;
overflow: visible;
} }
.shifts-table { .shifts-table {
@@ -1028,14 +1076,14 @@ body {
} }
.status-banner-icon { .status-banner-icon {
width: 36px; width: 30px;
height: 36px; height: 30px;
background: var(--accent-light); background: var(--accent-light);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 1.1rem; font-size: 0.95rem;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -1048,7 +1096,7 @@ body {
} }
.status-banner-value { .status-banner-value {
font-size: 0.9rem; font-size: 0.82rem;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
} }
@@ -1056,19 +1104,19 @@ body {
.stat-card { .stat-card {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.85rem; gap: 0.65rem;
padding: 0.9rem 1rem; padding: 0.65rem 0.75rem;
} }
.stat-icon-wrap { .stat-icon-wrap {
width: 40px; width: 34px;
height: 40px; height: 34px;
background: var(--bg-subtle); background: var(--bg-subtle);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 1.2rem; font-size: 1rem;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -1088,7 +1136,7 @@ body {
} }
.stat-value { .stat-value {
font-size: 0.95rem; font-size: 0.85rem;
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
white-space: nowrap; white-space: nowrap;
@@ -1100,11 +1148,11 @@ body {
.clocks-card { .clocks-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.3rem; gap: 0.25rem;
flex: 1; flex: none;
min-height: 0; min-height: 0;
overflow: hidden; overflow: visible;
padding: 0.5rem 0.65rem; padding: 0.45rem 0.55rem;
} }
.card-title { .card-title {
@@ -1161,11 +1209,11 @@ body {
/* ── Buttons ── */ /* ── Buttons ── */
.btn { .btn {
padding: 0.65rem 1.15rem; padding: 0.45rem 0.85rem;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
border: none; border: none;
font-weight: 600; font-weight: 600;
font-size: 0.875rem; font-size: 0.78rem;
font-family: 'Be Vietnam Pro', sans-serif; font-family: 'Be Vietnam Pro', sans-serif;
cursor: pointer; cursor: pointer;
transition: var(--transition); transition: var(--transition);
@@ -1187,8 +1235,8 @@ body {
background: var(--bg-subtle); background: var(--bg-subtle);
color: var(--text-secondary); color: var(--text-secondary);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
padding: 0.5rem 0.9rem; padding: 0.35rem 0.7rem;
font-size: 0.82rem; font-size: 0.72rem;
} }
.btn-logout:hover { .btn-logout:hover {
@@ -1197,6 +1245,69 @@ body {
border-color: rgba(214, 48, 49, 0.25); border-color: rgba(214, 48, 49, 0.25);
} }
/* ── Compact / small screens ── */
@media (max-width: 860px) {
.main-grid {
grid-template-columns: 1fr;
}
.profile-card {
flex-direction: row;
flex-wrap: wrap;
text-align: left;
align-items: center;
gap: 0.65rem 0.85rem;
padding-top: 0.55rem;
}
.avatar-container {
margin-bottom: 0;
}
.profile-card .student-name,
.profile-card .student-code,
.profile-card .student-email {
text-align: left;
}
.profile-card .divider {
display: none;
}
.profile-info-row {
width: auto;
flex: 1 1 100%;
margin-bottom: 0.2rem;
}
}
@media (max-width: 560px) {
:root {
--page-pad: 0.55rem 0.6rem;
--card-pad: 0.7rem 0.75rem;
}
.tools-panel-actions,
.exam-panel-actions {
flex-direction: column;
align-items: stretch;
}
.tools-panel-actions .btn,
.exam-panel-actions .btn {
width: 100%;
}
.clock-inline {
margin-left: 0;
width: 100%;
}
.card-title-row--shifts {
flex-wrap: wrap;
}
}
/* ── Animations ── */ /* ── Animations ── */
@keyframes floatIn { @keyframes floatIn {
from { opacity: 0; transform: translateY(12px); } from { opacity: 0; transform: translateY(12px); }

21
client/frontend/src/main.js
View File

@@ -544,6 +544,18 @@ function renderDashboard() {
<div id="exam-panel-host">${renderExamPanel()}</div> <div id="exam-panel-host">${renderExamPanel()}</div>
<div class="card tools-panel">
<div class="card-title-row">
<div class="card-title">Công cụ học tập</div>
</div>
<p class="tools-panel-desc">GitHub &amp; Google Dịch mở trong app. Trình duyệt Local chỉ chạy link <strong>localhost</strong> để test bài làm.</p>
<div class="tools-panel-actions">
<button type="button" class="btn btn-tool" id="btn-open-github">GitHub</button>
<button type="button" class="btn btn-tool" id="btn-open-translate">Google Dịch</button>
<button type="button" class="btn btn-primary" id="btn-open-local-browser">Trình duyệt Local</button>
</div>
</div>
<div class="stats-grid stats-grid--two"> <div class="stats-grid stats-grid--two">
<div class="card stat-card"> <div class="card stat-card">
<div class="stat-icon-wrap">📡</div> <div class="stat-icon-wrap">📡</div>
@@ -592,6 +604,15 @@ function renderDashboard() {
await window.go.main.App.Logout(); await window.go.main.App.Logout();
} }
}); });
document.getElementById('btn-open-github')?.addEventListener('click', () => {
window.go.main.App.OpenGitHub();
});
document.getElementById('btn-open-translate')?.addEventListener('click', () => {
window.go.main.App.OpenGoogleTranslate();
});
document.getElementById('btn-open-local-browser')?.addEventListener('click', () => {
window.go.main.App.OpenLocalBrowser();
});
wireExamPanel(); wireExamPanel();
} }

12
client/frontend/src/style.css
View File

@@ -1,14 +1,18 @@
html { html {
height: 100%; height: 100%;
overflow: hidden; overflow-x: hidden;
overflow-y: auto;
} }
body { body {
margin: 0; margin: 0;
height: 100%; min-height: 100%;
overflow: hidden; height: auto;
overflow-x: hidden;
overflow-y: auto;
} }
#app { #app {
height: 100%; min-height: 100%;
height: auto;
} }

6
client/frontend/wailsjs/go/main/App.d.ts vendored
View File

@@ -39,6 +39,12 @@ export function OpenExamQuiz():Promise<void>;
export function OpenExamResource(arg1:number):Promise<void>; export function OpenExamResource(arg1:number):Promise<void>;
export function OpenGitHub():Promise<void>;
export function OpenGoogleTranslate():Promise<void>;
export function OpenLocalBrowser():Promise<void>;
export function ReloadExamPage():Promise<void>; export function ReloadExamPage():Promise<void>;
export function ReturnToDashboard():Promise<void>; export function ReturnToDashboard():Promise<void>;

30
client/frontend/wailsjs/go/main/App.js
View File

@@ -78,26 +78,38 @@ export function OpenExamResource(arg1) {
return ObfuscatedCall(18, [arg1]); return ObfuscatedCall(18, [arg1]);
} }
export function ReloadExamPage() { export function OpenGitHub() {
return ObfuscatedCall(19, []); return ObfuscatedCall(19, []);
} }
export function ReturnToDashboard() { export function OpenGoogleTranslate() {
return ObfuscatedCall(20, []); return ObfuscatedCall(20, []);
} }
export function SendChatMessage(arg1) { export function OpenLocalBrowser() {
return ObfuscatedCall(21, [arg1]); return ObfuscatedCall(21, []);
} }
export function SendWebcamFrame(arg1) { export function ReloadExamPage() {
return ObfuscatedCall(22, [arg1]); return ObfuscatedCall(22, []);
} }
export function SubmitExamWork() { export function ReturnToDashboard() {
return ObfuscatedCall(23, []); return ObfuscatedCall(23, []);
} }
export function UnlockChatAudio() { export function SendChatMessage(arg1) {
return ObfuscatedCall(24, []); return ObfuscatedCall(24, [arg1]);
}
export function SendWebcamFrame(arg1) {
return ObfuscatedCall(25, [arg1]);
}
export function SubmitExamWork() {
return ObfuscatedCall(26, []);
}
export function UnlockChatAudio() {
return ObfuscatedCall(27, []);
} }

11
client/internal/singleinstance/singleinstance.go Normal file
View File

@@ -0,0 +1,11 @@
package singleinstance
import "errors"
// ErrAlreadyRunning — đã có một tiến trình Simple Care đang chạy.
var ErrAlreadyRunning = errors.New("simple care already running")
const (
mutexName = "Local\\SimpleCare_SingleInstance"
windowTitle = "Simple Care"
)

49
client/internal/singleinstance/singleinstance_unix.go Normal file
View File

@@ -0,0 +1,49 @@
//go:build unix
package singleinstance
import (
"fmt"
"os"
"path/filepath"
"time"
"client/internal/winapi"
"golang.org/x/sys/unix"
)
// Giữ file lock mở suốt đời process.
var lockFile *os.File
// Acquire — flock non-blocking trên file trong config dir.
func Acquire() error {
configDir, err := os.UserConfigDir()
if err != nil {
configDir = os.TempDir()
}
dir := filepath.Join(configDir, "SimpleCare")
_ = os.MkdirAll(dir, 0755)
path := filepath.Join(dir, "instance.lock")
f, err := os.OpenFile(path, os.O_CREATE|os.O_RDWR, 0644)
if err != nil {
return err
}
if err := unix.Flock(int(f.Fd()), unix.LOCK_EX|unix.LOCK_NB); err != nil {
_ = f.Close()
winapi.ActivateAppWindow(windowTitle)
winapi.ShowWarningMessageBox(
"Simple Care",
"Ứng dụng Simple Care đang chạy.\n\nChỉ được mở một cửa sổ.",
)
// Cho dialog async kịp hiện trước khi process thoát.
time.Sleep(1500 * time.Millisecond)
fmt.Fprintln(os.Stderr, "Simple Care is already running")
return ErrAlreadyRunning
}
_, _ = f.WriteString(fmt.Sprintf("%d\n", os.Getpid()))
_ = f.Sync()
lockFile = f
return nil
}

47
client/internal/singleinstance/singleinstance_windows.go Normal file
View File

@@ -0,0 +1,47 @@
//go:build windows
package singleinstance
import (
"syscall"
"unsafe"
"client/internal/winapi"
)
var (
kernel32 = syscall.NewLazyDLL("kernel32.dll")
procCreateMutexW = kernel32.NewProc("CreateMutexW")
user32 = syscall.NewLazyDLL("user32.dll")
procMessageBoxW = user32.NewProc("MessageBoxW")
// Giữ handle mutex suốt đời process — đóng = nhả lock.
mutexHandle uintptr
)
const errorAlreadyExists = 183
// Acquire — chỉ cho phép 1 instance. Instance thứ 2: đưa cửa sổ cũ lên rồi báo lỗi.
func Acquire() error {
namePtr, err := syscall.UTF16PtrFromString(mutexName)
if err != nil {
return err
}
r1, _, lastErr := procCreateMutexW.Call(0, 0, uintptr(unsafe.Pointer(namePtr)))
if r1 == 0 {
return lastErr
}
mutexHandle = r1
if errno, ok := lastErr.(syscall.Errno); ok && errno == errorAlreadyExists {
winapi.ActivateAppWindow(windowTitle)
showAlreadyRunningDialog()
return ErrAlreadyRunning
}
return nil
}
func showAlreadyRunningDialog() {
title, _ := syscall.UTF16PtrFromString("Simple Care")
msg, _ := syscall.UTF16PtrFromString("Ứng dụng Simple Care đang chạy.\n\nChỉ được mở một cửa sổ. Cửa sổ hiện có đã được đưa lên phía trước.")
_, _, _ = procMessageBoxW.Call(0, uintptr(unsafe.Pointer(msg)), uintptr(unsafe.Pointer(title)), 0x00000040) // MB_ICONINFORMATION
}

17
client/internal/winapi/window_darwin.go
View File

@@ -4,14 +4,23 @@ package winapi
import ( import (
"fmt" "fmt"
"os"
"os/exec" "os/exec"
) )
// ActivateAppWindow — đưa cửa sổ app lên trước // ActivateAppWindow — đưa cửa sổ Simple Care đang chạy lên trước (theo tên process / title).
func ActivateAppWindow(titleHint string) { func ActivateAppWindow(titleHint string) {
pid := os.Getpid() hint := titleHint
script := fmt.Sprintf(`tell application "System Events" to set frontmost of first process whose unix id is %d to true`, pid) if hint == "" {
hint = "Simple Care"
}
script := fmt.Sprintf(`
tell application "System Events"
set candidates to every process whose name contains %q or name contains "simple_care" or name contains "SimpleCare"
if (count of candidates) > 0 then
set frontmost of item 1 of candidates to true
end if
end tell
`, hint)
cmd := exec.Command("osascript", "-e", script) cmd := exec.Command("osascript", "-e", script)
_ = cmd.Run() _ = cmd.Run()
} }

6
client/main.go
View File

@@ -7,6 +7,8 @@ import (
"os" "os"
"path/filepath" "path/filepath"
"client/internal/singleinstance"
"github.com/wailsapp/wails/v2" "github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/menu" "github.com/wailsapp/wails/v2/pkg/menu"
"github.com/wailsapp/wails/v2/pkg/menu/keys" "github.com/wailsapp/wails/v2/pkg/menu/keys"
@@ -34,6 +36,10 @@ func initLogging() *os.File {
} }
func main() { func main() {
if err := singleinstance.Acquire(); err != nil {
os.Exit(0)
}
lf := initLogging() lf := initLogging()
if lf != nil { if lf != nil {
defer lf.Close() defer lf.Close()