f6ba241062
- Show login modal when user is not authenticated - Add handleLogin, showLoginModal, closeLoginModal functions - Add login modal HTML with username/password form - Add CSS styles for modal Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
97 lines
3.7 KiB
HTML
97 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Claude Code</title>
|
|
<link rel="stylesheet" href="/claude/css/style.css">
|
|
<link rel="stylesheet" href="/claude/claude-ide/projects-landing.css">
|
|
</head>
|
|
<body class="sessions-page">
|
|
<!-- Navigation Header -->
|
|
<nav class="nav-header">
|
|
<div class="nav-logo">Claude Code</div>
|
|
<div class="nav-links">
|
|
<a href="/claude/" class="nav-link active">Projects</a>
|
|
<button class="nav-logout" onclick="logout()">Logout</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero-section">
|
|
<h1 class="hero-logo">Claude Code</h1>
|
|
<p class="hero-subtitle">Start coding with AI</p>
|
|
|
|
<button id="select-folder-btn" class="btn-select-folder">
|
|
<span class="icon">📁</span>
|
|
Select Folder
|
|
</button>
|
|
|
|
<p class="keyboard-hint">
|
|
Keyboard shortcut: <kbd>⌘</kbd><kbd>N</kbd>
|
|
</p>
|
|
|
|
<p class="example-hint">Browse folders or create a new project</p>
|
|
</section>
|
|
|
|
<!-- Projects Section -->
|
|
<section class="projects-section">
|
|
<div class="projects-section-header">
|
|
<h2 class="projects-section-title">Recent Projects</h2>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div id="projects-loading" class="projects-loading">
|
|
<div class="loading-spinner"></div>
|
|
<p>Loading projects...</p>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div id="projects-error" class="projects-error" style="display: none;">
|
|
<p>Failed to load projects. Please try again.</p>
|
|
<button class="btn-secondary" onclick="refreshProjects()" style="margin-top: 16px;">Retry</button>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div id="projects-empty" class="projects-empty" style="display: none;">
|
|
<div class="empty-icon">📁</div>
|
|
<h3 class="empty-title">No projects yet</h3>
|
|
<p class="empty-subtitle">Select a folder to start coding with AI</p>
|
|
</div>
|
|
|
|
<!-- Projects Grid -->
|
|
<div id="projects-grid" class="projects-grid" style="display: none;">
|
|
<!-- Project cards rendered dynamically -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Login Modal -->
|
|
<div id="login-modal" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Login to Claude Code</h2>
|
|
<button class="modal-close" onclick="closeLoginModal()">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="login-form" onsubmit="handleLogin(event)">
|
|
<div class="form-group">
|
|
<label for="login-username">Username:</label>
|
|
<input type="text" id="login-username" name="username" required autofocus>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="login-password">Password:</label>
|
|
<input type="password" id="login-password" name="password" required>
|
|
</div>
|
|
<div id="login-error" class="login-error" style="display: none;"></div>
|
|
<button type="submit" class="btn-primary">Login</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/claude/claude-ide/error-monitor.js"></script>
|
|
<script src="/claude/js/app.js"></script>
|
|
<script src="/claude/claude-ide/projects-landing.js"></script>
|
|
</body>
|
|
</html>
|