ManagerAccount/docs

Robot Account Manager - Project Structure

Directory Organization

AccManager/
├── pages/                      # HTML pages
│   ├── login.html             # Login page (entry point)
│   ├── index.html             # Dashboard
│   ├── accounts.html          # Accounts management
│   └── applications.html      # Applications management
├── js/                        # JavaScript files
│   └── app.js                 # Main application logic
├── docs/                      # Documentation
│   └── README.md             # This file
├── index.html                 # Root redirect to pages/login.html
├── .git/                      # Version control
├── .vscode/                   # VS Code settings
└── README.md                  # Project root README

Quick Start

1. Access the application:

   • Open index.html in a browser
   • You will be automatically redirected to pages/login.html

2. Login Credentials (Demo):

   • Username: admin
   • Password: admin

3. Features:

   • Dashboard: Overview of accounts and applications
   • Accounts: Manage user accounts for various services
   • Applications: Manage connected applications/services

File Structure Explanation

/pages/

Contains all HTML pages with updated relative paths for script imports:

• login.html - Authentication page
• index.html - Main dashboard
• accounts.html - Accounts management interface
• applications.html - Applications management interface

All pages reference scripts using ../js/app.js for correct path resolution.

/js/

Application logic and state management:

• app.js - Main AccountManager class with all functionality

/docs/

Documentation files for reference and development.

Application Architecture

AccountManager Class (app.js)

• Storage: Uses localStorage for data persistence
• Pages: Dynamically renders content based on user navigation
• Authentication: Checks for valid session on page load
• Modals: Manages adding/editing accounts and applications

Data Storage

Application stores data in browser's localStorage:

• currentUser - Logged-in user information
• accounts - List of managed accounts
• applications - List of managed applications
• rememberedUsername - Optional saved username

Development Notes

• Framework: Tailwind CSS for styling
• Icons: Material Design symbols
• Storage: Browser localStorage (client-side only)
• Responsive: Built with mobile-first approach
• Modern: ES6+ JavaScript features

Navigation Flow

index.html (root)
    ↓
pages/login.html
    ↓ (after login)
pages/index.html (dashboard)
    ├→ pages/accounts.html
    └→ pages/applications.html

Features

Authentication

• Username/password login
• Session management
• Remember me functionality
• Logout with confirmation

Dashboard

• Overview statistics
• Recent account activity
• Quick access to management pages

Account Management

• Add new accounts
• Edit existing accounts
• Delete accounts
• Filter by service
• View account details

Application Management

• Add new applications
• Edit application details
• Delete applications
• View application status (online/offline)
• Health monitoring

Browser Compatibility

• Modern browsers (Chrome, Firefox, Safari, Edge)
• Requires JavaScript enabled
• Uses localStorage API

Future Improvements

• Server-side authentication
• Database integration
• Advanced filtering and search
• User roles and permissions
• Audit logging
• Dark mode toggle persistence

---

Generated: March 27, 2026 Version: 1.0.0