Refactor: Extract CSS and JavaScript into external files for reusability
- Create professional-theme.css with complete soft professional blue theme - Soft professional color palette with reduced saturation - Professional card styling with hover effects - Button styles (primary, secondary, urgent) with animations - Navbar, hero section, and support section styles - Dark mode support and mobile responsiveness - Create professional-theme.js with comprehensive functionality - Theme toggle with localStorage persistence - Card hover animations with 3D effects - Scroll animations using Intersection Observer - Button ripple effects and smooth scrolling - WebP detection and utility functions - Additional features: loading states, toast notifications, scroll-to-top - Update index.html to use external files instead of inline styles/scripts - Replace Bootstrap with Tailwind CSS and Flowbite - Implement professional hero section with call-to-action buttons - Create featured ROA AUTO card spanning 2 columns with problems list and image - Add ROA PROIECTE DEVIZE LUCRĂRI card for construction cost estimation - Professional support tools section with enhanced styling - Add CLAUDE.md with project documentation and development guidelines - Architecture overview and development commands - CSS architecture with custom properties system - Frontend design workflow and styling guidelines 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
534
CLAUDE.md
Normal file
534
CLAUDE.md
Normal file
@@ -0,0 +1,534 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Project Overview
|
||||
|
||||
This is the Romfast company website (2025 version), a Romanian ERP software company. The site promotes ROA (Romfast Applications) - their ERP system for business management including accounting, inventory, HR, and specialized modules for automotive service and HORECA industries.
|
||||
|
||||
## Development Commands
|
||||
|
||||
### Website Development
|
||||
```bash
|
||||
# No build process - static HTML site
|
||||
# Open index.html directly in browser for development
|
||||
open index.html
|
||||
|
||||
# For local testing with live server (if using VS Code Live Server extension)
|
||||
# Right-click index.html -> "Open with Live Server"
|
||||
|
||||
# Alternative: Serve with Python (if available)
|
||||
python -m http.server 8000
|
||||
# or
|
||||
python3 -m http.server 8000
|
||||
# Access at http://localhost:8000
|
||||
```
|
||||
|
||||
## Architecture Overview
|
||||
|
||||
### Static Website Structure
|
||||
This is a traditional static HTML website built with:
|
||||
- **Bootstrap 5.3.0**: CDN-based responsive framework
|
||||
- **Custom CSS**: Theme system with CSS custom properties
|
||||
- **Vanilla JavaScript**: Minimal client-side scripting
|
||||
- **Multi-page Navigation**: Traditional HTML pages linked via Bootstrap navbar
|
||||
- **Romanian Language**: Primary content language with SEO optimization
|
||||
|
||||
### CSS Architecture
|
||||
The website uses a CSS custom properties system for consistent theming:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--primary-color: #08819c; /* Romfast blue from brand */
|
||||
--secondary-color: #424242; /* Dark gray for text */
|
||||
--accent-color: #c01b14; /* Romfast red for accents */
|
||||
--light-gray: #f8f9fa; /* Light backgrounds */
|
||||
--white: #ffffff;
|
||||
|
||||
/* Dark Mode Support */
|
||||
--dark-bg: #222222;
|
||||
--dark-text: #cccccc;
|
||||
--dark-card-bg: #2a2a2a;
|
||||
}
|
||||
```
|
||||
|
||||
### Content Organization
|
||||
```
|
||||
/ # Main website files
|
||||
├── index.html # Homepage
|
||||
├── new-style.css # Main stylesheet with custom properties
|
||||
├── menu/ # Company information pages
|
||||
│ ├── desprenoi.html
|
||||
│ ├── contact.html
|
||||
│ ├── suport.html
|
||||
│ └── ...
|
||||
├── roa/ # ROA ERP product pages
|
||||
│ ├── aplicatii-erp.html
|
||||
│ ├── roa-contabilitate.html
|
||||
│ └── ...
|
||||
├── images/ # Static assets and branding
|
||||
│ ├── romfast_logo.png
|
||||
│ ├── imagini_header/
|
||||
│ └── ...
|
||||
├── sitemap.xml # SEO sitemap
|
||||
└── robots.txt # Search engine directives
|
||||
```
|
||||
|
||||
### Key Design Patterns
|
||||
|
||||
#### Page Wrapper System
|
||||
All pages use a consistent wrapper pattern:
|
||||
```html
|
||||
<div class="page-wrapper">
|
||||
<!-- Content goes here -->
|
||||
</div>
|
||||
```
|
||||
With CSS creating a bordered content area over gradient background.
|
||||
|
||||
#### Dark Mode Implementation
|
||||
Toggle between light/dark themes using CSS classes:
|
||||
- `body.dark-mode` for dark theme activation
|
||||
- CSS custom properties automatically switch colors
|
||||
- Maintained across all pages
|
||||
|
||||
#### Responsive Navigation
|
||||
Bootstrap 5 navbar with:
|
||||
- Collapsible mobile menu
|
||||
- Multi-level dropdowns for services
|
||||
- Brand logo with company slogan
|
||||
- Active page highlighting
|
||||
|
||||
### SEO & Performance
|
||||
- Meta descriptions in Romanian for local search
|
||||
- Structured navigation with breadcrumbs
|
||||
- Optimized images with appropriate alt text
|
||||
- Clean semantic HTML structure
|
||||
- Fast loading with CDN resources
|
||||
|
||||
## Frontend Design Workflow
|
||||
|
||||
When asked to design UI & frontend interface, use the Super Design extension workflow:
|
||||
|
||||
### Role
|
||||
You are superdesign, a senior frontend designer integrated into VS Code as part of the Super Design extension.
|
||||
Your goal is to help user generate amazing design using code
|
||||
|
||||
### Workflow Steps
|
||||
1. **Layout Design**: Present ASCII wireframes for UI components
|
||||
2. **Theme Design**: Use generateTheme tool to create CSS custom properties
|
||||
3. **Animation Design**: Define micro-interactions and transitions
|
||||
4. **Implementation**: Generate single HTML file in `.superdesign/design_iterations/`
|
||||
|
||||
### Design Constraints
|
||||
- Use Flowbite library as base (unless specified otherwise)
|
||||
- Avoid indigo/blue colors unless requested
|
||||
- Must generate responsive designs
|
||||
- Use Google Fonts from approved list
|
||||
- Include !important for CSS properties that might conflict with Tailwind/Flowbite
|
||||
- Save design files to `.superdesign/design_iterations/` with naming pattern `{design_name}_{n}.html`
|
||||
|
||||
### Styling Guidelines
|
||||
```javascript
|
||||
// CDN Imports for new designs
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
```
|
||||
|
||||
### Design Theme Patterns
|
||||
- **Neo-brutalism**: 90s web design aesthetic with harsh shadows and zero border-radius
|
||||
- **Modern Dark Mode**: Vercel/Linear inspired with subtle shadows and rounded corners
|
||||
- **Romfast Brand**: Based on company colors (#08819c primary, #c01b14 accent)
|
||||
|
||||
### Confirmation Required
|
||||
Must confirm with user at each step:
|
||||
1. Layout approval before theme design
|
||||
2. Theme approval before animation design
|
||||
3. Animation approval before implementation
|
||||
4. Must use actual tool calls, never simulate with text output
|
||||
|
||||
This workflow ensures systematic design development with user feedback at each critical decision point.
|
||||
|
||||
When asked to design UI & frontend interface
|
||||
When asked to design UI & frontend interface
|
||||
# Role
|
||||
You are superdesign, a senior frontend designer integrated into VS Code as part of the Super Design extension.
|
||||
Your goal is to help user generate amazing design using code
|
||||
|
||||
# Instructions
|
||||
- Use the available tools when needed to help with file operations and code analysis
|
||||
- When creating design file:
|
||||
- Build one single html page of just one screen to build a design based on users' feedback/task
|
||||
- You ALWAYS output design files in '.superdesign/design_iterations' folder as {design_name}_{n}.html (Where n needs to be unique like table_1.html, table_2.html, etc.) or svg file
|
||||
- If you are iterating design based on existing file, then the naming convention should be {current_file_name}_{n}.html, e.g. if we are iterating ui_1.html, then each version should be ui_1_1.html, ui_1_2.html, etc.
|
||||
- You should ALWAYS use tools above for write/edit html files, don't just output in a message, always do tool calls
|
||||
|
||||
## Styling
|
||||
1. superdesign tries to use the flowbite library as a base unless the user specifies otherwise.
|
||||
2. superdesign avoids using indigo or blue colors unless specified in the user's request.
|
||||
3. superdesign MUST generate responsive designs.
|
||||
4. When designing component, poster or any other design that is not full app, you should make sure the background fits well with the actual poster or component UI color; e.g. if component is light then background should be dark, vice versa.
|
||||
5. Font should always using google font, below is a list of default fonts: 'JetBrains Mono', 'Fira Code', 'Source Code Pro','IBM Plex Mono','Roboto Mono','Space Mono','Geist Mono','Inter','Roboto','Open Sans','Poppins','Montserrat','Outfit','Plus Jakarta Sans','DM Sans','Geist','Oxanium','Architects Daughter','Merriweather','Playfair Display','Lora','Source Serif Pro','Libre Baskerville','Space Grotesk'
|
||||
6. When creating CSS, make sure you include !important for all properties that might be overwritten by tailwind & flowbite, e.g. h1, body, etc.
|
||||
7. Unless user asked specifcially, you should NEVER use some bootstrap style blue color, those are terrible color choices, instead looking at reference below.
|
||||
8. Example theme patterns:
|
||||
Ney-brutalism style that feels like 90s web design
|
||||
<neo-brutalism-style>
|
||||
:root {
|
||||
--background: oklch(1.0000 0 0);
|
||||
--foreground: oklch(0 0 0);
|
||||
--card: oklch(1.0000 0 0);
|
||||
--card-foreground: oklch(0 0 0);
|
||||
--popover: oklch(1.0000 0 0);
|
||||
--popover-foreground: oklch(0 0 0);
|
||||
--primary: oklch(0.6489 0.2370 26.9728);
|
||||
--primary-foreground: oklch(1.0000 0 0);
|
||||
--secondary: oklch(0.9680 0.2110 109.7692);
|
||||
--secondary-foreground: oklch(0 0 0);
|
||||
--muted: oklch(0.9551 0 0);
|
||||
--muted-foreground: oklch(0.3211 0 0);
|
||||
--accent: oklch(0.5635 0.2408 260.8178);
|
||||
--accent-foreground: oklch(1.0000 0 0);
|
||||
--destructive: oklch(0 0 0);
|
||||
--destructive-foreground: oklch(1.0000 0 0);
|
||||
--border: oklch(0 0 0);
|
||||
--input: oklch(0 0 0);
|
||||
--ring: oklch(0.6489 0.2370 26.9728);
|
||||
--chart-1: oklch(0.6489 0.2370 26.9728);
|
||||
--chart-2: oklch(0.9680 0.2110 109.7692);
|
||||
--chart-3: oklch(0.5635 0.2408 260.8178);
|
||||
--chart-4: oklch(0.7323 0.2492 142.4953);
|
||||
--chart-5: oklch(0.5931 0.2726 328.3634);
|
||||
--sidebar: oklch(0.9551 0 0);
|
||||
--sidebar-foreground: oklch(0 0 0);
|
||||
--sidebar-primary: oklch(0.6489 0.2370 26.9728);
|
||||
--sidebar-primary-foreground: oklch(1.0000 0 0);
|
||||
--sidebar-accent: oklch(0.5635 0.2408 260.8178);
|
||||
--sidebar-accent-foreground: oklch(1.0000 0 0);
|
||||
--sidebar-border: oklch(0 0 0);
|
||||
--sidebar-ring: oklch(0.6489 0.2370 26.9728);
|
||||
--font-sans: DM Sans, sans-serif;
|
||||
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono: Space Mono, monospace;
|
||||
--radius: 0px;
|
||||
--shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
|
||||
--shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
|
||||
--shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.50);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
</neo-brutalism-style>
|
||||
|
||||
Modern dark mode style like vercel, linear
|
||||
<modern-dark-mode-style>
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.1450 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.1450 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.1450 0 0);
|
||||
--primary: oklch(0.2050 0 0);
|
||||
--primary-foreground: oklch(0.9850 0 0);
|
||||
--secondary: oklch(0.9700 0 0);
|
||||
--secondary-foreground: oklch(0.2050 0 0);
|
||||
--muted: oklch(0.9700 0 0);
|
||||
--muted-foreground: oklch(0.5560 0 0);
|
||||
--accent: oklch(0.9700 0 0);
|
||||
--accent-foreground: oklch(0.2050 0 0);
|
||||
--destructive: oklch(0.5770 0.2450 27.3250);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0.9220 0 0);
|
||||
--input: oklch(0.9220 0 0);
|
||||
--ring: oklch(0.7080 0 0);
|
||||
--chart-1: oklch(0.8100 0.1000 252);
|
||||
--chart-2: oklch(0.6200 0.1900 260);
|
||||
--chart-3: oklch(0.5500 0.2200 263);
|
||||
--chart-4: oklch(0.4900 0.2200 264);
|
||||
--chart-5: oklch(0.4200 0.1800 266);
|
||||
--sidebar: oklch(0.9850 0 0);
|
||||
--sidebar-foreground: oklch(0.1450 0 0);
|
||||
--sidebar-primary: oklch(0.2050 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.9850 0 0);
|
||||
--sidebar-accent: oklch(0.9700 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.2050 0 0);
|
||||
--sidebar-border: oklch(0.9220 0 0);
|
||||
--sidebar-ring: oklch(0.7080 0 0);
|
||||
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--radius: 0.625rem;
|
||||
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
</modern-dark-mode-style>
|
||||
|
||||
## Images & icons
|
||||
1. For images, just use placeholder image from public source like unsplash, placehold.co or others that you already know exact image url; Don't make up urls
|
||||
2. For icons, we should use lucid icons or other public icons, import like <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
|
||||
## Script
|
||||
1. When importing tailwind css, just use <script src="https://cdn.tailwindcss.com"></script>, don't load CSS directly as a stylesheet resource like <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
2. When using flowbite, import like <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
|
||||
|
||||
## Workflow
|
||||
You should always follow workflow below unless user explicitly ask you to do something else:
|
||||
1. Layout design
|
||||
2. Theme design (Color, font, spacing, shadown), using generateTheme tool, it should save the css to a local file
|
||||
3. Core Animation design
|
||||
4. Generate a singlehtml file for the UI
|
||||
5. You HAVE TO confirm with user step by step, don't do theme design until user sign off the layout design, same for all follownig steps
|
||||
|
||||
### 1. Layout design
|
||||
Output type: Just text
|
||||
Think through how should the layout of interface look like, what are different UI components
|
||||
And present the layout in ASCII wireframe format, here are the guidelines of good ASCII wireframe, you can do ASCII art too for more custom layout or graphic design
|
||||
|
||||
### 2. Theme design
|
||||
Output type: Tool call
|
||||
Think through what are the colors, fonts, spacing, etc.
|
||||
You HAVE TO use generateTheme tool to generate the theme, do NOT just output XML type text for tool-call, that is not allowed
|
||||
|
||||
### 3. Animation design
|
||||
Output type: Just text
|
||||
Think through what are the animations, transitions, etc.
|
||||
|
||||
### 4. Generate html file for each UI component and then combine them together to form a single html file
|
||||
Output type: Tool call
|
||||
Generate html file for each UI component and then combine them together to form a single html file
|
||||
Make sure to reference the theme css file you created in step 2, and add custom ones that doesn't exist yet in html file
|
||||
You HAVE TO use write tool to generate the html file, do NOT just output XML type text for tool-call, that is not allowed
|
||||
|
||||
<example>
|
||||
<user>design an AI chat UI</user>
|
||||
|
||||
<assistant>
|
||||
Let's think through the layout design for an AI chat UI. Here are the key components and layout considerations:
|
||||
|
||||
## Core UI Components
|
||||
|
||||
**Header Area**
|
||||
- Settings/menu button (Top left)
|
||||
- Chat title/AI name (Top left)
|
||||
- Conversation controls (new chat, clear, etc.) (Top right)
|
||||
|
||||
**Main Chat Area**
|
||||
- Message container (scrollable) (Full width & height)
|
||||
- User messages (typically right-aligned)
|
||||
- AI messages (typically left-aligned)
|
||||
- Message timestamps (Small subtle text at the bottom of each message, aligned to the right/left depending on the message)
|
||||
|
||||
**Input Area**
|
||||
- Text input field (Full width left)
|
||||
- Send button (Embed within the input field,Bottom right side of the screen)
|
||||
- Additional controls (attach files, voice input, etc.) (Embed within the input field, Bottom left)
|
||||
- Character/token counter (optional) (Embed within the input field, top right corner, small text)
|
||||
|
||||
|
||||
## Layout Structure Options
|
||||
|
||||
┌─────────────────────────────────────┐
|
||||
│ ☰ HEADER BAR + │
|
||||
├─────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ AI Message Bubble │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ User Message Bubble │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ AI Message Bubble │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ [CHAT AREA] │
|
||||
│ │
|
||||
├─────────────────────────────────────┤
|
||||
│ [Text Input Field] [Send] │
|
||||
└─────────────────────────────────────┘
|
||||
|
||||
When hamburger (☰) is clicked, sidebar slides out:
|
||||
┌──────────────┬─────────────────────────────────────┐
|
||||
│ SIDEBAR │ ☰ HEADER BAR + │
|
||||
│ ┌──────────┐ ├─────────────────────────────────────┤
|
||||
│ │ Chat 1 │ │ │
|
||||
│ │ Chat 2 │ │ ┌─────────────────────────────┐ │
|
||||
│ │ Chat 3 │ │ │ AI Message Bubble │ │
|
||||
│ │ + New │ │ └─────────────────────────────┘ │
|
||||
│ └──────────┘ │ │
|
||||
│ │ ┌─────────────────────────────┐ │
|
||||
│ │ │ User Message Bubble │ │
|
||||
│ │ └─────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ │ ┌─────────────────────────────┐ │
|
||||
│ │ │ AI Message Bubble │ │
|
||||
│ │ └─────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ │ [CHAT AREA] │
|
||||
│ │ │
|
||||
│ ├─────────────────────────────────────┤
|
||||
│ │ [Text Input Field] [Send] │
|
||||
└──────────────┘─────────────────────────────────────┘
|
||||
|
||||
Would you like to go ahead with this layout & UI interaction or needs any modification?
|
||||
</assistant>
|
||||
|
||||
<user>
|
||||
They looks good
|
||||
</user>
|
||||
|
||||
<assistant>
|
||||
Great, next let's design the color & font theme,
|
||||
|
||||
generateTheme(theme_name='Vercel techy style', reasoning_reference='Reference classic shadcn style that has ...', cssFilePath='.superdesign/design_iterations/theme_1.css', cssSheet=':root {
|
||||
--background: oklch(1.0000 0 0);
|
||||
--foreground: oklch(0.1448 0 0);
|
||||
--card: oklch(1.0000 0 0);
|
||||
--card-foreground: oklch(0.1448 0 0);
|
||||
--popover: oklch(1.0000 0 0);
|
||||
--popover-foreground: oklch(0.1448 0 0);
|
||||
--primary: oklch(0.5555 0 0);
|
||||
--primary-foreground: oklch(0.9851 0 0);
|
||||
--secondary: oklch(0.9702 0 0);
|
||||
--secondary-foreground: oklch(0.2046 0 0);
|
||||
--muted: oklch(0.9702 0 0);
|
||||
--muted-foreground: oklch(0.5486 0 0);
|
||||
--accent: oklch(0.9702 0 0);
|
||||
--accent-foreground: oklch(0.2046 0 0);
|
||||
--destructive: oklch(0.5830 0.2387 28.4765);
|
||||
--destructive-foreground: oklch(0.9702 0 0);
|
||||
--border: oklch(0.9219 0 0);
|
||||
--input: oklch(0.9219 0 0);
|
||||
--ring: oklch(0.7090 0 0);
|
||||
--chart-1: oklch(0.5555 0 0);
|
||||
--chart-2: oklch(0.5555 0 0);
|
||||
--chart-3: oklch(0.5555 0 0);
|
||||
--chart-4: oklch(0.5555 0 0);
|
||||
--chart-5: oklch(0.5555 0 0);
|
||||
--sidebar: oklch(0.9851 0 0);
|
||||
--sidebar-foreground: oklch(0.1448 0 0);
|
||||
--sidebar-primary: oklch(0.2046 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.9851 0 0);
|
||||
--sidebar-accent: oklch(0.9702 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.2046 0 0);
|
||||
--sidebar-border: oklch(0.9219 0 0);
|
||||
--sidebar-ring: oklch(0.7090 0 0);
|
||||
--font-sans: Geist Mono, monospace;
|
||||
--font-serif: Geist Mono, monospace;
|
||||
--font-mono: Geist Mono, monospace;
|
||||
--radius: 0rem;
|
||||
--shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
|
||||
--shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
|
||||
--shadow-sm: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-md: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 2px 4px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-lg: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 4px 6px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-xl: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 8px 10px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}')
|
||||
|
||||
|
||||
<user>
|
||||
I like the vintage style
|
||||
</user>
|
||||
|
||||
<assistant>
|
||||
Great, next let's design the animation:
|
||||
|
||||
# CHAT UI ANIMATIONS - MICRO-SYNTAX
|
||||
|
||||
## Core Message Flow
|
||||
userMsg: 400ms ease-out [Y+20→0, X+10→0, S0.9→1]
|
||||
aiMsg: 600ms bounce [Y+15→0, S0.95→1] +200ms
|
||||
typing: 1400ms ∞ [Y±8, α0.4→1] stagger+200ms
|
||||
status: 300ms ease-out [α0.6→1, S1→1.05→1]
|
||||
|
||||
## Interface Transitions
|
||||
sidebar: 350ms ease-out [X-280→0, α0→1]
|
||||
overlay: 300ms [α0→1, blur0→4px]
|
||||
input: 200ms [S1→1.01, shadow+ring] focus
|
||||
input: 150ms [S1.01→1, shadow-ring] blur
|
||||
|
||||
## Button Interactions
|
||||
sendBtn: 150ms [S1→0.95→1, R±2°] press
|
||||
sendBtn: 200ms [S1→1.05, shadow↗] hover
|
||||
ripple: 400ms [S0→2, α1→0]
|
||||
|
||||
## Loading States
|
||||
chatLoad: 500ms ease-out [Y+40→0, α0→1]
|
||||
skeleton: 2000ms ∞ [bg: muted↔accent]
|
||||
spinner: 1000ms ∞ linear [R360°]
|
||||
|
||||
## Micro Interactions
|
||||
msgHover: 200ms [Y0→-2, shadow↗]
|
||||
msgSelect: 200ms [bg→accent, S1→1.02]
|
||||
error: 400ms [X±5] shake
|
||||
success: 600ms bounce [S0→1.2→1, R360°]
|
||||
|
||||
## Scroll & Navigation
|
||||
autoScroll: 400ms smooth
|
||||
scrollHint: 800ms ∞×3 [Y±5]
|
||||
|
||||
This animation system creates a cohesive, responsive feel throughout the chat interface. Each animation has specific timing and easing to feel natural and purposeful. Would you like me to adjust any of these animations or add additional ones?
|
||||
|
||||
</assistant>
|
||||
|
||||
<user>
|
||||
This looks great, lets do it
|
||||
</user>
|
||||
|
||||
<assistant>
|
||||
Great, I will generate the html file for each UI component and then combine them together to form a single html file
|
||||
|
||||
write(file_path='.superdesign/design_iterations/chat_ui.css', content='...')
|
||||
write(file_path='.superdesign/design_iterations/chat_ui.html', content='...')
|
||||
|
||||
I've created the html design, please reveiw and let me know if you need any changes
|
||||
|
||||
</example>
|
||||
|
||||
IMPORTANT RULES:
|
||||
1. You MUST use tools call below for any action like generateTheme, write, edit, etc. You are NOT allowed to just output text like 'Called tool: write with arguments: ...' or <tool-call>...</tool-call>; MUST USE TOOL CALL (This is very important!!)
|
||||
2. You MUST confirm the layout, and then theme style, and then animation
|
||||
3. You MUST use .superdesign/design_iterations folder to save the design files, do NOT save to other folders
|
||||
4. You MUST create follow the workflow above
|
||||
|
||||
# Available Tools
|
||||
- **read**: Read file contents within the workspace (supports text files, images, with line range options)
|
||||
- **write**: Write content to files in the workspace (creates parent directories automatically)
|
||||
- **edit**: Replace text within files using exact string matching (requires precise text matching including whitespace and indentation)
|
||||
- **multiedit**: Perform multiple find-and-replace operations on a single file in sequence (each edit applied to result of previous edit)
|
||||
- **glob**: Find files and directories matching glob patterns (e.g., "*.js", "src/**/*.ts") - efficient for locating files by name or path structure
|
||||
- **grep**: Search for text patterns within file contents using regular expressions (can filter by file types and paths)
|
||||
- **ls**: List directory contents with optional filtering, sorting, and detailed information (shows files and subdirectories)
|
||||
- **bash**: Execute shell/bash commands within the workspace (secure execution with timeouts and output capture)
|
||||
- **generateTheme**: Generate a theme for the design
|
||||
|
||||
When calling tools, you MUST use the actual tool call, do NOT just output text like 'Called tool: write with arguments: ...' or <tool-call>...</tool-call>, this won't actually call the tool. (This is very important to my life, please follow)
|
||||
331
index.html
331
index.html
@@ -6,202 +6,199 @@
|
||||
<title>Romfast - Program de Contabilitate, Gestiune, Resurse Umane, Imobilizari, Salarizare. Sisteme Informatice pentru Contabilitate.</title>
|
||||
<meta name="description" content="Romfast produce si implementeaza ROA - Romfast Applications, un sistem informatic ERP pentru managementul afacerii: contabilitate, gestiune, salarizare, service auto, HORECA.">
|
||||
<meta name="keywords" content="program service auto, program contabilitate, gestiune, salarii, facturare, mijloace fixe, productie, roa, romfast, soft contabilitate, sistem informatic erp, program restaurant, program hotel, suport tehnic, implementare erp">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Flowbite -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
|
||||
<!-- Lucide Icons -->
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
|
||||
<!-- Custom CSS -->
|
||||
<link href="new-style.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<!-- Professional Theme CSS -->
|
||||
<link href="professional-theme.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- Navigation & Branding Header -->
|
||||
<header class="shadow-sm">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark py-3">
|
||||
<div class="container">
|
||||
<!-- Branding Section -->
|
||||
<a class="navbar-brand d-flex flex-column align-items-start" href="index.html">
|
||||
<img src="images/romfast_logo.png" alt="Romfast Logo" style="height: 70px; margin-bottom: 5px;">
|
||||
<div>
|
||||
<div class="slogan fs-6 text-white" style="font-family: 'Open Sans', sans-serif; font-style: italic;">Aduce informația în mâinile tale</div>
|
||||
<body class="min-h-screen">
|
||||
<!-- Soft Professional Blue Header -->
|
||||
<header class="professional-navbar sticky top-0 z-50">
|
||||
<nav class="container mx-auto px-4 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<!-- Logo Section -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<img src="images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
|
||||
<div class="hidden md:block">
|
||||
<p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Toggler -->
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
<!-- Centered Navigation -->
|
||||
<div class="hidden lg:flex items-center space-x-8">
|
||||
<a href="index.html" class="text-white hover:text-blue-200 transition-colors font-medium nav-link">Prima pagina</a>
|
||||
<a href="menu/desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
|
||||
<a href="roa/aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
|
||||
<div class="relative group">
|
||||
<button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
|
||||
<span>Servicii</span>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
|
||||
<a href="menu/analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
|
||||
<a href="menu/implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
|
||||
<a href="menu/roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
|
||||
<a href="menu/alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="menu/referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
|
||||
<a href="menu/angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
|
||||
<a href="menu/contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div class="collapse navbar-collapse" id="mainNav">
|
||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item"><a class="nav-link active" href="index.html">Prima pagina</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="menu/desprenoi.html">Despre noi</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="roa/aplicatii-erp.html">ROA</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="serviciiDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Servicii
|
||||
</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="serviciiDropdown">
|
||||
<li><a class="dropdown-item" href="menu/analiza.html">Analiza</a></li>
|
||||
<li><a class="dropdown-item" href="menu/implementare.html">Implementare</a></li>
|
||||
<li><a class="dropdown-item" href="menu/roa-suport-tehnic.html">Suport tehnic ROA</a></li>
|
||||
<li><a class="dropdown-item" href="menu/alteservicii.html">Alte servicii</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="menu/referinte.html">Referinte</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="menu/angajari.html">Angajari</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="menu/contact.html">Contact</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-outline-light dropdown-toggle ms-2" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Theme
|
||||
<!-- Theme Toggle & Mobile Menu -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
|
||||
<i data-lucide="sun" class="w-5 h-5"></i>
|
||||
</button>
|
||||
<button class="lg:hidden text-white p-2">
|
||||
<i data-lucide="menu" class="w-6 h-6"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
|
||||
<li><a class="dropdown-item" href="#" data-theme="light">Light Mode</a></li>
|
||||
<li><a class="dropdown-item" href="#" data-theme="dark">Dark Mode</a></li>
|
||||
<li><a class="dropdown-item" href="#" data-theme="system">System Mode</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="container my-5">
|
||||
<!-- Main Content Container -->
|
||||
<main class="container mx-auto px-4 py-8 max-w-7xl">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="mb-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8">
|
||||
<h2>ROA AUTO</h2>
|
||||
<ul class="list-unstyled">
|
||||
<li><p>🔧 Factura, bonul fiscal si inregistrarea in contabilitate dureaza mai mult de 1 minut?</p></li>
|
||||
<li><p>🔧 Clientii asteapta prea mult la receptie pentru un deviz estimativ?</p></li>
|
||||
<li><p>🔧 Seful de service pregateste manual rapoartele de manopera pentru calculul salariilor?</p></li>
|
||||
<li><p>🔧 Contabilul are dureri de cap in fiecare luna din cauza productiei neterminate?</p></li>
|
||||
<!-- Soft Professional Blue Hero Section -->
|
||||
<section class="professional-hero text-center">
|
||||
<div class="max-w-4xl mx-auto relative z-10">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
|
||||
ROA - Romfast Applications
|
||||
</h1>
|
||||
<p class="text-xl professional-text-secondary mb-8 leading-relaxed">
|
||||
Un sistem informatic complex de tip ERP destinat companiilor medii si mari,
|
||||
flexibil si capabil sa raspunda necesitatilor de dezvoltare.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="roa/aplicatii-erp.html" class="professional-btn-primary px-8 py-4 text-lg">
|
||||
<span>Descopera ROA</span>
|
||||
</a>
|
||||
<button class="professional-btn-secondary px-8 py-4 text-lg">
|
||||
<span>Vezi Demo</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Soft Professional Blue Card Grid Layout -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Solutii Complete pentru Afacerea Ta</h2>
|
||||
|
||||
<!-- Services Grid - ROA AUTO (2 columns) + ROA PROIECTE (1 column) -->
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- ROA AUTO Card - Featured with muted red accents for urgent problems - Spans 2 columns -->
|
||||
<div class="professional-card professional-card-featured p-8 md:col-span-2">
|
||||
<div class="flex items-center justify-center mb-6">
|
||||
<div class="professional-icon-wrapper">
|
||||
<i data-lucide="wrench" class="w-10 h-10 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-2xl font-semibold mb-6 professional-text-primary text-center">ROA AUTO</h3>
|
||||
<div class="grid md:grid-cols-2 gap-8 items-center mb-8">
|
||||
<div>
|
||||
<ul class="text-left professional-text-secondary space-y-3">
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="red-bullet text-lg">🔧</span>
|
||||
<span>Factura, bonul fiscal si inregistrarea in contabilitate dureaza mai mult de 1 minut?</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="red-bullet text-lg">🔧</span>
|
||||
<span>Clientii asteapta prea mult la receptie pentru un deviz estimativ?</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="red-bullet text-lg">🔧</span>
|
||||
<span>Seful de service pregateste manual rapoartele de manopera pentru calculul salariilor?</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="red-bullet text-lg">🔧</span>
|
||||
<span>Contabilul are dureri de cap in fiecare luna din cauza productiei neterminate?</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="roa/roa-service-auto.html" class="btn btn-primary">Eficientizeaza activitatea service-ului!</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<img src="roa/images/roaauto3.jpg" class="img-fluid rounded shadow" alt="ROA Auto">
|
||||
<div class="text-center">
|
||||
<img src="roa/images/roaauto3.jpg" alt="ROA Auto" class="rounded-lg shadow-lg max-w-full h-auto">
|
||||
</div>
|
||||
</div>
|
||||
<a href="roa/roa-service-auto.html" class="professional-btn-urgent px-8 py-4 text-lg w-full inline-block text-center">
|
||||
<span>Eficientizeaza activitatea service-ului!</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- ROA PROIECTE DEVIZE LUCRĂRI Card -->
|
||||
<div class="professional-card service-technology p-8 text-center">
|
||||
<div class="professional-icon-wrapper">
|
||||
<i data-lucide="calculator" class="w-10 h-10 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-4 professional-text-primary">ROA PROIECTE<br>DEVIZE LUCRĂRI</h3>
|
||||
<p class="professional-text-secondary mb-6 leading-relaxed">
|
||||
Sistem specializat pentru calculul devizelor de lucrări, managementul proiectelor și estimarea costurilor de construcții.
|
||||
</p>
|
||||
<a href="roa/roa-proiecte-devize.html" class="professional-btn-secondary px-6 py-3 w-full inline-block">
|
||||
<span>Afla mai mult</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Grid Layout & Cards -->
|
||||
<section class="mb-5">
|
||||
<div class="row text-center justify-content-center">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card theme-card h-100">
|
||||
<div class="card-body">
|
||||
<img src="images/roa.gif" alt="ROA" class="img-fluid mb-3" style="max-height: 80px;">
|
||||
<h5 class="card-title">ROA - Romfast Applications</h5>
|
||||
<p class="card-text">Un sistem informatic complex de tip ERP destinat companiilor medii si mari, flexibil si capabil sa raspunda necesitatilor de dezvoltare.</p>
|
||||
<a href="roa/aplicatii-erp.html" class="btn btn-outline-primary">Mai multe</a>
|
||||
<!-- Professional Support Tools Section -->
|
||||
<section class="professional-support text-center mb-16">
|
||||
<h2 class="text-2xl font-bold mb-8 professional-text-primary">Suport Tehnic</h2>
|
||||
<div class="grid sm:grid-cols-3 gap-6">
|
||||
<div class="professional-support-card">
|
||||
<i data-lucide="download" class="w-8 h-8 mx-auto mb-4" style="color: #5288c4;"></i>
|
||||
<h3 class="font-semibold mb-3 professional-text-primary">Descarca Romfast Suport</h3>
|
||||
<a href="romfastsuport/files/romfast_suport.exe" class="professional-btn-secondary px-6 py-2 w-full inline-block">
|
||||
<span>Descarca</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="professional-support-card">
|
||||
<i data-lucide="monitor" class="w-8 h-8 mx-auto mb-4" style="color: #4a7ba7;"></i>
|
||||
<h3 class="font-semibold mb-3 professional-text-primary">Ammyy Admin</h3>
|
||||
<a href="http://www.ammyy.com/en/" target="_blank" class="professional-btn-secondary px-6 py-2 w-full inline-block">
|
||||
<span>Acceseaza</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card theme-card h-100">
|
||||
<div class="card-body">
|
||||
<img src="images/serviciisisuport.png" alt="Servicii si Suport" class="img-fluid mb-3" style="max-height: 80px;">
|
||||
<h5 class="card-title">Servicii si Suport</h5>
|
||||
<p class="card-text">Oferim suport tehnic si o serie de servicii pentru a asigura o implementare si utilizare cat mai eficienta a sistemelor noastre.</p>
|
||||
<a href="menu/roa-suport-tehnic.html" class="btn btn-outline-primary">Suport Tehnic</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Suport Tehnic Section -->
|
||||
<section class="mb-5 p-4 theme-bg-section rounded">
|
||||
<h2 class="text-center mb-4">Suport Tehnic</h2>
|
||||
<div class="row text-center">
|
||||
<div class="col-md-4">
|
||||
<a href="romfastsuport/files/romfast_suport.exe" class="btn btn-secondary mb-2">Descarca Romfast Suport</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<a href="http://www.ammyy.com/en/" target="_blank" class="btn btn-secondary mb-2">Ammyy Admin</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<a href="https://www.teamviewer.com/en/" target="_blank" class="btn btn-secondary mb-2">TeamViewer</a>
|
||||
<div class="professional-support-card">
|
||||
<i data-lucide="video" class="w-8 h-8 mx-auto mb-4" style="color: #5288c4;"></i>
|
||||
<h3 class="font-semibold mb-3 professional-text-primary">TeamViewer</h3>
|
||||
<a href="https://www.teamviewer.com/en/" target="_blank" class="professional-btn-secondary px-6 py-2 w-full inline-block">
|
||||
<span>Acceseaza</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-dark text-white text-center py-4 mt-5">
|
||||
<div class="container">
|
||||
<p>Copyright © 2025 Romfast SRL. Toate drepturile rezervate.</p>
|
||||
<p><a href="politica-confidentialitate.html" class="text-white">Politica de confidentialitate</a></p>
|
||||
<!-- Professional Footer -->
|
||||
<footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<div class="mb-6">
|
||||
<img src="images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
|
||||
<p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
|
||||
</div>
|
||||
<div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;">
|
||||
<p class="text-sm text-gray-400 mb-2">
|
||||
Copyright © 2025 Romfast SRL. Toate drepturile rezervate.
|
||||
</p>
|
||||
<a href="politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
|
||||
Politica de confidentialitate
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// WebP support detection - adds 'webp' class to documentElement if supported
|
||||
function checkWebPSupport() {
|
||||
const webP = new Image();
|
||||
webP.onload = webP.onerror = function () {
|
||||
if (webP.height === 2) {
|
||||
document.documentElement.classList.add('webp');
|
||||
}
|
||||
};
|
||||
webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
|
||||
}
|
||||
|
||||
// Run WebP detection immediately
|
||||
checkWebPSupport();
|
||||
</script>
|
||||
<script>
|
||||
function applyTheme(theme) {
|
||||
const body = document.body;
|
||||
const themeDropdownButton = document.getElementById('themeDropdown');
|
||||
|
||||
body.classList.remove('dark-mode'); // Always remove first
|
||||
|
||||
if (theme === 'dark') {
|
||||
body.classList.add('dark-mode');
|
||||
} else if (theme === 'system') {
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
}
|
||||
themeDropdownButton.textContent = theme.charAt(0).toUpperCase() + theme.slice(1) + ' Mode';
|
||||
localStorage.setItem('themePreference', theme);
|
||||
}
|
||||
|
||||
document.querySelectorAll('.dropdown-item[data-theme]').forEach(item => {
|
||||
item.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
const theme = this.getAttribute('data-theme');
|
||||
applyTheme(theme);
|
||||
});
|
||||
});
|
||||
|
||||
// Initial theme application based on saved preference or system preference
|
||||
const savedTheme = localStorage.getItem('themePreference');
|
||||
if (savedTheme) {
|
||||
applyTheme(savedTheme);
|
||||
} else {
|
||||
// Default to system mode if no preference is saved
|
||||
applyTheme('system');
|
||||
}
|
||||
|
||||
// Listen for system theme changes if currently in system mode
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
if (localStorage.getItem('themePreference') === 'system') {
|
||||
applyTheme('system');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<!-- Professional Theme JavaScript -->
|
||||
<script src="professional-theme.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
395
professional-theme.css
Normal file
395
professional-theme.css
Normal file
@@ -0,0 +1,395 @@
|
||||
/* Soft Professional Blue Theme - Gentle & Attenuated Colors */
|
||||
:root {
|
||||
/* Soft Professional Color Palette - Reduced Saturation 40-50% */
|
||||
--executive-navy: #2c3e50; /* Softer navy foundation */
|
||||
--soft-professional-blue: #5288c4; /* Much lighter than #1565c0 - primary soft blue */
|
||||
--gentle-trust-blue: #4a7ba7; /* Softer than #0d47a1 - gentle trust */
|
||||
--muted-accent-red: #b85555; /* Much softer than #c62828 - muted red */
|
||||
--soft-executive-white: #fafbfc; /* Clean background maintained */
|
||||
|
||||
/* Soft Professional Design System */
|
||||
--background: #fafbfc !important; /* Soft executive white background */
|
||||
--foreground: #2c3e50 !important; /* Soft executive navy for text */
|
||||
--card: #ffffff !important; /* Pure white cards */
|
||||
--card-foreground: #2c3e50 !important; /* Soft executive navy text */
|
||||
--card-hover: #f8f9fa !important; /* Very light hover */
|
||||
|
||||
--primary: #5288c4 !important; /* Soft professional blue primary */
|
||||
--primary-foreground: #ffffff !important; /* White text on primary */
|
||||
--secondary: #4a7ba7 !important; /* Gentle trust blue secondary */
|
||||
--secondary-foreground: #ffffff !important; /* White text on secondary */
|
||||
|
||||
--accent: #b85555 !important; /* Muted accent red for attention */
|
||||
--accent-foreground: #ffffff !important; /* White text on accent */
|
||||
|
||||
--muted: #f5f6f7 !important; /* Light gray muted */
|
||||
--muted-foreground: #2c3e50 !important; /* Soft executive navy muted text */
|
||||
|
||||
--border: #e8f2ff !important; /* Very light blue border */
|
||||
--input: #ffffff !important; /* White input background */
|
||||
--ring: #5288c4 !important; /* Soft professional blue focus ring */
|
||||
|
||||
/* Soft Professional Gradients - Gentle & Muted */
|
||||
--navbar-bg: linear-gradient(135deg, #2c3e50, #4a7ba7) !important; /* Soft navy to gentle trust blue */
|
||||
--hero-gradient: linear-gradient(180deg, #fafbfc, #ffffff) !important; /* Soft executive white to pure white */
|
||||
--button-gradient: linear-gradient(90deg, #5288c4, #4a7ba7) !important; /* Soft professional blue to gentle trust blue */
|
||||
--red-gradient: linear-gradient(90deg, #b85555, #c67b7b) !important; /* Muted red accent gradient */
|
||||
|
||||
/* Typography - Professional and trustworthy */
|
||||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
||||
--font-serif: 'Merriweather', Georgia, serif !important;
|
||||
--font-mono: 'JetBrains Mono', monospace !important;
|
||||
|
||||
/* Professional rounded corners */
|
||||
--radius: 8px !important;
|
||||
--radius-sm: 4px !important;
|
||||
--radius-md: 6px !important;
|
||||
--radius-lg: 12px !important;
|
||||
--radius-xl: 16px !important;
|
||||
|
||||
/* Soft professional shadows with reduced opacity - Gentle blue shadows */
|
||||
--shadow-2xs: 0 1px 3px 0px rgba(82, 136, 196, 0.03) !important;
|
||||
--shadow-xs: 0 2px 6px 0px rgba(82, 136, 196, 0.04) !important;
|
||||
--shadow-sm: 0 3px 10px 0px rgba(82, 136, 196, 0.05), 0 1px 2px 0px rgba(82, 136, 196, 0.02) !important;
|
||||
--shadow: 0 4px 16px 0px rgba(82, 136, 196, 0.06), 0 2px 4px 0px rgba(82, 136, 196, 0.03) !important;
|
||||
--shadow-md: 0 6px 20px 0px rgba(82, 136, 196, 0.08), 0 3px 6px 0px rgba(82, 136, 196, 0.04) !important;
|
||||
--shadow-lg: 0 8px 28px 0px rgba(82, 136, 196, 0.10), 0 4px 8px 0px rgba(82, 136, 196, 0.05) !important;
|
||||
--shadow-xl: 0 12px 36px 0px rgba(82, 136, 196, 0.12), 0 6px 12px 0px rgba(82, 136, 196, 0.06) !important;
|
||||
--shadow-2xl: 0 16px 48px 0px rgba(82, 136, 196, 0.16) !important;
|
||||
|
||||
/* Conservative spacing */
|
||||
--spacing: 0.375rem !important;
|
||||
--tracking-normal: -0.01em !important;
|
||||
}
|
||||
|
||||
/* Soft Professional Custom Styles */
|
||||
body {
|
||||
font-family: var(--font-sans) !important;
|
||||
background: var(--background) !important;
|
||||
color: var(--foreground) !important;
|
||||
letter-spacing: var(--tracking-normal) !important;
|
||||
line-height: 1.6 !important;
|
||||
}
|
||||
|
||||
/* Professional card styling with soft blue accents */
|
||||
.professional-card {
|
||||
background: var(--card) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: var(--radius) !important;
|
||||
box-shadow: var(--shadow) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.professional-card::before {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: -1px !important;
|
||||
left: -1px !important;
|
||||
right: -1px !important;
|
||||
bottom: -1px !important;
|
||||
background: var(--button-gradient) !important;
|
||||
border-radius: var(--radius) !important;
|
||||
z-index: -1 !important;
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.3s ease !important;
|
||||
}
|
||||
|
||||
.professional-card:hover {
|
||||
background: var(--card-hover) !important;
|
||||
box-shadow: var(--shadow-lg) !important;
|
||||
transform: translateY(-4px) !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.professional-card:hover::before {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Soft professional blue buttons */
|
||||
.professional-btn-primary {
|
||||
background: var(--button-gradient) !important;
|
||||
color: var(--primary-foreground) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
border: none !important;
|
||||
box-shadow: var(--shadow-sm) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.professional-btn-primary::before {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: -100% !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
background: var(--red-gradient) !important;
|
||||
transition: left 0.3s ease !important;
|
||||
}
|
||||
|
||||
.professional-btn-primary:hover::before {
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.professional-btn-primary:hover {
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.professional-btn-primary span {
|
||||
position: relative !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
.professional-btn-secondary {
|
||||
background: var(--card) !important;
|
||||
color: var(--primary) !important;
|
||||
border: 2px solid var(--primary) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
font-weight: 500 !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.professional-btn-secondary::before {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 0 !important;
|
||||
height: 100% !important;
|
||||
background: var(--primary) !important;
|
||||
transition: width 0.3s ease !important;
|
||||
z-index: 0 !important;
|
||||
}
|
||||
|
||||
.professional-btn-secondary:hover {
|
||||
color: var(--primary-foreground) !important;
|
||||
border-color: var(--primary) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.professional-btn-secondary:hover::before {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.professional-btn-secondary span {
|
||||
position: relative !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
/* Muted red accent button for urgent actions */
|
||||
.professional-btn-urgent {
|
||||
background: var(--red-gradient) !important;
|
||||
color: var(--accent-foreground) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
border: none !important;
|
||||
box-shadow: var(--shadow-sm) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.professional-btn-urgent:hover {
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
filter: brightness(1.05) !important;
|
||||
}
|
||||
|
||||
/* Professional navbar with soft gradient */
|
||||
.professional-navbar {
|
||||
background: var(--navbar-bg) !important;
|
||||
backdrop-filter: blur(12px) !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
/* Hero section with soft professional styling */
|
||||
.professional-hero {
|
||||
background: var(--hero-gradient) !important;
|
||||
border-radius: var(--radius-xl) !important;
|
||||
padding: 4rem 2rem !important;
|
||||
margin-bottom: 4rem !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.professional-hero::before {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: -50% !important;
|
||||
left: -50% !important;
|
||||
width: 200% !important;
|
||||
height: 200% !important;
|
||||
background: radial-gradient(circle, rgba(82, 136, 196, 0.03) 0%, transparent 50%) !important;
|
||||
opacity: 0.5 !important;
|
||||
animation: subtle-float 12s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
@keyframes subtle-float {
|
||||
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||
50% { transform: translate(20px, -20px) rotate(180deg); }
|
||||
}
|
||||
|
||||
/* Professional support section */
|
||||
.professional-support {
|
||||
background: var(--muted) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: var(--radius-xl) !important;
|
||||
padding: 3rem !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* Professional icon containers with soft blue themes */
|
||||
.professional-icon-wrapper {
|
||||
width: 80px !important;
|
||||
height: 80px !important;
|
||||
background: var(--button-gradient) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin: 0 auto 1.5rem auto !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.professional-icon-wrapper::before {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: -50% !important;
|
||||
left: -50% !important;
|
||||
width: 200% !important;
|
||||
height: 200% !important;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 30%, transparent 70%) !important;
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.3s ease !important;
|
||||
}
|
||||
|
||||
.professional-card:hover .professional-icon-wrapper::before {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Logo styling */
|
||||
.romfast-logo {
|
||||
height: 60px !important;
|
||||
filter: brightness(1.05) contrast(1.05) !important;
|
||||
}
|
||||
|
||||
/* Enhanced typography */
|
||||
h1, h2, h3 {
|
||||
font-weight: 700 !important;
|
||||
letter-spacing: -0.02em !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
/* Soft professional text colors */
|
||||
.professional-text-primary {
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
.professional-text-secondary {
|
||||
color: var(--muted-foreground) !important;
|
||||
}
|
||||
|
||||
/* Special featured card (ROA AUTO) - Muted red accent styling */
|
||||
.professional-card-featured {
|
||||
background: var(--card) !important;
|
||||
border: 2px solid var(--accent) !important;
|
||||
box-shadow: var(--shadow-xl) !important;
|
||||
}
|
||||
|
||||
.professional-card-featured .professional-icon-wrapper {
|
||||
background: var(--red-gradient) !important;
|
||||
}
|
||||
|
||||
/* Muted red bullet points for ROA AUTO problems */
|
||||
.red-bullet {
|
||||
color: var(--accent) !important;
|
||||
}
|
||||
|
||||
/* Enhanced hover effects for support cards */
|
||||
.professional-support-card {
|
||||
background: var(--card) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: var(--radius) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
.professional-support-card:hover {
|
||||
box-shadow: var(--shadow-lg) !important;
|
||||
transform: translateY(-2px) !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* Soft blue hover states for navigation */
|
||||
.nav-link {
|
||||
transition: color 0.3s ease !important;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #90caf9 !important; /* Gentle blue hover - softer than original */
|
||||
}
|
||||
|
||||
/* Professional service sections with soft blue accents */
|
||||
.service-technology {
|
||||
background: linear-gradient(135deg, rgba(82, 136, 196, 0.03), rgba(74, 123, 167, 0.03)) !important;
|
||||
border-left: 4px solid var(--primary) !important;
|
||||
padding: 1.5rem !important;
|
||||
border-radius: var(--radius) !important;
|
||||
}
|
||||
|
||||
.service-reliability {
|
||||
background: linear-gradient(135deg, rgba(74, 123, 167, 0.03), rgba(82, 136, 196, 0.03)) !important;
|
||||
border-left: 4px solid var(--secondary) !important;
|
||||
padding: 1.5rem !important;
|
||||
border-radius: var(--radius) !important;
|
||||
}
|
||||
|
||||
/* Dark mode adjustments for soft professional blue theme */
|
||||
.dark-mode {
|
||||
--background: #141822 !important;
|
||||
--foreground: #e2e8f0 !important;
|
||||
--card: #1e2235 !important;
|
||||
--card-foreground: #e2e8f0 !important;
|
||||
--card-hover: #252a3e !important;
|
||||
--muted: #252a3e !important;
|
||||
--muted-foreground: #94a3b8 !important;
|
||||
--border: #334155 !important;
|
||||
--input: #1e2235 !important;
|
||||
--navbar-bg: linear-gradient(135deg, #0f172a, #1e293b) !important;
|
||||
--hero-gradient: linear-gradient(180deg, #1e2235, #141822) !important;
|
||||
}
|
||||
|
||||
.dark-mode .professional-text-primary {
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
.dark-mode .professional-text-secondary {
|
||||
color: var(--muted-foreground) !important;
|
||||
}
|
||||
|
||||
/* Mobile responsiveness for soft professional design */
|
||||
@media (max-width: 768px) {
|
||||
.professional-hero {
|
||||
padding: 2rem 1.5rem !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
}
|
||||
|
||||
.professional-card {
|
||||
border-radius: var(--radius-md) !important;
|
||||
}
|
||||
|
||||
.professional-btn-primary,
|
||||
.professional-btn-secondary,
|
||||
.professional-btn-urgent {
|
||||
border-radius: var(--radius) !important;
|
||||
}
|
||||
}
|
||||
395
professional-theme.js
Normal file
395
professional-theme.js
Normal file
@@ -0,0 +1,395 @@
|
||||
// Professional Theme JavaScript - Romfast Applications
|
||||
// This file contains all interactive functionality for the professional theme
|
||||
|
||||
// Initialize when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeProfessionalTheme();
|
||||
});
|
||||
|
||||
function initializeProfessionalTheme() {
|
||||
// Initialize all components
|
||||
initializeLucideIcons();
|
||||
initializeThemeToggle();
|
||||
initializeCardAnimations();
|
||||
initializeScrollAnimations();
|
||||
initializeButtonEffects();
|
||||
initializeHeroAnimations();
|
||||
initializeSmoothScrolling();
|
||||
initializeWebPSupport();
|
||||
}
|
||||
|
||||
// Initialize Lucide icons
|
||||
function initializeLucideIcons() {
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
// Enhanced theme toggle functionality
|
||||
function initializeThemeToggle() {
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const body = document.body;
|
||||
|
||||
if (!themeToggle) return;
|
||||
|
||||
// Check for saved theme preference or default to light mode
|
||||
const currentTheme = localStorage.getItem('theme') || 'light';
|
||||
if (currentTheme === 'dark') {
|
||||
body.classList.add('dark-mode');
|
||||
themeToggle.innerHTML = '<i data-lucide="moon" class="w-5 h-5"></i>';
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
themeToggle.addEventListener('click', () => {
|
||||
body.classList.toggle('dark-mode');
|
||||
|
||||
// Update icon and save preference
|
||||
if (body.classList.contains('dark-mode')) {
|
||||
themeToggle.innerHTML = '<i data-lucide="moon" class="w-5 h-5"></i>';
|
||||
localStorage.setItem('theme', 'dark');
|
||||
} else {
|
||||
themeToggle.innerHTML = '<i data-lucide="sun" class="w-5 h-5"></i>';
|
||||
localStorage.setItem('theme', 'light');
|
||||
}
|
||||
|
||||
// Reinitialize icons after DOM change
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Professional card hover animations
|
||||
function initializeCardAnimations() {
|
||||
document.querySelectorAll('.professional-card').forEach(card => {
|
||||
card.addEventListener('mouseenter', (e) => {
|
||||
const rect = card.getBoundingClientRect();
|
||||
const centerX = rect.left + rect.width / 2;
|
||||
const centerY = rect.top + rect.height / 2;
|
||||
const mouseX = e.clientX;
|
||||
const mouseY = e.clientY;
|
||||
|
||||
const deltaX = (mouseX - centerX) * 0.05;
|
||||
const deltaY = (mouseY - centerY) * 0.05;
|
||||
|
||||
card.style.transform = `translateY(-4px) rotateX(${-deltaY}deg) rotateY(${deltaX}deg)`;
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', () => {
|
||||
card.style.transform = 'translateY(0) rotateX(0deg) rotateY(0deg)';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Intersection Observer for scroll animations
|
||||
function initializeScrollAnimations() {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Apply scroll animations to cards
|
||||
document.querySelectorAll('.professional-card').forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
|
||||
observer.observe(card);
|
||||
});
|
||||
|
||||
// Apply scroll animations to support cards
|
||||
document.querySelectorAll('.professional-support-card').forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = `opacity 0.6s ease ${index * 0.15}s, transform 0.6s ease ${index * 0.15}s`;
|
||||
observer.observe(card);
|
||||
});
|
||||
}
|
||||
|
||||
// Professional button interactions with enhanced effects
|
||||
function initializeButtonEffects() {
|
||||
// Add ripple animation keyframes to document
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(3);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Add click ripple effect to buttons
|
||||
document.querySelectorAll('.professional-btn-primary, .professional-btn-secondary, .professional-btn-urgent').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
createRippleEffect(btn, e);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Create ripple effect for button clicks
|
||||
function createRippleEffect(button, event) {
|
||||
const ripple = document.createElement('div');
|
||||
const rect = button.getBoundingClientRect();
|
||||
const size = Math.max(rect.width, rect.height);
|
||||
const x = event.clientX - rect.left - size / 2;
|
||||
const y = event.clientY - rect.top - size / 2;
|
||||
|
||||
ripple.style.cssText = `
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
width: ${size}px;
|
||||
height: ${size}px;
|
||||
left: ${x}px;
|
||||
top: ${y}px;
|
||||
animation: ripple 0.5s linear;
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
||||
button.style.position = 'relative';
|
||||
button.style.overflow = 'hidden';
|
||||
button.appendChild(ripple);
|
||||
|
||||
setTimeout(() => {
|
||||
ripple.remove();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// Subtle floating animation for hero background
|
||||
function initializeHeroAnimations() {
|
||||
const hero = document.querySelector('.professional-hero');
|
||||
if (!hero) return;
|
||||
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
|
||||
hero.addEventListener('mousemove', (e) => {
|
||||
const rect = hero.getBoundingClientRect();
|
||||
mouseX = (e.clientX - rect.left) / rect.width;
|
||||
mouseY = (e.clientY - rect.top) / rect.height;
|
||||
|
||||
const translateX = (mouseX - 0.5) * 10;
|
||||
const translateY = (mouseY - 0.5) * 10;
|
||||
hero.style.setProperty('--mouse-x', `${translateX}px`);
|
||||
hero.style.setProperty('--mouse-y', `${translateY}px`);
|
||||
});
|
||||
}
|
||||
|
||||
// Enhanced smooth scrolling for anchor links
|
||||
function initializeSmoothScrolling() {
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// WebP support detection
|
||||
function initializeWebPSupport() {
|
||||
function checkWebPSupport() {
|
||||
const webP = new Image();
|
||||
webP.onload = webP.onerror = function () {
|
||||
if (webP.height === 2) {
|
||||
document.documentElement.classList.add('webp');
|
||||
}
|
||||
};
|
||||
webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
|
||||
}
|
||||
|
||||
checkWebPSupport();
|
||||
}
|
||||
|
||||
// Utility function to reinitialize components (useful for dynamic content)
|
||||
function reinitializeProfessionalTheme() {
|
||||
initializeLucideIcons();
|
||||
initializeCardAnimations();
|
||||
initializeButtonEffects();
|
||||
}
|
||||
|
||||
// Navigation dropdown functionality
|
||||
function initializeNavigation() {
|
||||
// Handle dropdown menus
|
||||
document.querySelectorAll('.dropdown').forEach(dropdown => {
|
||||
const button = dropdown.querySelector('[data-dropdown-toggle]');
|
||||
const menu = dropdown.querySelector('.dropdown-menu');
|
||||
|
||||
if (button && menu) {
|
||||
button.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
menu.classList.toggle('show');
|
||||
});
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!dropdown.contains(e.target)) {
|
||||
menu.classList.remove('show');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Mobile menu functionality
|
||||
function initializeMobileMenu() {
|
||||
const mobileMenuButton = document.querySelector('[data-mobile-menu-toggle]');
|
||||
const mobileMenu = document.querySelector('[data-mobile-menu]');
|
||||
|
||||
if (mobileMenuButton && mobileMenu) {
|
||||
mobileMenuButton.addEventListener('click', () => {
|
||||
mobileMenu.classList.toggle('show');
|
||||
mobileMenuButton.setAttribute('aria-expanded',
|
||||
mobileMenu.classList.contains('show') ? 'true' : 'false'
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Form enhancements
|
||||
function initializeForms() {
|
||||
// Add floating label effects
|
||||
document.querySelectorAll('.form-floating input, .form-floating textarea').forEach(input => {
|
||||
input.addEventListener('focus', () => {
|
||||
input.parentElement.classList.add('focused');
|
||||
});
|
||||
|
||||
input.addEventListener('blur', () => {
|
||||
if (!input.value) {
|
||||
input.parentElement.classList.remove('focused');
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize state for pre-filled inputs
|
||||
if (input.value) {
|
||||
input.parentElement.classList.add('focused');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Loading state management
|
||||
function showLoading(element) {
|
||||
if (!element) return;
|
||||
|
||||
element.classList.add('loading');
|
||||
element.disabled = true;
|
||||
|
||||
const originalText = element.textContent;
|
||||
element.setAttribute('data-original-text', originalText);
|
||||
element.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin mr-2"></i>Loading...';
|
||||
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
function hideLoading(element) {
|
||||
if (!element) return;
|
||||
|
||||
element.classList.remove('loading');
|
||||
element.disabled = false;
|
||||
|
||||
const originalText = element.getAttribute('data-original-text');
|
||||
if (originalText) {
|
||||
element.textContent = originalText;
|
||||
element.removeAttribute('data-original-text');
|
||||
}
|
||||
}
|
||||
|
||||
// Toast notification system
|
||||
function showToast(message, type = 'info', duration = 5000) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast toast-${type}`;
|
||||
toast.innerHTML = `
|
||||
<div class="toast-content">
|
||||
<i data-lucide="${getToastIcon(type)}" class="w-5 h-5"></i>
|
||||
<span>${message}</span>
|
||||
</div>
|
||||
<button class="toast-close" onclick="this.parentElement.remove()">
|
||||
<i data-lucide="x" class="w-4 h-4"></i>
|
||||
</button>
|
||||
`;
|
||||
|
||||
// Add toast container if it doesn't exist
|
||||
let container = document.querySelector('.toast-container');
|
||||
if (!container) {
|
||||
container = document.createElement('div');
|
||||
container.className = 'toast-container';
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
container.appendChild(toast);
|
||||
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
// Auto remove after duration
|
||||
setTimeout(() => {
|
||||
toast.remove();
|
||||
}, duration);
|
||||
}
|
||||
|
||||
function getToastIcon(type) {
|
||||
const icons = {
|
||||
success: 'check-circle',
|
||||
error: 'alert-circle',
|
||||
warning: 'alert-triangle',
|
||||
info: 'info'
|
||||
};
|
||||
return icons[type] || icons.info;
|
||||
}
|
||||
|
||||
// Scroll-to-top functionality
|
||||
function initializeScrollToTop() {
|
||||
const scrollButton = document.createElement('button');
|
||||
scrollButton.className = 'scroll-to-top professional-btn-primary';
|
||||
scrollButton.innerHTML = '<i data-lucide="arrow-up" class="w-5 h-5"></i>';
|
||||
scrollButton.setAttribute('aria-label', 'Scroll to top');
|
||||
document.body.appendChild(scrollButton);
|
||||
|
||||
// Show/hide button based on scroll position
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.pageYOffset > 300) {
|
||||
scrollButton.classList.add('show');
|
||||
} else {
|
||||
scrollButton.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
// Scroll to top functionality
|
||||
scrollButton.addEventListener('click', () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
// Export functions for global use
|
||||
window.ProfessionalTheme = {
|
||||
reinitialize: reinitializeProfessionalTheme,
|
||||
showLoading: showLoading,
|
||||
hideLoading: hideLoading,
|
||||
showToast: showToast,
|
||||
createRippleEffect: createRippleEffect
|
||||
};
|
||||
Reference in New Issue
Block a user