add: changelog; change: coming soon, Styling, navbar styling

src/app/app.html

@@ -1,6 +1,6 @@
 <app-navbar class="fixed top-0 left-0 w-screen h-16 z-[999]"></app-navbar>
 
-<div class="p-8 pt-24 min-h-screen text-white bg-zinc-900 mx-auto flex justify-center-safe">
+<div class="min-h-screen p-8 pt-24 text-white max-w-7xl mx-auto space-y-12">
   <!-- pt-16 bg-black-eerie h-screen flex justify-center-safe mx-auto " -->
   <router-outlet></router-outlet>
 </div>

src/app/app.routes.ts

@@ -4,6 +4,7 @@ import { TestIt } from './sites/test-it/test-it';
 import { GeneratorPassword } from './sites/generator/password/generator-password.component';
 import { GeneratorQrcode } from './sites/generator/qrcode/generator-qrcode';
 import { Comingsoon } from './sites/navbar/comingsoon/comingsoon';
+import { Changelog } from './sites/navbar/changelog/changelog';
 
 export const routes: Routes = [
   {
@@ -19,6 +20,10 @@ export const routes: Routes = [
     path: 'coming-soon',
     component: Comingsoon,
   }, 
+  {
+    path: 'changelog',
+    component: Changelog,
+  },
   // GENERATORS
   {
     path: 'generator/password',

src/app/components/navbar/navbar.html

@@ -3,16 +3,17 @@
     class="flex justify-between items-center px-4 bg-blue-marian text-white container mx-auto h-full"
   >
     <div class="flex items-center h-full">
-      <a class="font-bold text-xl" routerLink="/">Home</a>
+      <a class="font-bold text-xl hover:text-blue-200" routerLink="/">Home</a>
     </div>
     <div class="flex flex-row space-x-4 gap-6">
-      <a class="hover:text-blue-200" routerLink="/coming-soon" routerLinkActive="active-link"
+      <a class="hover:text-blue-200" routerLink="/coming-soon" routerLinkActive="active-link" [ngClass]="{ 'underline underline-offset-8': route === '/coming-soon' }"
         >Coming Soon</a
       >
-      <a class="hover:text-blue-200" routerLink="/changelog" routerLinkActive="active-link"
+      <a class="hover:text-blue-200" routerLink="/changelog" routerLinkActive="active-link" [ngClass]="{ 'underline underline-offset-8': route === '/changelog' }"
         >Changelog</a
       >
-      <a class="hover:text-blue-200" routerLink="/about" routerLinkActive="active-link">About</a>
+      <a class="hover:text-blue-200" routerLink="/about" routerLinkActive="active-link" [ngClass]="{ 'underline underline-offset-8': route === '/about' }">About</a>
     </div>
   </div>
 </nav>
+  

src/app/components/navbar/navbar.ts

@@ -1,11 +1,33 @@
-import { Component } from '@angular/core';
+import { NgClass } from '@angular/common';
-import { RouterLink, RouterLinkActive } from '@angular/router';
+import { Component, OnInit, OnDestroy } from '@angular/core';
-import { NgOptimizedImage } from '@angular/common';
+import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-navbar',
-  imports: [RouterLinkActive, RouterLink],
+  imports: [RouterLinkActive, RouterLink, NgClass],
   templateUrl: './navbar.html',
   styleUrl: './navbar.css',
 })
-export class Navbar {}
+export class Navbar {
+  private routerSubscription!: Subscription;
+  route: string = '';
+
+  constructor(private router: Router) {
+    console.log(this.router.url)
+  }
+
+
+    ngOnInit() {
+    this.routerSubscription = this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        console.log('Route changed:', event.url);
+        this.route = event.url;
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.routerSubscription.unsubscribe(); // Prevent memory leaks
+  }
+}

src/app/sites/generator/password/generator-password.component.html

@@ -1,4 +1,4 @@
-<div>
+<div class="rounded-lg shadow-md p-6 max-w-2xl mx-auto ">
   <div class="mb-8">
     <app-custom-title
       text="Password Generator"
@@ -6,7 +6,7 @@
       fontWeight="bold"
     ></app-custom-title>
   </div>
-  <div class="bg-zinc-800 rounded-lg shadow-md p-6">
+  <div class="bg-zinc-800 rounded-lg shadow-md p-6 max-w-2xl mx-auto ">
     <app-custom-description
       descriptionText="Generate secure passwords with customizable options. For maximum security, it's recommend to:"
       [additionalListEnabled]="true"

src/app/sites/generator/qrcode/generator-qrcode.html

@@ -1,4 +1,4 @@
-<div class="px-8 text-white">
+<div class="rounded-lg shadow-md p-6 max-w-2xl mx-auto">
     <div class="mx-auto">
         <div class="mb-8">
             <app-custom-title

src/app/sites/navbar/changelog/changelog.html

@@ -0,0 +1,59 @@
+<div class="rounded-lg shadow-md p-6 max-w-2xl mx-auto">
+    <div class="mb-8">
+        <app-custom-title
+        text="Changelog"
+        [textSizeInPx]="36"
+        fontWeight="bold"
+        ></app-custom-title>
+    </div>
+
+    <div class="bg-zinc-800 rounded-lg shadow-md p-6 max-w-2xl mx-auto gap-4">
+        <p>Changes that have been made:</p>
+
+        <div class="mt-4"> <!-- Version 0.3.0-->
+            <app-custom-title 
+            text="Version 0.3.0"
+            [textSizeInPx]="24"
+            fontWeight="bold"
+            ></app-custom-title>
+            <ul class="list-disc pl-10 mt-2 space-y-2 mt-2 text-gray-300">
+                <li>Site remade in Angular 20</li>
+                <li>Settings Tab removed</li>
+                <li>Text in <a routerLink="/coming-soon" class="text-blue-500 hover:text-blue-600">Coming soon</a> changed</li>
+            </ul>
+        </div>
+
+        <div class="mt-4"><!-- Version 0.2.0 -->
+            <app-custom-title 
+            text="Version 0.2.0"
+            [textSizeInPx]="24"
+            fontWeight="bold"
+            ></app-custom-title>
+            <ul class="list-disc pl-10 mt-2 space-y-2 text-gray-300">
+                <li>Added Settings and Changelog pages</li>
+                <li>Color Converter added</li>
+                <li>Enhanced QR code generator</li>
+                <li>Currency converter added</li>
+                <li>Number Converter added</li>
+                <li>Scientific Calculator added</li>
+                <li>Removed bookmarked websites feature</li>
+                <li>Updated navigation structure</li>
+            </ul>
+        </div>
+        <div class="mt-4"> <!-- Version 0.1.0-->
+            <app-custom-title 
+            text="Version 0.1.0"
+            [textSizeInPx]="24"
+            fontWeight="bold"
+            ></app-custom-title>
+            <ul class="list-disc pl-10 mt-2 space-y-2 mt-2 text-gray-300">
+                <li>Initial release</li>
+                <li>Added basic tools: Password Generator, QR Code Generator</li>
+                <li>Added converters: Number, Color, Currency</li>
+                <li>Added Scientific Calculator</li>
+                <li>Basic website layout and navigation</li>
+            </ul>
+        </div>
+    </div>
+</div>
+

src/app/sites/navbar/changelog/changelog.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Changelog } from './changelog';
+
+describe('Changelog', () => {
+  let component: Changelog;
+  let fixture: ComponentFixture<Changelog>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Changelog]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Changelog);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/sites/navbar/changelog/changelog.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CustomTitle } from "../../../components/custom-title/custom-title";
+import { RouterLink } from "@angular/router";
+
+@Component({
+  selector: 'app-changelog',
+  imports: [CustomTitle, RouterLink],
+  templateUrl: './changelog.html',
+  styleUrl: './changelog.css',
+})
+export class Changelog {
+
+}

