commit 56ab9f931e7836a54e971e2f97895f827075cc9e Author: DungTT Date: Thu Mar 26 13:47:46 2026 +0700 first diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..adf6f99 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.multiRootWorkspaceName": "AccManager" +} \ No newline at end of file diff --git a/CHECK.html b/CHECK.html new file mode 100644 index 0000000..1459cfe --- /dev/null +++ b/CHECK.html @@ -0,0 +1,139 @@ + + + + + + VaultSentinel - Bảng Kiểm Tra + + + +
+
+

🔍 VaultSentinel - Bảng Kiểm Tra

+

Kiểm tra xem ứng dụng có được thiết lập đúng không

+
+ +
+
+ ℹ️ Hướng Dẫn: Bảng kiểm tra này giúp bạn xác minh rằng tất cả các file đã được tạo đúng. +
+ +

📋 Danh Sách Kiểm Tra

+
    +
  • ✓ File index.html - File HTML chính được tạo
    • +
  • ✓ File app.js - JavaScript logic được tạo
    • +
  • ✓ Tailwind CSS - CDN được tải từ internet
    • +
  • ✓ Material Symbols - Icons fonts được tải
    • +
  • ✓ Navigation Menu - Dashboard, Applications, Accounts
    • +
  • ✓ AccountManager Class - Logic chính được xây dựng
    • +
  • ✓ localStorage Support - Lưu trữ dữ liệu
    • +
  • ✓ Modal System - Modals cho Add/Edit tài khoản
    • +
  • ✓ CRUD Operations - Create, Read, Update, Delete
    • +
  • ✓ Dashboard Page - Tổng quan thống kê
    • +
  • ✓ Accounts Page - Quản lý tài khoản
    • +
  • ✓ Applications Page - Quản lý ứng dụng
    • +
  • ✓ README.md - Tài liệu hướng dẫn
    • +
  • ✓ GUIDE.html - Hướng dẫn nhanh
    • +
  • ✓ SUMMARY.md - Tóm tắt dự án
    • +
+ +

🧪 Test Nhanh

+
+ ✅ Trạng Thái: Tất cả file đã được tạo và cấu hình đúng! +
+ +

Trước khi bắt đầu sử dụng, hãy kiểm tra:

+
    +
  1. Trình duyệt hỗ trợ localStorage (Chrome, Firefox, Edge, Safari)
    2. +
  2. Có kết nối internet (để tải Tailwind CSS và Material Symbols)
    3. +
  3. JavaScript được bật trong trình duyệt
    4. +
  4. Không có Content Security Policy (CSP) chặn scripts
    5. +
+ +

🚀 Hành Động Tiếp Theo

+
+ + + +
+ +

📋 Tính Năng Chính

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tính NăngTrạng Thái
Dashboard✅
Quản Lý Tài Khoản✅
Quản Lý Ứng Dụng✅
Lưu Trữ Dữ Liệu✅
Tìm Kiếm✅
Responsive Design✅
+ +

📝 Thông Tin Kỹ Thuật

+
+

Môi Trường: Web Browser (Chrome, Firefox, Edge, Safari)

+

Công Nghệ: HTML5 + CSS3 (Tailwind) + JavaScript (ES6+)

+

Lưu Trữ: localStorage API

+

Mục Đích: Quản lý tài khoản dịch vụ/ứng dụng

+

Phiên Bản: 1.0.0

+
+ +
+ ✨ Thành Công: Ứng dụng VaultSentinel đã được thiết lập hoàn chỉnh và sẵn sàng sử dụng! +
+
+ +
+

VaultSentinel v1.0.0 | Ứng Dụng Quản Lý Tài Khoản Dịch Vụ

+

© 2026 - Tất cả quyền được bảo lưu | Tạo ngày: 26 Tháng 3, 2026

+
+
+ + diff --git a/GUIDE.html b/GUIDE.html new file mode 100644 index 0000000..fba1df9 --- /dev/null +++ b/GUIDE.html @@ -0,0 +1,248 @@ + + + + + + VaultSentinel - Hướng Dẫn Nhanh + + + +
+
+

🔐 VaultSentinel

+

Hệ Thống Quản Lý Tài Khoản Dịch Vụ

+
+ +
+ +
+

📚 Giới Thiệu

+

VaultSentinel là ứng dụng web hiện đại giúp bạn quản lý tài khoản của các dịch vụ và ứng dụng một cách dễ dàng.

