forked from joseph/notebooklm-api
1073 lines
52 KiB
HTML
1073 lines
52 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="vi">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Hướng dẫn sử dụng — NotebookLM Scheduler</title>
|
||
<style>
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
:root{
|
||
--bg:#f4f5f7;--surface:#fff;--surface2:#f8f9fb;--border:#e4e7ed;--border2:#d1d5e0;
|
||
--primary:#5a57e8;--primary-bg:#eeedfd;--primary-hover:#4845d4;
|
||
--text:#1a1d27;--text2:#5c6480;--text3:#9399b0;
|
||
--green:#16a34a;--green-bg:#dcfce7;--red:#dc2626;--red-bg:#fee2e2;
|
||
--amber:#d97706;--amber-bg:#fef3c7;
|
||
--shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
|
||
--shadow-md:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
|
||
--radius:10px;--radius-sm:6px;--radius-lg:14px;
|
||
--font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
|
||
}
|
||
|
||
body{font-family:var(--font);background:#fff;color:var(--text);font-size:15px;line-height:1.7}
|
||
|
||
/* ── Doc layout ── */
|
||
.doc-nav{
|
||
position:fixed;top:0;left:0;width:240px;height:100vh;
|
||
background:var(--surface);border-right:1px solid var(--border);
|
||
overflow-y:auto;padding:24px 0;z-index:10;
|
||
}
|
||
.doc-nav-logo{
|
||
padding:0 20px 20px;border-bottom:1px solid var(--border);margin-bottom:12px;
|
||
display:flex;align-items:center;gap:10px;
|
||
}
|
||
.doc-nav-logo-icon{
|
||
width:32px;height:32px;border-radius:8px;background:var(--primary);
|
||
display:flex;align-items:center;justify-content:center;flex-shrink:0;
|
||
}
|
||
.doc-nav-logo-icon svg{width:16px;height:16px;fill:#fff}
|
||
.doc-nav-logo-text{font-weight:700;font-size:14px;color:var(--text);line-height:1.2}
|
||
.doc-nav-logo-sub{font-size:11px;color:var(--text3)}
|
||
.doc-nav a{
|
||
display:block;padding:6px 20px;font-size:13px;color:var(--text2);
|
||
text-decoration:none;border-left:3px solid transparent;
|
||
transition:color .15s,border-color .15s,background .15s;
|
||
}
|
||
.doc-nav a:hover{color:var(--text);background:var(--bg)}
|
||
.doc-nav a.active{color:var(--primary);border-left-color:var(--primary);background:var(--primary-bg)}
|
||
.doc-nav-section{
|
||
padding:12px 20px 4px;font-size:10px;font-weight:700;letter-spacing:.6px;
|
||
text-transform:uppercase;color:var(--text3);
|
||
}
|
||
|
||
.doc-content{margin-left:240px;max-width:860px;padding:48px 64px 120px}
|
||
|
||
/* ── Typography ── */
|
||
h1{font-size:28px;font-weight:800;color:var(--text);margin-bottom:8px}
|
||
h2{font-size:20px;font-weight:700;color:var(--text);margin:48px 0 16px;padding-top:8px;
|
||
border-top:1px solid var(--border)}
|
||
h3{font-size:15px;font-weight:700;color:var(--text);margin:24px 0 10px}
|
||
h2:first-of-type{border-top:none;margin-top:24px}
|
||
p{color:var(--text2);margin-bottom:12px}
|
||
strong{color:var(--text);font-weight:600}
|
||
ul,ol{color:var(--text2);padding-left:20px;margin-bottom:12px}
|
||
li{margin-bottom:4px}
|
||
code{
|
||
background:var(--surface2);border:1px solid var(--border);
|
||
padding:1px 6px;border-radius:4px;font-size:12px;
|
||
font-family:'SF Mono',Monaco,Consolas,monospace;color:var(--primary);
|
||
}
|
||
|
||
/* ── Info boxes ── */
|
||
.note{
|
||
background:var(--primary-bg);border:1px solid #c7c5f8;
|
||
border-radius:var(--radius);padding:12px 16px;margin:16px 0;
|
||
display:flex;gap:12px;align-items:flex-start;
|
||
}
|
||
.note-icon{font-size:16px;flex-shrink:0;margin-top:1px}
|
||
.note p{margin:0;font-size:13px;color:#3d3a9e}
|
||
.tip{background:var(--green-bg);border:1px solid #86efac}
|
||
.tip p{color:#14532d}
|
||
.warn{background:var(--amber-bg);border:1px solid #fcd34d}
|
||
.warn p{color:#78350f}
|
||
|
||
/* ── Step numbers ── */
|
||
.steps{counter-reset:step;list-style:none;padding:0;margin:16px 0}
|
||
.steps li{
|
||
counter-increment:step;display:flex;gap:14px;margin-bottom:16px;align-items:flex-start;
|
||
}
|
||
.steps li::before{
|
||
content:counter(step);
|
||
min-width:26px;height:26px;border-radius:50%;
|
||
background:var(--primary);color:#fff;
|
||
font-size:12px;font-weight:700;
|
||
display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;
|
||
}
|
||
.steps li p{margin:0;color:var(--text2);font-size:14px}
|
||
.steps li strong{display:block;font-size:14px;color:var(--text);margin-bottom:2px}
|
||
|
||
/* ══════════════════════════════
|
||
UI MOCKUPS (giả lập màn hình)
|
||
══════════════════════════════ */
|
||
.mockup{
|
||
border:1px solid var(--border);border-radius:var(--radius-lg);
|
||
overflow:hidden;box-shadow:var(--shadow-md);margin:20px 0 28px;
|
||
background:var(--bg);
|
||
}
|
||
.mockup-bar{
|
||
background:#e8e9ea;padding:8px 14px;display:flex;gap:6px;align-items:center;
|
||
border-bottom:1px solid var(--border);
|
||
}
|
||
.mockup-dot{width:11px;height:11px;border-radius:50%}
|
||
.mockup-dot.red{background:#ff5f57}
|
||
.mockup-dot.yellow{background:#ffbd2e}
|
||
.mockup-dot.green{background:#28c840}
|
||
.mockup-url{
|
||
flex:1;background:#fff;border-radius:5px;padding:3px 10px;
|
||
font-size:11px;color:var(--text3);margin:0 8px;border:1px solid var(--border);
|
||
}
|
||
|
||
/* App header in mockup */
|
||
.m-header{
|
||
background:var(--surface);border-bottom:1px solid var(--border);
|
||
display:flex;align-items:center;gap:0;padding:0 20px;height:52px;
|
||
}
|
||
.m-logo{display:flex;align-items:center;gap:8px;margin-right:24px}
|
||
.m-logo-icon{width:26px;height:26px;border-radius:7px;background:var(--primary);
|
||
display:flex;align-items:center;justify-content:center;}
|
||
.m-logo-icon svg{width:13px;height:13px;fill:#fff}
|
||
.m-logo-text{font-weight:700;font-size:13px}
|
||
.m-nav{display:flex;gap:2px}
|
||
.m-nav-btn{
|
||
padding:5px 12px;border-radius:5px;border:none;background:none;
|
||
font-size:12px;font-weight:500;color:var(--text2);cursor:default;
|
||
display:flex;align-items:center;gap:5px;
|
||
}
|
||
.m-nav-btn.active{background:var(--primary-bg);color:var(--primary)}
|
||
.m-badge{
|
||
background:var(--border2);color:var(--text2);font-size:10px;font-weight:700;
|
||
padding:1px 5px;border-radius:20px;
|
||
}
|
||
.m-nav-btn.active .m-badge{background:var(--primary);color:#fff}
|
||
.m-auth{margin-left:auto;display:flex;align-items:center;gap:6px}
|
||
.m-dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
|
||
.m-dot.off{background:var(--text3)}
|
||
.m-auth-label{font-size:11px;color:var(--text3)}
|
||
|
||
.m-body{padding:20px;background:var(--bg)}
|
||
|
||
/* Two column */
|
||
.m-cols{display:grid;grid-template-columns:220px 1fr;gap:16px}
|
||
|
||
/* Card */
|
||
.m-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
|
||
.m-card-hd{
|
||
padding:11px 14px;display:flex;align-items:center;justify-content:space-between;
|
||
border-bottom:1px solid var(--border);
|
||
}
|
||
.m-card-title{font-size:12px;font-weight:600}
|
||
.m-btn-ghost-sm{
|
||
padding:4px 10px;border-radius:5px;border:1px solid var(--border);
|
||
background:none;font-size:11px;font-weight:500;color:var(--text2);cursor:default;
|
||
display:inline-flex;align-items:center;gap:4px;
|
||
}
|
||
|
||
/* Notebook list */
|
||
.m-nb-item{
|
||
display:flex;align-items:center;gap:9px;padding:9px 14px;
|
||
border-bottom:1px solid var(--border);cursor:default;position:relative;
|
||
}
|
||
.m-nb-item:last-child{border-bottom:none}
|
||
.m-nb-item.sel{background:var(--primary-bg)}
|
||
.m-nb-item.sel::before{
|
||
content:'';position:absolute;left:0;top:8px;bottom:8px;
|
||
width:3px;border-radius:0 3px 3px 0;background:var(--primary);
|
||
}
|
||
.m-nb-icon{
|
||
width:28px;height:28px;border-radius:7px;
|
||
background:var(--surface2);border:1px solid var(--border);
|
||
display:flex;align-items:center;justify-content:center;flex-shrink:0;
|
||
}
|
||
.m-nb-icon svg{width:13px;height:13px;stroke:var(--text2)}
|
||
.m-nb-item.sel .m-nb-icon{background:var(--primary-bg);border-color:var(--primary)}
|
||
.m-nb-item.sel .m-nb-icon svg{stroke:var(--primary)}
|
||
.m-nb-name{font-size:12px;font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.m-nb-item.sel .m-nb-name{color:var(--primary)}
|
||
.m-nb-badge{font-size:10px;font-weight:600;background:var(--border);color:var(--text3);padding:1px 6px;border-radius:20px}
|
||
.m-nb-item.sel .m-nb-badge{background:var(--primary);color:#fff}
|
||
|
||
/* Sources panel */
|
||
.m-panel-hd{
|
||
padding:11px 14px;display:flex;align-items:center;justify-content:space-between;
|
||
border-bottom:1px solid var(--border);background:var(--surface);
|
||
}
|
||
.m-panel-title{font-size:12px;font-weight:600}
|
||
.m-src-item{
|
||
display:flex;align-items:center;gap:10px;padding:9px 14px;
|
||
border-bottom:1px solid var(--border);
|
||
}
|
||
.m-src-item:last-child{border-bottom:none}
|
||
.m-src-badge{
|
||
font-size:9px;font-weight:700;letter-spacing:.3px;padding:2px 6px;
|
||
border-radius:4px;text-transform:uppercase;flex-shrink:0;
|
||
}
|
||
.badge-pdf{background:#fee2e2;color:#dc2626}
|
||
.badge-url{background:#dbeafe;color:#2563eb}
|
||
.badge-text{background:#dcfce7;color:#16a34a}
|
||
.badge-audio{background:#fce7f3;color:#db2777}
|
||
.m-src-name{font-size:12px;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.m-btn-primary{
|
||
padding:5px 12px;border-radius:5px;border:none;
|
||
background:var(--primary);color:#fff;font-size:11px;font-weight:600;cursor:default;
|
||
display:inline-flex;align-items:center;gap:5px;
|
||
}
|
||
|
||
/* Cron job card */
|
||
.m-job-card{
|
||
background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
|
||
padding:14px;display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:10px;
|
||
}
|
||
.m-job-notebook{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--primary);margin-bottom:3px}
|
||
.m-job-label{font-size:12px;font-weight:600;color:var(--text);margin-bottom:2px}
|
||
.m-job-msg{font-size:11px;color:var(--text2);margin-bottom:6px;
|
||
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
||
.m-job-meta{display:flex;gap:8px;flex-wrap:wrap}
|
||
.m-meta-item{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:3px}
|
||
.m-toggle{
|
||
width:32px;height:18px;border-radius:20px;background:var(--primary);
|
||
position:relative;flex-shrink:0;
|
||
}
|
||
.m-toggle::after{
|
||
content:'';position:absolute;width:12px;height:12px;border-radius:50%;
|
||
background:#fff;top:3px;right:3px;box-shadow:0 1px 3px rgba(0,0,0,.2);
|
||
}
|
||
.m-toggle.off{background:var(--border2)}
|
||
.m-toggle.off::after{right:auto;left:3px}
|
||
.m-job-btns{display:flex;gap:5px;margin-top:8px}
|
||
.m-btn-icon{
|
||
width:26px;height:26px;border-radius:5px;border:1px solid var(--border);
|
||
background:none;display:flex;align-items:center;justify-content:center;cursor:default;
|
||
}
|
||
.m-btn-icon svg{width:13px;height:13px;stroke:var(--text2)}
|
||
|
||
/* History table */
|
||
.m-table{width:100%;border-collapse:collapse}
|
||
.m-table th{
|
||
text-align:left;padding:9px 12px;font-size:10px;font-weight:700;
|
||
letter-spacing:.4px;text-transform:uppercase;color:var(--text3);
|
||
border-bottom:1px solid var(--border);background:var(--surface2);
|
||
}
|
||
.m-table td{padding:9px 12px;font-size:12px;border-bottom:1px solid var(--border);color:var(--text2)}
|
||
.m-table tr:last-child td{border-bottom:none}
|
||
.m-status{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px}
|
||
.m-status.ok{background:var(--green-bg);color:var(--green)}
|
||
.m-status.err{background:var(--red-bg);color:var(--red)}
|
||
|
||
/* Modal */
|
||
.m-modal-overlay{
|
||
padding:16px;background:rgba(0,0,0,.35);border-radius:0 0 var(--radius-lg) var(--radius-lg);
|
||
}
|
||
.m-modal{
|
||
background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;
|
||
max-width:440px;margin:0 auto;box-shadow:0 20px 50px rgba(0,0,0,.25);
|
||
}
|
||
.m-modal-hd{
|
||
padding:16px 20px 13px;display:flex;align-items:center;justify-content:space-between;
|
||
border-bottom:1px solid var(--border);
|
||
}
|
||
.m-modal-title{font-size:14px;font-weight:700}
|
||
.m-modal-close{width:24px;height:24px;border-radius:50%;background:var(--surface2);
|
||
display:flex;align-items:center;justify-content:center;border:none;cursor:default;}
|
||
.m-modal-close svg{width:12px;height:12px;stroke:var(--text2)}
|
||
.m-modal-body{padding:16px 20px}
|
||
.m-form-group{margin-bottom:13px}
|
||
.m-form-label{display:block;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:5px}
|
||
.m-form-input,.m-form-select,.m-form-textarea{
|
||
width:100%;padding:7px 10px;border:1px solid var(--border2);border-radius:5px;
|
||
font-size:12px;color:var(--text);background:var(--surface);font-family:var(--font);
|
||
}
|
||
.m-form-input.focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(90,87,232,.1)}
|
||
.m-form-textarea{min-height:64px;resize:none}
|
||
.m-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
|
||
.m-form-hint{font-size:10px;color:var(--text3);margin-top:3px}
|
||
.m-modal-footer{
|
||
padding:13px 20px;border-top:1px solid var(--border);
|
||
display:flex;justify-content:flex-end;gap:8px;
|
||
}
|
||
.m-btn-cancel{padding:6px 14px;border-radius:5px;border:1px solid var(--border);
|
||
background:none;font-size:12px;font-weight:500;color:var(--text2);cursor:default}
|
||
.m-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
|
||
.m-day{
|
||
display:flex;align-items:center;justify-content:center;height:28px;
|
||
border-radius:5px;border:1px solid var(--border2);font-size:10px;font-weight:600;
|
||
color:var(--text2);
|
||
}
|
||
.m-day.active{background:var(--primary);border-color:var(--primary);color:#fff}
|
||
|
||
/* Answer expand */
|
||
.m-answer-row{background:var(--surface2)}
|
||
.m-answer-row td{padding:10px 12px}
|
||
.m-answer-box{
|
||
background:var(--surface);border:1px solid var(--border);border-radius:5px;
|
||
padding:10px;font-size:11px;color:var(--text2);line-height:1.6;
|
||
}
|
||
|
||
/* Callout highlight */
|
||
.callout-num{
|
||
display:inline-flex;align-items:center;justify-content:center;
|
||
width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;
|
||
font-size:11px;font-weight:700;margin-right:6px;flex-shrink:0;
|
||
vertical-align:middle;
|
||
}
|
||
|
||
/* Feature table */
|
||
.feat-table{width:100%;border-collapse:collapse;margin:16px 0}
|
||
.feat-table th{text-align:left;padding:10px 14px;font-size:12px;font-weight:700;
|
||
background:var(--surface2);border:1px solid var(--border);color:var(--text)}
|
||
.feat-table td{padding:10px 14px;font-size:13px;border:1px solid var(--border);color:var(--text2);vertical-align:top}
|
||
.feat-table tr:nth-child(even) td{background:#fafbfc}
|
||
|
||
/* Auth screen */
|
||
.m-auth-screen{
|
||
min-height:200px;display:flex;flex-direction:column;align-items:center;
|
||
justify-content:center;gap:14px;background:var(--bg);padding:32px;
|
||
}
|
||
.m-auth-icon{width:52px;height:52px;border-radius:12px;background:var(--primary-bg);
|
||
display:flex;align-items:center;justify-content:center;}
|
||
.m-auth-icon svg{width:26px;height:26px;stroke:var(--primary)}
|
||
.m-auth-title{font-size:15px;font-weight:700;color:var(--text)}
|
||
.m-auth-sub{font-size:12px;color:var(--text3);text-align:center}
|
||
.m-auth-btn{
|
||
padding:9px 20px;border-radius:7px;border:none;
|
||
background:var(--primary);color:#fff;font-size:13px;font-weight:600;cursor:default;
|
||
}
|
||
|
||
/* Webhook section */
|
||
.m-webhook-group{margin-top:10px;padding:12px;background:var(--surface2);
|
||
border:1px solid var(--border);border-radius:7px}
|
||
.m-webhook-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
|
||
color:var(--text3);margin-bottom:8px}
|
||
|
||
/* Scrollbar */
|
||
.doc-nav::-webkit-scrollbar{width:4px}
|
||
.doc-nav::-webkit-scrollbar-track{background:transparent}
|
||
.doc-nav::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
|
||
|
||
/* Responsive */
|
||
@media(max-width:900px){
|
||
.doc-nav{display:none}
|
||
.doc-content{margin-left:0;padding:24px 20px 80px}
|
||
}
|
||
|
||
.section-anchor{scroll-margin-top:32px}
|
||
|
||
/* Label/badge */
|
||
.label{
|
||
display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;
|
||
border-radius:4px;background:var(--primary-bg);color:var(--primary);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Sidebar nav -->
|
||
<nav class="doc-nav">
|
||
<div class="doc-nav-logo">
|
||
<div class="doc-nav-logo-icon">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="doc-nav-logo-text">NotebookLM</div>
|
||
<div class="doc-nav-logo-sub">Hướng dẫn sử dụng</div>
|
||
</div>
|
||
</div>
|
||
<div class="doc-nav-section">Bắt đầu</div>
|
||
<a href="#gioi-thieu">Giới thiệu</a>
|
||
<a href="#truy-cap">Truy cập hệ thống</a>
|
||
<a href="#dang-nhap">Đăng nhập</a>
|
||
<div class="doc-nav-section">Tính năng</div>
|
||
<a href="#notebooks">Notebooks & Sources</a>
|
||
<a href="#lich-chay">Lịch chạy tự động</a>
|
||
<a href="#lich-su">Lịch sử chạy</a>
|
||
<a href="#webhook">Gửi kết quả ra ngoài</a>
|
||
<div class="doc-nav-section">Hỗ trợ</div>
|
||
<a href="#faq">Câu hỏi thường gặp</a>
|
||
</nav>
|
||
|
||
<!-- Main content -->
|
||
<main class="doc-content">
|
||
|
||
<!-- Title -->
|
||
<div style="margin-bottom:32px">
|
||
<div style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin-bottom:8px">Tài liệu hướng dẫn</div>
|
||
<h1>NotebookLM Scheduler</h1>
|
||
<p style="font-size:16px;color:var(--text2)">Hệ thống tự động hóa Google NotebookLM — đặt lịch chat, lưu kết quả và gửi webhook.</p>
|
||
<div style="display:flex;gap:8px;margin-top:12px">
|
||
<span class="label">v1.0</span>
|
||
<span class="label" style="background:var(--green-bg);color:var(--green)">Tiếng Việt</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════ GIỚI THIỆU ════════ -->
|
||
<h2 id="gioi-thieu" class="section-anchor">Giới thiệu</h2>
|
||
<p>NotebookLM Scheduler cho phép bạn <strong>tự động hóa việc hỏi đáp trên Google NotebookLM</strong> theo lịch định sẵn — không cần ngồi chờ hay thao tác thủ công.</p>
|
||
|
||
<table class="feat-table">
|
||
<tr>
|
||
<th>Tính năng</th>
|
||
<th>Mô tả</th>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Xem Notebooks & Sources</strong></td>
|
||
<td>Xem danh sách notebook và tài liệu nguồn của bạn trên NotebookLM</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Lịch chạy tự động</strong></td>
|
||
<td>Đặt câu hỏi tự động vào khung giờ nhất định (hàng ngày, các ngày trong tuần...)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Lịch sử chạy</strong></td>
|
||
<td>Xem toàn bộ câu trả lời từ các lần chạy trước</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Webhook</strong></td>
|
||
<td>Tự động gửi kết quả đến hệ thống khác (Slack, Telegram, CRM...)</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<!-- ════════ TRUY CẬP ════════ -->
|
||
<h2 id="truy-cap" class="section-anchor">Truy cập hệ thống</h2>
|
||
<p>Mở trình duyệt và truy cập vào địa chỉ mà admin cung cấp, thường có dạng:</p>
|
||
<div class="note">
|
||
<span class="note-icon">🌐</span>
|
||
<p><code>http://địa-chỉ-server:3456</code><br>Ví dụ: <code>http://192.168.1.100:3456</code> hoặc <code>http://my-server.com:3456</code></p>
|
||
</div>
|
||
|
||
<!-- Mockup: tổng quan giao diện -->
|
||
<div class="mockup">
|
||
<div class="mockup-bar">
|
||
<div class="mockup-dot red"></div>
|
||
<div class="mockup-dot yellow"></div>
|
||
<div class="mockup-dot green"></div>
|
||
<div class="mockup-url">http://my-server.com:3456</div>
|
||
</div>
|
||
<div class="m-header">
|
||
<div class="m-logo">
|
||
<div class="m-logo-icon"><svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg></div>
|
||
<span class="m-logo-text">NotebookLM</span>
|
||
</div>
|
||
<nav class="m-nav">
|
||
<button class="m-nav-btn active">
|
||
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
|
||
Notebooks <span class="m-badge">5</span>
|
||
</button>
|
||
<button class="m-nav-btn">
|
||
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
Lịch chạy <span class="m-badge">3</span>
|
||
</button>
|
||
<button class="m-nav-btn">
|
||
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
|
||
Lịch sử <span class="m-badge">42</span>
|
||
</button>
|
||
</nav>
|
||
<div class="m-auth">
|
||
<div class="m-dot"></div>
|
||
<span class="m-auth-label">Đã đăng nhập</span>
|
||
</div>
|
||
</div>
|
||
<div style="padding:14px 20px;background:var(--bg);font-size:12px;color:var(--text3);text-align:center">
|
||
↑ Giao diện chính — 3 tab điều hướng ở trên cùng
|
||
</div>
|
||
</div>
|
||
|
||
<p>Giao diện gồm <strong>3 tab chính</strong> ở thanh điều hướng phía trên:</p>
|
||
<ul>
|
||
<li><strong>Notebooks</strong> — xem danh sách notebook và tài liệu nguồn</li>
|
||
<li><strong>Lịch chạy</strong> — quản lý lịch tự động chat</li>
|
||
<li><strong>Lịch sử</strong> — xem kết quả các lần đã chạy</li>
|
||
</ul>
|
||
|
||
<p>Góc trên bên phải hiển thị <strong>trạng thái đăng nhập</strong>:</p>
|
||
<ul>
|
||
<li><span style="color:var(--green)">●</span> <strong>Đã đăng nhập</strong> — sẵn sàng hoạt động</li>
|
||
<li><span style="color:var(--text3)">●</span> <strong>Chưa đăng nhập</strong> — cần liên hệ admin</li>
|
||
</ul>
|
||
|
||
<!-- ════════ ĐĂNG NHẬP ════════ -->
|
||
<h2 id="dang-nhap" class="section-anchor">Đăng nhập</h2>
|
||
<p>Việc đăng nhập Google được admin thực hiện <strong>một lần duy nhất</strong> khi cài đặt hệ thống. Bạn không cần đăng nhập lại. Hệ thống tự duy trì phiên đăng nhập.</p>
|
||
|
||
<div class="note warn">
|
||
<span class="note-icon">⚠️</span>
|
||
<p>Nếu thấy chấm đỏ "Chưa đăng nhập" ở góc trên phải, hãy báo ngay cho admin để họ đăng nhập lại vào tài khoản Google NotebookLM.</p>
|
||
</div>
|
||
|
||
<!-- ════════ NOTEBOOKS ════════ -->
|
||
<h2 id="notebooks" class="section-anchor">Notebooks & Sources</h2>
|
||
<p>Tab <strong>Notebooks</strong> cho phép bạn xem toàn bộ notebook và tài liệu nguồn của mình trên Google NotebookLM.</p>
|
||
|
||
<!-- Mockup: tab Notebooks -->
|
||
<div class="mockup">
|
||
<div class="mockup-bar">
|
||
<div class="mockup-dot red"></div><div class="mockup-dot yellow"></div><div class="mockup-dot green"></div>
|
||
<div class="mockup-url">http://my-server.com:3456</div>
|
||
</div>
|
||
<div class="m-header">
|
||
<div class="m-logo">
|
||
<div class="m-logo-icon"><svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg></div>
|
||
<span class="m-logo-text">NotebookLM</span>
|
||
</div>
|
||
<nav class="m-nav">
|
||
<button class="m-nav-btn active">
|
||
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
|
||
Notebooks <span class="m-badge">5</span>
|
||
</button>
|
||
<button class="m-nav-btn">
|
||
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
Lịch chạy <span class="m-badge">3</span>
|
||
</button>
|
||
<button class="m-nav-btn">
|
||
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
|
||
Lịch sử <span class="m-badge">42</span>
|
||
</button>
|
||
</nav>
|
||
<div class="m-auth"><div class="m-dot"></div><span class="m-auth-label">Đã đăng nhập</span></div>
|
||
</div>
|
||
<div class="m-body">
|
||
<div class="m-cols">
|
||
<!-- Left: notebook list -->
|
||
<div class="m-card">
|
||
<div class="m-card-hd">
|
||
<span class="m-card-title">Notebooks</span>
|
||
<button class="m-btn-ghost-sm">↺ Làm mới</button>
|
||
</div>
|
||
<!-- items -->
|
||
<div class="m-nb-item">
|
||
<div class="m-nb-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg></div>
|
||
<span class="m-nb-name">Báo cáo tài chính Q2</span>
|
||
<span class="m-nb-badge">4</span>
|
||
</div>
|
||
<div class="m-nb-item sel">
|
||
<div class="m-nb-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg></div>
|
||
<span class="m-nb-name">Nghiên cứu thị trường 2026</span>
|
||
<span class="m-nb-badge">7</span>
|
||
</div>
|
||
<div class="m-nb-item">
|
||
<div class="m-nb-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg></div>
|
||
<span class="m-nb-name">Tài liệu sản phẩm</span>
|
||
<span class="m-nb-badge">12</span>
|
||
</div>
|
||
<div class="m-nb-item">
|
||
<div class="m-nb-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg></div>
|
||
<span class="m-nb-name">Hợp đồng khách hàng</span>
|
||
<span class="m-nb-badge">3</span>
|
||
</div>
|
||
</div>
|
||
<!-- Right: sources -->
|
||
<div class="m-card">
|
||
<div class="m-panel-hd">
|
||
<span class="m-panel-title">Sources — Nghiên cứu thị trường 2026</span>
|
||
<button class="m-btn-primary">+ Tạo lịch chạy</button>
|
||
</div>
|
||
<div class="m-src-item">
|
||
<span class="m-src-badge badge-pdf">PDF</span>
|
||
<span class="m-src-name">Bao-cao-thi-truong-2026.pdf</span>
|
||
</div>
|
||
<div class="m-src-item">
|
||
<span class="m-src-badge badge-url">URL</span>
|
||
<span class="m-src-name">https://statista.com/vietnam-market-2026</span>
|
||
</div>
|
||
<div class="m-src-item">
|
||
<span class="m-src-badge badge-text">TEXT</span>
|
||
<span class="m-src-name">Ghi chú phân tích đối thủ</span>
|
||
</div>
|
||
<div class="m-src-item">
|
||
<span class="m-src-badge badge-url">URL</span>
|
||
<span class="m-src-name">https://vnexpress.net/kinh-te/...</span>
|
||
</div>
|
||
<div class="m-src-item">
|
||
<span class="m-src-badge badge-audio">AUDIO</span>
|
||
<span class="m-src-name">Phỏng vấn chuyên gia tháng 5.mp3</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Cách sử dụng</h3>
|
||
<ol class="steps">
|
||
<li>
|
||
<div><strong>Nhấp vào một notebook</strong> ở danh sách bên trái để chọn nó<br><span style="font-size:13px;color:var(--text2)">Notebook đang chọn sẽ được tô nền tím với đường kẻ dọc bên trái.</span></div>
|
||
</li>
|
||
<li>
|
||
<div><strong>Xem danh sách tài liệu nguồn</strong> hiện ra ở bên phải<br><span style="font-size:13px;color:var(--text2)">Mỗi source có nhãn màu phân loại: <span class="m-src-badge badge-pdf" style="font-size:10px">PDF</span> <span class="m-src-badge badge-url" style="font-size:10px">URL</span> <span class="m-src-badge badge-text" style="font-size:10px">TEXT</span> <span class="m-src-badge badge-audio" style="font-size:10px">AUDIO</span></span></div>
|
||
</li>
|
||
<li>
|
||
<div><strong>Nhấn "+ Tạo lịch chạy"</strong> để đặt lịch tự động hỏi notebook đã chọn</div>
|
||
</li>
|
||
</ol>
|
||
|
||
<div class="note tip">
|
||
<span class="note-icon">💡</span>
|
||
<p>Số badge (ví dụ <strong>7</strong>) trên mỗi notebook cho biết số lượng tài liệu nguồn đang có trong notebook đó.</p>
|
||
</div>
|
||
|
||
<!-- ════════ LỊCH CHẠY ════════ -->
|
||
<h2 id="lich-chay" class="section-anchor">Lịch chạy tự động</h2>
|
||
<p>Tab <strong>Lịch chạy</strong> là nơi bạn cài đặt các tác vụ tự động — hệ thống sẽ tự hỏi NotebookLM theo lịch bạn đặt và lưu lại kết quả.</p>
|
||
|
||
<!-- Mockup: tab Lịch chạy -->
|
||
<div class="mockup">
|
||
<div class="mockup-bar">
|
||
<div class="mockup-dot red"></div><div class="mockup-dot yellow"></div><div class="mockup-dot green"></div>
|
||
<div class="mockup-url">http://my-server.com:3456</div>
|
||
</div>
|
||
<div class="m-header">
|
||
<div class="m-logo">
|
||
<div class="m-logo-icon"><svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg></div>
|
||
<span class="m-logo-text">NotebookLM</span>
|
||
</div>
|
||
<nav class="m-nav">
|
||
<button class="m-nav-btn">Notebooks <span class="m-badge">5</span></button>
|
||
<button class="m-nav-btn active">
|
||
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
Lịch chạy <span class="m-badge">3</span>
|
||
</button>
|
||
<button class="m-nav-btn">Lịch sử <span class="m-badge">42</span></button>
|
||
</nav>
|
||
<div class="m-auth"><div class="m-dot"></div><span class="m-auth-label">Đã đăng nhập</span></div>
|
||
</div>
|
||
<div class="m-body">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
|
||
<div>
|
||
<span style="font-size:14px;font-weight:700">Lịch chạy</span>
|
||
<span style="font-size:11px;color:var(--text3);margin-left:6px">3 lịch</span>
|
||
</div>
|
||
<button class="m-btn-primary">+ Thêm lịch chạy</button>
|
||
</div>
|
||
<!-- Job cards -->
|
||
<div class="m-job-card">
|
||
<div>
|
||
<div class="m-job-notebook">📓 Nghiên cứu thị trường 2026</div>
|
||
<div class="m-job-label">Báo cáo hàng ngày</div>
|
||
<div class="m-job-msg">Tóm tắt những điểm nổi bật nhất từ các tài liệu nghiên cứu thị trường. Liệt kê top 3 xu hướng quan trọng.</div>
|
||
<div class="m-job-meta">
|
||
<span class="m-meta-item">🕗 07:30 · Hàng ngày</span>
|
||
<span class="m-meta-item" style="color:var(--green)">✓ Lần cuối: thành công</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:flex-end;gap:8px">
|
||
<div class="m-toggle"></div>
|
||
<div class="m-job-btns">
|
||
<div class="m-btn-icon" title="Chạy ngay">
|
||
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||
</div>
|
||
<div class="m-btn-icon" title="Chỉnh sửa">
|
||
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
||
</div>
|
||
<div class="m-btn-icon" title="Xóa" style="border-color:#fca5a5">
|
||
<svg fill="none" stroke="#dc2626" stroke-width="2" viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/></svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="m-job-card" style="opacity:.6">
|
||
<div>
|
||
<div class="m-job-notebook">📓 Báo cáo tài chính Q2</div>
|
||
<div class="m-job-label">Phân tích cuối tuần</div>
|
||
<div class="m-job-msg">Phân tích tình hình tài chính tuần này so với kế hoạch đề ra. Có điểm nào cần chú ý?</div>
|
||
<div class="m-job-meta">
|
||
<span class="m-meta-item">🕖 18:00 · Thứ 6</span>
|
||
<span class="m-meta-item" style="color:var(--text3)">⏸ Đang tắt</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:flex-end;gap:8px">
|
||
<div class="m-toggle off"></div>
|
||
<div class="m-job-btns">
|
||
<div class="m-btn-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg></div>
|
||
<div class="m-btn-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></div>
|
||
<div class="m-btn-icon" style="border-color:#fca5a5"><svg fill="none" stroke="#dc2626" stroke-width="2" viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/></svg></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Tạo lịch chạy mới</h3>
|
||
<p>Nhấn nút <strong>"+ Thêm lịch chạy"</strong> (hoặc "+ Tạo lịch chạy" từ tab Notebooks). Một cửa sổ sẽ xuất hiện:</p>
|
||
|
||
<!-- Mockup: modal tạo lịch -->
|
||
<div class="mockup">
|
||
<div class="mockup-bar">
|
||
<div class="mockup-dot red"></div><div class="mockup-dot yellow"></div><div class="mockup-dot green"></div>
|
||
<div class="mockup-url">http://my-server.com:3456</div>
|
||
</div>
|
||
<div class="m-modal-overlay">
|
||
<div class="m-modal">
|
||
<div class="m-modal-hd">
|
||
<span class="m-modal-title">Tạo lịch chạy mới</span>
|
||
<button class="m-modal-close"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
||
</div>
|
||
<div class="m-modal-body">
|
||
<div class="m-form-group">
|
||
<label class="m-form-label">Notebook</label>
|
||
<select class="m-form-select">
|
||
<option>Nghiên cứu thị trường 2026</option>
|
||
</select>
|
||
</div>
|
||
<div class="m-form-group">
|
||
<label class="m-form-label">Tên lịch chạy</label>
|
||
<input class="m-form-input focus" value="Báo cáo hàng ngày" readonly>
|
||
</div>
|
||
<div class="m-form-group">
|
||
<label class="m-form-label">Câu hỏi / Nội dung gửi tới NotebookLM</label>
|
||
<textarea class="m-form-textarea" readonly>Tóm tắt những điểm nổi bật nhất từ các tài liệu. Liệt kê top 3 xu hướng quan trọng cần theo dõi tuần này.</textarea>
|
||
</div>
|
||
<div class="m-form-row">
|
||
<div class="m-form-group">
|
||
<label class="m-form-label">Giờ chạy</label>
|
||
<select class="m-form-select"><option>07</option></select>
|
||
</div>
|
||
<div class="m-form-group">
|
||
<label class="m-form-label">Phút</label>
|
||
<select class="m-form-select"><option>30</option></select>
|
||
</div>
|
||
</div>
|
||
<div class="m-form-group">
|
||
<label class="m-form-label">Lặp lại</label>
|
||
<select class="m-form-select"><option>Hàng ngày</option></select>
|
||
</div>
|
||
<div style="margin-bottom:13px">
|
||
<label class="m-form-label">Ngày áp dụng</label>
|
||
<div class="m-days-grid">
|
||
<div class="m-day active">T2</div>
|
||
<div class="m-day active">T3</div>
|
||
<div class="m-day active">T4</div>
|
||
<div class="m-day active">T5</div>
|
||
<div class="m-day active">T6</div>
|
||
<div class="m-day">T7</div>
|
||
<div class="m-day">CN</div>
|
||
</div>
|
||
</div>
|
||
<div class="m-form-group">
|
||
<label class="m-form-label">Trạng thái</label>
|
||
<div style="display:flex;align-items:center;gap:10px;margin-top:4px">
|
||
<div class="m-toggle"></div>
|
||
<span style="font-size:12px;color:var(--green)">Đang bật</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="m-modal-footer">
|
||
<button class="m-btn-cancel">Huỷ</button>
|
||
<button class="m-btn-primary">Tạo lịch chạy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Các trường cần điền</h3>
|
||
<table class="feat-table">
|
||
<tr><th>Trường</th><th>Mô tả</th><th>Bắt buộc?</th></tr>
|
||
<tr>
|
||
<td><strong>Notebook</strong></td>
|
||
<td>Chọn notebook muốn hỏi. Danh sách lấy từ tài khoản NotebookLM của bạn.</td>
|
||
<td>✅</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Tên lịch chạy</strong></td>
|
||
<td>Đặt tên dễ nhớ để phân biệt với các lịch khác. Ví dụ: "Báo cáo sáng thứ 2".</td>
|
||
<td>✅</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Câu hỏi</strong></td>
|
||
<td>Nội dung sẽ được gửi tới NotebookLM. Viết rõ ràng, cụ thể để nhận kết quả chính xác.</td>
|
||
<td>✅</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Giờ & Phút</strong></td>
|
||
<td>Thời điểm tự động chạy trong ngày. Ví dụ: 07:30 sáng.</td>
|
||
<td>✅</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Lặp lại</strong></td>
|
||
<td>Hàng ngày / Ngày trong tuần (T2–T6) / Cuối tuần / Tùy chọn ngày.</td>
|
||
<td>✅</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Webhook URL</strong></td>
|
||
<td>Địa chỉ để gửi kết quả đến hệ thống khác. Để trống nếu không cần.</td>
|
||
<td>—</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<h3>Các nút thao tác trên mỗi lịch</h3>
|
||
<div style="display:flex;flex-direction:column;gap:10px;margin:16px 0">
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<div class="m-toggle" style="flex-shrink:0"></div>
|
||
<div>
|
||
<strong>Bật / Tắt lịch</strong><br>
|
||
<span style="font-size:13px;color:var(--text2)">Toggle tím = đang bật. Toggle xám = đang tắt (lịch không chạy nhưng vẫn được lưu).</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<div class="m-btn-icon" style="flex-shrink:0">
|
||
<svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||
</div>
|
||
<div>
|
||
<strong>Chạy ngay</strong><br>
|
||
<span style="font-size:13px;color:var(--text2)">Chạy lịch này ngay lập tức, không cần chờ đến giờ đã đặt. Kết quả sẽ hiện trong tab Lịch sử.</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<div class="m-btn-icon" style="flex-shrink:0">
|
||
<svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
||
</div>
|
||
<div>
|
||
<strong>Chỉnh sửa</strong><br>
|
||
<span style="font-size:13px;color:var(--text2)">Thay đổi câu hỏi, giờ chạy, ngày lặp hoặc webhook.</span>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:12px">
|
||
<div class="m-btn-icon" style="flex-shrink:0;border-color:#fca5a5">
|
||
<svg width="13" height="13" fill="none" stroke="#dc2626" stroke-width="2" viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/></svg>
|
||
</div>
|
||
<div>
|
||
<strong>Xóa lịch</strong><br>
|
||
<span style="font-size:13px;color:var(--text2)">Xóa vĩnh viễn lịch chạy này. Lịch sử đã chạy vẫn được giữ lại.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════ LỊCH SỬ ════════ -->
|
||
<h2 id="lich-su" class="section-anchor">Lịch sử chạy</h2>
|
||
<p>Tab <strong>Lịch sử</strong> lưu toàn bộ kết quả của các lần chạy — cả thủ công lẫn tự động theo lịch. Bạn có thể xem câu hỏi đã gửi, câu trả lời nhận được và trạng thái gửi webhook.</p>
|
||
|
||
<!-- Mockup: tab Lịch sử -->
|
||
<div class="mockup">
|
||
<div class="mockup-bar">
|
||
<div class="mockup-dot red"></div><div class="mockup-dot yellow"></div><div class="mockup-dot green"></div>
|
||
<div class="mockup-url">http://my-server.com:3456</div>
|
||
</div>
|
||
<div class="m-header">
|
||
<div class="m-logo">
|
||
<div class="m-logo-icon"><svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg></div>
|
||
<span class="m-logo-text">NotebookLM</span>
|
||
</div>
|
||
<nav class="m-nav">
|
||
<button class="m-nav-btn">Notebooks <span class="m-badge">5</span></button>
|
||
<button class="m-nav-btn">Lịch chạy <span class="m-badge">3</span></button>
|
||
<button class="m-nav-btn active">
|
||
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
|
||
Lịch sử <span class="m-badge">42</span>
|
||
</button>
|
||
</nav>
|
||
<div class="m-auth"><div class="m-dot"></div><span class="m-auth-label">Đã đăng nhập</span></div>
|
||
</div>
|
||
<div class="m-body">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
|
||
<div><span style="font-size:14px;font-weight:700">Lịch sử chạy</span></div>
|
||
<div style="display:flex;gap:6px">
|
||
<select class="m-form-select" style="font-size:11px;padding:5px 20px 5px 8px;width:auto">
|
||
<option>Tất cả notebooks</option>
|
||
</select>
|
||
<select class="m-form-select" style="font-size:11px;padding:5px 20px 5px 8px;width:auto">
|
||
<option>Tất cả trạng thái</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="m-card">
|
||
<table class="m-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Thời gian</th>
|
||
<th>Lịch chạy</th>
|
||
<th>Notebook</th>
|
||
<th>Trạng thái</th>
|
||
<th>Webhook</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr style="cursor:pointer;background:var(--surface2)">
|
||
<td>17/06 07:30</td>
|
||
<td>Báo cáo hàng ngày</td>
|
||
<td>Nghiên cứu thị trường 2026</td>
|
||
<td><span class="m-status ok">✓ Thành công</span></td>
|
||
<td style="color:var(--green)">✓ 200</td>
|
||
</tr>
|
||
<tr class="m-answer-row">
|
||
<td colspan="5">
|
||
<div class="m-answer-box">Dựa trên tài liệu nghiên cứu thị trường 2026, 3 xu hướng nổi bật nhất tuần này là:<br><br>1. <strong>Thương mại điện tử mobile</strong> tăng trưởng 34% so với cùng kỳ, tập trung nhóm 18-34 tuổi...<br>2. <strong>Thanh toán không tiền mặt</strong> đạt 78% giao dịch bán lẻ tại Hà Nội và TP.HCM...<br>3. <strong>Phân khúc mid-range</strong> đang là khu vực tăng trưởng nhanh nhất với biên lợi nhuận cải thiện 12%...</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>16/06 18:00</td>
|
||
<td>Phân tích cuối tuần</td>
|
||
<td>Báo cáo tài chính Q2</td>
|
||
<td><span class="m-status ok">✓ Thành công</span></td>
|
||
<td style="color:var(--text3)">—</td>
|
||
</tr>
|
||
<tr>
|
||
<td>15/06 07:30</td>
|
||
<td>Báo cáo hàng ngày</td>
|
||
<td>Nghiên cứu thị trường 2026</td>
|
||
<td><span class="m-status err">✗ Lỗi</span></td>
|
||
<td style="color:var(--red)">✗ 500</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div style="font-size:11px;color:var(--text3);margin-top:8px;text-align:center">Nhấp vào hàng để xem toàn bộ câu trả lời ↑</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Cách đọc bảng lịch sử</h3>
|
||
<ul>
|
||
<li><strong>Nhấp vào bất kỳ hàng nào</strong> để xem toàn bộ câu trả lời từ NotebookLM</li>
|
||
<li><span class="m-status ok" style="font-size:11px">✓ Thành công</span> — NotebookLM đã trả lời thành công</li>
|
||
<li><span class="m-status err" style="font-size:11px">✗ Lỗi</span> — xảy ra lỗi khi chạy (session hết hạn, timeout...)</li>
|
||
<li>Cột <strong>Webhook</strong> hiển thị mã phản hồi HTTP (200 = gửi thành công, 5xx = lỗi server nhận)</li>
|
||
</ul>
|
||
|
||
<h3>Lọc kết quả</h3>
|
||
<p>Dùng hai bộ lọc phía trên bên phải để tìm kiếm:</p>
|
||
<ul>
|
||
<li><strong>Tất cả notebooks</strong> → chọn notebook cụ thể để xem lịch sử riêng</li>
|
||
<li><strong>Tất cả trạng thái</strong> → lọc chỉ "Thành công" hoặc "Lỗi"</li>
|
||
</ul>
|
||
|
||
<!-- ════════ WEBHOOK ════════ -->
|
||
<h2 id="webhook" class="section-anchor">Gửi kết quả ra ngoài (Webhook)</h2>
|
||
<p>Webhook cho phép hệ thống <strong>tự động gửi câu trả lời đến một ứng dụng khác</strong> — như Slack, Telegram bot, CRM, Zapier, hoặc bất kỳ hệ thống nào có thể nhận HTTP request.</p>
|
||
|
||
<div class="note">
|
||
<span class="note-icon">📡</span>
|
||
<p>Webhook là tùy chọn. Nếu không điền, kết quả vẫn được lưu bình thường trong tab Lịch sử.</p>
|
||
</div>
|
||
|
||
<!-- Mockup: webhook fields trong modal -->
|
||
<div class="mockup">
|
||
<div class="mockup-bar">
|
||
<div class="mockup-dot red"></div><div class="mockup-dot yellow"></div><div class="mockup-dot green"></div>
|
||
<div class="mockup-url">http://my-server.com:3456</div>
|
||
</div>
|
||
<div class="m-modal-overlay">
|
||
<div class="m-modal">
|
||
<div class="m-modal-hd">
|
||
<span class="m-modal-title">Tạo lịch chạy mới</span>
|
||
<button class="m-modal-close"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
|
||
</div>
|
||
<div class="m-modal-body">
|
||
<div style="color:var(--text3);font-size:11px;margin-bottom:12px;padding:8px;background:var(--surface2);border-radius:5px;text-align:center">
|
||
... (Notebook, Tên, Câu hỏi, Giờ chạy, Lặp lại) ...
|
||
</div>
|
||
<div style="height:1px;background:var(--border);margin:0 0 13px"></div>
|
||
<div class="m-form-group">
|
||
<label class="m-form-label">Webhook URL <span style="font-weight:400;color:var(--text3)">(tuỳ chọn)</span></label>
|
||
<input class="m-form-input focus" value="https://hooks.slack.com/services/T00/B00/xxx" readonly>
|
||
<div class="m-form-hint">Hệ thống sẽ POST kết quả đến URL này sau mỗi lần chạy</div>
|
||
</div>
|
||
<div class="m-webhook-group">
|
||
<div class="m-webhook-title">Headers xác thực</div>
|
||
<div class="m-form-group" style="margin-bottom:0">
|
||
<label class="m-form-label">Headers <span style="font-weight:400;color:var(--text3)">(JSON)</span></label>
|
||
<textarea class="m-form-textarea" style="min-height:72px;font-family:monospace;font-size:11px" readonly>{
|
||
"Authorization": "Bearer my-secret-token",
|
||
"X-Custom-Header": "my-value"
|
||
}</textarea>
|
||
<div class="m-form-hint" style="color:var(--green)">✓ JSON hợp lệ</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="m-modal-footer">
|
||
<button class="m-btn-cancel">Huỷ</button>
|
||
<button class="m-btn-primary">Tạo lịch chạy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Dữ liệu được gửi đi</h3>
|
||
<p>Mỗi lần chạy, hệ thống sẽ gửi một POST request với dữ liệu dạng JSON như sau:</p>
|
||
<div style="background:var(--text);color:#e2e8f0;border-radius:var(--radius);padding:16px 20px;font-size:12px;font-family:monospace;line-height:1.8;margin:16px 0;overflow-x:auto">
|
||
<span style="color:#94a3b8">{</span><br>
|
||
<span style="color:#7dd3fc">"job_id"</span>: <span style="color:#86efac">1</span>,<br>
|
||
<span style="color:#7dd3fc">"notebook_id"</span>: <span style="color:#fca5a5">"abc-123-..."</span>,<br>
|
||
<span style="color:#7dd3fc">"label"</span>: <span style="color:#fca5a5">"Báo cáo hàng ngày"</span>,<br>
|
||
<span style="color:#7dd3fc">"message"</span>: <span style="color:#fca5a5">"Tóm tắt điểm nổi bật..."</span>,<br>
|
||
<span style="color:#7dd3fc">"answer"</span>: <span style="color:#fca5a5">"Dựa trên tài liệu, 3 xu hướng..."</span>,<br>
|
||
<span style="color:#7dd3fc">"status"</span>: <span style="color:#fca5a5">"success"</span>,<br>
|
||
<span style="color:#7dd3fc">"ran_at"</span>: <span style="color:#fca5a5">"2026-06-17T07:30:00.000Z"</span><br>
|
||
<span style="color:#94a3b8">}</span>
|
||
</div>
|
||
|
||
<h3>Ví dụ tích hợp phổ biến</h3>
|
||
<table class="feat-table">
|
||
<tr><th>Hệ thống</th><th>Webhook URL</th><th>Header cần thêm</th></tr>
|
||
<tr>
|
||
<td><strong>Slack</strong></td>
|
||
<td><code>https://hooks.slack.com/services/xxx</code></td>
|
||
<td>Không cần thêm header</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Telegram Bot</strong></td>
|
||
<td>URL webhook của bot</td>
|
||
<td>Không cần thêm header</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>API riêng</strong></td>
|
||
<td>URL endpoint của hệ thống bạn</td>
|
||
<td><code>Authorization: Bearer <token></code></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Make / Zapier</strong></td>
|
||
<td>Webhook URL từ scenario/zap</td>
|
||
<td>Không cần thêm header</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<!-- ════════ FAQ ════════ -->
|
||
<h2 id="faq" class="section-anchor">Câu hỏi thường gặp</h2>
|
||
|
||
<h3>Tôi không thấy notebook nào trong danh sách?</h3>
|
||
<p>Hệ thống chỉ hiển thị các notebook <strong>do bạn tạo</strong> trên tài khoản Google NotebookLM đã đăng nhập. Nếu danh sách trống, nhấn nút <strong>"Làm mới"</strong> và kiểm tra lại trạng thái đăng nhập ở góc trên phải.</p>
|
||
|
||
<h3>Lịch chạy bị bỏ qua nếu server đang tắt không?</h3>
|
||
<p>Đúng vậy. Nếu server tắt đúng giờ đã đặt, lần chạy đó sẽ bị bỏ qua và <strong>không chạy bù</strong>. Hệ thống chỉ chạy đúng giờ theo lịch thực tế.</p>
|
||
|
||
<h3>Câu trả lời bị rỗng hoặc thấy lỗi "NOT_AUTHENTICATED"?</h3>
|
||
<p>Session Google đã hết hạn. Liên hệ admin để đăng nhập lại vào tài khoản Google trên server.</p>
|
||
|
||
<h3>Tôi có thể đặt nhiều lịch cho cùng một notebook không?</h3>
|
||
<p>Có thể. Một notebook có thể có nhiều lịch chạy với câu hỏi và thời điểm khác nhau — ví dụ báo cáo buổi sáng và tóm tắt buổi chiều.</p>
|
||
|
||
<h3>Webhook gửi thất bại thì có retry không?</h3>
|
||
<p>Không retry. Trạng thái webhook (thành công hay thất bại) được ghi lại trong Lịch sử để bạn theo dõi. Nếu thất bại, bạn có thể nhấn <strong>"Chạy ngay"</strong> để gửi lại thủ công.</p>
|
||
|
||
<h3>Kết quả trong Lịch sử được lưu bao lâu?</h3>
|
||
<p>Kết quả được lưu vĩnh viễn trong database của hệ thống, cho đến khi admin xóa. Không có giới hạn thời gian tự động xóa.</p>
|
||
|
||
<!-- Footer -->
|
||
<div style="margin-top:60px;padding-top:24px;border-top:1px solid var(--border);text-align:center">
|
||
<p style="font-size:12px;color:var(--text3)">NotebookLM Scheduler · Hướng dẫn sử dụng · Phiên bản 1.0</p>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<script>
|
||
// Highlight active nav link based on scroll position
|
||
const sections = document.querySelectorAll('.section-anchor');
|
||
const navLinks = document.querySelectorAll('.doc-nav a');
|
||
|
||
function updateNav() {
|
||
let current = '';
|
||
sections.forEach(s => {
|
||
if (window.scrollY >= s.offsetTop - 80) current = s.id;
|
||
});
|
||
navLinks.forEach(a => {
|
||
a.classList.toggle('active', a.getAttribute('href') === '#' + current);
|
||
});
|
||
}
|
||
window.addEventListener('scroll', updateNav);
|
||
updateNav();
|
||
|
||
// Smooth scroll
|
||
navLinks.forEach(a => {
|
||
a.addEventListener('click', e => {
|
||
e.preventDefault();
|
||
const target = document.querySelector(a.getAttribute('href'));
|
||
if (target) target.scrollIntoView({ behavior: 'smooth' });
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|