feat: Implement GUID and Lorem Ipsum generators with responsive design

- Added GGuidComponent and GLoremComponent for generating GUIDs and Lorem Ipsum text respectively.
- Introduced signal-based state management for input fields in both components.
- Created responsive styles for both components to enhance usability on various screen sizes.
- Developed a shared GeneratorViewComponent to display generated output with error handling.
- Styled components with modern UI elements including gradients, hover effects, and custom checkboxes.
- Integrated Monaco Editor for displaying generated content with syntax highlighting.

Author: timothydodd

CLAUDE.md

@@ -0,0 +1,66 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+UtilPlex is an Angular 19.2.x developer utilities web application providing code formatting, data conversion, encoding, and time zone tools. The app uses modern Angular features including standalone components, signals, and SSR.
+
+## Development Commands
+- `npm start` - Start development server
+- `npm run build` - Production build
+- `npm run build:ci` - CI production build  
+- `npm test` - Run tests
+- `npm run lint` - Run ESLint
+- `npm run serve:ssr:utilplex` - Serve SSR build
+
+## Architecture Overview
+
+### Service Provider Pattern
+The application uses abstract base classes with concrete implementations:
+
+**Formatters**: `FormatViewService` (abstract) → `SqlFormatProvider`, `JsonFormatProvider`, etc.  
+**Converters**: `ConverterServiceBase` (abstract) → `JsonToYamlConverter`
+
+### Routing System
+Routes are centrally managed in `src/app/_services/route.service.ts` with:
+- Dynamic route generation from categories
+- Lazy-loaded components via dynamic imports
+- Signal-based title management
+- SEO optimization built-in
+
+### Component Architecture
+- **Generic Views**: `FormatViewComponent` and `ConvertViewComponent` work with any service implementation
+- **Standalone Components**: Modern Angular standalone architecture throughout
+- **Signal-Based State**: Input/output code and error states managed via Angular signals
+
+### Key Directories
+- `src/app/_services/` - Global services
+- `src/app/formatters/` - Code formatting tools
+- `src/app/converters/` - Data conversion tools  
+- `src/app/encoders/` - Encoding/decoding tools
+- `src/app/monaco/` - Monaco editor configuration
+- `src/styles/` - SCSS styling system with CSS variables
+
+## Adding New Utilities
+
+### For Formatters:
+1. Create concrete service implementing `FormatViewService`
+2. Add route definition in `route.service.ts`
+3. Component uses generic `FormatViewComponent`
+
+### For Converters:
+1. Create concrete service extending `ConverterServiceBase`
+2. Add route definition in `route.service.ts`  
+3. Component uses generic `ConvertViewComponent`
+
+## Monaco Editor Integration
+- Custom Dracula theme in `monaco-global-config.ts`
+- Language-specific configurations
+- Copy/paste functionality built-in
+- Read-only output editors
+
+## Code Style
+- Use `inject()` function for dependency injection
+- Prefer signals over observables for component state
+- Follow existing naming patterns: `f-json` (formatter), `c-json-yaml` (converter)
+- Abstract base classes for extensibility

src/app/_services/route.service.ts

@@ -111,6 +111,25 @@ export class RouteService {
         },
       ],
     },
+    {
+      name: 'Generators',
+      routes: [
+        {
+          name: 'GUID',
+          title: 'GUID Generator',
+          url: '/generate/guid',
+          description: 'Generate unique identifiers (GUIDs/UUIDs) with customizable quantity for your applications.',
+          loadComponent: () => import('../generators/g-guid/g-guid.component').then((mod) => mod.GGuidComponent),
+        },
+        {
+          name: 'Lorem',
+          title: 'Lorem Ipsum Generator',
+          url: '/generate/lorem',
+          description: 'Generate Lorem Ipsum placeholder text with options for words, sentences, or paragraphs.',
+          loadComponent: () => import('../generators/g-lorem/g-lorem.component').then((mod) => mod.GLoremComponent),
+        },
+      ],
+    },
   ];
 }
 export interface RouteCategory {

src/app/app.component.html

@@ -3,12 +3,12 @@
   <app-side-bar></app-side-bar>
   <div class="back">
     <div class="route-container">
-      <div class="top-bar">
-        @if (RouterService.Title()) {
-          <h1>{{ RouterService.Title() }}</h1>
-        }
-        <a href="https://github.com/timothydodd/utilplex"><img alt="GitHub" src="assets/github-mark.svg" /> </a>
-      </div>
+      @if (RouterService.Title()) {
+        <h1 class="seo-title">{{ RouterService.Title() }}</h1>
+      }
+      <a href="https://github.com/timothydodd/utilplex" class="github-float">
+        <img alt="GitHub" src="assets/github-mark.svg" />
+      </a>
       <router-outlet></router-outlet>
     </div>
   </div>