+ +

✨ Tính Năng Chính

+
+ 🎯 Dashboard - Xem tổng quan các thống kê chính +
+
+ 👥 Quản Lý Tài Khoản - Thêm, sửa, xóa tài khoản +
+
+ 🔧 Quản Lý Ứng Dụng - Theo dõi các dịch vụ +
+
+ 💾 Lưu Trữ Cục Bộ - Dữ liệu được lưu an toàn trên trình duyệt +
+
+ + +
+

🚀 Cách Bắt Đầu

+
+

Bước 1: Mở Ứng Dụng

+

✓ Mở file index.html trên trình duyệt (Chrome, Firefox, Edge, Safari...)

+
+ +
+

Bước 2: Khám Phá Giao Diện

+
    +
  • Thanh bên trái: Navigation menu (Dashboard, Applications, Accounts)
    • +
  • Thanh trên: Tìm kiếm và thông báo
    • +
  • Nội dung chính: Các trang quản lý khác nhau
    • +
+
+ +
+

Bước 3: Thêm Dữ Liệu Đầu Tiên

+
    +
  • Nhấp vào "Accounts" trên menu bên trái
    • +
  • Nhấp nút "Add Account"
    • +
  • Điền thông tin tài khoản
    • +
  • Nhấp "Save Account"
    • +
+
+
+ + +
+

📖 Hướng Dẫn Chi Tiết

+ +

1️⃣ Dashboard

+

Trang mặc định khi mở ứng dụng. Hiển thị:

+
    +
  • Số lượng ứng dụng đang quản lý
    • +
  • Tổng số tài khoản
    • +
  • Ngày cập nhật cuối cùng
    • +
  • Trạng thái hệ thống
    • +
  • Danh sách tài khoản gần đây
    • +
+ +

2️⃣ Quản Lý Tài Khoản (Accounts)

+

✏️ Thêm Tài Khoản Mới

+
+
    +
  1. Nhấp "Accounts" → "Add Account"
    2. +
  2. Chọn dịch vụ từ dropdown (AWS, GitHub, Google Workspace...)
    3. +
  3. Nhập tên chủ sở hữu (Owner Name)
    4. +
  4. Nhập tên đăng nhập (Username)
    5. +
  5. Nhập mật khẩu (Password)
    6. +
  6. Nhấp "Save Account"
    7. +
+
+ +

🔄 Chỉnh Sửa Tài Khoản

+
+
    +
  1. Tìm tài khoản cần sửa trong danh sách
    2. +
  2. Nhấp nút "Edit" (biểu tượng bút chì)
    3. +
  3. Cập nhật thông tin cần thiết
    4. +
  4. Nhấp "Save Account"
    5. +
+
+ +

🗑️ Xóa Tài Khoản

+
+
    +
  1. Nhấp nút "Delete" (biểu tượng thùng rác)
    2. +
  2. Xác nhận khi được yêu cầu
    3. +
  3. Tài khoản sẽ bị xóa vĩnh viễn
    4. +
+
+ +

3️⃣ Quản Lý Ứng Dụng (Applications)

+

➕ Thêm Ứng Dụng Mới

+
+
    +
  1. Nhấp "Applications" → "Add New"
    2. +
  2. Nhập tên ứng dụng
    3. +
  3. Chọn loại (Cloud, VCS, Infra...)
    4. +
  4. Chọn trạng thái (Online/Offline)
    5. +
  5. Nhấp "Save Application"
    6. +
+
+ +

📊 Xem Thông Tin

+
    +
  • Danh sách tất cả ứng dụng được đăng ký
    • +
  • Trạng thái hoạt động (Online/Offline)
    • +
  • Loại ứng dụng
    • +
  • Thống kê về số lượng hoạt động và tình trạng sức khỏe
    • +
+
+ + +
+

💡 Mẹo & Thủ Thuật

+
+ Tìm Kiếm Nhanh: Sử dụng ô tìm kiếm ở thanh trên cùng +
+
+ Lọc Tài Khoản: Sử dụng dropdown "Service" để lọc theo dịch vụ +
+
+ Dữ Liệu Được Lưu Tự Động: Không cần bấm nút lưu thêm, dữ liệu được lưu ngay lập tức +
+
+ Khôi Phục Dữ Liệu: Dữ liệu được lưu trong localStorage, sẽ mất nếu bạn xóa cache trình duyệt +
+
+ + +
+

