198 lines
5.7 KiB
HTML
Executable File
198 lines
5.7 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Soleprint Wrapper - Demo</title>
|
|
<link rel="stylesheet" href="sidebar.css">
|
|
<style>
|
|
/* Demo page styles */
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
#demo-content {
|
|
padding: 40px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
transition: margin-right 0.3s ease;
|
|
}
|
|
|
|
#soleprint-sidebar.expanded ~ #demo-content {
|
|
margin-right: var(--sidebar-width);
|
|
}
|
|
|
|
.demo-header {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.demo-header h1 {
|
|
font-size: 32px;
|
|
margin-bottom: 8px;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.demo-header p {
|
|
color: #666;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.demo-section {
|
|
margin-bottom: 32px;
|
|
padding: 24px;
|
|
background: #f5f5f5;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #007acc;
|
|
}
|
|
|
|
.demo-section h2 {
|
|
font-size: 20px;
|
|
margin-bottom: 16px;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.demo-section p {
|
|
color: #444;
|
|
line-height: 1.6;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.demo-section code {
|
|
background: #e0e0e0;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-size: 14px;
|
|
font-family: 'Monaco', 'Courier New', monospace;
|
|
}
|
|
|
|
.demo-section ul {
|
|
margin-left: 20px;
|
|
color: #444;
|
|
}
|
|
|
|
.demo-section li {
|
|
margin-bottom: 8px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.status-box {
|
|
padding: 16px;
|
|
background: white;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.status-box strong {
|
|
color: #007acc;
|
|
}
|
|
|
|
.kbd {
|
|
display: inline-block;
|
|
padding: 3px 8px;
|
|
background: #fff;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 0 #bbb;
|
|
font-family: 'Monaco', monospace;
|
|
font-size: 12px;
|
|
margin: 0 2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="demo-content">
|
|
<div class="demo-header">
|
|
<h1>🐾 Soleprint Wrapper</h1>
|
|
<p>Development tools sidebar for any soleprint-managed room</p>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h2>👋 Quick Start</h2>
|
|
<p>
|
|
This is a standalone demo of the Soleprint Wrapper sidebar.
|
|
Click the toggle button on the right edge of the screen, or press
|
|
<span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">P</span>
|
|
to open the sidebar.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h2>🎯 Features</h2>
|
|
<ul>
|
|
<li><strong>Quick Login:</strong> Switch between test users with one click</li>
|
|
<li><strong>Environment Info:</strong> See current backend/frontend URLs</li>
|
|
<li><strong>JWT Token Management:</strong> Automatic token storage and refresh</li>
|
|
<li><strong>Keyboard Shortcuts:</strong> Ctrl+Shift+P to toggle</li>
|
|
<li><strong>Persistent State:</strong> Sidebar remembers expanded/collapsed state</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h2>👤 Test Users</h2>
|
|
<p>Try logging in as one of these test users (from <code>config.json</code>):</p>
|
|
<ul>
|
|
<li>👑 <strong>Admin</strong> - admin@test.com / Amar2025!</li>
|
|
<li>🩺 <strong>Vet 1</strong> - vet@test.com / Amar2025!</li>
|
|
<li>🐶 <strong>Tutor 1</strong> - tutor@test.com / Amar2025!</li>
|
|
</ul>
|
|
|
|
<div class="status-box">
|
|
<strong>Note:</strong> In this demo, login will fail because there's no backend running.
|
|
When integrated with a real AMAR instance, clicking a user card will:
|
|
<ol style="margin-top: 8px; margin-left: 20px;">
|
|
<li>Call <code>POST /api/token/</code> with username/password</li>
|
|
<li>Store access & refresh tokens in localStorage</li>
|
|
<li>Reload the page with the user logged in</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h2>🔧 How It Works</h2>
|
|
<p>The sidebar is implemented as three files:</p>
|
|
<ul>
|
|
<li><code>sidebar.css</code> - Visual styling (dark theme, animations)</li>
|
|
<li><code>sidebar.js</code> - Logic (login, logout, toggle, state management)</li>
|
|
<li><code>config.json</code> - Configuration (users, URLs, room info)</li>
|
|
</ul>
|
|
<p style="margin-top: 16px;">
|
|
To integrate with your app, simply include these in your HTML:
|
|
</p>
|
|
<div style="background: #fff; padding: 12px; border-radius: 4px; margin-top: 8px;">
|
|
<code style="display: block; font-size: 13px;">
|
|
<link rel="stylesheet" href="/wrapper/sidebar.css"><br>
|
|
<script src="/wrapper/sidebar.js"></script>
|
|
</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h2>🚀 Next Steps</h2>
|
|
<p>Planned enhancements:</p>
|
|
<ul>
|
|
<li>📋 <strong>Jira Info Panel:</strong> Fetch and display ticket details from artery</li>
|
|
<li>📊 <strong>Logs Viewer:</strong> Stream container logs via WebSocket</li>
|
|
<li>🎨 <strong>Theme Switcher:</strong> Light/dark theme toggle</li>
|
|
<li>🔍 <strong>Search:</strong> Quick search across users and tools</li>
|
|
<li>⚙️ <strong>Settings:</strong> Customize sidebar behavior</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h2>📚 Documentation</h2>
|
|
<p>
|
|
See <code>WRAPPER_DESIGN.md</code> in <code>core_room/</code> for the complete
|
|
architecture design, including Docker integration patterns and alternative approaches.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load the sidebar -->
|
|
<script src="sidebar.js"></script>
|
|
|
|
</body>
|
|
</html>
|