Updated Main Welcome page

src/app/_services/route.service.ts

@@ -8,16 +8,19 @@ export class RouteService{
 
     public static getRoutes()
     {
-        const routes: Routes = [];
+        const routes: Routes = [
+            { path: '', pathMatch: 'full', loadComponent: () => import('../pages/welcome/welcome.component').then(mod => mod.WelcomeComponent), data: { title: 'Welcome to Util Plex' } }
+        ];
+
         for (const c of RouteService.routeCategories)
         {   
             for (const route of c.routes)
             {
                 if (route.loadComponent)
                 {
-                    routes.push({ path: route.url.substring(1), pathMatch: 'full', loadComponent: route.loadComponent });
+                    routes.push({ path: route.url.substring(1), pathMatch: 'full', loadComponent: route.loadComponent, data: { title: route.title } });
                 }else{
-             routes.push({ path: route.url.substring(1), pathMatch: 'full', component: route.component });
+             routes.push({ path: route.url.substring(1), pathMatch: 'full', component: route.component,data:{title:route.title} });
                 }
             }
         }
@@ -27,21 +30,21 @@ export class RouteService{
         {
             name: 'Formatters',
             routes: [
-                { name: 'SQL', url: '/format/sql', loadComponent: () => import('../formatters/f-sql/f-sql.component').then(mod => mod.FSqlComponent) },
-                { name: 'JSON', url: '/format/json', loadComponent: () => import('../formatters/f-json/f-json.component').then(mod => mod.FJsonComponent)  },
-                { name: 'CSS', url: '/format/css', loadComponent: () => import('../formatters/f-css/f-css.component').then(mod => mod.FCssComponent) }
+                { name: 'SQL', title:'SQL Formatter',  url: '/format/sql', loadComponent: () => import('../formatters/f-sql/f-sql.component').then(mod => mod.FSqlComponent) },
+                { name: 'JSON', title: 'JSON Formatter', url: '/format/json', loadComponent: () => import('../formatters/f-json/f-json.component').then(mod => mod.FJsonComponent)  },
+                { name: 'CSS', title: 'CSS Formatter', url: '/format/css', loadComponent: () => import('../formatters/f-css/f-css.component').then(mod => mod.FCssComponent) }
             ]
         },
         {
             name: 'Converters',
             routes: [
-                { name: 'Json To Yaml', url: '/convert/json-yaml', loadComponent: () => import('../converters/c-json-yaml/c-json-yaml.component').then(mod => mod.CJsonYamlComponent) },
+                { name: 'Json To Yaml', title: 'Json To Yaml', url: '/convert/json-yaml', loadComponent: () => import('../converters/c-json-yaml/c-json-yaml.component').then(mod => mod.CJsonYamlComponent) },
             ]
         },
         {
             name: 'Time',
             routes: [
-                { name: 'Time Zones', url: '/time/zones', loadComponent: () => import('../time/time-zones/time-zones.component').then(mod => mod.TimeZonesComponent)},
+                { name: 'Time Zones', title:'Time Zone Conversions' , url: '/time/zones', loadComponent: () => import('../time/time-zones/time-zones.component').then(mod => mod.TimeZonesComponent)},
             ]
         }
     ]
@@ -53,6 +56,7 @@ export interface RouteCategory{
 export interface UpRoute{
     name: string | any;
     url: string | any;
+    title:string ;
     component?: Type<any>;
     loadComponent?: () => Type<unknown> | Observable<Type<unknown> | DefaultExport<Type<unknown>>> | Promise<Type<unknown> | DefaultExport<Type<unknown>>>;
 }

src/app/app-routing.module.ts

@@ -8,4 +8,6 @@ const routes: Routes = [...RouteService.getRoutes()];
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+
+ }

src/app/app.component.html

@@ -4,8 +4,13 @@
 <div class="middle-section">
     <app-side-bar></app-side-bar>
     <div class="route-container">
-        <div class="top-bar"><a href="https://github.com/timothydodd/utilplex"><img alt="GitHub"
-                     src="assets/github-mark.svg" /></a></div>
+        <div class="top-bar">
+            @if(title()){
+            <h1>{{title()}}</h1>
+            }
+            <a href="https://github.com/timothydodd/utilplex"><img alt="GitHub" src="assets/github-mark.svg" />
+            </a>
+        </div>
         <router-outlet></router-outlet>
     </div>
 </div>

src/app/app.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
+import { ActivationStart, Router } from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -8,5 +9,16 @@ import { Component } from '@angular/core';
 
 export class AppComponent {
 
+  router = inject(Router);
+  title = signal(null)
+  constructor() {
 
+    this.router.events.subscribe((event) => {
+      if (event instanceof ActivationStart) {
+
+        const data = event.snapshot.data['title'] || null;
+        this.title.set(data);
+      }
+    });
+  }
 }

src/app/converters/convert-view/convert-view.component.html

@@ -1,5 +1,3 @@
-<h1>{{title}}</h1>
-
 <div *ngIf="error()" class="error">{{error()}}</div>
 
 <div class="split-view">

src/app/formatters/format-view/format-view.component.html

@@ -1,7 +1,4 @@
-<h1>{{title}}</h1>
-
 <div *ngIf="error()" class="error">{{error()}}</div>
-
 <div class="split-view">
     <div class="editor-wrap">
         <div class="tool-bar">

src/app/pages/welcome/welcome.component.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+
+  main {
+    max-width: 800px;
+  }
+}

src/app/pages/welcome/welcome.component.ts

@@ -0,0 +1,45 @@
+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-welcome',
+  standalone: true,
+  imports: [
+    CommonModule,
+  ],
+  template: `
+  
+      <main>
+       <section>
+            <p>Util Plex is a web-based platform designed to assist developers and coders by providing tools for formatting programming code and converting data formats.</p>
+        </section>
+        <section>
+            <h2>Code Formatting Features</h2>
+            <p>Our code formatter allows users to input unstructured or unformatted code into a text box and receive well-formatted, readable code in return. This feature supports multiple programming languages, including CSS, and adheres to best practices for code structure and readability.</p>
+            <h3>How to Use:</h3>
+            <ol>
+                <li><strong>Select the Code Format:</strong> Choose the programming language or format for the code you are working with.</li>
+                <li><strong>Input Your Code:</strong> Paste the code into the designated input box on the left side of the page.</li>
+                <li><strong>Receive Formatted Code:</strong> Click the 'Format' button to process your code. The formatted code will appear in the output box on the right, ready for use.</li>
+            </ol>
+        </section>
+        <section>
+            <h2>Data Conversion Tools</h2>
+            <p>Our platform also offers tools for converting data between different formats, such as JSON to YAML, and a time zone converter for managing times across different geographic locations. These tools are designed to simplify data management tasks and improve workflow efficiency.</p>
+            <ul>
+                <li><strong>JSON to YAML Converter:</strong> Convert JSON files into YAML format for enhanced readability and compatibility with various applications.</li>
+                <li><strong>Time Zone Converter:</strong> Easily convert times between different time zones to coordinate schedules and deadlines across global teams.</li>
+            </ul>
+        </section>
+        <section>
+            <h2>About Util Plex</h2>
+            <p>Util Plex aims to support the development community by providing a reliable, user-friendly platform for code formatting and data conversion. Whether you are a professional developer or a beginner, our tools are designed to enhance your productivity and improve the quality of your work.</p>
+        </section>
+    </main>
+
+  
+  `,
+  styleUrl: './welcome.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WelcomeComponent { }

src/app/time/time-zones/time-zones.component.html

@@ -1,4 +1,3 @@
-<h1>Time Zone Conversions</h1>
 <div class="flex-row">
     <div class="flex-column f-center">
         <label for="timePicker">Time</label>

src/styles.scss

@@ -70,8 +70,20 @@ h4,
 h5,
 h6 {
     color: var(--headers);
+    font-weight: bold;
 }
 
+h2 {
+    font-size: 18px;
+}
+
+h3 {
+    font-size: 16px;
+}
+
+h2 {
+    color: rgba($purple, 0.75);
+}
 
 .form-control:focus {
     border-color: $purple;