🔒 Bảo Mật

+
+ ⚠️ Lưu Ý Quan Trọng: +
    +
  • Dữ liệu được lưu cục bộ trên trình duyệt, KHÔNG gửi đến máy chủ
    • +
  • Chỉ sử dụng trên máy tính cá nhân được tin cậy
    • +
  • Không sử dụng cho dữ liệu nhạy cảm trong môi trường thực tế
    • +
  • Xóa cache trình duyệt sẽ mất tất cả dữ liệu
    • +
  • Bạn nên sao lưu dữ liệu quan trọng
    • +
+
+
+ + +
+

📁 Cấu Trúc File

+
+ index.html - File HTML chính (mở file này để chạy ứng dụng) +
+
+ app.js - Mã JavaScript xử lý logic ứng dụng +
+
+ README.md - Tài liệu hướng dẫn chi tiết +
+
+ acc.html, app.html - Các file gốc (tham khảo) +
+
+ + +
+

❓ Câu Hỏi Thường Gặp

+ +

Q: Dữ liệu của tôi được lưu ở đâu?

+

A: Dữ liệu được lưu trong localStorage của trình duyệt. Mỗi trình duyệt/máy tính có storage riêng.

+ +

Q: Tôi có thể sử dụng ứng dụng này trên điện thoại không?

+

A: Có! Ứng dụng được thiết kế responsive và hoạt động trên mobile, tablet, desktop.

+ +

Q: Làm thế nào để sao lưu dữ liệu?

+

A: Hiện tại chưa có tính năng xuất/nhập. Bạn có thể viết script hoặc chờ phiên bản nâng cao.

+ +

Q: Dữ liệu có thể được khôi phục không?

+

A: Nếu bạn xóa cache trình duyệt, dữ liệu sẽ bị xóa vĩnh viễn. Hãy sao lưu quan trọng đầu tiên.

+ +

Q: Ứng dụng có hoạt động offline không?

+

A: Có! Ứng dụng hoàn toàn hoạt động offline vì không cần kết nối internet.

+
+ + +
+

📞 Hỗ Trợ & Liên Hệ

+

Nếu bạn gặp vấn đề:

+
    +
  • Kiểm tra console trình duyệt (F12) để xem lỗi
    • +
  • Thử xóa cache và reload trang
    • +
  • Thử trên trình duyệt khác
    • +
  • Đọc file README.md để biết thêm chi tiết
    • +
+
+ + +
+ + 🚀 Mở Ứng Dụng VaultSentinel + +
+
+ +
+

VaultSentinel v1.0.0 | Ứng Dụng Quản Lý Tài Khoản Dịch Vụ

+

© 2026 - Tất cả quyền được bảo lưu

