Spaces:
Paused
Paused
| <html> | |
| <head> | |
| <script type="module"> | |
| import { store } from "/components/welcome/welcome-store.js"; | |
| </script> | |
| </head> | |
| <body> | |
| <div x-data x-show="$store.welcomeStore && $store.welcomeStore.isVisible"> | |
| <template x-if="$store.welcomeStore"> | |
| <div x-data="$store.welcomeStore" class="welcome-container"> | |
| <!-- The Workshop Logo --> | |
| <div class="welcome-logo-container"> | |
| <div class="workshop-logo"> | |
| <div class="workshop-emblem">⚙</div> | |
| </div> | |
| </div> | |
| <!-- Welcome Title --> | |
| <h1 class="welcome-title">Welcome to The Workshop</h1> | |
| <p class="welcome-subtitle"> | |
| GrizzlyMedicine R&D - Where Digital Persons Are Forged | |
| </p> | |
| <!-- Action Cards --> | |
| <div class="welcome-actions"> | |
| <div class="welcome-action-card" @click="executeAction('new-chat')"> | |
| <span class="material-symbols-outlined welcome-action-icon">add_circle</span> | |
| <h3 class="welcome-action-title">New Chat</h3> | |
| <p class="welcome-action-description"> | |
| Start a new conversation | |
| </p> | |
| </div> | |
| <div class="welcome-action-card" @click="executeAction('projects')"> | |
| <span class="material-symbols-outlined welcome-action-icon">folder</span> | |
| <h3 class="welcome-action-title">Projects</h3> | |
| <p class="welcome-action-description"> | |
| Manage your projects | |
| </p> | |
| </div> | |
| <div class="welcome-action-card" @click="executeAction('memory')"> | |
| <span class="material-symbols-outlined welcome-action-icon">memory</span> | |
| <h3 class="welcome-action-title">Memory</h3> | |
| <p class="welcome-action-description"> | |
| Open Memory Dashboard | |
| </p> | |
| </div> | |
| <div class="welcome-action-card" @click="executeAction('settings')"> | |
| <span class="material-symbols-outlined welcome-action-icon">settings</span> | |
| <h3 class="welcome-action-title">Settings</h3> | |
| <p class="welcome-action-description"> | |
| Configure this digital person | |
| </p> | |
| </div> | |
| <div class="welcome-action-card" @click="executeAction('website')"> | |
| <span class="material-symbols-outlined welcome-action-icon">language</span> | |
| <h3 class="welcome-action-title">Learn More</h3> | |
| <p class="welcome-action-description"> | |
| About The Workshop | |
| </p> | |
| </div> | |
| <div class="welcome-action-card" @click="executeAction('github')"> | |
| <span class="material-symbols-outlined welcome-action-icon">code</span> | |
| <h3 class="welcome-action-title">Source Code</h3> | |
| <p class="welcome-action-description"> | |
| View on GitHub | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| </div> | |
| <style> | |
| /* The Workshop Welcome Screen - Industrial Warehouse Aesthetic */ | |
| .welcome-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 3%; | |
| text-align: center; | |
| background: linear-gradient(135deg, #0f1419 0%, #1a1f26 100%); | |
| color: var(--color-text); | |
| min-height: 100vh; | |
| position: relative; | |
| } | |
| /* Industrial texture overlay */ | |
| .welcome-container::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-image: | |
| repeating-linear-gradient( | |
| 90deg, | |
| rgba(16, 185, 129, 0.03) 0px, | |
| transparent 1px, | |
| transparent 40px, | |
| rgba(16, 185, 129, 0.03) 41px | |
| ), | |
| repeating-linear-gradient( | |
| 0deg, | |
| rgba(16, 185, 129, 0.03) 0px, | |
| transparent 1px, | |
| transparent 40px, | |
| rgba(16, 185, 129, 0.03) 41px | |
| ); | |
| pointer-events: none; | |
| opacity: 0.4; | |
| } | |
| /* Workshop logo styles */ | |
| .welcome-logo-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .workshop-logo { | |
| width: 8rem; | |
| height: 8rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(135deg, #1f2937 0%, #111827 100%); | |
| border: 3px solid #10b981; | |
| border-radius: 12px; | |
| box-shadow: | |
| 0 0 20px rgba(16, 185, 129, 0.3), | |
| inset 0 2px 8px rgba(0, 0, 0, 0.5); | |
| position: relative; | |
| } | |
| .workshop-emblem { | |
| font-size: 4rem; | |
| color: #10b981; | |
| text-shadow: 0 0 20px rgba(16, 185, 129, 0.8); | |
| animation: gearPulse 3s ease-in-out infinite; | |
| } | |
| @keyframes gearPulse { | |
| 0%, 100% { transform: scale(1); opacity: 0.9; } | |
| 50% { transform: scale(1.05); opacity: 1; } | |
| } | |
| .welcome-title { | |
| font-size: 2.2rem; | |
| font-weight: 600; | |
| margin: 1.5rem 0 0.5rem 0; | |
| color: #10b981; | |
| text-shadow: 0 0 10px rgba(16, 185, 129, 0.5); | |
| letter-spacing: 0.05em; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .welcome-action-title { | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| color: var(--color-text); | |
| } | |
| .welcome-subtitle { | |
| font-size: 1rem; | |
| margin-bottom: 2.5rem; | |
| color: #9ca3af; | |
| max-width: 600px; | |
| line-height: 1.6; | |
| letter-spacing: 0.02em; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .welcome-actions { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1.2rem; | |
| max-width: 520px; | |
| width: 100%; | |
| margin: 1.5rem 0; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .welcome-action-card { | |
| background: linear-gradient(135deg, #1f2937 0%, #111827 100%); | |
| border: 2px solid #374151; | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| text-decoration: none; | |
| color: inherit; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| min-height: 10rem; | |
| justify-content: center; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); | |
| } | |
| .welcome-action-card:hover { | |
| border-color: #10b981; | |
| background: linear-gradient(135deg, #1a1f26 0%, #0f1419 100%); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.4), | |
| 0 0 20px rgba(16, 185, 129, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| .welcome-action-icon { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| color: #10b981; | |
| text-shadow: 0 0 10px rgba(16, 185, 129, 0.5); | |
| } | |
| .welcome-action-description { | |
| font-size: 0.8rem; | |
| color: #9ca3af; | |
| line-height: 1.4; | |
| } | |
| /* Light mode adjustments for Workshop theme */ | |
| .light-mode .welcome-container { | |
| background: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 100%); | |
| } | |
| .light-mode .welcome-title { | |
| color: #059669; | |
| text-shadow: none; | |
| } | |
| .light-mode .welcome-subtitle { | |
| color: #4b5563; | |
| } | |
| .light-mode .workshop-logo { | |
| background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); | |
| border-color: #059669; | |
| box-shadow: | |
| 0 0 15px rgba(5, 150, 105, 0.2), | |
| inset 0 2px 8px rgba(0, 0, 0, 0.1); | |
| } | |
| .light-mode .workshop-emblem { | |
| color: #059669; | |
| text-shadow: 0 0 15px rgba(5, 150, 105, 0.4); | |
| } | |
| .light-mode .welcome-action-card { | |
| background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); | |
| border-color: #d1d5db; | |
| } | |
| .light-mode .welcome-action-card:hover { | |
| border-color: #059669; | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.1), | |
| 0 0 15px rgba(5, 150, 105, 0.15); | |
| } | |
| .light-mode .welcome-action-icon { | |
| color: #059669; | |
| text-shadow: none; | |
| } | |
| .light-mode .welcome-action-title { | |
| color: #1f2937; | |
| } | |
| .light-mode .welcome-action-description { | |
| color: #6b7280; | |
| } | |
| /* Responsive design */ | |
| @media (max-width: 768px) { | |
| .welcome-container { | |
| padding: 1rem; | |
| padding-top: 3rem; | |
| } | |
| .workshop-logo { | |
| width: 6rem; | |
| height: 6rem; | |
| } | |
| .workshop-emblem { | |
| font-size: 3rem; | |
| } | |
| .welcome-logo-container { | |
| margin-top: 2rem; | |
| } | |
| .welcome-title { | |
| font-size: 1.6rem; | |
| margin: 1rem 0 0.5rem 0; | |
| } | |
| .welcome-subtitle { | |
| font-size: 0.95rem; | |
| margin-top: var(--spacing-xs); | |
| margin-bottom: 1.5rem; | |
| } | |
| .welcome-actions { | |
| grid-template-columns: 1fr; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .welcome-action-card { | |
| padding: 1.5rem; | |
| min-height: 120px; | |
| } | |
| .welcome-action-icon { | |
| font-size: 2rem; | |
| } | |
| .welcome-action-title { | |
| font-size: 1.1rem; | |
| } | |
| } | |
| </style> | |
| </body> | |
| </html> |