src/app/sites/navbar/comingsoon/comingsoon.html

@@ -1,4 +1,4 @@
-<div>
+<div class="rounded-lg shadow-md p-6 max-w-2xl mx-auto">
     <div class="mb-8">
         <app-custom-title
         text="Coming Soon"
@@ -7,6 +7,7 @@
         ></app-custom-title>
     </div>
 
+
     <div class="bg-zinc-800 rounded-lg shadow-md p-6 max-w-2xl mx-auto">
         <div class="text-gray-300">
             <p>This project is maintained and developed by 
@@ -18,9 +19,28 @@
                 Instead, I add new tools and functions when I have a good idea and the time allows.
             </p>
         </div>
+
+        <div class="mt-4">
+            <app-custom-title 
+            text="Version 0.4.0"
+            [textSizeInPx]="24"
+            fontWeight="bold"
+            ></app-custom-title>
+            <div class="ml-4">
+                <h3>New Tool(s):</h3>
+                <ul class="list-disc pl-10 mt-2 space-y-2 text-gray-300">
+                    <li>Document Converter - changes format of documents</li>
+                    <li>Random Generator - generates random numbers or selects a randing string from a input</li>
+                <li>Date Converter - converts date formats</li>
+                <li>Text Case Converter - converts text to upper, lower or title case</li>
+            </ul>
+        </div>
+
+        <hr class="my-4 border-gray-400">
+
         <div class="bg-blue-900/20 rounded-lg p-6 border border-blue-800 mt-4">
             <h3 class="text-xl font-bold text-blue-400 mb-2">Want to suggest a feature?</h3>
-            <div class="ml-2">
+            <div class="ml-4">
                 <p>Feel free to give me feedback or suggestions for the project! I welcome any suggestions, feedback or features.</p>
                 <ul class="ml-2 mt-2">
                     <li>- <a href="https://wsdaniel.notion.site/1f5dcb62b3ee80c38fa0fa5e872e78a0?pvs=105" class="text-blue-500 hover:text-blue-600"> Notion Form</a></li>

src/app/sites/startpage/startpage.html

@@ -1,4 +1,4 @@
-<div class="text-white">
+<div class="max-w-7xl mx-auto space-y-12">
   <div class="mb-6">
     <app-custom-title
       [textSizeInPx]="24"

src/index.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="app/assets/logo.ico" />
   </head>
-  <body>
+  <body class="bg-zinc-900">
     <app-root></app-root>
   </body>
 </html>