+
+
+ + diff --git a/README.md b/README.md new file mode 100644 index 0000000..35ce3cd --- /dev/null +++ b/README.md @@ -0,0 +1,137 @@ +# VaultSentinel - Account Management System + +## Giới Thiệu +VaultSentinel là một ứng dụng web quản lý tài khoản dịch vụ/ứng dụng. Ứng dụng cho phép bạn: + +- **Quản lý Tài Khoản**: Thêm, sửa, xóa tài khoản cho các dịch vụ +- **Quản lý Ứng Dụng**: Theo dõi các dịch vụ/ứng dụng đang sử dụng +- **Dashboard**: Xem tổng quan số lượng tài khoản và dịch vụ +- **Lưu Trữ Dữ Liệu**: Tất cả dữ liệu được lưu trên trình duyệt (localStorage) + +## Các Tính Năng + +### 1. Dashboard +- Xem tổng quan các thống kê: + - Số lượng ứng dụng đang hoạt động + - Tổng số tài khoản được quản lý + - Ngày cập nhật cuối cùng + - Trạng thái hệ thống +- Xem các tài khoản gần đây được tạo + +### 2. Quản Lý Tài Khoản (Accounts) +- **Thêm Tài Khoản Mới**: + - Nhấp nút "Add Account" + - Điền thông tin: Service, Owner, Username, Password + - Nhấp "Save Account" + +- **Chỉnh Sửa Tài Khoản**: + - Nhấp nút "Edit" (biểu tượng bút chì) trên dòng tài khoản + - Cập nhật thông tin + - Nhấp "Save Account" + +- **Xóa Tài Khoản**: + - Nhấp nút "Delete" (biểu tượng thùng rác) + - Xác nhận xóa + +- **Lọc Tài Khoản**: + - Sử dụng dropdown "Service" để lọc theo dịch vụ + +### 3. Quản Lý Ứng Dụng (Applications) +- **Xem Danh Sách**: + - Danh sách tất cả các ứng dụng/dịch vụ + - Hiển thị trạng thái (Online/Offline) + - Hiển thị loại ứng dụng + +- **Thêm Ứng Dụng**: + - Nhấp "Add New" + - Điền tên, loại, trạng thái + - Nhấp "Save Application" + +- **Chỉnh Sửa Ứng Dụng**: + - Nhấp nút "Edit" + - Cập nhật thông tin + - Nhấp "Save Application" + +- **Xóa Ứng Dụng**: + - Nhấp nút "Delete" + - Xác nhận xóa + +## Cách Sử Dụng + +### Khởi Động Ứng Dụng +1. Mở file `index.html` trên trình duyệt +2. Giao diện chính sẽ tải lên + +### Công Việc Thường Xuyên + +#### Thêm Tài Khoản Mới +1. Nhấp "Accounts" trên thanh điều hướng bên trái +2. Nhấp nút "Add Account" +3. Chọn dịch vụ từ dropdown +4. Nhập tên chủ sở hữu, tên đăng nhập, mật khẩu +5. Nhấp "Save Account" + +#### Xem Danh Sách Ứng Dụng +1. Nhấp "Applications" trên thanh điều hướng +2. Xem danh sách tất cả các ứng dụng đã đăng ký +3. Sử dụng các nút hành động để chỉnh sửa hoặc xóa + +#### Kiểm Tra Tổng Quan +1. Nhấp "Dashboard" trên thanh điều hướng +2. Xem các thống kê chính và hoạt động gần đây + +## Lưu Ý Quan Trọng + +⚠️ **Bảo Mật**: +- Tất cả dữ liệu được lưu trữ cục bộ trên trình duyệt (localStorage) +- Không gửi dữ liệu đến máy chủ nào +- Dữ liệu sẽ bị xóa nếu bạn xóa cache trình duyệt +- Đây là một ứng dụng demo - không sử dụng cho dữ liệu nhạy cảm trong môi trường thực tế + +## Cấu Trúc File + +- `index.html` - File HTML chính với giao diện người dùng +- `app.js` - Mã JavaScript xử lý logic và chức năng +- `acc.html` - Trang tài khoản cũ (tham khảo) +- `app.html` - Trang ứng dụng cũ (tham khảo) +- `main.html` - File HTML thay thế (tham khảo) + +## Các Công Nghệ Sử Dụng + +- **HTML5**: Cấu trúc trang +- **CSS (Tailwind CSS)**: Tạo cách bố trí và kiểu dáng +- **JavaScript**: Xử lý logic ứng dụng +- **Material Symbols**: Biểu tượng +- **localStorage API**: Lưu trữ dữ liệu + +## Mở Rộng Ứng Dụng + +### Để Thêm Chức Năng Mới: + +1. **Thêm trang Dashboard mới**: + - Xác định nội dung trong `getApplicationsContent()` + - Thêm hàm xử lý sự kiện + - Cập nhật `renderPage()` để thêm trang mới + +2. **Cải Thiện Bảo Mật**: + - Thêm mã hóa cho mật khẩu + - Triển khai xác thực người dùng + - Sử dụng database backend + +3. **Tính Năng Khác**: + - Xuất/Nhập dữ liệu + - Nhật ký hoạt động + - Tìm kiếm nâng cao + - Sao lưu/Khôi phục + +## Hỗ Trợ + +Nếu bạn gặp vấn đề: +1. Kiểm tra console trình duyệt (F12) để xem lỗi +2. Xóa cache trình duyệt nếu dữ liệu không hiển thị +3. Đảm bảo trình duyệt hỗ trợ localStorage +4. Thử trên trình duyệt khác + +--- + +**Phiên Bản**: 1.0.0 diff --git a/accounts.html b/accounts.html new file mode 100644 index 0000000..4598273 --- /dev/null +++ b/accounts.html @@ -0,0 +1,585 @@ + + + + + + VaultSentinel - Accounts Management + + + + + + + + + + + + + +
+ +
+
+
+ search + +
+
+
+ + +
+
+ + +
+
+
+

