Refactor script tags in HTML files to remove type="module" and update welcome page with authentication logic and styles
This commit is contained in:
parent
dfe7e4e4b6
commit
23c3d7a1e0
14 changed files with 909 additions and 744 deletions
454
web/app/app.html
454
web/app/app.html
|
|
@ -1,450 +1,14 @@
|
|||
<app>
|
||||
|
||||
<client-nav/>
|
||||
|
||||
<script src="https://unpkg.com/riot@10/riot+compiler.min.js"></script>
|
||||
|
||||
<!-- Load the component definition -->
|
||||
<script type="riot" src="client-nav.html"></script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// Component state
|
||||
data() {
|
||||
return {
|
||||
email: '',
|
||||
password: '',
|
||||
isLoading: false,
|
||||
error: '',
|
||||
};
|
||||
},
|
||||
riot.mount('client-nav');
|
||||
|
||||
// Configuration (ZITADEL)
|
||||
onBeforeMount() {
|
||||
// this.zitadelConfig = {
|
||||
// authority: 'https://your-zitadel-instance.com',
|
||||
// clientId: 'your-client-id',
|
||||
// redirectUri: typeof window !== 'undefined' ? window.location.origin : '',
|
||||
// scopes: ['openid', 'profile', 'email'],
|
||||
// };
|
||||
},
|
||||
|
||||
// Methods
|
||||
methods: {
|
||||
handleSocialLogin(provider) {
|
||||
this.isLoading = true;
|
||||
this.error = '';
|
||||
try {
|
||||
const authUrl = `${this.zitadelConfig.authority}/oauth/v2/authorize?` +
|
||||
`client_id=${this.zitadelConfig.clientId}&` +
|
||||
`redirect_uri=${encodeURIComponent(this.zitadelConfig.redirectUri)}&` +
|
||||
`response_type=code&` +
|
||||
`scope=${encodeURIComponent(this.zitadelConfig.scopes.join(' '))}&` +
|
||||
`provider=${provider}`;
|
||||
window.location.href = authUrl;
|
||||
} catch (err) {
|
||||
this.error = 'Failed to initiate login';
|
||||
console.error('Login error:', err);
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
handleEmailLogin(e) {
|
||||
e.preventDefault();
|
||||
this.isLoading = true;
|
||||
this.error = '';
|
||||
try {
|
||||
// Mock implementation – store dummy token
|
||||
localStorage.setItem('authToken', 'dummy-token');
|
||||
// Navigate to dashboard (adjust path as needed)
|
||||
window.location.href = '/dashboard';
|
||||
} catch (err) {
|
||||
this.error = 'Login failed. Please check your credentials.';
|
||||
console.error('Login error:', err);
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="auth-screen">
|
||||
<div class="auth-content">
|
||||
<div class="auth-left-panel">
|
||||
<div class="auth-logo">
|
||||
<h1>Welcome to General Bots Online</h1>
|
||||
</div>
|
||||
<div class="auth-quote">
|
||||
<p>"Errar é Humano."</p>
|
||||
<p>General Bots</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="auth-form-container">
|
||||
<div class="auth-form-header">
|
||||
<h2>Sign in to your account</h2>
|
||||
<p>Choose your preferred login method</p>
|
||||
</div>
|
||||
|
||||
<div class="auth-error" if={error}>{error}</div>
|
||||
|
||||
<div class="auth-social-buttons">
|
||||
<button class="auth-social-button google" @click={()=> handleSocialLogin('google')}
|
||||
disabled={isLoading}>
|
||||
<svg class="auth-social-icon" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||
fill="#4285F4" />
|
||||
<path
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
fill="#34A853" />
|
||||
<path
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
fill="#FBBC05" />
|
||||
<path
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
fill="#EA4335" />
|
||||
</svg>
|
||||
Continue with Google
|
||||
</button>
|
||||
|
||||
<button class="auth-social-button microsoft" @click={()=> handleSocialLogin('microsoft')}
|
||||
disabled={isLoading}>
|
||||
<svg class="auth-social-icon" viewBox="0 0 23 23">
|
||||
<path d="M0 0h11v11H0zM12 0h11v11H12zM0 12h11v11H0zM12 12h11v11H12z" fill="#F25022" />
|
||||
<path d="M12 0h11v11H12z" fill="#7FBA00" />
|
||||
<path d="M0 12h11v11H0z" fill="#00A4EF" />
|
||||
<path d="M12 12h11v11H12z" fill="#FFB900" />
|
||||
</svg>
|
||||
Continue with Microsoft
|
||||
</button>
|
||||
|
||||
<button class="auth-social-button facebook" @click={()=> handleSocialLogin('facebook')}
|
||||
disabled={isLoading}>
|
||||
<svg class="auth-social-icon" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"
|
||||
fill="#1877F2" />
|
||||
</svg>
|
||||
Continue with Facebook
|
||||
</button>
|
||||
|
||||
<button class="auth-social-button pragmatismo" @click={()=> handleSocialLogin('pragmatismo')}
|
||||
disabled={isLoading}>
|
||||
<svg class="auth-social-icon" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
Continue with Pragmatismo
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="auth-divider">
|
||||
<span>OR</span>
|
||||
</div>
|
||||
|
||||
<form class="auth-form" @submit={handleEmailLogin}>
|
||||
<div class="auth-form-group">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" value={email} oninput={e=> this.email = e.target.value}
|
||||
placeholder="your@email.com" required />
|
||||
</div>
|
||||
|
||||
<div class="auth-form-group">
|
||||
<label for="password">Password</label>
|
||||
<input id="password" type="password" value={password} oninput={e=> this.password = e.target.value}
|
||||
placeholder="••••••••" required />
|
||||
</div>
|
||||
|
||||
<div class="auth-form-options">
|
||||
<div class="auth-remember-me">
|
||||
<input type="checkbox" id="remember" />
|
||||
<label for="remember">Remember me</label>
|
||||
</div>
|
||||
<a href="#" class="auth-forgot-password">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="auth-submit-button" disabled={isLoading}>
|
||||
{isLoading ? 'Signing in...' : 'Sign in with Email'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="auth-signup-link">
|
||||
Don't have an account? <a href="#">Sign up</a>
|
||||
</div>
|
||||
|
||||
<p class="auth-terms">
|
||||
By continuing, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.auth-screen {
|
||||
--background: hsl(var(--background));
|
||||
--foreground: hsl(var(--foreground));
|
||||
--card: hsl(var(--card));
|
||||
--card-foreground: hsl(var(--card-foreground));
|
||||
--primary: hsl(var(--primary));
|
||||
--primary-foreground: hsl(var(--primary-foreground));
|
||||
--secondary: hsl(var(--secondary));
|
||||
--secondary-foreground: hsl(var(--secondary-foreground));
|
||||
--muted: hsl(var(--muted));
|
||||
--muted-foreground: hsl(var(--muted-foreground));
|
||||
--accent: hsl(var(--accent));
|
||||
--accent-foreground: hsl(var(--accent-foreground));
|
||||
--destructive: hsl(var(--destructive));
|
||||
--destructive-foreground: hsl(var(--destructive-foreground));
|
||||
--border: hsl(var(--border));
|
||||
--input: hsl(var(--input));
|
||||
--ring: hsl(var(--ring));
|
||||
--radius: var(--radius);
|
||||
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.auth-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
background-color: var(--card);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.auth-left-panel {
|
||||
flex: 1;
|
||||
padding: 4rem;
|
||||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||||
color: var(--primary-foreground);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.auth-logo h1 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.auth-quote {
|
||||
font-style: italic;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.auth-quote p:last-child {
|
||||
text-align: right;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.auth-form-container {
|
||||
flex: 1;
|
||||
padding: 4rem;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.auth-form-header {
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-form-header h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.auth-form-header p {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.auth-error {
|
||||
background-color: var(--destructive);
|
||||
color: var(--destructive-foreground);
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-social-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.auth-social-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-foreground);
|
||||
}
|
||||
|
||||
.auth-social-button:hover {
|
||||
background-color: var(--muted);
|
||||
}
|
||||
|
||||
.auth-social-button:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.auth-social-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.auth-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 1.5rem 0;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.auth-divider::before,
|
||||
.auth-divider::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.auth-divider span {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.auth-form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.auth-form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.auth-form-group input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--input);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.auth-form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--ring);
|
||||
box-shadow: 0 0 0 2px var(--ring);
|
||||
}
|
||||
|
||||
.auth-form-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.auth-remember-me {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.auth-remember-me input {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.auth-forgot-password {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.auth-forgot-password:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.auth-submit-button {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.auth-submit-button:hover {
|
||||
background-color: color-mix(in srgb, var(--primary), black 10%);
|
||||
}
|
||||
|
||||
.auth-submit-button:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.auth-signup-link {
|
||||
text-align: center;
|
||||
margin: 1.5rem 0;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.auth-signup-link a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.auth-signup-link a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.auth-terms {
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.auth-terms a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.auth-terms a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.auth-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.auth-left-panel {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.auth-form-container {
|
||||
padding: 2rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.auth-social-buttons {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</app>
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script type="module">
|
||||
<script >
|
||||
import { useState, useRef } from 'riot';
|
||||
import {
|
||||
Send, Plus, Menu, Search,
|
||||
|
|
|
|||
|
|
@ -1,278 +1,432 @@
|
|||
<client-nav>
|
||||
<script>
|
||||
// Import icons from Lucide (using CDN)
|
||||
import { HardDrive, Terminal, ChevronLeft, ChevronRight } from 'https://cdn.jsdelivr.net/npm/lucide@0.331.0/+esm';
|
||||
|
||||
<script type="module">
|
||||
// Import icons from Lucide (using CDN)
|
||||
import { HardDrive, Terminal, ChevronLeft, ChevronRight } from 'https://cdn.jsdelivr.net/npm/lucide@0.331.0/+esm';
|
||||
export default {
|
||||
// Component state
|
||||
data() {
|
||||
return {
|
||||
examples: [
|
||||
{ name: "Chat", href: "/chat", color: "#25D366" },
|
||||
{ name: "Paper", href: "/paper", color: "#6366F1" },
|
||||
{ name: "Mail", href: "/mail", color: "#FFD700" },
|
||||
{ name: "Calendar", href: "/calendar", color: "#1DB954" },
|
||||
{ name: "Meet", href: "/meet", color: "#059669" },
|
||||
{ name: "Drive", href: "/drive", color: "#10B981" },
|
||||
{ name: "Editor", href: "/editor", color: "#2563EB" },
|
||||
{ name: "Player", href: "/player", color: "Yellow" },
|
||||
{ name: "Tables", href: "/tables", color: "#8B5CF6" },
|
||||
{ name: "Dashboard", href: "/dashboard", color: "#6366F1" },
|
||||
{ name: "Sources", href: "/sources", color: "#F59E0B" },
|
||||
{ name: "Settings", href: "/settings", color: "#6B7280" },
|
||||
],
|
||||
pathname: window.location.pathname,
|
||||
scrollContainer: null,
|
||||
navItems: [],
|
||||
isLoggedIn: false,
|
||||
showLoginMenu: false,
|
||||
showScrollButtons: false,
|
||||
loginMenu: null,
|
||||
showThemeMenu: false,
|
||||
themeMenu: null,
|
||||
currentTime: new Date(),
|
||||
theme: { name: "default", label: "Default", icon: "🎨" },
|
||||
themes: [
|
||||
{ name: "retrowave", label: "Retrowave", icon: "🌌" },
|
||||
{ name: "vapordream", label: "Vapordream", icon: "🌀" },
|
||||
{ name: "y2kglow", label: "Y2K Glow", icon: "💿" },
|
||||
{ name: "mellowgold", label: "Mellow Gold", icon: "☮️" },
|
||||
{ name: "arcadeflash", label: "Arcade Flash", icon: "🕹️" },
|
||||
{ name: "polaroidmemories", label: "Polaroid Memories", icon: "📸" },
|
||||
{ name: "midcenturymod", label: "Mid‑Century Mod", icon: "🪑" },
|
||||
{ name: "grungeera", label: "Grunge Era", icon: "🎸" },
|
||||
{ name: "discofever", label: "Disco Fever", icon: "🪩" },
|
||||
{ name: "saturdaycartoons", label: "Saturday Cartoons", icon: "📺" },
|
||||
{ name: "oldhollywood", label: "Old Hollywood", icon: "🎬" },
|
||||
{ name: "cyberpunk", label: "Cyberpunk", icon: "🤖" },
|
||||
{ name: "seasidepostcard", label: "Seaside Postcard", icon: "🏖️" },
|
||||
{ name: "typewriter", label: "Typewriter", icon: "⌨️" },
|
||||
{ name: "jazzage", label: "Jazz Age", icon: "🎷" },
|
||||
{ name: "xtreegold", label: "X‑Tree Gold", icon: "X" },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
export default {
|
||||
// Component state
|
||||
data() {
|
||||
return {
|
||||
examples: [
|
||||
{ name: "Chat", href: "/chat", color: "#25D366" },
|
||||
{ name: "Paper", href: "/paper", color: "#6366F1" },
|
||||
{ name: "Mail", href: "/mail", color: "#FFD700" },
|
||||
{ name: "Calendar", href: "/calendar", color: "#1DB954" },
|
||||
{ name: "Meet", href: "/meet", color: "#059669" },
|
||||
{ name: "Drive", href: "/drive", color: "#10B981" },
|
||||
{ name: "Editor", href: "/editor", color: "#2563EB" },
|
||||
{ name: "Player", href: "/player", color: "Yellow" },
|
||||
{ name: "Tables", href: "/tables", color: "#8B5CF6" },
|
||||
{ name: "Dashboard", href: "/dashboard", color: "#6366F1" },
|
||||
{ name: "Sources", href: "/sources", color: "#F59E0B" },
|
||||
{ name: "Settings", href: "/settings", color: "#6B7280" },
|
||||
],
|
||||
pathname: window.location.pathname,
|
||||
scrollContainer: null,
|
||||
navItems: [],
|
||||
isLoggedIn: false,
|
||||
showLoginMenu: false,
|
||||
showScrollButtons: false,
|
||||
loginMenu: null,
|
||||
showThemeMenu: false,
|
||||
themeMenu: null,
|
||||
currentTime: new Date(),
|
||||
theme: { name: "default", label: "Default", icon: "🎨" },
|
||||
themes: [
|
||||
{ name: "retrowave", label: "Retrowave", icon: "🌌" },
|
||||
{ name: "vapordream", label: "Vapordream", icon: "🌀" },
|
||||
{ name: "y2kglow", label: "Y2K Glow", icon: "💿" },
|
||||
{ name: "mellowgold", label: "Mellow Gold", icon: "☮️" },
|
||||
{ name: "arcadeflash", label: "Arcade Flash", icon: "🕹️" },
|
||||
{ name: "polaroidmemories", label: "Polaroid Memories", icon: "📸" },
|
||||
{ name: "midcenturymod", label: "Mid‑Century Mod", icon: "🪑" },
|
||||
{ name: "grungeera", label: "Grunge Era", icon: "🎸" },
|
||||
{ name: "discofever", label: "Disco Fever", icon: "🪩" },
|
||||
{ name: "saturdaycartoons", label: "Saturday Cartoons", icon: "📺" },
|
||||
{ name: "oldhollywood", label: "Old Hollywood", icon: "🎬" },
|
||||
{ name: "cyberpunk", label: "Cyberpunk", icon: "🤖" },
|
||||
{ name: "seasidepostcard", label: "Seaside Postcard", icon: "🏖️" },
|
||||
{ name: "typewriter", label: "Typewriter", icon: "⌨️" },
|
||||
{ name: "jazzage", label: "Jazz Age", icon: "🎷" },
|
||||
{ name: "xtreegold", label: "X‑Tree Gold", icon: "X" },
|
||||
],
|
||||
};
|
||||
},
|
||||
// Lifecycle: component mounted
|
||||
mounted() {
|
||||
// References
|
||||
this.scrollContainer = this.root.querySelector('.nav-scroll');
|
||||
this.loginMenu = this.root.querySelector('.login-menu');
|
||||
this.themeMenu = this.root.querySelector('.theme-menu');
|
||||
|
||||
// Lifecycle: component mounted
|
||||
mounted() {
|
||||
// References
|
||||
this.scrollContainer = this.root.querySelector('.nav-scroll');
|
||||
this.loginMenu = this.root.querySelector('.login-menu');
|
||||
this.themeMenu = this.root.querySelector('.theme-menu');
|
||||
// Initialize nav item refs
|
||||
this.navItems = Array.from(this.root.querySelectorAll('.nav-item'));
|
||||
|
||||
// Initialize nav item refs
|
||||
this.navItems = Array.from(this.root.querySelectorAll('.nav-item'));
|
||||
// Time update interval
|
||||
this.timeInterval = setInterval(() => {
|
||||
this.currentTime = new Date();
|
||||
this.update();
|
||||
}, 1000);
|
||||
|
||||
// Time update interval
|
||||
this.timeInterval = setInterval(() => {
|
||||
this.currentTime = new Date();
|
||||
this.update();
|
||||
}, 1000);
|
||||
// Scroll button visibility
|
||||
this.checkScrollNeeded();
|
||||
|
||||
// Scroll button visibility
|
||||
this.checkScrollNeeded();
|
||||
// Resize listener
|
||||
window.addEventListener('resize', this.checkScrollNeeded);
|
||||
|
||||
// Resize listener
|
||||
window.addEventListener('resize', this.checkScrollNeeded);
|
||||
// Click‑outside handling
|
||||
document.addEventListener('mousedown', this.handleClickOutside);
|
||||
},
|
||||
|
||||
// Click‑outside handling
|
||||
document.addEventListener('mousedown', this.handleClickOutside);
|
||||
},
|
||||
// Cleanup
|
||||
unmounted() {
|
||||
clearInterval(this.timeInterval);
|
||||
window.removeEventListener('resize', this.checkScrollNeeded);
|
||||
document.removeEventListener('mousedown', this.handleClickOutside);
|
||||
},
|
||||
|
||||
// Cleanup
|
||||
unmounted() {
|
||||
clearInterval(this.timeInterval);
|
||||
window.removeEventListener('resize', this.checkScrollNeeded);
|
||||
document.removeEventListener('mousedown', this.handleClickOutside);
|
||||
},
|
||||
// Methods
|
||||
formatTime(date) {
|
||||
return date.toLocaleTimeString('en-US', {
|
||||
hour12: false,
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
});
|
||||
},
|
||||
|
||||
// Methods
|
||||
formatTime(date) {
|
||||
return date.toLocaleTimeString('en-US', {
|
||||
hour12: false,
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
});
|
||||
},
|
||||
formatDate(date) {
|
||||
return date.toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
});
|
||||
},
|
||||
|
||||
formatDate(date) {
|
||||
return date.toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
});
|
||||
},
|
||||
isActive(href) {
|
||||
if (href === '/') return this.pathname === href;
|
||||
return this.pathname.startsWith(href);
|
||||
},
|
||||
|
||||
isActive(href) {
|
||||
if (href === '/') return this.pathname === href;
|
||||
return this.pathname.startsWith(href);
|
||||
},
|
||||
|
||||
handleLogin() {
|
||||
this.isLoggedIn = true;
|
||||
this.showLoginMenu = false;
|
||||
this.update();
|
||||
},
|
||||
|
||||
handleLogout() {
|
||||
this.isLoggedIn = false;
|
||||
this.showLoginMenu = false;
|
||||
this.update();
|
||||
},
|
||||
|
||||
checkScrollNeeded() {
|
||||
if (this.scrollContainer) {
|
||||
const container = this.scrollContainer;
|
||||
const isScrollable = container.scrollWidth > container.clientWidth;
|
||||
this.showScrollButtons = isScrollable;
|
||||
this.update();
|
||||
}
|
||||
},
|
||||
|
||||
handleClickOutside(event) {
|
||||
if (this.loginMenu && !this.loginMenu.contains(event.target)) {
|
||||
handleLogin() {
|
||||
this.isLoggedIn = true;
|
||||
this.showLoginMenu = false;
|
||||
}
|
||||
if (this.themeMenu && !this.themeMenu.contains(event.target)) {
|
||||
this.showThemeMenu = false;
|
||||
}
|
||||
this.update();
|
||||
},
|
||||
|
||||
scrollLeft() {
|
||||
if (this.scrollContainer) {
|
||||
this.scrollContainer.scrollBy({ left: -150, behavior: 'smooth' });
|
||||
}
|
||||
},
|
||||
|
||||
scrollRight() {
|
||||
if (this.scrollContainer) {
|
||||
this.scrollContainer.scrollBy({ left: 150, behavior: 'smooth' });
|
||||
}
|
||||
},
|
||||
|
||||
getThemeIcon() {
|
||||
const found = this.themes.find(t => t.name === this.theme.name);
|
||||
return found ? found.icon : '🎨';
|
||||
},
|
||||
|
||||
setTheme(name) {
|
||||
const found = this.themes.find(t => t.name === name);
|
||||
if (found) {
|
||||
this.theme = found;
|
||||
this.showThemeMenu = false;
|
||||
this.update();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
navigate(href) {
|
||||
window.location.href = href;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
handleLogout() {
|
||||
this.isLoggedIn = false;
|
||||
this.showLoginMenu = false;
|
||||
this.update();
|
||||
},
|
||||
|
||||
<style>
|
||||
/* Basic styles - the original Tailwind classes are kept as comments for reference */
|
||||
.fixed { position: fixed; }
|
||||
.top-0 { top: 0; }
|
||||
.left-0 { left: 0; }
|
||||
.right-0 { right: 0; }
|
||||
.z-50 { z-index: 50; }
|
||||
.bg-gray-800 { background-color: #2d3748; }
|
||||
.text-green-400 { color: #68d391; }
|
||||
.font-mono { font-family: monospace; }
|
||||
.border-b { border-bottom: 1px solid transparent; }
|
||||
.border-green-600 { border-color: #38a169; }
|
||||
.text-xs { font-size: .75rem; }
|
||||
.flex { display: flex; }
|
||||
.items-center { align-items: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.px-4 { padding-left: 1rem; padding-right: 1rem; }
|
||||
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
|
||||
.gap-4 > * + * { margin-left: 1rem; }
|
||||
.gap-2 > * + * { margin-left: .5rem; }
|
||||
.w-3 { width: .75rem; }
|
||||
.h-3 { height: .75rem; }
|
||||
.text-green-300 { color: #9ae6b4; }
|
||||
.w-2 { width: .5rem; }
|
||||
.h-2 { height: .5rem; }
|
||||
.bg-green-500 { background-color: #48bb78; }
|
||||
.rounded-full { border-radius: 9999px; }
|
||||
.animate-pulse { animation: pulse 2s infinite; }
|
||||
.nav-container { position: relative; }
|
||||
.nav-inner { overflow: hidden; }
|
||||
.nav-content { display: flex; align-items: center; gap: .5rem; }
|
||||
.logo-container img { display: block; }
|
||||
.nav-scroll { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
|
||||
.nav-scroll::-webkit-scrollbar { display: none; }
|
||||
.nav-items { display: flex; gap: .25rem; }
|
||||
.nav-item { padding: .25rem .5rem; border: 1px solid transparent; border-radius: .25rem; cursor: pointer; transition: all .2s; }
|
||||
.nav-item.active { background-color: #2d3748; border-color: #68d391; color: #68d391; }
|
||||
.nav-item:hover { border-color: currentColor; }
|
||||
.auth-controls { display: flex; gap: .5rem; }
|
||||
.login-button, .theme-toggle { background: none; border: none; color: inherit; cursor: pointer; }
|
||||
.login-menu, .theme-menu { position: absolute; background: #1a202c; border: 1px solid #4a5568; padding: .5rem; margin-top: .25rem; border-radius: .25rem; }
|
||||
.menu-item { display: block; width: 100%; text-align: left; padding: .25rem; background: none; border: none; color: #a0aec0; cursor: pointer; }
|
||||
.menu-item:hover { background: #2d3748; }
|
||||
.active-theme { font-weight: bold; }
|
||||
</style>
|
||||
checkScrollNeeded() {
|
||||
if (this.scrollContainer) {
|
||||
const container = this.scrollContainer;
|
||||
const isScrollable = container.scrollWidth > container.clientWidth;
|
||||
this.showScrollButtons = isScrollable;
|
||||
this.update();
|
||||
}
|
||||
},
|
||||
|
||||
<!-- Markup -->
|
||||
<div class="fixed top-0 left-0 right-0 z-50 bg-gray-800 text-green-400 font-mono border-b border-green-600 text-xs">
|
||||
<div class="flex items-center justify-between px-4 py-1">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<HardDrive class="w-3 h-3 text-green-400" />
|
||||
<span class="text-green-300">RETRO NAVIGATOR v4.0</span>
|
||||
handleClickOutside(event) {
|
||||
if (this.loginMenu && !this.loginMenu.contains(event.target)) {
|
||||
this.showLoginMenu = false;
|
||||
}
|
||||
if (this.themeMenu && !this.themeMenu.contains(event.target)) {
|
||||
this.showThemeMenu = false;
|
||||
}
|
||||
this.update();
|
||||
},
|
||||
|
||||
scrollLeft() {
|
||||
if (this.scrollContainer) {
|
||||
this.scrollContainer.scrollBy({ left: -150, behavior: 'smooth' });
|
||||
}
|
||||
},
|
||||
|
||||
scrollRight() {
|
||||
if (this.scrollContainer) {
|
||||
this.scrollContainer.scrollBy({ left: 150, behavior: 'smooth' });
|
||||
}
|
||||
},
|
||||
|
||||
getThemeIcon() {
|
||||
const found = this.themes.find(t => t.name === this.theme.name);
|
||||
return found ? found.icon : '🎨';
|
||||
},
|
||||
|
||||
setTheme(name) {
|
||||
const found = this.themes.find(t => t.name === name);
|
||||
if (found) {
|
||||
this.theme = found;
|
||||
this.showThemeMenu = false;
|
||||
this.update();
|
||||
}
|
||||
},
|
||||
|
||||
navigate(href) {
|
||||
window.location.href = href;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Basic styles - the original Tailwind classes are kept as comments for reference */
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.top-0 {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.left-0 {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.z-50 {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.bg-gray-800 {
|
||||
background-color: #2d3748;
|
||||
}
|
||||
|
||||
.text-green-400 {
|
||||
color: #68d391;
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.border-b {
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.border-green-600 {
|
||||
border-color: #38a169;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.py-1 {
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
}
|
||||
|
||||
.gap-4>*+* {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.gap-2>*+* {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.w-3 {
|
||||
width: .75rem;
|
||||
}
|
||||
|
||||
.h-3 {
|
||||
height: .75rem;
|
||||
}
|
||||
|
||||
.text-green-300 {
|
||||
color: #9ae6b4;
|
||||
}
|
||||
|
||||
.w-2 {
|
||||
width: .5rem;
|
||||
}
|
||||
|
||||
.h-2 {
|
||||
height: .5rem;
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
background-color: #48bb78;
|
||||
}
|
||||
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-inner {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-scroll {
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.nav-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-items {
|
||||
display: flex;
|
||||
gap: .25rem;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: .25rem .5rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: .25rem;
|
||||
cursor: pointer;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background-color: #2d3748;
|
||||
border-color: #68d391;
|
||||
color: #68d391;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
.auth-controls {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.login-button,
|
||||
.theme-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-menu,
|
||||
.theme-menu {
|
||||
position: absolute;
|
||||
background: #1a202c;
|
||||
border: 1px solid #4a5568;
|
||||
padding: .5rem;
|
||||
margin-top: .25rem;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: .25rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #a0aec0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background: #2d3748;
|
||||
}
|
||||
|
||||
.active-theme {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Markup -->
|
||||
<div class="fixed top-0 left-0 right-0 z-50 bg-gray-800 text-green-400 font-mono border-b border-green-600 text-xs">
|
||||
<div class="flex items-center justify-between px-4 py-1">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<HardDrive class="w-3 h-3 text-green-400" />
|
||||
<span class="text-green-300">RETRO NAVIGATOR v4.0</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
||||
<span class="text-green-400">READY</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-green-300">THEME:</span>
|
||||
<span class="text-yellow-400">{theme.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
||||
<span class="text-green-400">READY</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-green-300">THEME:</span>
|
||||
<span class="text-yellow-400">{theme.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-green-300">{formatDate(currentTime)}</span>
|
||||
<span class="text-green-300">{formatTime(currentTime)}</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<Terminal class="w-3 h-3 text-green-400" />
|
||||
<span class="text-green-400">SYS</span>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-green-300">{formatDate(currentTime)}</span>
|
||||
<span class="text-green-300">{formatTime(currentTime)}</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<Terminal class="w-3 h-3 text-green-400" />
|
||||
<span class="text-green-400">SYS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-container" style="top:24px;">
|
||||
<div class="nav-inner">
|
||||
<div class="nav-content">
|
||||
<div class="logo-container">
|
||||
<img src="/images/generalbots-logo.svg" alt="Logo" width="64" height="24" />
|
||||
</div>
|
||||
<div class="nav-container" style="top:24px;">
|
||||
<div class="nav-inner">
|
||||
<div class="nav-content">
|
||||
<div class="logo-container">
|
||||
<img src="/images/generalbots-logo.svg" alt="Logo" width="64" height="24" />
|
||||
</div>
|
||||
|
||||
{#if showScrollButtons}
|
||||
<button class="w-8 h-8 bg-gray-800 border border-green-600 text-green-400 rounded hover:bg-green-900/30 hover:border-green-500 hover:text-green-300 transition-all flex items-center justify-center flex-shrink-0 mx-1"
|
||||
@click="scrollLeft" aria-label="Scroll left">
|
||||
{#if showScrollButtons}
|
||||
<button
|
||||
class="w-8 h-8 bg-gray-800 border border-green-600 text-green-400 rounded hover:bg-green-900/30 hover:border-green-500 hover:text-green-300 transition-all flex items-center justify-center flex-shrink-0 mx-1"
|
||||
@click="scrollLeft" aria-label="Scroll left">
|
||||
<ChevronLeft class="w-4 h-4" />
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<div class="nav-scroll">
|
||||
<div class="nav-items">
|
||||
{#each examples as example, index}
|
||||
<button class="nav-item {isActive(example.href) ? 'active' : ''}"
|
||||
@click="{() => navigate(example.href)}"
|
||||
style="--neon-color:{example.color}"
|
||||
@mouseenter="{(e) => {
|
||||
<div class="nav-scroll">
|
||||
<div class="nav-items">
|
||||
{#each examples as example, index}
|
||||
<button class="nav-item {isActive(example.href) ? 'active' : ''}" @click="{() => navigate(example.href)}"
|
||||
style="--neon-color:{example.color}" @mouseenter="{(e) => {
|
||||
e.target.style.boxShadow = `0 0 15px ${example.color}60`;
|
||||
e.target.style.borderColor = example.color;
|
||||
e.target.style.color = example.color;
|
||||
e.target.style.textShadow = `0 0 8px ${example.color}80`;
|
||||
}}"
|
||||
@mouseleave="{(e) => {
|
||||
}}" @mouseleave="{(e) => {
|
||||
if (!isActive(example.href)) {
|
||||
e.target.style.boxShadow = 'none';
|
||||
e.target.style.borderColor = '';
|
||||
|
|
@ -283,58 +437,57 @@
|
|||
{example.name}
|
||||
<div class="neon-glow"></div>
|
||||
</button>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if showScrollButtons}
|
||||
<button class="w-8 h-8 bg-gray-800 border border-green-600 text-green-400 rounded hover:bg-green-900/30 hover:border-green-500 hover:text-green-300 transition-all flex items-center justify-center flex-shrink-0 mx-1"
|
||||
@click="scrollRight" aria-label="Scroll right">
|
||||
{#if showScrollButtons}
|
||||
<button
|
||||
class="w-8 h-8 bg-gray-800 border border-green-600 text-green-400 rounded hover:bg-green-900/30 hover:border-green-500 hover:text-green-300 transition-all flex items-center justify-center flex-shrink-0 mx-1"
|
||||
@click="scrollRight" aria-label="Scroll right">
|
||||
<ChevronRight class="w-4 h-4" />
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<div class="auth-controls">
|
||||
<div class="login-container" bind:this="{loginMenu}">
|
||||
<button @click="{() => showLoginMenu = !showLoginMenu}"
|
||||
class="login-button"
|
||||
aria-label="{isLoggedIn ? 'User menu' : 'Login'}">
|
||||
{isLoggedIn ? '👤' : '🔐'}
|
||||
</button>
|
||||
<div class="auth-controls">
|
||||
<div class="login-container" bind:this="{loginMenu}">
|
||||
<button @click="{() => showLoginMenu = !showLoginMenu}" class="login-button"
|
||||
aria-label="{isLoggedIn ? 'User menu' : 'Login'}">
|
||||
{isLoggedIn ? '👤' : '🔐'}
|
||||
</button>
|
||||
|
||||
{#if showLoginMenu}
|
||||
{#if showLoginMenu}
|
||||
<div class="login-menu">
|
||||
{#if !isLoggedIn}
|
||||
<button @click="handleLogin" class="menu-item">Login</button>
|
||||
<button @click="handleLogin" class="menu-item">Login</button>
|
||||
{:else}
|
||||
<button @click="handleLogout" class="menu-item">Logout</button>
|
||||
<button @click="handleLogout" class="menu-item">Logout</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="theme-container" bind:this="{themeMenu}">
|
||||
<button @click="{() => showThemeMenu = !showThemeMenu}"
|
||||
class="theme-toggle"
|
||||
aria-label="Change theme">
|
||||
{getThemeIcon()}
|
||||
</button>
|
||||
<div class="theme-container" bind:this="{themeMenu}">
|
||||
<button @click="{() => showThemeMenu = !showThemeMenu}" class="theme-toggle" aria-label="Change theme">
|
||||
{getThemeIcon()}
|
||||
</button>
|
||||
|
||||
{#if showThemeMenu}
|
||||
{#if showThemeMenu}
|
||||
<div class="theme-menu">
|
||||
{#each themes as t}
|
||||
<button @click="{() => setTheme(t.name)}"
|
||||
class="theme-menu-item {theme.name === t.name ? 'active-theme' : ''}">
|
||||
{t.label}
|
||||
</button>
|
||||
<button @click="{() => setTheme(t.name)}"
|
||||
class="theme-menu-item {theme.name === t.name ? 'active-theme' : ''}">
|
||||
{t.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-spacer" style="height:88px;"></div>
|
||||
</div>
|
||||
<div class="nav-spacer" style="height:88px;"></div>
|
||||
</div>
|
||||
</client-nav>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script type="module">
|
||||
<script >
|
||||
import { useState } from 'riot';
|
||||
import './style.css';
|
||||
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script type="module">
|
||||
<script >
|
||||
import { useState, useEffect } from 'riot';
|
||||
import {
|
||||
Search, Download, Trash2, Share, Star,
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script type="module">
|
||||
<script >
|
||||
<!-- Removed unused Riot imports -->
|
||||
import { useEditor, EditorContent, BubbleMenu, AnyExtension } from '@tiptap/react';
|
||||
import StarterKit from '@tiptap/starter-kit';
|
||||
|
|
|
|||
|
|
@ -6,19 +6,16 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<link rel="stylesheet" href="public/output.css" />
|
||||
<link rel="stylesheet" href="client-nav.css" />
|
||||
<app></app>
|
||||
<script src="app.html" type="riot"></script>
|
||||
|
||||
<script src="https://unpkg.com/riot@10/riot+compiler.min.js"></script>
|
||||
<script>
|
||||
riot.compile().then(() => {
|
||||
riot.mount('app', {
|
||||
title: 'General Bots',
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<script src="app.html" type="riot"></script>
|
||||
|
||||
<script>
|
||||
riot.compile().then(() => {
|
||||
riot.mount('app');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script type="module">
|
||||
<script >
|
||||
import './style.css';
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script type="module">
|
||||
<script >
|
||||
import { useState, useRef, useEffect } from 'riot';
|
||||
import { useEditor, EditorContent, BubbleMenu, AnyExtension } from '@tiptap/react';
|
||||
import StarterKit from '@tiptap/starter-kit';
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script type="module">
|
||||
<script >
|
||||
import './style.css';
|
||||
import './components/sidebar-nav.html';
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script type="module">
|
||||
<script >
|
||||
import './profile-form.html';
|
||||
import './style.css';
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script type="module">
|
||||
<script >
|
||||
import { useState } from 'riot';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!-- Riot component: theme-provider.html (converted from app/theme-provider.tsx) -->
|
||||
<script type="module">
|
||||
<script >
|
||||
// This component replicates the ThemeProvider logic without React.
|
||||
// It manages theme selection and persists the choice in localStorage.
|
||||
export default {
|
||||
|
|
|
|||
451
web/app/welcome.html
Normal file
451
web/app/welcome.html
Normal file
|
|
@ -0,0 +1,451 @@
|
|||
<welcome>
|
||||
<script>
|
||||
export default {
|
||||
// Component state
|
||||
data() {
|
||||
return {
|
||||
email: '',
|
||||
password: '',
|
||||
isLoading: false,
|
||||
error: '',
|
||||
};
|
||||
},
|
||||
|
||||
// Configuration (ZITADEL)
|
||||
onBeforeMount() {
|
||||
// this.zitadelConfig = {
|
||||
// authority: 'https://your-zitadel-instance.com',
|
||||
// clientId: 'your-client-id',
|
||||
// redirectUri: typeof window !== 'undefined' ? window.location.origin : '',
|
||||
// scopes: ['openid', 'profile', 'email'],
|
||||
// };
|
||||
},
|
||||
|
||||
// Methods
|
||||
methods: {
|
||||
handleSocialLogin(provider) {
|
||||
this.isLoading = true;
|
||||
this.error = '';
|
||||
try {
|
||||
const authUrl = `${this.zitadelConfig.authority}/oauth/v2/authorize?` +
|
||||
`client_id=${this.zitadelConfig.clientId}&` +
|
||||
`redirect_uri=${encodeURIComponent(this.zitadelConfig.redirectUri)}&` +
|
||||
`response_type=code&` +
|
||||
`scope=${encodeURIComponent(this.zitadelConfig.scopes.join(' '))}&` +
|
||||
`provider=${provider}`;
|
||||
window.location.href = authUrl;
|
||||
} catch (err) {
|
||||
this.error = 'Failed to initiate login';
|
||||
console.error('Login error:', err);
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
handleEmailLogin(e) {
|
||||
e.preventDefault();
|
||||
this.isLoading = true;
|
||||
this.error = '';
|
||||
try {
|
||||
// Mock implementation – store dummy token
|
||||
localStorage.setItem('authToken', 'dummy-token');
|
||||
// Navigate to dashboard (adjust path as needed)
|
||||
window.location.href = '/dashboard';
|
||||
} catch (err) {
|
||||
this.error = 'Login failed. Please check your credentials.';
|
||||
console.error('Login error:', err);
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="auth-screen">
|
||||
<div class="auth-content">
|
||||
<div class="auth-left-panel">
|
||||
<div class="auth-logo">
|
||||
<h1>Welcome to General Bots Online</h1>
|
||||
</div>
|
||||
<div class="auth-quote">
|
||||
<p>"Errar é Humano."</p>
|
||||
<p>General Bots</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="auth-form-container">
|
||||
<div class="auth-form-header">
|
||||
<h2>Sign in to your account</h2>
|
||||
<p>Choose your preferred login method</p>
|
||||
</div>
|
||||
|
||||
<div class="auth-error" if={error}>{error}</div>
|
||||
|
||||
<div class="auth-social-buttons">
|
||||
<button class="auth-social-button google" @click={()=> handleSocialLogin('google')}
|
||||
disabled={isLoading}>
|
||||
<svg class="auth-social-icon" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||
fill="#4285F4" />
|
||||
<path
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
fill="#34A853" />
|
||||
<path
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
fill="#FBBC05" />
|
||||
<path
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
fill="#EA4335" />
|
||||
</svg>
|
||||
Continue with Google
|
||||
</button>
|
||||
|
||||
<button class="auth-social-button microsoft" @click={()=> handleSocialLogin('microsoft')}
|
||||
disabled={isLoading}>
|
||||
<svg class="auth-social-icon" viewBox="0 0 23 23">
|
||||
<path d="M0 0h11v11H0zM12 0h11v11H12zM0 12h11v11H0zM12 12h11v11H12z" fill="#F25022" />
|
||||
<path d="M12 0h11v11H12z" fill="#7FBA00" />
|
||||
<path d="M0 12h11v11H0z" fill="#00A4EF" />
|
||||
<path d="M12 12h11v11H12z" fill="#FFB900" />
|
||||
</svg>
|
||||
Continue with Microsoft
|
||||
</button>
|
||||
|
||||
<button class="auth-social-button facebook" @click={()=> handleSocialLogin('facebook')}
|
||||
disabled={isLoading}>
|
||||
<svg class="auth-social-icon" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"
|
||||
fill="#1877F2" />
|
||||
</svg>
|
||||
Continue with Facebook
|
||||
</button>
|
||||
|
||||
<button class="auth-social-button pragmatismo" @click={()=> handleSocialLogin('pragmatismo')}
|
||||
disabled={isLoading}>
|
||||
<svg class="auth-social-icon" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
Continue with Pragmatismo
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="auth-divider">
|
||||
<span>OR</span>
|
||||
</div>
|
||||
|
||||
<form class="auth-form" @submit={handleEmailLogin}>
|
||||
<div class="auth-form-group">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" value={email} oninput={e=> this.email = e.target.value}
|
||||
placeholder="your@email.com" required />
|
||||
</div>
|
||||
|
||||
<div class="auth-form-group">
|
||||
<label for="password">Password</label>
|
||||
<input id="password" type="password" value={password} oninput={e=> this.password = e.target.value}
|
||||
placeholder="••••••••" required />
|
||||
</div>
|
||||
|
||||
<div class="auth-form-options">
|
||||
<div class="auth-remember-me">
|
||||
<input type="checkbox" id="remember" />
|
||||
<label for="remember">Remember me</label>
|
||||
</div>
|
||||
<a href="#" class="auth-forgot-password">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="auth-submit-button" disabled={isLoading}>
|
||||
{isLoading ? 'Signing in...' : 'Sign in with Email'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="auth-signup-link">
|
||||
Don't have an account? <a href="#">Sign up</a>
|
||||
</div>
|
||||
|
||||
<p class="auth-terms">
|
||||
By continuing, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.auth-screen {
|
||||
--background: hsl(var(--background));
|
||||
--foreground: hsl(var(--foreground));
|
||||
--card: hsl(var(--card));
|
||||
--card-foreground: hsl(var(--card-foreground));
|
||||
--primary: hsl(var(--primary));
|
||||
--primary-foreground: hsl(var(--primary-foreground));
|
||||
--secondary: hsl(var(--secondary));
|
||||
--secondary-foreground: hsl(var(--secondary-foreground));
|
||||
--muted: hsl(var(--muted));
|
||||
--muted-foreground: hsl(var(--muted-foreground));
|
||||
--accent: hsl(var(--accent));
|
||||
--accent-foreground: hsl(var(--accent-foreground));
|
||||
--destructive: hsl(var(--destructive));
|
||||
--destructive-foreground: hsl(var(--destructive-foreground));
|
||||
--border: hsl(var(--border));
|
||||
--input: hsl(var(--input));
|
||||
--ring: hsl(var(--ring));
|
||||
--radius: var(--radius);
|
||||
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.auth-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
background-color: var(--card);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.auth-left-panel {
|
||||
flex: 1;
|
||||
padding: 4rem;
|
||||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||||
color: var(--primary-foreground);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.auth-logo h1 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.auth-quote {
|
||||
font-style: italic;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.auth-quote p:last-child {
|
||||
text-align: right;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.auth-form-container {
|
||||
flex: 1;
|
||||
padding: 4rem;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.auth-form-header {
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-form-header h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.auth-form-header p {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.auth-error {
|
||||
background-color: var(--destructive);
|
||||
color: var(--destructive-foreground);
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-social-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.auth-social-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-foreground);
|
||||
}
|
||||
|
||||
.auth-social-button:hover {
|
||||
background-color: var(--muted);
|
||||
}
|
||||
|
||||
.auth-social-button:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.auth-social-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.auth-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 1.5rem 0;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.auth-divider::before,
|
||||
.auth-divider::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.auth-divider span {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.auth-form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.auth-form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.auth-form-group input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--input);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.auth-form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--ring);
|
||||
box-shadow: 0 0 0 2px var(--ring);
|
||||
}
|
||||
|
||||
.auth-form-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.auth-remember-me {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.auth-remember-me input {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.auth-forgot-password {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.auth-forgot-password:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.auth-submit-button {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.auth-submit-button:hover {
|
||||
background-color: color-mix(in srgb, var(--primary), black 10%);
|
||||
}
|
||||
|
||||
.auth-submit-button:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.auth-signup-link {
|
||||
text-align: center;
|
||||
margin: 1.5rem 0;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.auth-signup-link a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.auth-signup-link a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.auth-terms {
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.auth-terms a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.auth-terms a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.auth-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.auth-left-panel {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.auth-form-container {
|
||||
padding: 2rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.auth-social-buttons {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</div>
|
||||
</welcome>
|
||||
Loading…
Add table
Reference in a new issue