first stab at a product page
This commit is contained in:
Ramon Perez
parent
101b4d700f
commit
077707b0a3
306
website/PRODUCTS_PAGE_README.MD
Normal file
306
website/PRODUCTS_PAGE_README.MD
Normal file
@ -0,0 +1,306 @@
|
|||||||
|
# Jan Products Page - Retro-Tech Design System
|
||||||
|
|
||||||
|
A futuristic products showcase page that combines the nostalgic aesthetics of RadioShack's electronic components with PostHog's modern data visualization approach. This creates a unique "retro-tech" visual language that feels both familiar and cutting-edge.
|
||||||
|
|
||||||
|
## Design Philosophy
|
||||||
|
|
||||||
|
### RadioShack + PostHog = Retro-Tech
|
||||||
|
- **RadioShack Heritage**: Circuit board patterns, electronic components, terminal interfaces, amber/green CRT colors
|
||||||
|
- **PostHog Influence**: Clean data cards, status indicators, system metrics, dashboard layouts
|
||||||
|
- **Result**: A cohesive aesthetic that makes AI products feel like sophisticated electronic equipment
|
||||||
|
|
||||||
|
### Color Palette
|
||||||
|
```css
|
||||||
|
--retro-green: #00ff41 /* Matrix green, primary brand */
|
||||||
|
--retro-amber: #ffb000 /* Classic terminal amber */
|
||||||
|
--retro-blue: #00bfff /* Processing/loading states */
|
||||||
|
--retro-red: #ff0040 /* Error/warning states */
|
||||||
|
--retro-cyan: #00ffff /* Accent highlights */
|
||||||
|
--retro-magenta: #ff00ff /* Special effects */
|
||||||
|
```
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
### File Structure
|
||||||
|
```
|
||||||
|
jan/website/src/
|
||||||
|
├── pages/
|
||||||
|
│ └── prods.astro # Main products page
|
||||||
|
├── components/
|
||||||
|
│ ├── CircuitBackground.astro # Animated circuit patterns
|
||||||
|
│ ├── StatusIndicator.astro # System status components
|
||||||
|
│ ├── RetroCard.astro # Terminal-style cards
|
||||||
|
│ └── FloatingNav.astro # Floating navigation menu
|
||||||
|
├── layouts/
|
||||||
|
│ └── Layout.astro # Base layout with GSAP
|
||||||
|
└── styles/
|
||||||
|
└── retro-effects.css # Advanced visual effects
|
||||||
|
```
|
||||||
|
|
||||||
|
### Component Hierarchy
|
||||||
|
```
|
||||||
|
Layout
|
||||||
|
└── Products Page
|
||||||
|
├── FloatingNav (right-side navigation)
|
||||||
|
├── Hero Section
|
||||||
|
│ └── CircuitBackground (animated)
|
||||||
|
├── Table of Contents
|
||||||
|
├── Models Section
|
||||||
|
│ └── RetroCard (circuit variant)
|
||||||
|
├── Platforms Section
|
||||||
|
│ └── RetroCard (data/system variants)
|
||||||
|
├── Tools Section
|
||||||
|
│ └── RetroCard (terminal variant)
|
||||||
|
└── Integration Section
|
||||||
|
```
|
||||||
|
|
||||||
|
## Components Deep Dive
|
||||||
|
|
||||||
|
### CircuitBackground.astro
|
||||||
|
Creates animated circuit board patterns with electronic components.
|
||||||
|
|
||||||
|
**Props:**
|
||||||
|
- `variant`: 'subtle' | 'prominent' | 'animated'
|
||||||
|
- `color`: 'green' | 'amber' | 'blue' | 'multi'
|
||||||
|
- `density`: 'low' | 'medium' | 'high'
|
||||||
|
- `animated`: boolean
|
||||||
|
- `opacity`: number (0-1)
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
- Procedural circuit patterns
|
||||||
|
- Animated electronic components (LEDs, resistors, capacitors)
|
||||||
|
- Flowing data lines
|
||||||
|
- Responsive grid scaling
|
||||||
|
|
||||||
|
### StatusIndicator.astro
|
||||||
|
Terminal-style system status indicators with pulsing animations.
|
||||||
|
|
||||||
|
**Props:**
|
||||||
|
- `status`: 'active' | 'warning' | 'success' | 'error' | 'idle'
|
||||||
|
- `label`: string
|
||||||
|
- `pulse`: boolean
|
||||||
|
- `size`: 'small' | 'medium' | 'large'
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
- Animated status dots with glow effects
|
||||||
|
- Color-coded status states
|
||||||
|
- Accessibility compliant
|
||||||
|
- Reduced motion support
|
||||||
|
|
||||||
|
### RetroCard.astro
|
||||||
|
Terminal-inspired cards with scanlines, CRT effects, and interactive animations.
|
||||||
|
|
||||||
|
**Props:**
|
||||||
|
- `variant`: 'terminal' | 'circuit' | 'data' | 'system'
|
||||||
|
- `color`: 'green' | 'amber' | 'blue' | 'red' | 'multi'
|
||||||
|
- `size`: 'small' | 'medium' | 'large'
|
||||||
|
- `glitch`: boolean
|
||||||
|
- `scanlines`: boolean
|
||||||
|
- `glow`: boolean
|
||||||
|
- `interactive`: boolean
|
||||||
|
- `status`: 'online' | 'offline' | 'error' | 'warning' | 'processing'
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
- CRT monitor bezels with power indicators
|
||||||
|
- Animated scanlines and glitch effects
|
||||||
|
- Terminal-style headers with traffic light controls
|
||||||
|
- Interactive hover states with 3D transforms
|
||||||
|
- Corner brackets for retro-futuristic framing
|
||||||
|
|
||||||
|
### FloatingNav.astro
|
||||||
|
Floating navigation with terminal interface and system monitoring.
|
||||||
|
|
||||||
|
**Props:**
|
||||||
|
- `sections`: Array of navigation items with icons and status
|
||||||
|
- `position`: 'left' | 'right'
|
||||||
|
- `theme`: 'dark' | 'matrix' | 'circuit'
|
||||||
|
- `compact`: boolean
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
- Terminal-style command prompt
|
||||||
|
- Real-time system status indicators
|
||||||
|
- Animated progress bars
|
||||||
|
- Circuit connection lines
|
||||||
|
- Smooth scrolling with GSAP integration
|
||||||
|
|
||||||
|
## Animations & Effects
|
||||||
|
|
||||||
|
### GSAP Integration
|
||||||
|
The page uses GSAP (GreenSock Animation Platform) for sophisticated animations:
|
||||||
|
|
||||||
|
**Timeline Animations:**
|
||||||
|
- Hero section entrance with staggered reveals
|
||||||
|
- Section headers with typewriter effects
|
||||||
|
- Card appearances with 3D transforms
|
||||||
|
|
||||||
|
**Scroll Triggers:**
|
||||||
|
- Elements animate into view as user scrolls
|
||||||
|
- Parallax effects on background elements
|
||||||
|
- Progressive content revelation
|
||||||
|
|
||||||
|
**Interactive Animations:**
|
||||||
|
- Magnetic cursor effects on cards
|
||||||
|
- 3D hover transformations
|
||||||
|
- Ripple effects on clicks
|
||||||
|
|
||||||
|
### CSS-Only Effects
|
||||||
|
Enhanced with pure CSS animations for performance:
|
||||||
|
|
||||||
|
**Visual Effects:**
|
||||||
|
- CRT scanlines and monitor bezels
|
||||||
|
- Matrix-style character rain
|
||||||
|
- Glitch text distortions
|
||||||
|
- Neon glow and pulsing lights
|
||||||
|
|
||||||
|
**Component Animations:**
|
||||||
|
- Electronic component blinking (LEDs)
|
||||||
|
- Data stream flowing effects
|
||||||
|
- Circuit trace pulsing
|
||||||
|
- Status indicator breathing
|
||||||
|
|
||||||
|
## Performance Optimizations
|
||||||
|
|
||||||
|
### Lazy Loading
|
||||||
|
- GSAP libraries loaded from CDN
|
||||||
|
- Animations initialized after DOM ready
|
||||||
|
- Circuit patterns use CSS transforms for GPU acceleration
|
||||||
|
|
||||||
|
### Reduced Motion Support
|
||||||
|
```css
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
/* All animations disabled for accessibility */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Mobile Optimizations
|
||||||
|
- Responsive grid layouts
|
||||||
|
- Touch-friendly interactive elements
|
||||||
|
- Optimized animation performance
|
||||||
|
- Reduced visual effects on smaller screens
|
||||||
|
|
||||||
|
## Accessibility Features
|
||||||
|
|
||||||
|
### WCAG Compliance
|
||||||
|
- High contrast mode support
|
||||||
|
- Focus indicators for keyboard navigation
|
||||||
|
- Screen reader friendly markup
|
||||||
|
- Semantic HTML structure
|
||||||
|
|
||||||
|
### Keyboard Navigation
|
||||||
|
- Tab order follows logical flow
|
||||||
|
- Escape key closes floating navigation
|
||||||
|
- Arrow keys for menu navigation
|
||||||
|
- Enter/Space for activation
|
||||||
|
|
||||||
|
### Color Accessibility
|
||||||
|
- Sufficient contrast ratios maintained
|
||||||
|
- Status information not solely color-dependent
|
||||||
|
- Alternative text for decorative elements
|
||||||
|
|
||||||
|
## Customization Guide
|
||||||
|
|
||||||
|
### Adding New Sections
|
||||||
|
1. Add section to main page
|
||||||
|
2. Update FloatingNav sections array
|
||||||
|
3. Add corresponding GSAP animations
|
||||||
|
4. Update TOC links
|
||||||
|
|
||||||
|
### Creating New Card Variants
|
||||||
|
```astro
|
||||||
|
<RetroCard
|
||||||
|
variant="custom"
|
||||||
|
color="blue"
|
||||||
|
title="New Product"
|
||||||
|
subtitle="Description"
|
||||||
|
status="active"
|
||||||
|
>
|
||||||
|
<!-- Content -->
|
||||||
|
</RetroCard>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Custom Circuit Patterns
|
||||||
|
```astro
|
||||||
|
<CircuitBackground
|
||||||
|
variant="prominent"
|
||||||
|
color="amber"
|
||||||
|
density="high"
|
||||||
|
animated={true}
|
||||||
|
opacity={0.2}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Color Theme Customization
|
||||||
|
Override CSS custom properties:
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--retro-green: #your-color;
|
||||||
|
--retro-amber: #your-color;
|
||||||
|
/* etc. */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Dependencies
|
||||||
|
|
||||||
|
### Required
|
||||||
|
- Astro ^5.6.1
|
||||||
|
- GSAP (loaded from CDN)
|
||||||
|
- JetBrains Mono font
|
||||||
|
|
||||||
|
### Optional Enhancements
|
||||||
|
- Sharp for image optimization
|
||||||
|
- Additional GSAP plugins for advanced effects
|
||||||
|
|
||||||
|
## Browser Support
|
||||||
|
|
||||||
|
### Fully Supported
|
||||||
|
- Chrome 88+
|
||||||
|
- Firefox 85+
|
||||||
|
- Safari 14+
|
||||||
|
- Edge 88+
|
||||||
|
|
||||||
|
### Graceful Degradation
|
||||||
|
- Older browsers receive static layout
|
||||||
|
- CSS fallbacks for unsupported features
|
||||||
|
- Progressive enhancement approach
|
||||||
|
|
||||||
|
## Development Commands
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Start development server
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# Build for production
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# Preview production build
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
## Future Enhancements
|
||||||
|
|
||||||
|
### Planned Features
|
||||||
|
- Sound effects for interactions
|
||||||
|
- More electronic component animations
|
||||||
|
- Additional card variants
|
||||||
|
- Theme switching capability
|
||||||
|
- Advanced glitch effects
|
||||||
|
|
||||||
|
### Performance Improvements
|
||||||
|
- WebGL circuit backgrounds
|
||||||
|
- Intersection Observer for animations
|
||||||
|
- Service worker for offline support
|
||||||
|
- Image lazy loading optimization
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
When adding new components or effects:
|
||||||
|
|
||||||
|
1. Follow the retro-tech design language
|
||||||
|
2. Ensure accessibility compliance
|
||||||
|
3. Add reduced motion alternatives
|
||||||
|
4. Test on multiple devices
|
||||||
|
5. Document new props and features
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Created with ❤️ and a healthy dose of 80s nostalgia*
|
||||||
306
website/PRODUCTS_PAGE_README.md
Normal file
306
website/PRODUCTS_PAGE_README.md
Normal file
@ -0,0 +1,306 @@
|
|||||||
|
# Jan Products Page - Retro-Tech Design System
|
||||||
|
|
||||||
|
A futuristic products showcase page that combines the nostalgic aesthetics of RadioShack's electronic components with PostHog's modern data visualization approach. This creates a unique "retro-tech" visual language that feels both familiar and cutting-edge.
|
||||||
|
|
||||||
|
## Design Philosophy
|
||||||
|
|
||||||
|
### RadioShack + PostHog = Retro-Tech
|
||||||
|
- **RadioShack Heritage**: Circuit board patterns, electronic components, terminal interfaces, amber/green CRT colors
|
||||||
|
- **PostHog Influence**: Clean data cards, status indicators, system metrics, dashboard layouts
|
||||||
|
- **Result**: A cohesive aesthetic that makes AI products feel like sophisticated electronic equipment
|
||||||
|
|
||||||
|
### Color Palette
|
||||||
|
```css
|
||||||
|
--retro-green: #00ff41 /* Matrix green, primary brand */
|
||||||
|
--retro-amber: #ffb000 /* Classic terminal amber */
|
||||||
|
--retro-blue: #00bfff /* Processing/loading states */
|
||||||
|
--retro-red: #ff0040 /* Error/warning states */
|
||||||
|
--retro-cyan: #00ffff /* Accent highlights */
|
||||||
|
--retro-magenta: #ff00ff /* Special effects */
|
||||||
|
```
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
### File Structure
|
||||||
|
```
|
||||||
|
jan/website/src/
|
||||||
|
├── pages/
|
||||||
|
│ └── prods.astro # Main products page
|
||||||
|
├── components/
|
||||||
|
│ ├── CircuitBackground.astro # Animated circuit patterns
|
||||||
|
│ ├── StatusIndicator.astro # System status components
|
||||||
|
│ ├── RetroCard.astro # Terminal-style cards
|
||||||
|
│ └── FloatingNav.astro # Floating navigation menu
|
||||||
|
├── layouts/
|
||||||
|
│ └── Layout.astro # Base layout with GSAP
|
||||||
|
└── styles/
|
||||||
|
└── retro-effects.css # Advanced visual effects
|
||||||
|
```
|
||||||
|
|
||||||
|
### Component Hierarchy
|
||||||
|
```
|
||||||
|
Layout
|
||||||
|
└── Products Page
|
||||||
|
├── FloatingNav (right-side navigation)
|
||||||
|
├── Hero Section
|
||||||
|
│ └── CircuitBackground (animated)
|
||||||
|
├── Table of Contents
|
||||||
|
├── Models Section
|
||||||
|
│ └── RetroCard (circuit variant)
|
||||||
|
├── Platforms Section
|
||||||
|
│ └── RetroCard (data/system variants)
|
||||||
|
├── Tools Section
|
||||||
|
│ └── RetroCard (terminal variant)
|
||||||
|
└── Integration Section
|
||||||
|
```
|
||||||
|
|
||||||
|
## Components Deep Dive
|
||||||
|
|
||||||
|
### CircuitBackground.astro
|
||||||
|
Creates animated circuit board patterns with electronic components.
|
||||||
|
|
||||||
|
**Props:**
|
||||||
|
- `variant`: 'subtle' | 'prominent' | 'animated'
|
||||||
|
- `color`: 'green' | 'amber' | 'blue' | 'multi'
|
||||||
|
- `density`: 'low' | 'medium' | 'high'
|
||||||
|
- `animated`: boolean
|
||||||
|
- `opacity`: number (0-1)
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
- Procedural circuit patterns
|
||||||
|
- Animated electronic components (LEDs, resistors, capacitors)
|
||||||
|
- Flowing data lines
|
||||||
|
- Responsive grid scaling
|
||||||
|
|
||||||
|
### StatusIndicator.astro
|
||||||
|
Terminal-style system status indicators with pulsing animations.
|
||||||
|
|
||||||
|
**Props:**
|
||||||
|
- `status`: 'active' | 'warning' | 'success' | 'error' | 'idle'
|
||||||
|
- `label`: string
|
||||||
|
- `pulse`: boolean
|
||||||
|
- `size`: 'small' | 'medium' | 'large'
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
- Animated status dots with glow effects
|
||||||
|
- Color-coded status states
|
||||||
|
- Accessibility compliant
|
||||||
|
- Reduced motion support
|
||||||
|
|
||||||
|
### RetroCard.astro
|
||||||
|
Terminal-inspired cards with scanlines, CRT effects, and interactive animations.
|
||||||
|
|
||||||
|
**Props:**
|
||||||
|
- `variant`: 'terminal' | 'circuit' | 'data' | 'system'
|
||||||
|
- `color`: 'green' | 'amber' | 'blue' | 'red' | 'multi'
|
||||||
|
- `size`: 'small' | 'medium' | 'large'
|
||||||
|
- `glitch`: boolean
|
||||||
|
- `scanlines`: boolean
|
||||||
|
- `glow`: boolean
|
||||||
|
- `interactive`: boolean
|
||||||
|
- `status`: 'online' | 'offline' | 'error' | 'warning' | 'processing'
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
- CRT monitor bezels with power indicators
|
||||||
|
- Animated scanlines and glitch effects
|
||||||
|
- Terminal-style headers with traffic light controls
|
||||||
|
- Interactive hover states with 3D transforms
|
||||||
|
- Corner brackets for retro-futuristic framing
|
||||||
|
|
||||||
|
### FloatingNav.astro
|
||||||
|
Floating navigation with terminal interface and system monitoring.
|
||||||
|
|
||||||
|
**Props:**
|
||||||
|
- `sections`: Array of navigation items with icons and status
|
||||||
|
- `position`: 'left' | 'right'
|
||||||
|
- `theme`: 'dark' | 'matrix' | 'circuit'
|
||||||
|
- `compact`: boolean
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
- Terminal-style command prompt
|
||||||
|
- Real-time system status indicators
|
||||||
|
- Animated progress bars
|
||||||
|
- Circuit connection lines
|
||||||
|
- Smooth scrolling with GSAP integration
|
||||||
|
|
||||||
|
## Animations & Effects
|
||||||
|
|
||||||
|
### GSAP Integration
|
||||||
|
The page uses GSAP (GreenSock Animation Platform) for sophisticated animations:
|
||||||
|
|
||||||
|
**Timeline Animations:**
|
||||||
|
- Hero section entrance with staggered reveals
|
||||||
|
- Section headers with typewriter effects
|
||||||
|
- Card appearances with 3D transforms
|
||||||
|
|
||||||
|
**Scroll Triggers:**
|
||||||
|
- Elements animate into view as user scrolls
|
||||||
|
- Parallax effects on background elements
|
||||||
|
- Progressive content revelation
|
||||||
|
|
||||||
|
**Interactive Animations:**
|
||||||
|
- Magnetic cursor effects on cards
|
||||||
|
- 3D hover transformations
|
||||||
|
- Ripple effects on clicks
|
||||||
|
|
||||||
|
### CSS-Only Effects
|
||||||
|
Enhanced with pure CSS animations for performance:
|
||||||
|
|
||||||
|
**Visual Effects:**
|
||||||
|
- CRT scanlines and monitor bezels
|
||||||
|
- Matrix-style character rain
|
||||||
|
- Glitch text distortions
|
||||||
|
- Neon glow and pulsing lights
|
||||||
|
|
||||||
|
**Component Animations:**
|
||||||
|
- Electronic component blinking (LEDs)
|
||||||
|
- Data stream flowing effects
|
||||||
|
- Circuit trace pulsing
|
||||||
|
- Status indicator breathing
|
||||||
|
|
||||||
|
## Performance Optimizations
|
||||||
|
|
||||||
|
### Lazy Loading
|
||||||
|
- GSAP libraries loaded from CDN
|
||||||
|
- Animations initialized after DOM ready
|
||||||
|
- Circuit patterns use CSS transforms for GPU acceleration
|
||||||
|
|
||||||
|
### Reduced Motion Support
|
||||||
|
```css
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
/* All animations disabled for accessibility */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Mobile Optimizations
|
||||||
|
- Responsive grid layouts
|
||||||
|
- Touch-friendly interactive elements
|
||||||
|
- Optimized animation performance
|
||||||
|
- Reduced visual effects on smaller screens
|
||||||
|
|
||||||
|
## Accessibility Features
|
||||||
|
|
||||||
|
### WCAG Compliance
|
||||||
|
- High contrast mode support
|
||||||
|
- Focus indicators for keyboard navigation
|
||||||
|
- Screen reader friendly markup
|
||||||
|
- Semantic HTML structure
|
||||||
|
|
||||||
|
### Keyboard Navigation
|
||||||
|
- Tab order follows logical flow
|
||||||
|
- Escape key closes floating navigation
|
||||||
|
- Arrow keys for menu navigation
|
||||||
|
- Enter/Space for activation
|
||||||
|
|
||||||
|
### Color Accessibility
|
||||||
|
- Sufficient contrast ratios maintained
|
||||||
|
- Status information not solely color-dependent
|
||||||
|
- Alternative text for decorative elements
|
||||||
|
|
||||||
|
## Customization Guide
|
||||||
|
|
||||||
|
### Adding New Sections
|
||||||
|
1. Add section to main page
|
||||||
|
2. Update FloatingNav sections array
|
||||||
|
3. Add corresponding GSAP animations
|
||||||
|
4. Update TOC links
|
||||||
|
|
||||||
|
### Creating New Card Variants
|
||||||
|
```astro
|
||||||
|
<RetroCard
|
||||||
|
variant="custom"
|
||||||
|
color="blue"
|
||||||
|
title="New Product"
|
||||||
|
subtitle="Description"
|
||||||
|
status="active"
|
||||||
|
>
|
||||||
|
<!-- Content -->
|
||||||
|
</RetroCard>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Custom Circuit Patterns
|
||||||
|
```astro
|
||||||
|
<CircuitBackground
|
||||||
|
variant="prominent"
|
||||||
|
color="amber"
|
||||||
|
density="high"
|
||||||
|
animated={true}
|
||||||
|
opacity={0.2}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Color Theme Customization
|
||||||
|
Override CSS custom properties:
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--retro-green: #your-color;
|
||||||
|
--retro-amber: #your-color;
|
||||||
|
/* etc. */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Dependencies
|
||||||
|
|
||||||
|
### Required
|
||||||
|
- Astro ^5.6.1
|
||||||
|
- GSAP (loaded from CDN)
|
||||||
|
- JetBrains Mono font
|
||||||
|
|
||||||
|
### Optional Enhancements
|
||||||
|
- Sharp for image optimization
|
||||||
|
- Additional GSAP plugins for advanced effects
|
||||||
|
|
||||||
|
## Browser Support
|
||||||
|
|
||||||
|
### Fully Supported
|
||||||
|
- Chrome 88+
|
||||||
|
- Firefox 85+
|
||||||
|
- Safari 14+
|
||||||
|
- Edge 88+
|
||||||
|
|
||||||
|
### Graceful Degradation
|
||||||
|
- Older browsers receive static layout
|
||||||
|
- CSS fallbacks for unsupported features
|
||||||
|
- Progressive enhancement approach
|
||||||
|
|
||||||
|
## Development Commands
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Start development server
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# Build for production
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# Preview production build
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
## Future Enhancements
|
||||||
|
|
||||||
|
### Planned Features
|
||||||
|
- Sound effects for interactions
|
||||||
|
- More electronic component animations
|
||||||
|
- Additional card variants
|
||||||
|
- Theme switching capability
|
||||||
|
- Advanced glitch effects
|
||||||
|
|
||||||
|
### Performance Improvements
|
||||||
|
- WebGL circuit backgrounds
|
||||||
|
- Intersection Observer for animations
|
||||||
|
- Service worker for offline support
|
||||||
|
- Image lazy loading optimization
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
When adding new components or effects:
|
||||||
|
|
||||||
|
1. Follow the retro-tech design language
|
||||||
|
2. Ensure accessibility compliance
|
||||||
|
3. Add reduced motion alternatives
|
||||||
|
4. Test on multiple devices
|
||||||
|
5. Document new props and features
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Created with ❤️ and a healthy dose of 80s nostalgia*
|
||||||
@ -1,41 +1,19 @@
|
|||||||
# Starlight Starter Kit: Basics
|
# Jan's Website
|
||||||
|
|
||||||
[](https://starlight.astro.build)
|
This website is [built with Starlight](https://starlight.astro.build)
|
||||||
|
|
||||||
```
|
|
||||||
bun create astro@latest -- --template starlight
|
|
||||||
```
|
|
||||||
|
|
||||||
[](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
|
Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed
|
||||||
[](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
|
as a route based on its file name.
|
||||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/withastro/starlight&create_from_path=examples/basics)
|
|
||||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
|
|
||||||
|
|
||||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
|
||||||
|
|
||||||
## 🚀 Project Structure
|
|
||||||
|
|
||||||
Inside of your Astro + Starlight project, you'll see the following folders and files:
|
|
||||||
|
|
||||||
```
|
|
||||||
.
|
|
||||||
├── public/
|
|
||||||
├── src/
|
|
||||||
│ ├── assets/
|
|
||||||
│ ├── content/
|
|
||||||
│ │ └── docs/
|
|
||||||
│ └── content.config.ts
|
|
||||||
├── astro.config.mjs
|
|
||||||
├── package.json
|
|
||||||
└── tsconfig.json
|
|
||||||
```
|
|
||||||
|
|
||||||
Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
|
|
||||||
|
|
||||||
Images can be added to `src/assets/` and embedded in Markdown with a relative link.
|
Images can be added to `src/assets/` and embedded in Markdown with a relative link.
|
||||||
|
|
||||||
Static assets, like favicons, can be placed in the `public/` directory.
|
Static assets, like favicons, can be placed in the `public/` directory.
|
||||||
|
|
||||||
|
If you want to add new pages, these can go in the `src/pages/` directory. Because of the topics plugin
|
||||||
|
we are using ([starlight sidebar topics](https://starlight-sidebar-topics.netlify.app/docs/guides/excluded-pages/))
|
||||||
|
you will need to exclude them from the sidebar by adding them to the exclude list in `astro.config.mjs`, e.g., `exclude: ['/example'],`.
|
||||||
|
|
||||||
## 🧞 Commands
|
## 🧞 Commands
|
||||||
|
|
||||||
All commands are run from the root of the project, from a terminal:
|
All commands are run from the root of the project, from a terminal:
|
||||||
@ -48,7 +26,3 @@ All commands are run from the root of the project, from a terminal:
|
|||||||
| `bun preview` | Preview your build locally, before deploying |
|
| `bun preview` | Preview your build locally, before deploying |
|
||||||
| `bun astro ...` | Run CLI commands like `astro add`, `astro check` |
|
| `bun astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||||
| `bun astro -- --help` | Get help using the Astro CLI |
|
| `bun astro -- --help` | Get help using the Astro CLI |
|
||||||
|
|
||||||
## 👀 Want to learn more?
|
|
||||||
|
|
||||||
Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).
|
|
||||||
|
|||||||
@ -169,7 +169,7 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
{
|
{
|
||||||
exclude: ['/example'],
|
exclude: ['/prods'],
|
||||||
topics: {
|
topics: {
|
||||||
university: [
|
university: [
|
||||||
'/university/getting-started/what-is-jan',
|
'/university/getting-started/what-is-jan',
|
||||||
|
|||||||
@ -12,6 +12,8 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/starlight": "^0.35.1",
|
"@astrojs/starlight": "^0.35.1",
|
||||||
"astro": "^5.6.1",
|
"astro": "^5.6.1",
|
||||||
|
"gsap": "^3.13.0",
|
||||||
|
"phosphor-astro": "^2.1.0",
|
||||||
"sharp": "^0.34.2",
|
"sharp": "^0.34.2",
|
||||||
"starlight-sidebar-topics": "^0.6.0",
|
"starlight-sidebar-topics": "^0.6.0",
|
||||||
"starlight-theme-rapide": "^0.5.1",
|
"starlight-theme-rapide": "^0.5.1",
|
||||||
|
|||||||
366
website/src/components/CircuitBackground.astro
Normal file
366
website/src/components/CircuitBackground.astro
Normal file
@ -0,0 +1,366 @@
|
|||||||
|
---
|
||||||
|
export interface Props {
|
||||||
|
variant?: 'subtle' | 'prominent' | 'animated';
|
||||||
|
color?: 'green' | 'amber' | 'blue' | 'multi';
|
||||||
|
density?: 'low' | 'medium' | 'high';
|
||||||
|
animated?: boolean;
|
||||||
|
opacity?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
variant = 'subtle',
|
||||||
|
color = 'green',
|
||||||
|
density = 'medium',
|
||||||
|
animated = true,
|
||||||
|
opacity = 0.1
|
||||||
|
} = Astro.props;
|
||||||
|
|
||||||
|
const colorSchemes = {
|
||||||
|
green: {
|
||||||
|
primary: '#00ff41',
|
||||||
|
secondary: '#00cc33',
|
||||||
|
accent: '#008822'
|
||||||
|
},
|
||||||
|
amber: {
|
||||||
|
primary: '#ffb000',
|
||||||
|
secondary: '#ff9500',
|
||||||
|
accent: '#cc7700'
|
||||||
|
},
|
||||||
|
blue: {
|
||||||
|
primary: '#00bfff',
|
||||||
|
secondary: '#0099cc',
|
||||||
|
accent: '#007799'
|
||||||
|
},
|
||||||
|
multi: {
|
||||||
|
primary: '#00ff41',
|
||||||
|
secondary: '#ffb000',
|
||||||
|
accent: '#00bfff'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const colors = colorSchemes[color];
|
||||||
|
|
||||||
|
const densitySettings = {
|
||||||
|
low: { size: 80, nodes: 6 },
|
||||||
|
medium: { size: 50, nodes: 8 },
|
||||||
|
high: { size: 30, nodes: 12 }
|
||||||
|
};
|
||||||
|
|
||||||
|
const settings = densitySettings[density];
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class={`circuit-background ${variant} ${color} ${density} ${animated ? 'animated' : ''}`}
|
||||||
|
style={`--opacity: ${opacity}; --primary: ${colors.primary}; --secondary: ${colors.secondary}; --accent: ${colors.accent};`}>
|
||||||
|
|
||||||
|
<!-- Main circuit grid -->
|
||||||
|
<div class="circuit-grid"></div>
|
||||||
|
|
||||||
|
<!-- Connection nodes -->
|
||||||
|
<div class="circuit-nodes"></div>
|
||||||
|
|
||||||
|
<!-- Electronic components -->
|
||||||
|
<div class="circuit-components">
|
||||||
|
<div class="component resistor" style="top: 20%; left: 15%;"></div>
|
||||||
|
<div class="component capacitor" style="top: 35%; left: 60%;"></div>
|
||||||
|
<div class="component chip" style="top: 70%; left: 25%;"></div>
|
||||||
|
<div class="component led" style="top: 45%; left: 80%;"></div>
|
||||||
|
<div class="component transistor" style="top: 80%; left: 70%;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Flowing data lines -->
|
||||||
|
<div class="data-flow"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style define:vars={{ size: `${settings.size}px`, nodeCount: settings.nodes }}>
|
||||||
|
.circuit-background {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Circuit Grid Pattern */
|
||||||
|
.circuit-grid {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-image:
|
||||||
|
/* Horizontal lines */
|
||||||
|
linear-gradient(90deg, transparent 49%, var(--primary) 50%, transparent 51%),
|
||||||
|
/* Vertical lines */
|
||||||
|
linear-gradient(0deg, transparent 49%, var(--primary) 50%, transparent 51%),
|
||||||
|
/* Junction dots */
|
||||||
|
radial-gradient(circle at 50% 50%, var(--secondary) 1px, transparent 2px),
|
||||||
|
/* Micro traces */
|
||||||
|
linear-gradient(45deg, transparent 48%, var(--accent) 49%, transparent 50%);
|
||||||
|
background-size:
|
||||||
|
var(--size) var(--size),
|
||||||
|
var(--size) var(--size),
|
||||||
|
var(--size) var(--size),
|
||||||
|
calc(var(--size) / 2) calc(var(--size) / 2);
|
||||||
|
opacity: var(--opacity);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animated flowing effect */
|
||||||
|
.circuit-background.animated .circuit-grid {
|
||||||
|
animation: circuitFlow 30s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circuitFlow {
|
||||||
|
0% {
|
||||||
|
background-position: 0 0, 0 0, 0 0, 0 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position:
|
||||||
|
var(--size) var(--size),
|
||||||
|
var(--size) var(--size),
|
||||||
|
var(--size) var(--size),
|
||||||
|
calc(var(--size) / 2) calc(var(--size) / 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Connection Nodes */
|
||||||
|
.circuit-nodes {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circuit-nodes::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-image:
|
||||||
|
radial-gradient(circle at 25% 25%, var(--primary) 2px, transparent 3px),
|
||||||
|
radial-gradient(circle at 75% 25%, var(--secondary) 1.5px, transparent 2.5px),
|
||||||
|
radial-gradient(circle at 25% 75%, var(--accent) 1.5px, transparent 2.5px),
|
||||||
|
radial-gradient(circle at 75% 75%, var(--primary) 2px, transparent 3px);
|
||||||
|
background-size: calc(var(--size) * 2) calc(var(--size) * 2);
|
||||||
|
opacity: calc(var(--opacity) * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Electronic Components */
|
||||||
|
.circuit-components {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.component {
|
||||||
|
position: absolute;
|
||||||
|
opacity: calc(var(--opacity) * 3);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Resistor */
|
||||||
|
.resistor {
|
||||||
|
width: 20px;
|
||||||
|
height: 6px;
|
||||||
|
background:
|
||||||
|
linear-gradient(90deg,
|
||||||
|
transparent 0%,
|
||||||
|
var(--primary) 20%,
|
||||||
|
var(--secondary) 40%,
|
||||||
|
var(--primary) 60%,
|
||||||
|
var(--secondary) 80%,
|
||||||
|
transparent 100%);
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resistor::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: -5px;
|
||||||
|
right: -5px;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--primary);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Capacitor */
|
||||||
|
.capacitor {
|
||||||
|
width: 2px;
|
||||||
|
height: 12px;
|
||||||
|
background: var(--secondary);
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.capacitor::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: -4px;
|
||||||
|
width: 2px;
|
||||||
|
height: 12px;
|
||||||
|
background: var(--secondary);
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Microchip */
|
||||||
|
.chip {
|
||||||
|
width: 16px;
|
||||||
|
height: 12px;
|
||||||
|
background: var(--primary);
|
||||||
|
border-radius: 2px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip::before,
|
||||||
|
.chip::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 3px;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--primary);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip::before {
|
||||||
|
left: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip::after {
|
||||||
|
right: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LED */
|
||||||
|
.led {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, var(--accent), transparent);
|
||||||
|
box-shadow: 0 0 6px var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Transistor */
|
||||||
|
.transistor {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 6px solid transparent;
|
||||||
|
border-right: 6px solid transparent;
|
||||||
|
border-bottom: 10px solid var(--secondary);
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Data Flow Animation */
|
||||||
|
.data-flow {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background:
|
||||||
|
linear-gradient(90deg,
|
||||||
|
transparent 0%,
|
||||||
|
var(--primary) 1%,
|
||||||
|
transparent 2%),
|
||||||
|
linear-gradient(0deg,
|
||||||
|
transparent 0%,
|
||||||
|
var(--secondary) 1%,
|
||||||
|
transparent 2%);
|
||||||
|
background-size: 200px 1px, 1px 200px;
|
||||||
|
opacity: calc(var(--opacity) * 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.circuit-background.animated .data-flow {
|
||||||
|
animation: dataFlow 8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dataFlow {
|
||||||
|
0% {
|
||||||
|
background-position: -200px 0, 0 -200px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: calc(100% + 200px) 0, 0 calc(100% + 200px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Component animations */
|
||||||
|
.circuit-background.animated .led {
|
||||||
|
animation: ledBlink 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ledBlink {
|
||||||
|
0%, 80%, 100% {
|
||||||
|
opacity: calc(var(--opacity) * 3);
|
||||||
|
box-shadow: 0 0 6px var(--accent);
|
||||||
|
}
|
||||||
|
85%, 95% {
|
||||||
|
opacity: calc(var(--opacity) * 6);
|
||||||
|
box-shadow: 0 0 12px var(--accent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Variant Styles */
|
||||||
|
.circuit-background.prominent {
|
||||||
|
--opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circuit-background.subtle {
|
||||||
|
--opacity: 0.05;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Density Variations */
|
||||||
|
.circuit-background.high .circuit-grid {
|
||||||
|
background-size: 30px 30px, 30px 30px, 30px 30px, 15px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circuit-background.low .circuit-grid {
|
||||||
|
background-size: 80px 80px, 80px 80px, 80px 80px, 40px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Multi-color variant */
|
||||||
|
.circuit-background.multi .circuit-grid {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(90deg, transparent 49%, var(--primary) 50%, transparent 51%),
|
||||||
|
linear-gradient(0deg, transparent 49%, var(--secondary) 50%, transparent 51%),
|
||||||
|
radial-gradient(circle at 50% 50%, var(--accent) 1px, transparent 2px),
|
||||||
|
linear-gradient(45deg, transparent 48%, var(--primary) 49%, transparent 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.circuit-background.high {
|
||||||
|
--size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circuit-background.medium {
|
||||||
|
--size: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circuit-background.low {
|
||||||
|
--size: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reduced motion support */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.circuit-grid,
|
||||||
|
.data-flow,
|
||||||
|
.led {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* High contrast mode */
|
||||||
|
@media (prefers-contrast: high) {
|
||||||
|
.circuit-background {
|
||||||
|
--opacity: 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
735
website/src/components/FloatingNav.astro
Normal file
735
website/src/components/FloatingNav.astro
Normal file
@ -0,0 +1,735 @@
|
|||||||
|
---
|
||||||
|
export interface Props {
|
||||||
|
sections?: Array<{
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
icon: string;
|
||||||
|
status?: 'active' | 'inactive' | 'processing';
|
||||||
|
}>;
|
||||||
|
position?: 'left' | 'right';
|
||||||
|
theme?: 'dark' | 'matrix' | 'circuit';
|
||||||
|
compact?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
sections = [
|
||||||
|
{ id: 'models', label: 'Models', icon: '🧠', status: 'active' },
|
||||||
|
{ id: 'platforms', label: 'Platforms', icon: '💻', status: 'active' },
|
||||||
|
{ id: 'tools', label: 'Tools', icon: '🔧', status: 'processing' }
|
||||||
|
],
|
||||||
|
position = 'right',
|
||||||
|
theme = 'matrix',
|
||||||
|
compact = false
|
||||||
|
} = Astro.props;
|
||||||
|
|
||||||
|
const navId = `floating-nav-${Math.random().toString(36).substr(2, 9)}`;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div id={navId} class={`floating-nav ${position} ${theme} ${compact ? 'compact' : ''}`}>
|
||||||
|
<!-- Main Navigation Button -->
|
||||||
|
<button class="nav-toggle" aria-label="Toggle Navigation">
|
||||||
|
<div class="nav-icon">
|
||||||
|
<span class="icon-line"></span>
|
||||||
|
<span class="icon-line"></span>
|
||||||
|
<span class="icon-line"></span>
|
||||||
|
</div>
|
||||||
|
<div class="status-ring"></div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Navigation Menu -->
|
||||||
|
<nav class="nav-menu" role="navigation" aria-label="Section Navigation">
|
||||||
|
<div class="nav-header">
|
||||||
|
<div class="terminal-prompt">
|
||||||
|
<span class="prompt-symbol">></span>
|
||||||
|
<span class="prompt-text">NAVIGATE</span>
|
||||||
|
<span class="terminal-cursor"></span>
|
||||||
|
</div>
|
||||||
|
<div class="system-status">
|
||||||
|
<div class="status-indicator online"></div>
|
||||||
|
<span class="status-text">ONLINE</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="nav-list">
|
||||||
|
{sections.map((section, index) => (
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href={`#${section.id}`} class="nav-link" data-section={section.id}>
|
||||||
|
<div class="nav-icon-wrapper">
|
||||||
|
<span class="nav-emoji">{section.icon}</span>
|
||||||
|
<div class="connection-line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="nav-content">
|
||||||
|
<span class="nav-label">{section.label}</span>
|
||||||
|
<div class="nav-circuit">
|
||||||
|
<div class="circuit-dot"></div>
|
||||||
|
<div class="circuit-line"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class={`nav-status ${section.status || 'inactive'}`}>
|
||||||
|
<div class="status-dot"></div>
|
||||||
|
<span class="status-code">
|
||||||
|
{section.status === 'active' ? '200' :
|
||||||
|
section.status === 'processing' ? '102' : '404'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="nav-footer">
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-fill"></div>
|
||||||
|
</div>
|
||||||
|
<div class="system-info">
|
||||||
|
<span class="timestamp"></span>
|
||||||
|
<span class="version">v2.4.1</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Background Circuit Pattern -->
|
||||||
|
<div class="nav-background">
|
||||||
|
<div class="circuit-pattern"></div>
|
||||||
|
<div class="data-stream"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.floating-nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: 1000;
|
||||||
|
font-family: 'JetBrains Mono', 'Monaco', 'Menlo', monospace;
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-nav.right {
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-nav.left {
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main Toggle Button */
|
||||||
|
.nav-toggle {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 30% 30%, rgba(0, 255, 65, 0.1), transparent),
|
||||||
|
linear-gradient(135deg, #1a1a1a, #0a0a0a);
|
||||||
|
border: 2px solid #00ff41;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow:
|
||||||
|
0 4px 20px rgba(0, 0, 0, 0.3),
|
||||||
|
0 0 20px rgba(0, 255, 65, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggle:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow:
|
||||||
|
0 6px 30px rgba(0, 0, 0, 0.4),
|
||||||
|
0 0 30px rgba(0, 255, 65, 0.4);
|
||||||
|
border-color: #00ff65;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-icon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-line {
|
||||||
|
width: 20px;
|
||||||
|
height: 2px;
|
||||||
|
background: #00ff41;
|
||||||
|
border-radius: 1px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-nav.active .icon-line:nth-child(1) {
|
||||||
|
transform: rotate(45deg) translate(6px, 6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-nav.active .icon-line:nth-child(2) {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-nav.active .icon-line:nth-child(3) {
|
||||||
|
transform: rotate(-45deg) translate(6px, -6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-ring {
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
left: -2px;
|
||||||
|
right: -2px;
|
||||||
|
bottom: -2px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
background:
|
||||||
|
linear-gradient(45deg, #00ff41, transparent, #ffb000, transparent, #00ff41)
|
||||||
|
border-box;
|
||||||
|
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
|
||||||
|
mask-composite: exclude;
|
||||||
|
animation: statusRotate 4s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes statusRotate {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation Menu */
|
||||||
|
.nav-menu {
|
||||||
|
position: absolute;
|
||||||
|
right: 80px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(10, 10, 10, 0.98));
|
||||||
|
border: 1px solid #00ff41;
|
||||||
|
border-radius: 8px;
|
||||||
|
min-width: 280px;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transform: translateY(-50%) translateX(20px) scale(0.95);
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
box-shadow:
|
||||||
|
0 10px 40px rgba(0, 0, 0, 0.5),
|
||||||
|
0 0 20px rgba(0, 255, 65, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-nav.left .nav-menu {
|
||||||
|
right: auto;
|
||||||
|
left: 80px;
|
||||||
|
transform: translateY(-50%) translateX(-20px) scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-nav.active .nav-menu {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
transform: translateY(-50%) translateX(0) scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Menu Header */
|
||||||
|
.nav-header {
|
||||||
|
padding: 1rem;
|
||||||
|
border-bottom: 1px solid rgba(0, 255, 65, 0.2);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-prompt {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
color: #00ff41;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prompt-symbol {
|
||||||
|
color: #ffb000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-cursor {
|
||||||
|
width: 8px;
|
||||||
|
height: 12px;
|
||||||
|
background: #ffffff;
|
||||||
|
animation: cursorBlink 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cursorBlink {
|
||||||
|
0%, 50% { opacity: 1; }
|
||||||
|
51%, 100% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.system-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #00ff41;
|
||||||
|
box-shadow: 0 0 8px #00ff41;
|
||||||
|
animation: statusPulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes statusPulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.5; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation List */
|
||||||
|
.nav-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
color: #cccccc;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
rgba(0, 255, 65, 0.1),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
transition: left 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover::before {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover {
|
||||||
|
color: #00ff41;
|
||||||
|
background: rgba(0, 255, 65, 0.05);
|
||||||
|
transform: translateX(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-icon-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 1rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-emoji {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
display: block;
|
||||||
|
filter: grayscale(0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover .nav-emoji {
|
||||||
|
filter: grayscale(0);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-line {
|
||||||
|
position: absolute;
|
||||||
|
right: -8px;
|
||||||
|
top: 50%;
|
||||||
|
width: 16px;
|
||||||
|
height: 1px;
|
||||||
|
background: #333333;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover .connection-line {
|
||||||
|
background: #00ff41;
|
||||||
|
box-shadow: 0 0 5px #00ff41;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-label {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-circuit {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circuit-dot {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #666666;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover .circuit-dot {
|
||||||
|
background: #00ff41;
|
||||||
|
box-shadow: 0 0 8px #00ff41;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circuit-line {
|
||||||
|
width: 12px;
|
||||||
|
height: 1px;
|
||||||
|
background: #333333;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover .circuit-line {
|
||||||
|
background: #00ff41;
|
||||||
|
box-shadow: 0 0 5px #00ff41;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-status .status-dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-status.active .status-dot {
|
||||||
|
background: #00ff41;
|
||||||
|
box-shadow: 0 0 6px #00ff41;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-status.processing .status-dot {
|
||||||
|
background: #ffb000;
|
||||||
|
box-shadow: 0 0 6px #ffb000;
|
||||||
|
animation: processingPulse 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-status.inactive .status-dot {
|
||||||
|
background: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes processingPulse {
|
||||||
|
0%, 100% { opacity: 1; transform: scale(1); }
|
||||||
|
50% { opacity: 0.7; transform: scale(1.2); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-code {
|
||||||
|
color: #888888;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-status.active .status-code {
|
||||||
|
color: #00ff41;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-status.processing .status-code {
|
||||||
|
color: #ffb000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Menu Footer */
|
||||||
|
.nav-footer {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-top: 1px solid rgba(0, 255, 65, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 3px;
|
||||||
|
background: #333333;
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #00ff41, #ffb000);
|
||||||
|
border-radius: 2px;
|
||||||
|
animation: progressFlow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes progressFlow {
|
||||||
|
0% { width: 0%; }
|
||||||
|
50% { width: 100%; }
|
||||||
|
100% { width: 0%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.system-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Background Effects */
|
||||||
|
.nav-background {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circuit-pattern {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background:
|
||||||
|
linear-gradient(90deg, transparent 49%, rgba(0, 255, 65, 0.05) 50%, transparent 51%),
|
||||||
|
linear-gradient(0deg, transparent 49%, rgba(0, 255, 65, 0.05) 50%, transparent 51%);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-stream {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(
|
||||||
|
45deg,
|
||||||
|
transparent 30%,
|
||||||
|
rgba(0, 255, 65, 0.02) 50%,
|
||||||
|
transparent 70%
|
||||||
|
);
|
||||||
|
animation: dataStreamFlow 4s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dataStreamFlow {
|
||||||
|
0% { transform: translateX(-100%); }
|
||||||
|
100% { transform: translateX(100%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Theme Variations */
|
||||||
|
.floating-nav.matrix .nav-toggle {
|
||||||
|
border-color: #00ff41;
|
||||||
|
box-shadow:
|
||||||
|
0 4px 20px rgba(0, 0, 0, 0.3),
|
||||||
|
0 0 20px rgba(0, 255, 65, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-nav.circuit .nav-toggle {
|
||||||
|
border-color: #ffb000;
|
||||||
|
box-shadow:
|
||||||
|
0 4px 20px rgba(0, 0, 0, 0.3),
|
||||||
|
0 0 20px rgba(255, 176, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-nav.circuit .nav-menu {
|
||||||
|
border-color: #ffb000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Compact Mode */
|
||||||
|
.floating-nav.compact .nav-toggle {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-nav.compact .nav-menu {
|
||||||
|
min-width: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.floating-nav {
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-nav.left {
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-menu {
|
||||||
|
min-width: 260px;
|
||||||
|
right: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-nav.left .nav-menu {
|
||||||
|
left: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggle {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.nav-menu {
|
||||||
|
min-width: 240px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
padding: 0.6rem 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accessibility */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.floating-nav *,
|
||||||
|
.floating-nav *::before,
|
||||||
|
.floating-nav *::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggle:focus,
|
||||||
|
.nav-link:focus {
|
||||||
|
outline: 2px solid #00ff41;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* High contrast mode */
|
||||||
|
@media (prefers-contrast: high) {
|
||||||
|
.floating-nav {
|
||||||
|
filter: contrast(1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const navs = document.querySelectorAll('.floating-nav');
|
||||||
|
|
||||||
|
navs.forEach(nav => {
|
||||||
|
const toggle = nav.querySelector('.nav-toggle');
|
||||||
|
const menu = nav.querySelector('.nav-menu');
|
||||||
|
const links = nav.querySelectorAll('.nav-link');
|
||||||
|
const timestamp = nav.querySelector('.timestamp');
|
||||||
|
|
||||||
|
// Update timestamp
|
||||||
|
if (timestamp) {
|
||||||
|
const updateTime = () => {
|
||||||
|
const now = new Date();
|
||||||
|
timestamp.textContent = now.toLocaleTimeString('en-US', {
|
||||||
|
hour12: false,
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
updateTime();
|
||||||
|
setInterval(updateTime, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Toggle menu
|
||||||
|
toggle?.addEventListener('click', () => {
|
||||||
|
nav.classList.toggle('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close menu when clicking outside
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
if (!nav.contains(e.target)) {
|
||||||
|
nav.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle navigation
|
||||||
|
links.forEach(link => {
|
||||||
|
link.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const sectionId = link.getAttribute('data-section');
|
||||||
|
const targetSection = document.getElementById(sectionId);
|
||||||
|
|
||||||
|
if (targetSection) {
|
||||||
|
// Smooth scroll with GSAP if available
|
||||||
|
if (typeof gsap !== 'undefined') {
|
||||||
|
gsap.to(window, {
|
||||||
|
duration: 1.2,
|
||||||
|
scrollTo: { y: targetSection, offsetY: 100 },
|
||||||
|
ease: 'power3.inOut'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
targetSection.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close menu after navigation
|
||||||
|
nav.classList.remove('active');
|
||||||
|
|
||||||
|
// Add ripple effect
|
||||||
|
const rect = link.getBoundingClientRect();
|
||||||
|
const ripple = document.createElement('div');
|
||||||
|
ripple.style.cssText = `
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(0, 255, 65, 0.3);
|
||||||
|
transform: scale(0);
|
||||||
|
animation: ripple 0.6s linear;
|
||||||
|
left: ${e.clientX - rect.left - 10}px;
|
||||||
|
top: ${e.clientY - rect.top - 10}px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 10;
|
||||||
|
`;
|
||||||
|
|
||||||
|
link.appendChild(ripple);
|
||||||
|
setTimeout(() => ripple.remove(), 600);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Keyboard navigation
|
||||||
|
nav.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
nav.classList.remove('active');
|
||||||
|
toggle?.focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add ripple animation styles
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = `
|
||||||
|
@keyframes ripple {
|
||||||
|
to {
|
||||||
|
transform: scale(4);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
601
website/src/components/RetroCard.astro
Normal file
601
website/src/components/RetroCard.astro
Normal file
@ -0,0 +1,601 @@
|
|||||||
|
---
|
||||||
|
export interface Props {
|
||||||
|
variant?: 'terminal' | 'circuit' | 'data' | 'system';
|
||||||
|
color?: 'green' | 'amber' | 'blue' | 'red' | 'multi';
|
||||||
|
size?: 'small' | 'medium' | 'large';
|
||||||
|
glitch?: boolean;
|
||||||
|
scanlines?: boolean;
|
||||||
|
glow?: boolean;
|
||||||
|
interactive?: boolean;
|
||||||
|
status?: 'online' | 'offline' | 'error' | 'warning' | 'processing';
|
||||||
|
title?: string;
|
||||||
|
subtitle?: string;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
variant = 'terminal',
|
||||||
|
color = 'green',
|
||||||
|
size = 'medium',
|
||||||
|
glitch = false,
|
||||||
|
scanlines = true,
|
||||||
|
glow = true,
|
||||||
|
interactive = true,
|
||||||
|
status = 'online',
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
className = ''
|
||||||
|
} = Astro.props;
|
||||||
|
|
||||||
|
const colorSchemes = {
|
||||||
|
green: {
|
||||||
|
primary: '#00ff41',
|
||||||
|
secondary: '#00cc33',
|
||||||
|
bg: 'rgba(0, 255, 65, 0.05)',
|
||||||
|
border: '#00ff41',
|
||||||
|
glow: 'rgba(0, 255, 65, 0.3)'
|
||||||
|
},
|
||||||
|
amber: {
|
||||||
|
primary: '#ffb000',
|
||||||
|
secondary: '#ff9500',
|
||||||
|
bg: 'rgba(255, 176, 0, 0.05)',
|
||||||
|
border: '#ffb000',
|
||||||
|
glow: 'rgba(255, 176, 0, 0.3)'
|
||||||
|
},
|
||||||
|
blue: {
|
||||||
|
primary: '#00bfff',
|
||||||
|
secondary: '#0099cc',
|
||||||
|
bg: 'rgba(0, 191, 255, 0.05)',
|
||||||
|
border: '#00bfff',
|
||||||
|
glow: 'rgba(0, 191, 255, 0.3)'
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
primary: '#ff0040',
|
||||||
|
secondary: '#cc0033',
|
||||||
|
bg: 'rgba(255, 0, 64, 0.05)',
|
||||||
|
border: '#ff0040',
|
||||||
|
glow: 'rgba(255, 0, 64, 0.3)'
|
||||||
|
},
|
||||||
|
multi: {
|
||||||
|
primary: '#00ff41',
|
||||||
|
secondary: '#ffb000',
|
||||||
|
bg: 'linear-gradient(135deg, rgba(0, 255, 65, 0.05), rgba(255, 176, 0, 0.05))',
|
||||||
|
border: '#00ff41',
|
||||||
|
glow: 'rgba(0, 255, 65, 0.3)'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const scheme = colorSchemes[color];
|
||||||
|
const cardId = `retro-card-${Math.random().toString(36).substr(2, 9)}`;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
id={cardId}
|
||||||
|
class={`retro-card ${variant} ${color} ${size} ${glitch ? 'glitch' : ''} ${scanlines ? 'scanlines' : ''} ${glow ? 'glow' : ''} ${interactive ? 'interactive' : ''} ${className}`}
|
||||||
|
data-status={status}
|
||||||
|
style={`--primary: ${scheme.primary}; --secondary: ${scheme.secondary}; --bg: ${scheme.bg}; --border: ${scheme.border}; --glow: ${scheme.glow};`}
|
||||||
|
>
|
||||||
|
<!-- Terminal header -->
|
||||||
|
<div class="retro-header">
|
||||||
|
<div class="terminal-controls">
|
||||||
|
<div class="control-dot red"></div>
|
||||||
|
<div class="control-dot yellow"></div>
|
||||||
|
<div class="control-dot green"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{title && (
|
||||||
|
<div class="terminal-title">
|
||||||
|
<span class="title-text">{title}</span>
|
||||||
|
{subtitle && <span class="subtitle-text">{subtitle}</span>}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div class="status-indicator">
|
||||||
|
<div class={`status-dot ${status}`}></div>
|
||||||
|
<span class="status-text">{status.toUpperCase()}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content area -->
|
||||||
|
<div class="retro-content">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scanline overlay -->
|
||||||
|
{scanlines && (
|
||||||
|
<div class="scanline-overlay"></div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<!-- Border effects -->
|
||||||
|
<div class="border-glow"></div>
|
||||||
|
|
||||||
|
<!-- Corner brackets -->
|
||||||
|
<div class="corner-bracket top-left"></div>
|
||||||
|
<div class="corner-bracket top-right"></div>
|
||||||
|
<div class="corner-bracket bottom-left"></div>
|
||||||
|
<div class="corner-bracket bottom-right"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.retro-card {
|
||||||
|
position: relative;
|
||||||
|
background: #111111;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: 'JetBrains Mono', 'Monaco', 'Menlo', monospace;
|
||||||
|
color: #ffffff;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Size variations */
|
||||||
|
.retro-card.small {
|
||||||
|
min-height: 200px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-card.medium {
|
||||||
|
min-height: 280px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-card.large {
|
||||||
|
min-height: 400px;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interactive states */
|
||||||
|
.retro-card.interactive {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-card.interactive:hover {
|
||||||
|
transform: translateY(-2px) scale(1.02);
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow:
|
||||||
|
0 8px 32px rgba(0, 0, 0, 0.4),
|
||||||
|
0 0 20px var(--glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-card.interactive:active {
|
||||||
|
transform: translateY(0) scale(1.01);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Terminal header */
|
||||||
|
.retro-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-controls {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-dot {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-dot.red {
|
||||||
|
background: #ff5f56;
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-dot.yellow {
|
||||||
|
background: #ffbd2e;
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-dot.green {
|
||||||
|
background: #27ca3f;
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-title {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
color: var(--primary);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
display: block;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle-text {
|
||||||
|
color: #888888;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: statusPulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot.online {
|
||||||
|
background: #00ff41;
|
||||||
|
box-shadow: 0 0 8px #00ff41;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot.offline {
|
||||||
|
background: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot.error {
|
||||||
|
background: #ff0040;
|
||||||
|
box-shadow: 0 0 8px #ff0040;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot.warning {
|
||||||
|
background: #ffb000;
|
||||||
|
box-shadow: 0 0 8px #ffb000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot.processing {
|
||||||
|
background: #00bfff;
|
||||||
|
box-shadow: 0 0 8px #00bfff;
|
||||||
|
animation: processingPulse 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: #888888;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content area */
|
||||||
|
.retro-content {
|
||||||
|
padding: 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
min-height: 200px;
|
||||||
|
background: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scanline effect */
|
||||||
|
.scanline-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
0deg,
|
||||||
|
transparent,
|
||||||
|
transparent 2px,
|
||||||
|
rgba(0, 255, 65, 0.03) 2px,
|
||||||
|
rgba(0, 255, 65, 0.03) 4px
|
||||||
|
);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-card.scanlines .scanline-overlay {
|
||||||
|
animation: scanlineMove 8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scanlineMove {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Border glow effect */
|
||||||
|
.border-glow {
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
right: -1px;
|
||||||
|
bottom: -1px;
|
||||||
|
background: linear-gradient(45deg, var(--primary), transparent, var(--secondary), transparent, var(--primary));
|
||||||
|
border-radius: 4px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-card.glow:hover .border-glow {
|
||||||
|
opacity: 0.6;
|
||||||
|
animation: borderPulse 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes borderPulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Corner brackets */
|
||||||
|
.corner-bracket {
|
||||||
|
position: absolute;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 2px solid var(--primary);
|
||||||
|
opacity: 0.6;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner-bracket.top-left {
|
||||||
|
top: 8px;
|
||||||
|
left: 8px;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner-bracket.top-right {
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
border-left: none;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner-bracket.bottom-left {
|
||||||
|
bottom: 8px;
|
||||||
|
left: 8px;
|
||||||
|
border-right: none;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner-bracket.bottom-right {
|
||||||
|
bottom: 8px;
|
||||||
|
right: 8px;
|
||||||
|
border-left: none;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-card:hover .corner-bracket {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Variant styles */
|
||||||
|
.retro-card.circuit {
|
||||||
|
background: radial-gradient(circle at 50% 50%, rgba(0, 255, 65, 0.1), #111111);
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-card.circuit::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background:
|
||||||
|
linear-gradient(90deg, transparent 49%, rgba(0, 255, 65, 0.1) 50%, transparent 51%),
|
||||||
|
linear-gradient(0deg, transparent 49%, rgba(0, 255, 65, 0.1) 50%, transparent 51%);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
opacity: 0.3;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-card.data {
|
||||||
|
background: linear-gradient(135deg, #111111, #1a1a1a);
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-card.data::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background:
|
||||||
|
linear-gradient(45deg, transparent 30%, rgba(0, 255, 65, 0.05) 50%, transparent 70%);
|
||||||
|
animation: dataFlow 4s linear infinite;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dataFlow {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-card.system {
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse at top, rgba(0, 255, 65, 0.1), transparent),
|
||||||
|
radial-gradient(ellipse at bottom, rgba(255, 176, 0, 0.1), transparent),
|
||||||
|
#111111;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glitch effect */
|
||||||
|
.retro-card.glitch {
|
||||||
|
animation: glitchCard 8s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-card.glitch .retro-content {
|
||||||
|
animation: glitchContent 8s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glitchCard {
|
||||||
|
0%, 90%, 100% {
|
||||||
|
transform: translate(0);
|
||||||
|
}
|
||||||
|
91% {
|
||||||
|
transform: translate(-2px, 0);
|
||||||
|
}
|
||||||
|
92% {
|
||||||
|
transform: translate(2px, 0);
|
||||||
|
}
|
||||||
|
93% {
|
||||||
|
transform: translate(-1px, 0);
|
||||||
|
}
|
||||||
|
94% {
|
||||||
|
transform: translate(1px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glitchContent {
|
||||||
|
0%, 90%, 100% {
|
||||||
|
clip-path: inset(0);
|
||||||
|
}
|
||||||
|
91% {
|
||||||
|
clip-path: inset(10px 0 85px 0);
|
||||||
|
}
|
||||||
|
92% {
|
||||||
|
clip-path: inset(80px 0 10px 0);
|
||||||
|
}
|
||||||
|
93% {
|
||||||
|
clip-path: inset(40px 0 50px 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes statusPulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes processingPulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.7;
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accessibility */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.retro-card,
|
||||||
|
.retro-card *,
|
||||||
|
.retro-card::before,
|
||||||
|
.retro-card::after {
|
||||||
|
animation: none !important;
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus states */
|
||||||
|
.retro-card:focus {
|
||||||
|
outline: 2px solid var(--primary);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* High contrast mode */
|
||||||
|
@media (prefers-contrast: high) {
|
||||||
|
.retro-card {
|
||||||
|
border-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scanline-overlay {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.retro-header {
|
||||||
|
padding: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-title {
|
||||||
|
margin: 0;
|
||||||
|
order: 3;
|
||||||
|
flex-basis: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-content {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner-bracket {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Add interactive behaviors
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const cards = document.querySelectorAll('.retro-card.interactive');
|
||||||
|
|
||||||
|
cards.forEach(card => {
|
||||||
|
// Add click ripple effect
|
||||||
|
card.addEventListener('click', (e) => {
|
||||||
|
const rect = card.getBoundingClientRect();
|
||||||
|
const x = e.clientX - rect.left;
|
||||||
|
const y = e.clientY - rect.top;
|
||||||
|
|
||||||
|
const ripple = document.createElement('div');
|
||||||
|
ripple.style.cssText = `
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(0, 255, 65, 0.3);
|
||||||
|
transform: scale(0);
|
||||||
|
animation: ripple 0.6s linear;
|
||||||
|
left: ${x - 10}px;
|
||||||
|
top: ${y - 10}px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 10;
|
||||||
|
`;
|
||||||
|
|
||||||
|
card.appendChild(ripple);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
ripple.remove();
|
||||||
|
}, 600);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add hover sound effect placeholder
|
||||||
|
card.addEventListener('mouseenter', () => {
|
||||||
|
// Placeholder for sound effect
|
||||||
|
// playSound('terminal-hover');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add ripple animation
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = `
|
||||||
|
@keyframes ripple {
|
||||||
|
to {
|
||||||
|
transform: scale(4);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
</script>
|
||||||
147
website/src/components/StatusIndicator.astro
Normal file
147
website/src/components/StatusIndicator.astro
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
---
|
||||||
|
export interface Props {
|
||||||
|
status: 'active' | 'warning' | 'success' | 'error' | 'idle';
|
||||||
|
label: string;
|
||||||
|
pulse?: boolean;
|
||||||
|
size?: 'small' | 'medium' | 'large';
|
||||||
|
}
|
||||||
|
|
||||||
|
const { status, label, pulse = true, size = 'medium' } = Astro.props;
|
||||||
|
|
||||||
|
const statusColors = {
|
||||||
|
active: '#00ff41',
|
||||||
|
warning: '#ffb000',
|
||||||
|
success: '#00ff41',
|
||||||
|
error: '#ff0040',
|
||||||
|
idle: '#888888'
|
||||||
|
};
|
||||||
|
|
||||||
|
const statusColor = statusColors[status];
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class={`status-indicator ${size} ${pulse ? 'pulse' : ''}`}>
|
||||||
|
<div class="status-dot" style={`background-color: ${statusColor}`}></div>
|
||||||
|
<span class="status-label">{label}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.status-indicator {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot {
|
||||||
|
border-radius: 50%;
|
||||||
|
position: relative;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator.small .status-dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator.medium .status-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator.large .status-dot {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-label {
|
||||||
|
color: #cccccc;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator.small .status-label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator.large .status-label {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pulse animation */
|
||||||
|
.status-indicator.pulse .status-dot {
|
||||||
|
animation: statusPulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator.pulse .status-dot::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
left: -2px;
|
||||||
|
right: -2px;
|
||||||
|
bottom: -2px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: inherit;
|
||||||
|
opacity: 0.3;
|
||||||
|
animation: statusRipple 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes statusPulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.7;
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes statusRipple {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(2);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover effects */
|
||||||
|
.status-indicator:hover .status-dot {
|
||||||
|
transform: scale(1.2);
|
||||||
|
filter: brightness(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator:hover .status-label {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Terminal-style glow effect */
|
||||||
|
.status-dot {
|
||||||
|
box-shadow:
|
||||||
|
0 0 5px currentColor,
|
||||||
|
inset 0 0 5px rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accessibility */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.status-dot,
|
||||||
|
.status-dot::before {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode adjustments */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
.status-label {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator:hover .status-label {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -26,7 +26,7 @@ which can help guide how the AI model should behave and respond to your inputs.
|
|||||||
assistants, and customize their instructions and settings from the Assistants tab.
|
assistants, and customize their instructions and settings from the Assistants tab.
|
||||||
|
|
||||||
|
description, and can be customized for different tasks.](../../../assets/assistants-ui-overview.png)
|
||||||
|
|
||||||
To find the Assistants tab:
|
To find the Assistants tab:
|
||||||
|
|
||||||
@ -76,18 +76,18 @@ Provide examples when explaining complex topics.
|
|||||||
You can quickly switch between assistants, or create and edit them, directly from the Chat screen using the
|
You can quickly switch between assistants, or create and edit them, directly from the Chat screen using the
|
||||||
assistant dropdown menu at the top:
|
assistant dropdown menu at the top:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Click the assistant's name (e.g., "Travel Planner") at the top of the Chat screen to open the dropdown menu.
|
- Click the assistant's name (e.g., "Travel Planner") at the top of the Chat screen to open the dropdown menu.
|
||||||
- The dropdown lists all of your assistants. Click on any of the assistants available to switch to it for the
|
- The dropdown lists all of your assistants. Click on any of the assistants available to switch to it for the
|
||||||
current chat session.
|
current chat session.
|
||||||
- To create a new assistant, select **Create Assistant** at the bottom of the dropdown. This opens the Add Assistant dialog:
|
- To create a new assistant, select **Create Assistant** at the bottom of the dropdown. This opens the Add Assistant dialog:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- To edit an existing assistant, click the gear (⚙️) icon next to its name in the dropdown. This opens the Edit Assistant dialog:
|
- To edit an existing assistant, click the gear (⚙️) icon next to its name in the dropdown. This opens the Edit Assistant dialog:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Add/Edit Assistant Dialogs
|
### Add/Edit Assistant Dialogs
|
||||||
- Set an (optional) emoji and name for your assistant.
|
- Set an (optional) emoji and name for your assistant.
|
||||||
|
|||||||
@ -31,7 +31,7 @@ Via Jan:
|
|||||||
2. Click <FolderOpen width={16} height={16} style={{display:"inline"}}/>
|
2. Click <FolderOpen width={16} height={16} style={{display:"inline"}}/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
Via Terminal:
|
Via Terminal:
|
||||||
|
|||||||
@ -43,7 +43,7 @@ Originally created by Georgi Gerganov, llama.cpp is designed to run large langua
|
|||||||
|
|
||||||
Find llama.cpp settings at **Settings** (<Settings width={16} height={16} style={{display:"inline"}}/>) > **Local Engine** > **llama.cpp**:
|
Find llama.cpp settings at **Settings** (<Settings width={16} height={16} style={{display:"inline"}}/>) > **Local Engine** > **llama.cpp**:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<Aside type="info">
|
<Aside type="info">
|
||||||
These are advanced settings. You typically only need to adjust them if models aren't working properly or you want to optimize performance for your specific hardware.
|
These are advanced settings. You typically only need to adjust them if models aren't working properly or you want to optimize performance for your specific hardware.
|
||||||
|
|||||||
@ -49,7 +49,7 @@ These settings control how the model thinks and performs:
|
|||||||
| **Presence Penalty** | Encourages talking about new topics | Higher values make the model explore new subjects instead of staying on one topic. |
|
| **Presence Penalty** | Encourages talking about new topics | Higher values make the model explore new subjects instead of staying on one topic. |
|
||||||
| **Frequency Penalty** | Reduces word repetition | Similar to repeat penalty but focuses on how often words are used. |
|
| **Frequency Penalty** | Reduces word repetition | Similar to repeat penalty but focuses on how often words are used. |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Model Capabilities (Edit Button)
|
## Model Capabilities (Edit Button)
|
||||||
|
|
||||||
@ -61,8 +61,8 @@ These toggle switches enable special features:
|
|||||||
- **Web Search**: Let the model search the internet for current information
|
- **Web Search**: Let the model search the internet for current information
|
||||||
- **Reasoning**: Enable step-by-step thinking for complex problems
|
- **Reasoning**: Enable step-by-step thinking for complex problems
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Hardware Settings
|
## Hardware Settings
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
title: Linux
|
title: Linux Installation
|
||||||
description: Get started quickly with Jan, an AI chat application that runs 100% offline on your desktop & mobile (*coming soon*).
|
description: Get started quickly with Jan, an AI chat application that runs 100% offline on your desktop & mobile (*coming soon*).
|
||||||
keywords:
|
keywords:
|
||||||
[
|
[
|
||||||
@ -20,20 +20,15 @@ keywords:
|
|||||||
]
|
]
|
||||||
---
|
---
|
||||||
|
|
||||||
|
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Linux Installation
|
|
||||||
Instructions for installing Jan on Linux.
|
Instructions for installing Jan on Linux.
|
||||||
|
|
||||||
## Compatibility
|
## Compatibility
|
||||||
System requirements:
|
System requirements:
|
||||||
|
|
||||||
<Tabs items={['OS', 'CPU', 'RAM', 'GPU', 'Disk']}>
|
<Tabs>
|
||||||
|
<TabItem label="OS">
|
||||||
<Tabs.Tab>
|
|
||||||
|
|
||||||
#### Debian-based (Supports `.deb` and `AppImage`)
|
#### Debian-based (Supports `.deb` and `AppImage`)
|
||||||
|
|
||||||
- Debian
|
- Debian
|
||||||
@ -62,43 +57,41 @@ System requirements:
|
|||||||
#### Independent
|
#### Independent
|
||||||
|
|
||||||
- openSUSE
|
- openSUSE
|
||||||
|
</TabItem>
|
||||||
|
|
||||||
</Tabs.Tab>
|
<TabItem label="CPU">
|
||||||
|
|
||||||
<Tabs.Tab>
|
|
||||||
- Haswell processors (Q2 2013) and newer
|
- Haswell processors (Q2 2013) and newer
|
||||||
- Tiger Lake (Q3 2020) and newer for Celeron and Pentium processors
|
- Tiger Lake (Q3 2020) and newer for Celeron and Pentium processors
|
||||||
- Excavator processors (Q2 2015) and newer
|
- Excavator processors (Q2 2015) and newer
|
||||||
|
|
||||||
<Aside type="info">
|
<Aside type="note">
|
||||||
CPU must support AVX2. See [supported processors](https://en.wikipedia.org/wiki/Advanced_Vector_Extensions#CPUs_with_AVX2).
|
CPU must support AVX2. See [supported processors](https://en.wikipedia.org/wiki/Advanced_Vector_Extensions#CPUs_with_AVX2).
|
||||||
</Aside>
|
</Aside>
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
|
|
||||||
<Tabs.Tab>
|
<TabItem label="RAM">
|
||||||
- 8GB → up to 3B parameter models (int4)
|
- 8GB → up to 3B parameter models (int4)
|
||||||
- 16GB → up to 7B parameter models (int4)
|
- 16GB → up to 7B parameter models (int4)
|
||||||
- 32GB → up to 13B parameter models (int4)
|
- 32GB → up to 13B parameter models (int4)
|
||||||
|
|
||||||
<Aside type="info">
|
<Aside type="note">
|
||||||
DDR3 or newer recommended.
|
DDR3 or newer recommended.
|
||||||
</Aside>
|
</Aside>
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
|
|
||||||
<Tabs.Tab>
|
<TabItem label="GPU">
|
||||||
- 6GB → up to 3B parameter models (int4)
|
- 6GB → up to 3B parameter models (int4)
|
||||||
- 8GB → up to 7B parameter models (int4)
|
- 8GB → up to 7B parameter models (int4)
|
||||||
- 12GB → up to 13B parameter models (int4)
|
- 12GB → up to 13B parameter models (int4)
|
||||||
|
|
||||||
<Aside type="info">
|
<Aside type="note">
|
||||||
6GB VRAM minimum required.
|
6GB VRAM minimum required.
|
||||||
</Aside>
|
</Aside>
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
|
|
||||||
<Tabs.Tab>
|
<TabItem label="Disk">
|
||||||
Minimum 10GB of free disk space required.
|
Minimum 10GB of free disk space required.
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
|
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
## Install Jan
|
## Install Jan
|
||||||
@ -110,43 +103,41 @@ Installation steps:
|
|||||||
### Step 1: Download Application
|
### Step 1: Download Application
|
||||||
|
|
||||||
Available releases:
|
Available releases:
|
||||||
<Tabs items={['Stable Release', 'Beta Release', 'Nightly Release']}>
|
<Tabs>
|
||||||
<Tabs.Tab>
|
<TabItem label="Stable Release">
|
||||||
Stable release:
|
Stable release:
|
||||||
- Ubuntu: [jan.deb](https://app.jan.ai/download/latest/linux-amd64-deb)
|
- Ubuntu: [jan.deb](https://app.jan.ai/download/latest/linux-amd64-deb)
|
||||||
- Others: [Jan.AppImage](https://app.jan.ai/download/latest/linux-amd64-appimage)
|
- Others: [Jan.AppImage](https://app.jan.ai/download/latest/linux-amd64-appimage)
|
||||||
- Official Website: https://jan.ai/download
|
- Official Website: https://jan.ai/download
|
||||||
|
</TabItem>
|
||||||
|
|
||||||
</Tabs.Tab>
|
<TabItem label="Beta Release">
|
||||||
<Tabs.Tab>
|
|
||||||
|
|
||||||
Beta release:
|
Beta release:
|
||||||
- Ubuntu: [jan.deb](https://app.jan.ai/download/beta/linux-amd64-deb)
|
- Ubuntu: [jan.deb](https://app.jan.ai/download/beta/linux-amd64-deb)
|
||||||
- Others: [Jan.AppImage](https://app.jan.ai/download/beta/linux-amd64-appimage)
|
- Others: [Jan.AppImage](https://app.jan.ai/download/beta/linux-amd64-appimage)
|
||||||
|
|
||||||
<Aside type="info">
|
<Aside type="note">
|
||||||
May contain bugs. Use with caution.
|
May contain bugs. Use with caution.
|
||||||
</Aside>
|
</Aside>
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
<Tabs.Tab>
|
|
||||||
|
|
||||||
|
<TabItem label="Nightly Release">
|
||||||
Development build:
|
Development build:
|
||||||
- Ubuntu: [jan.deb](https://app.jan.ai/download/nightly/linux-amd64-deb)
|
- Ubuntu: [jan.deb](https://app.jan.ai/download/nightly/linux-amd64-deb)
|
||||||
- Others: [Jan.AppImage](https://app.jan.ai/download/nightly/linux-amd64-appimage)
|
- Others: [Jan.AppImage](https://app.jan.ai/download/nightly/linux-amd64-appimage)
|
||||||
|
|
||||||
<Aside type="info">
|
<Aside type="note">
|
||||||
Experimental version. Expect instability.
|
Experimental version. Expect instability.
|
||||||
</Aside>
|
</Aside>
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
### Step 2: Install Application
|
### Step 2: Install Application
|
||||||
|
|
||||||
Installation commands:
|
Installation commands:
|
||||||
|
|
||||||
<Tabs items={['Ubuntu', 'Others']}>
|
<Tabs>
|
||||||
<Tabs.Tab>
|
<TabItem label="Ubuntu">
|
||||||
|
|
||||||
##### dpkg
|
##### dpkg
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
@ -158,19 +149,16 @@ sudo dpkg -i jan-linux-amd64-{version}.deb
|
|||||||
```bash
|
```bash
|
||||||
sudo apt-get install ./jan-linux-amd64-{version}.deb
|
sudo apt-get install ./jan-linux-amd64-{version}.deb
|
||||||
```
|
```
|
||||||
|
</TabItem>
|
||||||
|
|
||||||
</Tabs.Tab>
|
<TabItem label="Others">
|
||||||
|
|
||||||
<Tabs.Tab>
|
|
||||||
|
|
||||||
From the terminal, run the following commands:
|
From the terminal, run the following commands:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
chmod +x jan-linux-x86_64-{version}.AppImage
|
chmod +x jan-linux-x86_64-{version}.AppImage
|
||||||
./jan-linux-x86_64-{version}.AppImage
|
./jan-linux-x86_64-{version}.AppImage
|
||||||
```
|
```
|
||||||
|
</TabItem>
|
||||||
</Tabs.Tab>
|
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
</ol>
|
</ol>
|
||||||
@ -196,9 +184,8 @@ See [Jan Data Folder](/docs/data-folder) for details.
|
|||||||
## GPU Acceleration
|
## GPU Acceleration
|
||||||
Configuration for GPU support:
|
Configuration for GPU support:
|
||||||
|
|
||||||
<Tabs items={['NVIDIA GPU', 'AMD GPU', 'Intel Arc GPU']}>
|
<Tabs>
|
||||||
|
<TabItem label="NVIDIA GPU">
|
||||||
<Tabs.Tab>
|
|
||||||
<ol>
|
<ol>
|
||||||
|
|
||||||
### Step 1: Verify Hardware & Install Dependencies
|
### Step 1: Verify Hardware & Install Dependencies
|
||||||
@ -240,56 +227,52 @@ export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/cuda/lib64
|
|||||||
|
|
||||||
### Step 2: Enable GPU Acceleration
|
### Step 2: Enable GPU Acceleration
|
||||||
|
|
||||||
1. Navigate to **Settings** (<Settings width={16} height={16} style={{display:"inline"}}/>) > **Local Engine** > **Llama.cpp**
|
1. Navigate to **Settings** > **Local Engine** > **Llama.cpp**
|
||||||
2. Select appropriate backend in **llama-cpp Backend**. Details in our [guide](/docs/local-engines/llama-cpp).
|
2. Select appropriate backend in **llama-cpp Backend**. Details in our [guide](/docs/local-engines/llama-cpp).
|
||||||
|
|
||||||
<Aside type="info">
|
<Aside type="note">
|
||||||
CUDA offers better performance than Vulkan.
|
CUDA offers better performance than Vulkan.
|
||||||
</Aside>
|
</Aside>
|
||||||
|
|
||||||
</ol>
|
</ol>
|
||||||
|
</TabItem>
|
||||||
|
|
||||||
</Tabs.Tab>
|
<TabItem label="AMD GPU">
|
||||||
|
|
||||||
<Tabs.Tab>
|
|
||||||
Requires Vulkan support.
|
Requires Vulkan support.
|
||||||
|
|
||||||
1. Navigate to **Settings** (<Settings width={16} height={16} style={{display:"inline"}}/>) > **Hardware** > **GPUs**
|
1. Navigate to **Settings** > **Hardware** > **GPUs**
|
||||||
2. Select appropriate backend in **llama-cpp Backend**. Details in our [guide](/docs/local-engines/llama-cpp).
|
2. Select appropriate backend in **llama-cpp Backend**. Details in our [guide](/docs/local-engines/llama-cpp).
|
||||||
|
</TabItem>
|
||||||
|
|
||||||
</Tabs.Tab>
|
<TabItem label="Intel Arc GPU">
|
||||||
|
|
||||||
<Tabs.Tab>
|
|
||||||
Requires Vulkan support.
|
Requires Vulkan support.
|
||||||
|
|
||||||
1. Navigate to **Settings** (<Settings width={16} height={16} style={{display:"inline"}}/>) > **Hardware** > **GPUs**
|
1. Navigate to **Settings** > **Hardware** > **GPUs**
|
||||||
2. Select appropriate backend in **llama-cpp Backend**. Details in our [guide](/docs/local-engines/llama-cpp).
|
2. Select appropriate backend in **llama-cpp Backend**. Details in our [guide](/docs/local-engines/llama-cpp).
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
|
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
## Uninstall Jan
|
## Uninstall Jan
|
||||||
|
|
||||||
Removal commands:
|
Removal commands:
|
||||||
<Tabs items={['Ubuntu', 'Others']}>
|
<Tabs>
|
||||||
<Tabs.Tab>
|
<TabItem label="Ubuntu">
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
sudo apt-get remove jan
|
sudo apt-get remove jan
|
||||||
rm -rf Jan
|
rm -rf Jan
|
||||||
rm -rf ~/.config/Jan/data
|
rm -rf ~/.config/Jan/data
|
||||||
rm -rf ~/.config/Jan/cache
|
rm -rf ~/.config/Jan/cache
|
||||||
```
|
```
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
<Tabs.Tab>
|
|
||||||
|
|
||||||
|
<TabItem label="Others">
|
||||||
```bash
|
```bash
|
||||||
rm jan-linux-x86_64-{version}.AppImage
|
rm jan-linux-x86_64-{version}.AppImage
|
||||||
rm -rf ~/.config/Jan
|
rm -rf ~/.config/Jan
|
||||||
```
|
```
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
<Aside type="warning">
|
<Aside type="caution">
|
||||||
These commands permanently delete application data.
|
These commands permanently delete application data.
|
||||||
</Aside>
|
</Aside>
|
||||||
|
|||||||
@ -20,6 +20,8 @@ keywords:
|
|||||||
]
|
]
|
||||||
---
|
---
|
||||||
|
|
||||||
|
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -59,16 +61,15 @@ Installation steps:
|
|||||||
### Step 1: Download Application
|
### Step 1: Download Application
|
||||||
|
|
||||||
Select version:
|
Select version:
|
||||||
<Tabs items={['Stable Release', 'Beta Release', 'Nightly Release']}>
|
<Tabs>
|
||||||
<Tabs.Tab>
|
<TabItem label="Stable Release">
|
||||||
Get Jan from here:
|
Get Jan from here:
|
||||||
|
|
||||||
- [Download Jan's Stable Version](https://app.jan.ai/download/latest/mac-universal)
|
- [Download Jan's Stable Version](https://app.jan.ai/download/latest/mac-universal)
|
||||||
- Official Website: https://jan.ai/download
|
- Official Website: https://jan.ai/download
|
||||||
|
</TabItem>
|
||||||
|
|
||||||
</Tabs.Tab>
|
<TabItem label="Beta Release">
|
||||||
<Tabs.Tab>
|
|
||||||
|
|
||||||
Beta: New features with potential instability.
|
Beta: New features with potential instability.
|
||||||
|
|
||||||
[Download Jan's Beta Version](https://app.jan.ai/download/beta/mac-universal)
|
[Download Jan's Beta Version](https://app.jan.ai/download/beta/mac-universal)
|
||||||
@ -76,9 +77,9 @@ Beta: New features with potential instability.
|
|||||||
<Aside type="warning">
|
<Aside type="warning">
|
||||||
May contain bugs.
|
May contain bugs.
|
||||||
</Aside>
|
</Aside>
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
<Tabs.Tab>
|
|
||||||
|
|
||||||
|
<TabItem label="Nightly Release">
|
||||||
Nightly: Latest features, less stable.
|
Nightly: Latest features, less stable.
|
||||||
|
|
||||||
[Download Jan's Nightly Version](https://app.jan.ai/download/nightly/mac-universal)
|
[Download Jan's Nightly Version](https://app.jan.ai/download/nightly/mac-universal)
|
||||||
@ -86,7 +87,7 @@ Nightly: Latest features, less stable.
|
|||||||
<Aside type="info">
|
<Aside type="info">
|
||||||
Expect potential instability.
|
Expect potential instability.
|
||||||
</Aside>
|
</Aside>
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -20,6 +20,8 @@ keywords:
|
|||||||
]
|
]
|
||||||
---
|
---
|
||||||
|
|
||||||
|
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Windows Installation
|
# Windows Installation
|
||||||
@ -30,14 +32,14 @@ keywords:
|
|||||||
- **Operating System**: Windows 10 or higher.
|
- **Operating System**: Windows 10 or higher.
|
||||||
- **CPU**
|
- **CPU**
|
||||||
|
|
||||||
<Tabs items={['Intel', 'AMD']}>
|
<Tabs>
|
||||||
<Tabs.Tab>
|
<TabItem label="Intel">
|
||||||
- Intel: Haswell (Q2 2013) or newer
|
- Intel: Haswell (Q2 2013) or newer
|
||||||
- Intel Celeron/Pentium: Tiger Lake (Q3 2020) or newer
|
- Intel Celeron/Pentium: Tiger Lake (Q3 2020) or newer
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
<Tabs.Tab>
|
<TabItem label="AMD">
|
||||||
- Excavator processors (Q2 2015) and newer.
|
- Excavator processors (Q2 2015) and newer.
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
<Aside type="info">
|
<Aside type="info">
|
||||||
@ -72,13 +74,13 @@ Minimum 6GB VRAM recommended for NVIDIA, AMD, or Intel Arc GPUs.
|
|||||||
|
|
||||||
### Step 1: Download Application
|
### Step 1: Download Application
|
||||||
|
|
||||||
<Tabs items={['Stable Release', 'Beta Release', 'Nightly Release']}>
|
<Tabs>
|
||||||
<Tabs.Tab>
|
<TabItem label="Stable Release">
|
||||||
- [Download Stable Jan](https://app.jan.ai/download/latest/win-x64)
|
- [Download Stable Jan](https://app.jan.ai/download/latest/win-x64)
|
||||||
- Official Website: [Download Jan](https://jan.ai/download)
|
- Official Website: [Download Jan](https://jan.ai/download)
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
<Tabs.Tab>
|
|
||||||
|
|
||||||
|
<TabItem label="Beta Release">
|
||||||
Beta: Contains newer features but may be unstable
|
Beta: Contains newer features but may be unstable
|
||||||
|
|
||||||
[Download Beta Jan](https://app.jan.ai/download/beta/win-x64)
|
[Download Beta Jan](https://app.jan.ai/download/beta/win-x64)
|
||||||
@ -86,9 +88,9 @@ Beta: Contains newer features but may be unstable
|
|||||||
<Aside type="warning">
|
<Aside type="warning">
|
||||||
May be unstable
|
May be unstable
|
||||||
</Aside>
|
</Aside>
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
<Tabs.Tab>
|
|
||||||
|
|
||||||
|
<TabItem label="Nightly Release">
|
||||||
Nightly: Development build with latest features
|
Nightly: Development build with latest features
|
||||||
|
|
||||||
[Download Nightly Jan](https://app.jan.ai/download/nightly/win-x64)
|
[Download Nightly Jan](https://app.jan.ai/download/nightly/win-x64)
|
||||||
@ -96,7 +98,7 @@ Nightly: Development build with latest features
|
|||||||
<Aside type="warning">
|
<Aside type="warning">
|
||||||
Unstable development build
|
Unstable development build
|
||||||
</Aside>
|
</Aside>
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
### Step 2: Install Application
|
### Step 2: Install Application
|
||||||
@ -121,9 +123,8 @@ See [Jan Data Folder](/docs/data-folder) for complete folder structure details.
|
|||||||
|
|
||||||
## GPU Acceleration
|
## GPU Acceleration
|
||||||
|
|
||||||
<Tabs items={['NVIDIA GPU', 'AMD GPU', 'Intel Arc GPU']}>
|
<Tabs>
|
||||||
|
<TabItem label="NVIDIA GPU">
|
||||||
<Tabs.Tab>
|
|
||||||
|
|
||||||
<ol>
|
<ol>
|
||||||
|
|
||||||
@ -152,26 +153,26 @@ nvcc --version
|
|||||||
```
|
```
|
||||||
### Step 2: Enable GPU Acceleration
|
### Step 2: Enable GPU Acceleration
|
||||||
|
|
||||||
Navigate to **Settings** (<Settings width={16} height={16} style={{display:"inline"}}/>) > **Hardware** > **GPUs**
|
Navigate to **Settings** > **Hardware** > **GPUs**
|
||||||
and toggle the **ON** switch if not enabled.
|
and toggle the **ON** switch if not enabled.
|
||||||
|
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
|
|
||||||
<Tabs.Tab>
|
<TabItem label="AMD GPU">
|
||||||
AMD GPUs require **Vulkan** support.
|
AMD GPUs require **Vulkan** support.
|
||||||
|
|
||||||
Navigate to **Settings** (<Settings width={16} height={16} style={{display:"inline"}}/>) > **Hardware** > **GPUs**
|
Navigate to **Settings** > **Hardware** > **GPUs**
|
||||||
and toggle the **ON** switch if not enabled.
|
and toggle the **ON** switch if not enabled.
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
|
|
||||||
<Tabs.Tab>
|
<TabItem label="Intel Arc GPU">
|
||||||
Intel Arc GPUs require **Vulkan** support.
|
Intel Arc GPUs require **Vulkan** support.
|
||||||
|
|
||||||
Navigate to **Settings** (<Settings width={16} height={16} style={{display:"inline"}}/>) > **Hardware** > **GPUs**
|
Navigate to **Settings** > **Hardware** > **GPUs**
|
||||||
and toggle the **ON** switch if not enabled.
|
and toggle the **ON** switch if not enabled.
|
||||||
</Tabs.Tab>
|
</TabItem>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -75,7 +75,7 @@ not about understanding every word; it's about finding the needle in a haystack
|
|||||||
|
|
||||||
Jan-Nano-128k has been rigorously evaluated on the SimpleQA benchmark using our MCP-based methodology, demonstrating superior performance compared to its predecessor:
|
Jan-Nano-128k has been rigorously evaluated on the SimpleQA benchmark using our MCP-based methodology, demonstrating superior performance compared to its predecessor:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
**Key findings:**
|
**Key findings:**
|
||||||
- 15% improvement over Jan-Nano-32k on complex multi-document tasks
|
- 15% improvement over Jan-Nano-32k on complex multi-document tasks
|
||||||
|
|||||||
@ -20,7 +20,7 @@ import { Aside } from '@astrojs/starlight/components';
|
|||||||
|
|
||||||
# Jan Nano
|
# Jan Nano
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Why Jan Nano?
|
## Why Jan Nano?
|
||||||
|
|
||||||
@ -64,7 +64,7 @@ Download Jan from [here](https://jan.ai/docs/desktop/).
|
|||||||
**Step 2**
|
**Step 2**
|
||||||
Go to the Hub Tab, search for Jan-Nano-Gguf, and click on the download button to the best model size for your system.
|
Go to the Hub Tab, search for Jan-Nano-Gguf, and click on the download button to the best model size for your system.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
**Step 3**
|
**Step 3**
|
||||||
Go to **Settings** > **Model Providers** > **Llama.cpp** click on the pencil icon and enable tool use for Jan-Nano-Gguf.
|
Go to **Settings** > **Model Providers** > **Llama.cpp** click on the pencil icon and enable tool use for Jan-Nano-Gguf.
|
||||||
@ -76,12 +76,12 @@ API. You can get a free API key from [here](https://serper.dev/). Sign up and th
|
|||||||
**Step 5**
|
**Step 5**
|
||||||
Add the serper MCP to Jan via the **Settings** > **MCP Servers** tab.
|
Add the serper MCP to Jan via the **Settings** > **MCP Servers** tab.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
**Step 6**
|
**Step 6**
|
||||||
Open up a new chat and ask Jan-Nano to search the web for you.
|
Open up a new chat and ask Jan-Nano to search the web for you.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Queries to Try
|
## Queries to Try
|
||||||
|
|
||||||
|
|||||||
@ -47,7 +47,7 @@ Jan will indicate if a model might be **Slow on your device** or **Not enough RA
|
|||||||
</Aside>
|
</Aside>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
#### 2. Import from [Hugging Face](https://huggingface.co/)
|
#### 2. Import from [Hugging Face](https://huggingface.co/)
|
||||||
@ -64,11 +64,11 @@ You can download models with a direct link from Hugging Face:
|
|||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
**Copy the model ID.**
|
**Copy the model ID.**
|
||||||
|
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
**Paste it in Jan's Hub Search Bar.**
|
**Paste it in Jan's Hub Search Bar.**
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
#### 3. Import Local Files
|
#### 3. Import Local Files
|
||||||
@ -87,15 +87,15 @@ quality or unexpected outputs. Learn about [model configurations here](./model-p
|
|||||||
</Aside>
|
</Aside>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
#### 4. Manual Setup
|
#### 4. Manual Setup
|
||||||
@ -176,7 +176,7 @@ models. Here is an example of model parameters:
|
|||||||
3. Select the three dots <EllipsisVertical width={16} height={16} style={{display:"inline"}}/> icon next to it and select **Delete Model**
|
3. Select the three dots <EllipsisVertical width={16} height={16} style={{display:"inline"}}/> icon next to it and select **Delete Model**
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
|
|
||||||
@ -195,8 +195,8 @@ Anthropic (Claude), Groq, Mistral, and more.
|
|||||||
4. The activated cloud models will be available in your model selector inside the **Chat** panel
|
4. The activated cloud models will be available in your model selector inside the **Chat** panel
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
As soon as you add your key for a model provider like Anthropic or OpenAI, you will be able to pick one of their models to chat with.
|
As soon as you add your key for a model provider like Anthropic or OpenAI, you will be able to pick one of their models to chat with.
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|||||||
@ -39,7 +39,7 @@ complexity of managing Python environments or dependencies locally.
|
|||||||
|
|
||||||
1. **Enable MCP**: Go to **Settings** > **MCP Servers**, toggle **Allow All MCP Tool Permission** ON
|
1. **Enable MCP**: Go to **Settings** > **MCP Servers**, toggle **Allow All MCP Tool Permission** ON
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<Aside type="info">
|
<Aside type="info">
|
||||||
Don't forget that MCP gets enabled once you turn on Experimental Features in Jan's General settings.
|
Don't forget that MCP gets enabled once you turn on Experimental Features in Jan's General settings.
|
||||||
@ -47,11 +47,11 @@ Don't forget that MCP gets enabled once you turn on Experimental Features in Jan
|
|||||||
|
|
||||||
2. **Get API Key**: Sign up at [e2b.dev](https://e2b.dev/), generate an API key
|
2. **Get API Key**: Sign up at [e2b.dev](https://e2b.dev/), generate an API key
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Add a meaningful name to your key.
|
Add a meaningful name to your key.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
3. **Add MCP Server**: Click `+` in MCP Servers section
|
3. **Add MCP Server**: Click `+` in MCP Servers section
|
||||||
|
|
||||||
@ -63,12 +63,12 @@ Configure:
|
|||||||
- Key: `E2B_API_KEY`
|
- Key: `E2B_API_KEY`
|
||||||
- Value: `your-api-key`
|
- Value: `your-api-key`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
4. **Verify**: Check server shows as active
|
4. **Verify**: Check server shows as active
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Pre-installed Libraries
|
## Pre-installed Libraries
|
||||||
|
|
||||||
@ -117,13 +117,13 @@ model with tool calling capabilities you'd like.
|
|||||||
Make sure you activate Tools on the model you're using.
|
Make sure you activate Tools on the model you're using.
|
||||||
</Aside>
|
</Aside>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Basic Data Analysis
|
### Basic Data Analysis
|
||||||
|
|
||||||
Start small. Open a new chat, confirm that the model has tools enabled and ask it to create a small dataset of 100 students with grades and study hours.
|
Start small. Open a new chat, confirm that the model has tools enabled and ask it to create a small dataset of 100 students with grades and study hours.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -138,9 +138,9 @@ The model will:
|
|||||||
4. Add trend line
|
4. Add trend line
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<Aside type="warning">
|
<Aside type="warning">
|
||||||
|
|||||||
@ -53,7 +53,7 @@ verify tool calling is enabled in model parameters.
|
|||||||
1. Go to **Settings** > **MCP Servers**
|
1. Go to **Settings** > **MCP Servers**
|
||||||
2. Toggle **Allow All MCP Tool Permission** ON
|
2. Toggle **Allow All MCP Tool Permission** ON
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Get API Key
|
### Get API Key
|
||||||
|
|
||||||
@ -62,7 +62,7 @@ verify tool calling is enabled in model parameters.
|
|||||||
3. Generate API key
|
3. Generate API key
|
||||||
4. Save the key
|
4. Save the key
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Configure MCP Server
|
### Configure MCP Server
|
||||||
|
|
||||||
@ -77,13 +77,13 @@ Click `+` in MCP Servers section:
|
|||||||
- Key: `EXA_API_KEY`
|
- Key: `EXA_API_KEY`
|
||||||
- Value: `your-api-key`
|
- Value: `your-api-key`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Verify Setup
|
### Verify Setup
|
||||||
|
|
||||||
Check server status in the MCP Servers list.
|
Check server status in the MCP Servers list.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Model Configuration
|
### Model Configuration
|
||||||
|
|
||||||
@ -94,13 +94,13 @@ Use a compatible model provider:
|
|||||||
- **OpenAI**
|
- **OpenAI**
|
||||||
- **OpenRouter**
|
- **OpenRouter**
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
Start a new chat with a tool-enabled model. Exa tools will appear in the available tools list.
|
Start a new chat with a tool-enabled model. Exa tools will appear in the available tools list.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Example Queries
|
### Example Queries
|
||||||
|
|
||||||
@ -109,7 +109,7 @@ Start a new chat with a tool-enabled model. Exa tools will appear in the availab
|
|||||||
What is happening this week, mid July 2025, in Sydney, Australia?
|
What is happening this week, mid July 2025, in Sydney, Australia?
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
**Investment Research:**
|
**Investment Research:**
|
||||||
```
|
```
|
||||||
|
|||||||
@ -126,7 +126,7 @@ To illustrate how MCPs can be used within Jan, we will walk through an example u
|
|||||||
Before we begin, you will need to enable experimental features at `General` > `Advanced`. Next, go to `Settings` > `MCP Servers`, and toggle
|
Before we begin, you will need to enable experimental features at `General` > `Advanced`. Next, go to `Settings` > `MCP Servers`, and toggle
|
||||||
the `Allow All MCP Tool Permission` switch ON.
|
the `Allow All MCP Tool Permission` switch ON.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Please note that you will also need to have **NodeJS** and/or **Python** installed on your machine. In case you don't
|
Please note that you will also need to have **NodeJS** and/or **Python** installed on your machine. In case you don't
|
||||||
have either, you can download them from the official websites at the links below:
|
have either, you can download them from the official websites at the links below:
|
||||||
@ -138,7 +138,7 @@ have either, you can download them from the official websites at the links below
|
|||||||
|
|
||||||
- Click on the `+` sign on the upper right-hand corner of the MCP box.
|
- Click on the `+` sign on the upper right-hand corner of the MCP box.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Enter the following details to configure the BrowserMCP:
|
- Enter the following details to configure the BrowserMCP:
|
||||||
- **Server Name**: `browsermcp`
|
- **Server Name**: `browsermcp`
|
||||||
@ -146,35 +146,35 @@ have either, you can download them from the official websites at the links below
|
|||||||
- **Arguments**: `@browsermcp/mcp`
|
- **Arguments**: `@browsermcp/mcp`
|
||||||
- **Environment Variables**: You can leave this field empty.
|
- **Environment Variables**: You can leave this field empty.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Check that the server has been activated successfully.
|
- Check that the server has been activated successfully.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Open your favorite chrome-based browser (e.g., Google Chrome, Brave, Vivaldi, Microsoft Edge, etc...) and navigate to the
|
- Open your favorite chrome-based browser (e.g., Google Chrome, Brave, Vivaldi, Microsoft Edge, etc...) and navigate to the
|
||||||
[Browser MCP Extension Page](https://chromewebstore.google.com/detail/browser-mcp-automate-your/bjfgambnhccakkhmkepdoekmckoijdlc).
|
[Browser MCP Extension Page](https://chromewebstore.google.com/detail/browser-mcp-automate-your/bjfgambnhccakkhmkepdoekmckoijdlc).
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Make sure to enable the extension to run on private windows. Since Browser Use will have access to all sites you've
|
- Make sure to enable the extension to run on private windows. Since Browser Use will have access to all sites you've
|
||||||
already logged into in your regular browser session, it is best to give it a clean slate to start from.
|
already logged into in your regular browser session, it is best to give it a clean slate to start from.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Enable the extension to run on private windows by clicking on it and Connecting to the Browser MCP server.
|
- Enable the extension to run on private windows by clicking on it and Connecting to the Browser MCP server.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- Go back to Jan and pick a model with good tool use capabilities, for example, Claude 3.7 and 4 Sonnet, or Claude 4 Opus,
|
- Go back to Jan and pick a model with good tool use capabilities, for example, Claude 3.7 and 4 Sonnet, or Claude 4 Opus,
|
||||||
and make sure to enable tool calling via the UI by going to **Model Providers > Anthropic** and, after you have entered your
|
and make sure to enable tool calling via the UI by going to **Model Providers > Anthropic** and, after you have entered your
|
||||||
API key, enable tool from the **+** button.
|
API key, enable tool from the **+** button.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
You can check and see if this was accurate below.
|
You can check and see if this was accurate below.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Troubleshooting
|
## Troubleshooting
|
||||||
|
|||||||
@ -40,7 +40,7 @@ Ensure your API key has sufficient credits
|
|||||||
3. Insert your **API Key**
|
3. Insert your **API Key**
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
### Step 3: Start Using Anthropic's Models
|
### Step 3: Start Using Anthropic's Models
|
||||||
|
|||||||
@ -40,7 +40,7 @@ Ensure your API key has sufficient credits.
|
|||||||
3. Insert your **API Key**
|
3. Insert your **API Key**
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
### Step 3: Start Using Cohere's Models
|
### Step 3: Start Using Cohere's Models
|
||||||
|
|||||||
@ -38,7 +38,7 @@ Ensure your API key has sufficient credits
|
|||||||
3. Insert your **API Key**
|
3. Insert your **API Key**
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
### Step 3: Start Using Google's Models
|
### Step 3: Start Using Google's Models
|
||||||
|
|||||||
@ -38,7 +38,7 @@ Ensure your API key has sufficient credits
|
|||||||
3. Insert your **API Key**
|
3. Insert your **API Key**
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -41,7 +41,7 @@ Ensure your API key has sufficient credits
|
|||||||
3. Insert your **API Key**
|
3. Insert your **API Key**
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
### Step 3: Start Using Mistral's Models
|
### Step 3: Start Using Mistral's Models
|
||||||
|
|||||||
@ -42,7 +42,7 @@ Ensure your API key has sufficient credits
|
|||||||
3. Insert your API Key
|
3. Insert your API Key
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
### Step 3: Start Using OpenAI's Models
|
### Step 3: Start Using OpenAI's Models
|
||||||
|
|||||||
@ -51,7 +51,7 @@ Ensure your API key has sufficient credits. OpenRouter credits work across all a
|
|||||||
3. Insert your **API Key**
|
3. Insert your **API Key**
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
### Step 3: Start Using OpenRouter Models
|
### Step 3: Start Using OpenRouter Models
|
||||||
|
|||||||
@ -53,7 +53,7 @@ To download models from Hugging Face that require authentication, for example, l
|
|||||||
|
|
||||||
## Model Settings (Gear Icon)
|
## Model Settings (Gear Icon)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Click the gear icon next to a model to configure advanced settings:
|
Click the gear icon next to a model to configure advanced settings:
|
||||||
- **Context Size**: Maximum prompt context length
|
- **Context Size**: Maximum prompt context length
|
||||||
@ -76,7 +76,7 @@ Monitor and manage system resources at **Settings > Hardware**:
|
|||||||
- **GPU Acceleration**: Enable/disable and configure GPU settings
|
- **GPU Acceleration**: Enable/disable and configure GPU settings
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
## Preferences
|
## Preferences
|
||||||
@ -85,14 +85,14 @@ Monitor and manage system resources at **Settings > Hardware**:
|
|||||||
Control the visual theme of Jan's interface with any color combo you'd like. You can also control the color use in the code blocks.
|
Control the visual theme of Jan's interface with any color combo you'd like. You can also control the color use in the code blocks.
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
### Spell Check
|
### Spell Check
|
||||||
Jan includes a built-in spell check feature to help catch typing errors in your messages.
|
Jan includes a built-in spell check feature to help catch typing errors in your messages.
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
|
|
||||||
@ -110,7 +110,7 @@ Read more about that we collect with opt-in users at [Privacy](/docs/privacy).
|
|||||||
</Aside>
|
</Aside>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
### Log Management
|
### Log Management
|
||||||
@ -122,7 +122,7 @@ Read more about that we collect with opt-in users at [Privacy](/docs/privacy).
|
|||||||
- To open logs from Jan's interface: at **Logs**, click <FolderOpen width={16} height={16} style={{display:"inline"}}/> icon to open App Logs & Cortex Logs:
|
- To open logs from Jan's interface: at **Logs**, click <FolderOpen width={16} height={16} style={{display:"inline"}}/> icon to open App Logs & Cortex Logs:
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
**2. Clear Logs**
|
**2. Clear Logs**
|
||||||
@ -134,7 +134,7 @@ This action cannot be undone.
|
|||||||
</Aside>
|
</Aside>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
|
|
||||||
@ -145,7 +145,7 @@ Jan stores your data locally in your own filesystem in a universal file format.
|
|||||||
|
|
||||||
At **Jan Data Folder**, click <FolderOpen width={16} height={16} style={{display:"inline"}}/> icon to open Jan application's folder:
|
At **Jan Data Folder**, click <FolderOpen width={16} height={16} style={{display:"inline"}}/> icon to open Jan application's folder:
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
**2. Edit Jan Data Folder**
|
**2. Edit Jan Data Folder**
|
||||||
@ -161,7 +161,7 @@ An app restart will be required afterward.
|
|||||||
4. Click **Yes, Proceed**
|
4. Click **Yes, Proceed**
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
### HTTPs Proxy
|
### HTTPs Proxy
|
||||||
@ -184,7 +184,7 @@ Where:
|
|||||||
- `<port>`: The port number for the proxy server
|
- `<port>`: The port number for the proxy server
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
**Ignore SSL Certificates**
|
**Ignore SSL Certificates**
|
||||||
@ -199,7 +199,7 @@ Only enable this option if you trust your network environment.
|
|||||||
</Aside>
|
</Aside>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
|
|
||||||
@ -218,7 +218,7 @@ Only use factory reset if:
|
|||||||
To begin the process:
|
To begin the process:
|
||||||
1. At **Reset to Factory Settings**, click **Reset** button
|
1. At **Reset to Factory Settings**, click **Reset** button
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
2. In the confirmation dialog:
|
2. In the confirmation dialog:
|
||||||
- Type the word **RESET** to confirm
|
- Type the word **RESET** to confirm
|
||||||
@ -226,5 +226,5 @@ To begin the process:
|
|||||||
- Click **Reset Now**
|
- Click **Reset Now**
|
||||||
3. App restart is required upon confirmation
|
3. App restart is required upon confirmation
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|||||||
@ -15,8 +15,7 @@ keywords:
|
|||||||
]
|
]
|
||||||
---
|
---
|
||||||
|
|
||||||
|
import { Aside } from '@astrojs/starlight/components';
|
||||||
# Start Chatting
|
|
||||||
|
|
||||||
<ol>
|
<ol>
|
||||||
|
|
||||||
@ -35,36 +34,36 @@ Jan requires a model to chat. Download one from the Hub:
|
|||||||
3. Select one matching your hardware specs
|
3. Select one matching your hardware specs
|
||||||
4. Click **Download**
|
4. Click **Download**
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<Aside type="warning">
|
<Aside type="caution">
|
||||||
Models consume memory and processing power. Choose based on your hardware specs.
|
Models consume memory and processing power. Choose based on your hardware specs.
|
||||||
</Aside>
|
</Aside>
|
||||||
|
|
||||||
**HuggingFace models:** Some require an access token. Add yours in **Settings > Model Providers > Llama.cpp > Hugging Face Access Token**.
|
**HuggingFace models:** Some require an access token. Add yours in **Settings > Model Providers > Llama.cpp > Hugging Face Access Token**.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Step 3: Enable GPU Acceleration (Optional)
|
### Step 3: Enable GPU Acceleration (Optional)
|
||||||
|
|
||||||
For Windows/Linux with compatible graphics cards:
|
For Windows/Linux with compatible graphics cards:
|
||||||
|
|
||||||
1. Go to **(<Settings width={16} height={16} style={{display:"inline"}}/>) Settings** > **Hardware**
|
1. Go to **Settings** > **Hardware**
|
||||||
2. Toggle **GPUs** to ON
|
2. Toggle **GPUs** to ON
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<Aside type="info">
|
<Aside type="note">
|
||||||
Install required drivers before enabling GPU acceleration. See setup guides for [Windows](/docs/desktop/windows#gpu-acceleration) & [Linux](/docs/desktop/linux#gpu-acceleration).
|
Install required drivers before enabling GPU acceleration. See setup guides for [Windows](/docs/desktop/windows#gpu-acceleration) & [Linux](/docs/desktop/linux#gpu-acceleration).
|
||||||
</Aside>
|
</Aside>
|
||||||
|
|
||||||
### Step 4: Start Chatting
|
### Step 4: Start Chatting
|
||||||
|
|
||||||
1. Click **New Chat** (<SquarePen width={16} height={16} style={{display:"inline"}}/>) icon
|
1. Click the **New Chat** icon
|
||||||
2. Select your model in the input field dropdown
|
2. Select your model in the input field dropdown
|
||||||
3. Type your message and start chatting
|
3. Type your message and start chatting
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
@ -79,32 +78,32 @@ Jan organizes conversations into threads for easy tracking and revisiting.
|
|||||||
- **Favorites**: Pin important threads for quick access
|
- **Favorites**: Pin important threads for quick access
|
||||||
- **Recents**: Access recently used threads
|
- **Recents**: Access recently used threads
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Edit Chat Titles
|
### Edit Chat Titles
|
||||||
|
|
||||||
1. Hover over a conversation in the sidebar
|
1. Hover over a conversation in the sidebar
|
||||||
2. Click **three dots** (<Ellipsis width={16} height={16} style={{display:"inline"}}/>) icon
|
2. Click the **three dots** icon
|
||||||
3. Click <Pencil width={16} height={16} style={{display:"inline"}}/> **Rename**
|
3. Click **Rename**
|
||||||
4. Enter new title and save
|
4. Enter new title and save
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Delete Threads
|
### Delete Threads
|
||||||
|
|
||||||
<Aside type="warning">
|
<Aside type="caution">
|
||||||
Thread deletion is permanent. No undo available.
|
Thread deletion is permanent. No undo available.
|
||||||
</Aside>
|
</Aside>
|
||||||
|
|
||||||
**Single thread:**
|
**Single thread:**
|
||||||
1. Hover over thread in sidebar
|
1. Hover over thread in sidebar
|
||||||
2. Click **three dots** (<Ellipsis width={16} height={16} style={{display:"inline"}}/>) icon
|
2. Click the **three dots** icon
|
||||||
3. Click <Trash2 width={16} height={16} style={{display:"inline"}}/> **Delete**
|
3. Click **Delete**
|
||||||
|
|
||||||
**All threads:**
|
**All threads:**
|
||||||
1. Hover over `Recents` category
|
1. Hover over `Recents` category
|
||||||
2. Click **three dots** (<Ellipsis width={16} height={16} style={{display:"inline"}}/>) icon
|
2. Click the **three dots** icon
|
||||||
3. Select <Trash2 width={16} height={16} style={{display:"inline"}}/> **Delete All**
|
3. Select **Delete All**
|
||||||
|
|
||||||
## Advanced Features
|
## Advanced Features
|
||||||
|
|
||||||
@ -116,9 +115,9 @@ Customize how models respond:
|
|||||||
2. Or go to the **Assistant tab** to create custom instructions
|
2. Or go to the **Assistant tab** to create custom instructions
|
||||||
3. Instructions work across all models
|
3. Instructions work across all models
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Model Parameters
|
### Model Parameters
|
||||||
|
|
||||||
@ -127,7 +126,7 @@ Fine-tune model behavior:
|
|||||||
- Adjust parameters in **Assistant Settings**
|
- Adjust parameters in **Assistant Settings**
|
||||||
- Switch models via the **model selector**
|
- Switch models via the **model selector**
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Connect Cloud Models (Optional)
|
### Connect Cloud Models (Optional)
|
||||||
|
|
||||||
@ -138,6 +137,6 @@ Connect to OpenAI, Anthropic, Groq, Mistral, and others:
|
|||||||
3. Click the **Gear icon** beside the provider
|
3. Click the **Gear icon** beside the provider
|
||||||
4. Add your API key (ensure sufficient credits)
|
4. Add your API key (ensure sufficient credits)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
For detailed setup, see [Remote APIs](/docs/remote-models/openai).
|
For detailed setup, see [Remote APIs](/docs/remote-models/openai).
|
||||||
|
|||||||
@ -36,7 +36,7 @@ Error logs are essential for troubleshooting issues and getting help from Jan te
|
|||||||
2. Choose **App Log**
|
2. Choose **App Log**
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
#### Through Terminal
|
#### Through Terminal
|
||||||
@ -203,7 +203,7 @@ To verify GPU acceleration is turned on:
|
|||||||
3. Verify your selected GPU(s) are visible in **System Monitor** from Jan's footer
|
3. Verify your selected GPU(s) are visible in **System Monitor** from Jan's footer
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -29,7 +29,7 @@ Jan stores all your data locally on your computer. No cloud storage, no external
|
|||||||
1. Go to Settings (⚙️) > Advanced Settings
|
1. Go to Settings (⚙️) > Advanced Settings
|
||||||
2. Click the folder icon 📁
|
2. Click the folder icon 📁
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
**Via File Explorer:**
|
**Via File Explorer:**
|
||||||
|
|
||||||
@ -59,7 +59,7 @@ $XDG_CONFIG_HOME/Jan/data
|
|||||||
|
|
||||||
When Jan's local server is running, you can monitor real-time activity in the logs folder:
|
When Jan's local server is running, you can monitor real-time activity in the logs folder:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Live Log Monitoring
|
### Live Log Monitoring
|
||||||
|
|
||||||
|
|||||||
@ -27,7 +27,7 @@ llama.cpp is the engine that runs AI models locally on your computer. It's what
|
|||||||
|
|
||||||
Find llama.cpp settings at **Settings** (⚙️) > **Local Engine** > **llama.cpp**:
|
Find llama.cpp settings at **Settings** (⚙️) > **Local Engine** > **llama.cpp**:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<Aside type="info">
|
<Aside type="info">
|
||||||
Most users don't need to change these settings. Jan picks good defaults for your hardware automatically.
|
Most users don't need to change these settings. Jan picks good defaults for your hardware automatically.
|
||||||
|
|||||||
@ -31,7 +31,7 @@ When Jan isn't working properly, error logs help identify the problem. Here's ho
|
|||||||
1. Look for **System Monitor** in the footer
|
1. Look for **System Monitor** in the footer
|
||||||
2. Click **App Log**
|
2. Click **App Log**
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
**Via Terminal:**
|
**Via Terminal:**
|
||||||
```bash
|
```bash
|
||||||
@ -172,7 +172,7 @@ If Jan isn't using your NVIDIA graphics card for acceleration:
|
|||||||
2. Turn on **GPU Acceleration**
|
2. Turn on **GPU Acceleration**
|
||||||
3. Check **System Monitor** (footer) to verify GPU is detected
|
3. Check **System Monitor** (footer) to verify GPU is detected
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
3. **Verify Configuration**
|
3. **Verify Configuration**
|
||||||
|
|
||||||
|
|||||||
@ -4,7 +4,7 @@ description: AI that runs where you need it, how you need it
|
|||||||
sidebar:
|
sidebar:
|
||||||
order: 0
|
order: 0
|
||||||
banner:
|
banner:
|
||||||
content: Jan is OPEN SUPERINTELLIGENCE that you can Self Host! You can connect to the world while staying local.
|
content: 👋Jan is OPEN SUPERINTELLIGENCE that you can Self Host! You can connect to the 🌍 while staying local. 👀
|
||||||
---
|
---
|
||||||
|
|
||||||
import { Aside, Card, CardGrid } from '@astrojs/starlight/components';
|
import { Aside, Card, CardGrid } from '@astrojs/starlight/components';
|
||||||
|
|||||||
@ -31,7 +31,7 @@ Jan V1 models power everything in the Jan ecosystem. When you use Jan, you're us
|
|||||||
|
|
||||||
## Three Ways to Run
|
## Three Ways to Run
|
||||||
|
|
||||||
<Tabs>
|
<Tabs syncKey="deployment-mode">
|
||||||
<TabItem label="Local">
|
<TabItem label="Local">
|
||||||
Run on your own hardware for complete privacy.
|
Run on your own hardware for complete privacy.
|
||||||
|
|
||||||
|
|||||||
@ -78,7 +78,7 @@ Jan comes with a model that works immediately. No downloading, no waiting.
|
|||||||
|
|
||||||
Connect to external AI providers when you need more power:
|
Connect to external AI providers when you need more power:
|
||||||
|
|
||||||
<Tabs>
|
<Tabs syncKey="cloud-provider">
|
||||||
<TabItem label="jan.ai">
|
<TabItem label="jan.ai">
|
||||||
Our cloud service (coming soon). One click to enable.
|
Our cloud service (coming soon). One click to enable.
|
||||||
</TabItem>
|
</TabItem>
|
||||||
|
|||||||
@ -68,7 +68,7 @@ High-risk actions require explicit user confirmation. Browser Use will never com
|
|||||||
|
|
||||||
## Implementation
|
## Implementation
|
||||||
|
|
||||||
<Tabs>
|
<Tabs syncKey="execution-mode">
|
||||||
<TabItem label="Local Execution">
|
<TabItem label="Local Execution">
|
||||||
Runs on your device using Playwright.
|
Runs on your device using Playwright.
|
||||||
|
|
||||||
|
|||||||
@ -48,7 +48,7 @@ Deep Research provides comprehensive investigation capabilities beyond simple se
|
|||||||
|
|
||||||
## Research Modes
|
## Research Modes
|
||||||
|
|
||||||
<Tabs>
|
<Tabs syncKey="research-depth">
|
||||||
<TabItem label="Quick Research">
|
<TabItem label="Quick Research">
|
||||||
Fast overview for immediate needs.
|
Fast overview for immediate needs.
|
||||||
|
|
||||||
|
|||||||
@ -22,7 +22,7 @@ Jan Search operates in three modes:
|
|||||||
|
|
||||||
## Implementation
|
## Implementation
|
||||||
|
|
||||||
<Tabs>
|
<Tabs syncKey="search-mode">
|
||||||
<TabItem label="Local Search">
|
<TabItem label="Local Search">
|
||||||
Everything happens on your machine using Crawl4AI.
|
Everything happens on your machine using Crawl4AI.
|
||||||
|
|
||||||
|
|||||||
64
website/src/layouts/Layout.astro
Normal file
64
website/src/layouts/Layout.astro
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
---
|
||||||
|
export interface Props {
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="description" content="Jan Products - AI that runs where you need it, how you need it" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<title>{title}</title>
|
||||||
|
|
||||||
|
<!-- Fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Custom Retro Effects CSS -->
|
||||||
|
<link rel="stylesheet" href="/src/styles/retro-effects.css">
|
||||||
|
|
||||||
|
<!-- GSAP -->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollToPlugin.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<slot />
|
||||||
|
|
||||||
|
<style is:global>
|
||||||
|
html {
|
||||||
|
font-family: 'JetBrains Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: #0a0a0a;
|
||||||
|
color: #ffffff;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove default margins and paddings */
|
||||||
|
h1, h2, h3, h4, h5, h6, p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smooth transitions for all interactive elements */
|
||||||
|
a, button, .toc-item, .retro-card, .platform-card, .tool-card {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,7 +0,0 @@
|
|||||||
---
|
|
||||||
title: Example Page
|
|
||||||
description: This is an example page.
|
|
||||||
---
|
|
||||||
|
|
||||||
|
|
||||||
# Hey
|
|
||||||
1872
website/src/pages/prods.astro
Normal file
1872
website/src/pages/prods.astro
Normal file
File diff suppressed because it is too large
Load Diff
822
website/src/styles/retro-effects.css
Normal file
822
website/src/styles/retro-effects.css
Normal file
@ -0,0 +1,822 @@
|
|||||||
|
/* Retro-Tech Effects CSS */
|
||||||
|
/* RadioShack meets PostHog aesthetic */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* Retro Color Palette */
|
||||||
|
--retro-green: #00ff41;
|
||||||
|
--retro-amber: #ffb000;
|
||||||
|
--retro-blue: #00bfff;
|
||||||
|
--retro-red: #ff0040;
|
||||||
|
--retro-cyan: #00ffff;
|
||||||
|
--retro-magenta: #ff00ff;
|
||||||
|
|
||||||
|
/* Terminal Colors */
|
||||||
|
--terminal-bg: #0a0a0a;
|
||||||
|
--terminal-fg: #00ff41;
|
||||||
|
--terminal-cursor: #ffffff;
|
||||||
|
|
||||||
|
/* Glow Effects */
|
||||||
|
--glow-green: rgba(0, 255, 65, 0.5);
|
||||||
|
--glow-amber: rgba(255, 176, 0, 0.5);
|
||||||
|
--glow-blue: rgba(0, 191, 255, 0.5);
|
||||||
|
--glow-red: rgba(255, 0, 64, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CRT Monitor Effect */
|
||||||
|
.crt-effect {
|
||||||
|
position: relative;
|
||||||
|
background: radial-gradient(ellipse at center, #0a0a0a 0%, #000000 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.crt-effect::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
0deg,
|
||||||
|
rgba(0, 255, 65, 0.05) 0px,
|
||||||
|
rgba(0, 255, 65, 0.05) 1px,
|
||||||
|
transparent 1px,
|
||||||
|
transparent 3px
|
||||||
|
);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crt-effect::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: radial-gradient(
|
||||||
|
ellipse at center,
|
||||||
|
transparent 40%,
|
||||||
|
rgba(0, 0, 0, 0.8) 100%
|
||||||
|
);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1001;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Matrix Rain Effect */
|
||||||
|
.matrix-rain {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: -1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matrix-char {
|
||||||
|
position: absolute;
|
||||||
|
color: var(--retro-green);
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 14px;
|
||||||
|
animation: matrixFall 3s linear infinite;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes matrixFall {
|
||||||
|
0% {
|
||||||
|
transform: translateY(-100vh);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(100vh);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glitch Text Effects */
|
||||||
|
.glitch-text {
|
||||||
|
position: relative;
|
||||||
|
color: var(--retro-green);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glitch-text::before,
|
||||||
|
.glitch-text::after {
|
||||||
|
content: attr(data-text);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glitch-text::before {
|
||||||
|
animation: glitch-anim-1 0.3s infinite;
|
||||||
|
color: var(--retro-red);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glitch-text::after {
|
||||||
|
animation: glitch-anim-2 0.3s infinite;
|
||||||
|
color: var(--retro-blue);
|
||||||
|
z-index: -2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glitch-anim-1 {
|
||||||
|
0% {
|
||||||
|
clip-path: inset(40% 0 61% 0);
|
||||||
|
transform: translate(-2px, -2px);
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
clip-path: inset(92% 0 1% 0);
|
||||||
|
transform: translate(2px, 2px);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
clip-path: inset(43% 0 1% 0);
|
||||||
|
transform: translate(-2px, 2px);
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
clip-path: inset(25% 0 58% 0);
|
||||||
|
transform: translate(2px, -2px);
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
clip-path: inset(54% 0 7% 0);
|
||||||
|
transform: translate(-2px, -2px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
clip-path: inset(58% 0 43% 0);
|
||||||
|
transform: translate(2px, 2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glitch-anim-2 {
|
||||||
|
0% {
|
||||||
|
clip-path: inset(25% 0 58% 0);
|
||||||
|
transform: translate(2px, 1px);
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
clip-path: inset(54% 0 7% 0);
|
||||||
|
transform: translate(-1px, 2px);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
clip-path: inset(58% 0 43% 0);
|
||||||
|
transform: translate(1px, -1px);
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
clip-path: inset(40% 0 61% 0);
|
||||||
|
transform: translate(-1px, -2px);
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
clip-path: inset(92% 0 1% 0);
|
||||||
|
transform: translate(2px, 1px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
clip-path: inset(43% 0 1% 0);
|
||||||
|
transform: translate(-2px, -1px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Neon Glow Effects */
|
||||||
|
.neon-glow {
|
||||||
|
text-shadow:
|
||||||
|
0 0 5px currentColor,
|
||||||
|
0 0 10px currentColor,
|
||||||
|
0 0 15px currentColor,
|
||||||
|
0 0 20px currentColor;
|
||||||
|
animation: neonFlicker 2s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes neonFlicker {
|
||||||
|
0%,
|
||||||
|
18%,
|
||||||
|
22%,
|
||||||
|
25%,
|
||||||
|
53%,
|
||||||
|
57%,
|
||||||
|
100% {
|
||||||
|
text-shadow:
|
||||||
|
0 0 5px currentColor,
|
||||||
|
0 0 10px currentColor,
|
||||||
|
0 0 15px currentColor,
|
||||||
|
0 0 20px currentColor;
|
||||||
|
}
|
||||||
|
20%,
|
||||||
|
24%,
|
||||||
|
55% {
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Terminal Cursor */
|
||||||
|
.terminal-cursor {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: var(--terminal-cursor);
|
||||||
|
color: var(--terminal-bg);
|
||||||
|
animation: cursorBlink 1s infinite;
|
||||||
|
margin-left: 2px;
|
||||||
|
width: 8px;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cursorBlink {
|
||||||
|
0%,
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
51%,
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Data Stream Animation */
|
||||||
|
.data-stream {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-stream::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
rgba(0, 255, 65, 0.1) 10%,
|
||||||
|
rgba(0, 255, 65, 0.3) 50%,
|
||||||
|
rgba(0, 255, 65, 0.1) 90%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
animation: dataStreamFlow 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dataStreamFlow {
|
||||||
|
0% {
|
||||||
|
left: -100%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
left: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Circuit Board Traces */
|
||||||
|
.circuit-trace {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circuit-trace::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
var(--retro-green) 20%,
|
||||||
|
var(--retro-green) 80%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
animation: circuitPulse 3s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circuitPulse {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
opacity: 0.3;
|
||||||
|
box-shadow: 0 0 5px var(--retro-green);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
box-shadow: 0 0 15px var(--retro-green);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Electronic Component Styles */
|
||||||
|
.component-resistor {
|
||||||
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
height: 6px;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent 0%,
|
||||||
|
var(--retro-amber) 20%,
|
||||||
|
var(--retro-red) 40%,
|
||||||
|
var(--retro-amber) 60%,
|
||||||
|
var(--retro-red) 80%,
|
||||||
|
transparent 100%
|
||||||
|
);
|
||||||
|
border-radius: 1px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.component-resistor::before,
|
||||||
|
.component-resistor::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 5px;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--retro-green);
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.component-resistor::before {
|
||||||
|
left: -5px;
|
||||||
|
}
|
||||||
|
.component-resistor::after {
|
||||||
|
right: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.component-led {
|
||||||
|
display: inline-block;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, var(--retro-red), transparent);
|
||||||
|
box-shadow: 0 0 10px var(--retro-red);
|
||||||
|
animation: ledBlink 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ledBlink {
|
||||||
|
0%,
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
opacity: 0.3;
|
||||||
|
box-shadow: 0 0 5px var(--retro-red);
|
||||||
|
}
|
||||||
|
85%,
|
||||||
|
95% {
|
||||||
|
opacity: 1;
|
||||||
|
box-shadow: 0 0 15px var(--retro-red);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Retro Button Styles */
|
||||||
|
.retro-button {
|
||||||
|
background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
|
||||||
|
border: 2px solid var(--retro-green);
|
||||||
|
color: var(--retro-green);
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-button::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
rgba(0, 255, 65, 0.2),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
transition: left 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-button:hover::before {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-button:hover {
|
||||||
|
box-shadow:
|
||||||
|
0 0 20px var(--glow-green),
|
||||||
|
inset 0 0 20px rgba(0, 255, 65, 0.1);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-button:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
box-shadow:
|
||||||
|
0 0 10px var(--glow-green),
|
||||||
|
inset 0 0 10px rgba(0, 255, 65, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Holographic Effect */
|
||||||
|
.holographic {
|
||||||
|
background: linear-gradient(
|
||||||
|
45deg,
|
||||||
|
var(--retro-cyan),
|
||||||
|
var(--retro-magenta),
|
||||||
|
var(--retro-amber),
|
||||||
|
var(--retro-green)
|
||||||
|
);
|
||||||
|
background-size: 400% 400%;
|
||||||
|
animation: holographicShift 3s ease infinite;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes holographicShift {
|
||||||
|
0% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* System Status Indicators */
|
||||||
|
.system-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-bar {
|
||||||
|
width: 60px;
|
||||||
|
height: 4px;
|
||||||
|
background: #333;
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-bar::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
background: var(--retro-green);
|
||||||
|
border-radius: 2px;
|
||||||
|
animation: statusProgress 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes statusProgress {
|
||||||
|
0% {
|
||||||
|
width: 0%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
width: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vintage Monitor Bezel */
|
||||||
|
.monitor-bezel {
|
||||||
|
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%);
|
||||||
|
border: 3px solid #333;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 20px;
|
||||||
|
position: relative;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 0 20px rgba(0, 0, 0, 0.5),
|
||||||
|
0 0 30px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.monitor-bezel::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--retro-red);
|
||||||
|
box-shadow: 0 0 8px var(--retro-red);
|
||||||
|
animation: powerIndicator 3s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes powerIndicator {
|
||||||
|
0%,
|
||||||
|
90%,
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
95% {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ASCII Art Enhancement */
|
||||||
|
.ascii-art {
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
white-space: pre;
|
||||||
|
color: var(--retro-green);
|
||||||
|
text-shadow: 0 0 10px var(--glow-green);
|
||||||
|
animation: asciiGlow 4s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes asciiGlow {
|
||||||
|
0% {
|
||||||
|
text-shadow: 0 0 5px var(--glow-green);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
text-shadow: 0 0 20px var(--glow-green);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Retro Loading Animation */
|
||||||
|
.retro-loader {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-loader::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
border: 3px solid #333;
|
||||||
|
border-top: 3px solid var(--retro-green);
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
animation: retroSpin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes retroSpin {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scanline Effect */
|
||||||
|
.scanlines {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scanlines::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
0deg,
|
||||||
|
transparent,
|
||||||
|
transparent 2px,
|
||||||
|
rgba(0, 255, 65, 0.03) 2px,
|
||||||
|
rgba(0, 255, 65, 0.03) 4px
|
||||||
|
);
|
||||||
|
pointer-events: none;
|
||||||
|
animation: scanlineMove 8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scanlineMove {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Phosphor Screen Effect */
|
||||||
|
.phosphor-screen {
|
||||||
|
background: radial-gradient(ellipse at center, #001100 0%, #000000 100%);
|
||||||
|
color: var(--retro-green);
|
||||||
|
text-shadow: 0 0 2px var(--retro-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Terminal Window */
|
||||||
|
.terminal-window {
|
||||||
|
background: #000000;
|
||||||
|
border: 2px solid var(--retro-green);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 1rem;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
color: var(--retro-green);
|
||||||
|
box-shadow:
|
||||||
|
0 0 20px rgba(0, 255, 65, 0.3),
|
||||||
|
inset 0 0 20px rgba(0, 255, 65, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
border-bottom: 1px solid var(--retro-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-title {
|
||||||
|
color: var(--retro-amber);
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Retro Grid */
|
||||||
|
.retro-grid {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(0, 255, 65, 0.1) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(0, 255, 65, 0.1) 1px, transparent 1px);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Digital Clock Display */
|
||||||
|
.digital-clock {
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
color: var(--retro-green);
|
||||||
|
background: #000000;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: 1px solid var(--retro-green);
|
||||||
|
font-weight: bold;
|
||||||
|
text-shadow: 0 0 10px var(--retro-green);
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Radar Sweep Effect */
|
||||||
|
.radar-sweep {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle,
|
||||||
|
transparent 30%,
|
||||||
|
rgba(0, 255, 65, 0.1) 100%
|
||||||
|
);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radar-sweep::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 50%;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg, var(--retro-green), transparent);
|
||||||
|
transform-origin: left center;
|
||||||
|
animation: radarSweep 3s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes radarSweep {
|
||||||
|
0% {
|
||||||
|
transform: translate(-50%, -50%) rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(-50%, -50%) rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* VHS Static Effect */
|
||||||
|
.vhs-static {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vhs-static::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background:
|
||||||
|
repeating-linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
transparent 2px,
|
||||||
|
rgba(255, 255, 255, 0.03) 2px,
|
||||||
|
rgba(255, 255, 255, 0.03) 4px
|
||||||
|
),
|
||||||
|
repeating-linear-gradient(
|
||||||
|
0deg,
|
||||||
|
transparent,
|
||||||
|
transparent 2px,
|
||||||
|
rgba(255, 255, 255, 0.03) 2px,
|
||||||
|
rgba(255, 255, 255, 0.03) 4px
|
||||||
|
);
|
||||||
|
animation: vhsStatic 0.1s infinite;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes vhsStatic {
|
||||||
|
0% {
|
||||||
|
opacity: 0.03;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.05;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0.03;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accessibility and Reduced Motion */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* High Contrast Mode */
|
||||||
|
@media (prefers-contrast: high) {
|
||||||
|
:root {
|
||||||
|
--retro-green: #00ff00;
|
||||||
|
--retro-amber: #ffff00;
|
||||||
|
--retro-red: #ff0000;
|
||||||
|
--retro-blue: #0080ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crt-effect::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.neon-glow {
|
||||||
|
text-shadow: none;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scanlines::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Mode Enhancements */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.retro-button {
|
||||||
|
background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
|
||||||
|
}
|
||||||
|
|
||||||
|
.monitor-bezel {
|
||||||
|
background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 50%, #000000 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Print Styles */
|
||||||
|
@media print {
|
||||||
|
.matrix-rain,
|
||||||
|
.crt-effect::before,
|
||||||
|
.crt-effect::after,
|
||||||
|
.neon-glow,
|
||||||
|
.data-stream::before,
|
||||||
|
.circuit-trace::after,
|
||||||
|
.scanlines::after {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retro-button,
|
||||||
|
.terminal-window {
|
||||||
|
border: 2px solid #000 !important;
|
||||||
|
background: #fff !important;
|
||||||
|
color: #000 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Optimizations */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.retro-button {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-window {
|
||||||
|
padding: 0.75rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.digital-clock {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus States for Accessibility */
|
||||||
|
.retro-button:focus,
|
||||||
|
.terminal-window:focus {
|
||||||
|
outline: 2px solid var(--retro-green);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user