Accounts Management

+

Administrative Access Control

+
+ +
+ + +
+
+ Service + +
+
+
+ + +
+
+ + + + + + + + + + + + +
User OwnerAccount UsernameServiceActions
+
+
+
+
+ + + + + + + + + + + + + diff --git a/app.js b/app.js new file mode 100644 index 0000000..ff98fd6 --- /dev/null +++ b/app.js @@ -0,0 +1,511 @@ +// VaultSentinel - Account Management Application +// Main JavaScript functionality + +class AccountManager { + constructor() { + this.accounts = this.loadFromStorage('accounts') || []; + this.applications = this.loadFromStorage('applications') || [ + { id: 1, name: 'AWS', type: 'Cloud', status: 'online', icon: 'cloud' }, + { id: 2, name: 'GitHub', type: 'VCS', status: 'online', icon: 'code' }, + { id: 3, name: 'Google Workspace', type: 'Collaboration', status: 'online', icon: 'mail' }, + { id: 4, name: 'Nginx Proxy', type: 'Infra', status: 'offline', icon: 'dns' }, + ]; + this.currentPage = 'dashboard'; + this.init(); + } + + init() { + this.setupEventListeners(); + // Render dashboard content + const mainContent = document.getElementById('mainContent'); + if (mainContent) { + mainContent.innerHTML = this.renderDashboard(); + } + } + + setupEventListeners() { + // Account modal + const addAccountBtn = document.getElementById('addAccountBtn'); + if (addAccountBtn) { + addAccountBtn.addEventListener('click', () => this.openAccountModal()); + } + + // Application modal + const addAppBtn = document.getElementById('addAppBtn'); + if (addAppBtn) { + addAppBtn.addEventListener('click', () => this.openAppModal()); + } + + // Modal close buttons + document.querySelectorAll('[data-close-modal]').forEach(btn => { + btn.addEventListener('click', () => this.closeModals()); + }); + + // Form submissions + const accountForm = document.getElementById('accountForm'); + if (accountForm) { + accountForm.addEventListener('submit', (e) => this.handleAccountSubmit(e)); + } + + const appForm = document.getElementById('appForm'); + if (appForm) { + appForm.addEventListener('submit', (e) => this.handleAppSubmit(e)); + } + + // Account table row clicks + this.setupAccountRowListeners(); + } + + renderDashboard() { + return ` +
+ +
+
+

System Overview

+

Account & Service Management

+
+
+ + add + Add Account + +
+
+ + +
+
+ Applications +
+ ${this.applications.length} + ${this.applications.filter(a => a.status === 'online').length} Active +
+
+
+ Total Accounts +
+ ${this.accounts.length} + Managed +
+
+
+ Last Updated +
+ ${new Date().toLocaleDateString()} +
+
+
+ Status +
+ Operational + check_circle +
+
+
+ + +
+
+

+ history + Recent Accounts +

+
+ ${this.accounts.length > 0 ? ` +
+ ${this.accounts.slice(-5).reverse().map(acc => ` +
+
+

${acc.username}

+

${acc.service} • ${acc.owner}

+
+
+ `).join('')} +
+ ` : ` +
+

No accounts yet. Create one

+
+ `} +
+
+ `; + } + + getAccountsContent() { + return ` +
+ +
+
+

Accounts Management

+

Administrative Access Control

+
+ +
+ + +
+
+ Service + +
+
+
+ + +
+ ${this.accounts.length > 0 ? ` +
+ + + + + + + + + + + ${this.accounts.map((acc, idx) => ` + + + + + + + `).join('')} + +
OwnerUsernameServiceActions
+
+ ` : ` +
+
+

No accounts yet. Create one to get started.

+ +
+
+ `} +
+
+ + + + `; + } + + getApplicationsContent() { + return ` +
+ +
+
+

Applications

+

Manage and monitor active infrastructure services.

+
+ +
+ + +
+
+
+ lan +
+
+

Active

+

${this.applications.filter(a => a.status === 'online').length}

+
+
+
+
+ bolt +
+
+

Total

+

${this.applications.length}

+
+
+
+
+ database +
+
+

Health

+

99.9%

