182 lines
7.7 KiB
HTML
182 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="FluentGerman.ai — Admin Dashboard">
|
|
<title>FluentGerman.ai — Admin</title>
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Navbar -->
|
|
<nav class="navbar">
|
|
<div class="logo">FluentGerman.ai</div>
|
|
<div class="navbar-right">
|
|
<span class="navbar-user" id="admin-name"></span>
|
|
<button class="btn btn-sm btn-secondary" id="logout-btn">Logout</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container" style="padding-top: 24px; padding-bottom: 48px;">
|
|
<!-- Tabs -->
|
|
<div class="tabs">
|
|
<button class="tab active" data-panel="users-panel">Clients</button>
|
|
<button class="tab" data-panel="instructions-panel">Instructions</button>
|
|
<button class="tab" data-panel="voice-panel">Voice → Instruction</button>
|
|
</div>
|
|
|
|
<!-- Users Panel -->
|
|
<div id="users-panel" class="tab-panel">
|
|
<div class="flex-between mb-16">
|
|
<h2>Client Management</h2>
|
|
<button class="btn btn-primary btn-sm" onclick="showUserModal()">+ Add Client</button>
|
|
</div>
|
|
<div class="card" style="padding: 0; overflow: hidden;">
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Username</th>
|
|
<th class="hide-mobile">Email</th>
|
|
<th>Status</th>
|
|
<th class="hide-mobile">Created</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="users-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Instructions Panel -->
|
|
<div id="instructions-panel" class="tab-panel hidden">
|
|
<div class="flex-between mb-16">
|
|
<h2>Instructions</h2>
|
|
<div class="flex gap-8">
|
|
<button class="btn btn-secondary btn-sm" onclick="uploadInstructionFile()">📁 Upload File</button>
|
|
<button class="btn btn-primary btn-sm" onclick="showInstructionModal()">+ Add</button>
|
|
</div>
|
|
</div>
|
|
<div class="card" style="padding: 0; overflow: hidden;">
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Type</th>
|
|
<th class="hide-mobile">Client</th>
|
|
<th class="hide-mobile">Preview</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="instructions-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Voice Instruction Panel -->
|
|
<div id="voice-panel" class="tab-panel hidden">
|
|
<h2 class="mb-16">Voice → Instruction Generator</h2>
|
|
<p class="text-muted text-sm mb-16">Record your teaching instructions or method using voice, and let AI
|
|
structure them into a reusable prompt instruction.</p>
|
|
|
|
<div class="card">
|
|
<div class="form-group">
|
|
<label>1. Record or type your raw instruction</label>
|
|
<div class="flex gap-8 mb-8">
|
|
<button class="btn btn-secondary" id="voice-record-btn" onclick="toggleVoiceRecord()">🎤 Start
|
|
Recording</button>
|
|
</div>
|
|
<textarea id="voice-raw-text" rows="6"
|
|
placeholder="Your raw instruction text will appear here after recording, or type directly..."></textarea>
|
|
</div>
|
|
|
|
<button class="btn btn-primary" id="voice-gen-btn" onclick="generateInstruction()">✨ Generate
|
|
Instruction</button>
|
|
|
|
<div id="voice-gen-output" class="hidden mt-24">
|
|
<div class="form-group">
|
|
<label>2. Review generated instruction</label>
|
|
<textarea id="voice-gen-text" rows="8"
|
|
placeholder="Generated instruction will appear here..."></textarea>
|
|
</div>
|
|
<div class="flex gap-8">
|
|
<button class="btn btn-primary" onclick="saveGeneratedInstruction()">💾 Save as
|
|
Instruction</button>
|
|
<button class="btn btn-secondary" onclick="generateInstruction()">🔄 Regenerate</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Modal -->
|
|
<div id="user-modal" class="modal-overlay hidden">
|
|
<div class="modal">
|
|
<h2 id="user-modal-title">Add Client</h2>
|
|
<form id="user-form">
|
|
<div class="form-group">
|
|
<label for="user-username">Username</label>
|
|
<input type="text" id="user-username" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="user-email">Email</label>
|
|
<input type="email" id="user-email" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="user-password">Password</label>
|
|
<input type="password" id="user-password" required>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="closeUserModal()">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Instruction Modal -->
|
|
<div id="instruction-modal" class="modal-overlay hidden">
|
|
<div class="modal">
|
|
<h2 id="instr-modal-title">Add Instruction</h2>
|
|
<form id="instruction-form">
|
|
<div class="form-group">
|
|
<label for="instr-user">Client</label>
|
|
<select id="instr-user">
|
|
<option value="">Global (all clients)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="instr-title">Title</label>
|
|
<input type="text" id="instr-title" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="instr-type">Type</label>
|
|
<select id="instr-type">
|
|
<option value="global">Global Method</option>
|
|
<option value="personal">Personal Instruction</option>
|
|
<option value="homework">Homework</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="instr-content">Content</label>
|
|
<textarea id="instr-content" rows="8" required></textarea>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="closeInstructionModal()">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/api.js"></script>
|
|
<script src="/js/voice.js"></script>
|
|
<script src="/js/admin.js"></script>
|
|
</body>
|
|
|
|
</html> |