mariano/soleprint
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrated core_nest to mainroom

Browse Source
This commit is contained in:
buenosairesam
2025-12-24 06:23:31 -03:00
parent 329c401ff5
commit d62337e7ba
50 changed files with 5503 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
mainroom/sbwrapper/index.html Executable file
View File

@@ -0,0 +1,197 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pawprint 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;
}
#pawprint-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>🐾 Pawprint Wrapper</h1>
<p>Development tools sidebar for any pawprint-managed nest</p>
</div>
<div class="demo-section">
<h2>👋 Quick Start</h2>
<p>
This is a standalone demo of the Pawprint 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, nest 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;">
&lt;link rel="stylesheet" href="/wrapper/sidebar.css"&gt;<br>
&lt;script src="/wrapper/sidebar.js"&gt;&lt;/script&gt;
</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_nest/</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>