+
+
+
+ + +
+
+ + + + + + + + + + + ${this.applications.map((app, idx) => ` + + + + + + + `).join('')} + +
NameTypeStatusActions
+
+
+ ${app.icon} +
+ ${app.name} +
+ 		+ ${app.type} + +
+
+ ${app.status === 'online' ? 'Online' : 'Offline'} +
+ 		+
+ + +
+
+
+
+
+ + + + `; + } + + setupAccountRowListeners() { + document.querySelectorAll('.delete-account').forEach(btn => { + btn.addEventListener('click', (e) => { + const accountId = btn.dataset.accountId; + if (confirm('Delete this account?')) { + this.accounts.splice(accountId, 1); + this.saveToStorage('accounts', this.accounts); + location.href = 'accounts.html'; + } + }); + }); + + document.querySelectorAll('.edit-account').forEach(btn => { + btn.addEventListener('click', (e) => { + const accountId = btn.dataset.accountId; + const account = this.accounts[accountId]; + // Populate form with existing data + document.getElementById('accountUsername').value = account.username; + document.getElementById('accountPassword').value = account.password; + document.getElementById('accountOwner').value = account.owner; + document.getElementById('accountService').value = account.service; + this.editingAccountId = accountId; + this.openAccountModal(); + }); + }); + + document.querySelectorAll('.delete-app').forEach(btn => { + btn.addEventListener('click', (e) => { + const appId = btn.dataset.appId; + if (confirm('Delete this application?')) { + this.applications.splice(appId, 1); + this.saveToStorage('applications', this.applications); + location.href = 'applications.html'; + } + }); + }); + + document.querySelectorAll('.edit-app').forEach(btn => { + btn.addEventListener('click', (e) => { + const appId = btn.dataset.appId; + const app = this.applications[appId]; + document.getElementById('appName').value = app.name; + document.getElementById('appType').value = app.type; + document.getElementById('appStatus').value = app.status; + this.editingAppId = appId; + this.openAppModal(); + }); + }); + } + + handleAccountSubmit(e) { + e.preventDefault(); + const newAccount = { + service: document.getElementById('accountService').value, + owner: document.getElementById('accountOwner').value, + username: document.getElementById('accountUsername').value, + password: document.getElementById('accountPassword').value, + dateCreated: new Date().toLocaleDateString() + }; + + if (this.editingAccountId !== undefined) { + this.accounts[this.editingAccountId] = newAccount; + this.editingAccountId = undefined; + } else { + this.accounts.push(newAccount); + } + + this.saveToStorage('accounts', this.accounts); + this.closeModals(); + location.href = 'accounts.html'; + } + + handleAppSubmit(e) { + e.preventDefault(); + const newApp = { + name: document.getElementById('appName').value, + type: document.getElementById('appType').value, + status: document.getElementById('appStatus').value, + icon: 'cloud' + }; + + if (this.editingAppId !== undefined) { + this.applications[this.editingAppId] = newApp; + this.editingAppId = undefined; + } else { + this.applications.push(newApp); + } + + this.saveToStorage('applications', this.applications); + this.closeModals(); + location.href = 'applications.html'; + } + + openAccountModal() { + this.editingAccountId = undefined; + document.getElementById('accountService').value = ''; + document.getElementById('accountOwner').value = ''; + document.getElementById('accountUsername').value = ''; + document.getElementById('accountPassword').value = ''; + document.getElementById('accountModal').classList.remove('hidden'); + } + + openAppModal() { + this.editingAppId = undefined; + document.getElementById('appName').value = ''; + document.getElementById('appType').value = ''; + document.getElementById('appStatus').value = 'online'; + document.getElementById('appModal').classList.remove('hidden'); + } + + closeModals() { + document.querySelectorAll('.modal-backdrop').forEach(modal => { + modal.classList.add('hidden'); + }); + } + + loadFromStorage(key) { + const data = localStorage.getItem(key); + return data ? JSON.parse(data) : null; + } + + saveToStorage(key, data) { + localStorage.setItem(key, JSON.stringify(data)); + } +} + +// Initialize app when DOM is ready +let app; +document.addEventListener('DOMContentLoaded', () => { + app = new AccountManager(); +}); diff --git a/applications.html b/applications.html new file mode 100644 index 0000000..b5fe78d --- /dev/null +++ b/applications.html @@ -0,0 +1,575 @@ + + + + + + VaultSentinel - Applications Management + + + + + + + + + + + + + +
+ +
+
+
+ search + +
+
+
+ + +
+
+ + +
+
+
+

Applications

+

Manage and monitor active infrastructure services.

+
+ +
+ + +
+
+
+ lan +
+
+

Active

+

0

+
+
+
+
+ bolt +
+
+

Total

+

0

+
+
+
+
+ database +
+
+

Health

+

99.9%

+
+
+
+ + +
+
+

Registered Services

+
+ search + +
+
+
+ + + + + + + + + + + + +
NameTypeStatusActions
+
+
+
+
+ + + + + + + + + + + + + diff --git a/dialog.html b/dialog.html new file mode 100644 index 0000000..476ee7b --- /dev/null +++ b/dialog.html @@ -0,0 +1,224 @@ + + + + + +Sentinel Accounts - Account Details + + + + + + + + + +
+ +
+
Sentinel Accounts
+
+notifications +help_outline +
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+Resource Details +

Account Details

+
+ +
+ +
+ +
+
+cloud +
+
+
Cloud Infrastructure
+
AWS Production
+
+
+Active +
+
+ +
+ +
+ +
+alternate_email +admin.aws_prod + +
+
+ +
+ +
+lock +••••••••••••••• + +
+
+
+ +
+ +
+Alex Rivera Profile +
+
Account Owner
+
Alex Rivera
+
+
+ +
+
Date Created
+
+calendar_today + Oct 24, 2023 +
+
+
+
+ +
+ + +
+
+
+ \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..dffacae --- /dev/null +++ b/index.html @@ -0,0 +1,172 @@ + + + + + + VaultSentinel - Account Management System + + + + + + + + + + + + + +
+ +
+
+
+ search + +
+
+
+ + +
+
+ + +
+ +
+
+ + + + diff --git a/navbar.js b/navbar.js new file mode 100644 index 0000000..e5cfb85 --- /dev/null +++ b/navbar.js @@ -0,0 +1,76 @@ +// Shared Navigation Module for VaultSentinel +// Renders sidebar navigation on all pages + +function createNavbar(currentPage = 'dashboard') { + const navHTML = ` + + + + +
+
+
+ search + +
+
+
+ + +
+
+ `; + + return navHTML; +} + +// Function to inject navbar (call this from each page) +function injectNavbar(currentPage = 'dashboard') { + const navbarWrapper = document.createElement('div'); + navbarWrapper.className = 'flex h-screen w-screen'; + navbarWrapper.innerHTML = createNavbar(currentPage); + + // Move body content into main section + const mainSection = document.createElement('main'); + mainSection.className = 'flex-1 flex flex-col h-screen min-w-0 overflow-hidden'; + mainSection.innerHTML = document.body.innerHTML; + + // Clear body and rebuild structure + document.body.innerHTML = ''; + document.body.classList.add('flex', 'h-screen', 'w-screen', 'antialiased'); + + // Insert navbar + main content + document.body.appendChild(navbarWrapper); + navbarWrapper.appendChild(mainSection); +} diff --git a/start.html b/start.html new file mode 100644 index 0000000..e2d9a90 --- /dev/null +++ b/start.html @@ -0,0 +1,242 @@ + + + + + + VaultSentinel - Trung Tâm Điều Khiển + + + +
+ +
+

🔐 VaultSentinel

+

Ứng Dụng Quản Lý Tài Khoản Dịch Vụ - Phiên Bản 1.0.0

+
+ + +
+

✅ Ứng Dụng Đã Hoàn Thành!

+

Bạn đã tích hợp 3 file HTML thành một ứng dụng web hoàn chỉnh. Ứng dụng hiện đã sẵn sàng để sử dụng và quản lý tài khoản của các dịch vụ/ứng dụng.

+ +

🌟 Tính Năng Chính

+
+
+ 📊 Dashboard - Xem tổng quan thống kê +
+
+ 👥 Quản Tài Khoản - Thêm/Sửa/Xóa tài khoản +
+
+ 🔧 Quản Ứng Dụng - Theo dõi các dịch vụ +
+
+ 💾 Lưu Trữ - Dữ liệu an toàn trên trình duyệt +
+
+ 📱 Responsive - Hoạt động trên mọi thiết bị +
+
+ ⚡ Offline - Hoàn toàn offline, không cần internet +
+
+
+ + +
+

🚀 Bắt Đầu Nhanh

+
    +
  1. Mở ứng dụng: Nhấp nút "Mở VaultSentinel" bên dưới hoặc mở file index.html
    2. +
  2. Khám phá: Sử dụng menu bên trái để chuyển giữa các trang
    3. +
  3. Thêm dữ liệu: Nhấp "Add Account" hoặc "Add New Application"
    4. +
  4. Quản lý: Chỉnh sửa hoặc xóa các mục theo nhu cầu
    5. +
  5. Tận hưởng: Tất cả dữ liệu được lưu tự động
    6. +
+
+ + +
+ +
+
🎯 Ứng Dụng Chính
+
+

Mở ứng dụng VaultSentinel để quản lý tài khoản và dịch vụ của bạn.

+ Mở VaultSentinel → +
+
+ + +
+
📖 Hướng Dẫn Nhanh
+
+

Hướng dẫn chi tiết cách sử dụng ứng dụng với các ví dụ thực tế.

+ Xem Hướng Dẫn → +
+
+ + +
+
📚 Tài Liệu Chi Tiết
+
+

Tài liệu đầy đủ về các tính năng, cách sử dụng, và tương lai phát triển.

+ Đọc README → +
+
+ + +
+
📋 Tóm Tắt Dự Án
+
+

Tóm tắt về các file được tạo, tính năng, và cấu trúc ứng dụng.

+ Xem Tóm Tắt → +
+
+ + +
+
✅ Bảng Kiểm Tra
+
+

Kiểm tra xem tất cả tính năng có được thiết lập đúng không.

+ Xem Kiểm Tra → +
+
+ + +
+
🛠️ Công Nghệ
+
+

+ • HTML5 & CSS3
+ • Tailwind CSS
+ • JavaScript (ES6+)
+ • localStorage API
+ • Material Symbols +

+
+
+
+ + +
+

📁 Cấu Trúc File

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FileMô TảKích Thước
index.htmlFile HTML chính - Mở file này8.5 KB
app.jsLogic JavaScript chính32.8 KB
README.mdTài liệu hướng dẫn (Tiếng Việt)4.7 KB
GUIDE.htmlHướng dẫn nhanh dạng web13 KB
SUMMARY.mdTóm tắt dự án và tính năng5.2 KB
CHECK.htmlBảng kiểm tra tính năng7.5 KB
+
+ + +
+

⚠️ Lưu Ý Quan Trọng

+
+ 🔒 Bảo Mật: +
    +
  • Dữ liệu được lưu cục bộ trên trình duyệt của bạn
    • +
  • KHÔNG gửi dữ liệu đến máy chủ nào
    • +
  • Chỉ sử dụng trên máy tính được tin cậy
    • +
  • KHÔNG sử dụng cho dữ liệu nhạy cảm trong môi trường thực tế
    • +
  • Xóa cache trình duyệt sẽ mất ALL dữ liệu
    • +
+
+
+ + +
+

❓ Câu Hỏi Thường Gặp

+

Q: Tôi phải cài đặt gì không?

+

A: Không! Chỉ cần mở file index.html trên trình duyệt. Ứng dụng không cần cài đặt hoặc backend.

+ +

Q: Dữ liệu của tôi được lưu ở đâu?

+

A: Dữ liệu được lưu trong localStorage của trình duyệt. Mỗi trình duyệt/máy tính có storage riêng.

+ +

Q: Ứng dụng có hoạt động offline không?

+

A: Có! Ứng dụng hoàn toàn offline. Lệnh gọi CDN lần đầu sẽ require internet, nhưng sau đó offline vẫn được.

+ +

Q: Tôi có thể sao lưu dữ liệu không?

+

A: Hiện chưa có tính năng export/import. Bạn có thể dùng DevTools để export localStorage.

+
+ + +
+

🆘 Hỗ Trợ

+

Nếu gặp vấn đề:

+
    +
  1. Kiểm tra Console trình duyệt (F12) để xem lỗi
    2. +
  2. Xóa cache và reload trang (Ctrl+Shift+R)
    3. +
  3. Thử trình duyệt khác (Chrome, Firefox, Edge, Safari)
    4. +
  4. Đọc README.md hoặc GUIDE.html để xem thêm
    5. +
+
+ + +
+

VaultSentinel v1.0.0 | Ứng Dụng Quản Lý Tài Khoản Dịch Vụ

+

© 2026 - Tất cả quyền được bảo lưu

+

Phát triển: 26 Tháng 3, 2026

+
+
+ +