Add logo and icon

tools/src/app/app.component.html

@@ -1,4 +1,5 @@
 <app-header></app-header>
 <div class="main-content">
   <router-outlet></router-outlet>
-</div>
+</div>
+<app-footer></app-footer>

tools/src/app/app.component.scss

@@ -0,0 +1,4 @@
+.main-content {
+    display: flex;
+    justify-content: center;
+}

tools/src/app/app.component.ts

@@ -3,11 +3,12 @@ import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from './header/header.component';
 import { PrimeNGConfig } from 'primeng/api';
 import { Lara } from 'primeng/themes/lara';
+import { FooterComponent } from './footer/footer.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, HeaderComponent],
+  imports: [RouterOutlet, HeaderComponent, FooterComponent],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })

tools/src/app/app.routes.ts

@@ -6,6 +6,7 @@ import { JwtToJsonComponent } from '../tools/client-side/jwt-to-json/jwt-to-json
 import { TextToCronComponent } from '../tools/client-side/text-to-cron/text-to-cron.component';
 import { DdsToPngComponent } from '../tools/client-side/dds-to-png/dds-to-png.component';
 import { ImageConverterComponent } from '../tools/server-side/image-converter/image-converter.component';
+import { WordCounterComponent } from '../tools/client-side/word-counter/word-counter.component';
 
 export const routes: Routes = [
   {
@@ -42,6 +43,11 @@ export const routes: Routes = [
     path: 'image-converter',
     pathMatch: 'full',
     component: ImageConverterComponent
+  },
+  {
+    path: 'text-counter',
+    pathMatch: 'full',
+    component: WordCounterComponent
   }
 ];
 

tools/src/app/footer/footer.component.html

@@ -0,0 +1,9 @@
+<footer class="footer">
+  <div class="footer-content">
+    <p>&copy; {{year}} Bytefy. All rights reserved.</p>
+    <nav>
+      <a href="/privacy-policy">Privacy Policy</a>
+      <a href="/terms-of-service">Terms of Service</a>
+    </nav>
+  </div>
+</footer>

tools/src/app/footer/footer.component.scss

@@ -0,0 +1,27 @@
+.footer {
+    color: #a5a5a5;
+    padding: 1rem;
+    text-align: center;
+    bottom: 0;
+    width: 100%;
+  
+    .footer-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+  
+      nav {
+        margin-top: 0.5rem;
+  
+        a {
+          color: #a5a5a5;
+          margin: 0 0.5rem;
+          text-decoration: none;
+  
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }

tools/src/app/footer/footer.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

tools/src/app/footer/footer.component.ts

@@ -0,0 +1,11 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss'],
+  standalone: true
+})
+export class FooterComponent {
+  year: number = new Date().getFullYear();
+}

tools/src/app/header/header.component.html

@@ -1 +1,5 @@
-<p-megamenu [model]="items" />
+<p-megamenu [model]="items">
+    <ng-template pTemplate="start">
+        <img class="logotype" src="../../assets/logo-full-orange-beta.png" alt="logo" />
+    </ng-template>
+</p-megamenu>

tools/src/app/header/header.component.scss

@@ -0,0 +1,3 @@
+.logotype {
+    width: 140px;
+}

tools/src/app/header/header.component.ts

@@ -8,6 +8,7 @@ import { AvatarModule } from 'primeng/avatar';
 @Component({
     selector: 'app-header',
     templateUrl: './header.component.html',
+	styleUrls: ['./header.component.scss'],
     standalone: true,
     imports: [MegaMenuModule, ButtonModule, CommonModule, AvatarModule]
 })
@@ -28,6 +29,11 @@ export class HeaderComponent implements OnInit {
 													routerLink: 'ascii-to-text',
 													routerLinkActiveOptions: { exact: true }
 											},
+											{
+												label: 'Text counter',
+												routerLink: 'text-counter',
+												routerLinkActiveOptions: { exact: true }
+											},
 											{
 												label: 'Guid Generator',
 												routerLink: 'guid',

tools/src/app/shared/dual-textarea/dual-textarea.component.html

@@ -10,7 +10,7 @@
         [value]="topValue"
         [placeholder]="topPlaceholder">
       </textarea>
-      <div>
+      <div class="icon">
         <i class="pi pi-arrow-right-arrow-left" style="font-size: 1rem"></i>
       </div>
       <textarea 

tools/src/app/shared/dual-textarea/dual-textarea.component.scss

@@ -2,9 +2,20 @@
     display: flex;
     justify-content: center;
     margin-top: 20px;
-    height: 100vh;
-    width: 98vw;
+    width: 96vw;
     
+    .icon {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      padding: 5px;
+      background-color: var(--primary-contrast);
+
+      i {
+        transform: rotate(90deg);
+      }
+    }
+
     .card {
         display: flex;
         flex-direction: column;

tools/src/app/shared/upload/file-converter.component.scss

@@ -2,8 +2,7 @@
     display: flex;
     justify-content: center;
     margin-top: 20px;
-    height: 100vh;
-    width: 98vw;
+    width: 96vw;
   
     .card {
       display: flex;

tools/src/index.html

@@ -2,10 +2,10 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Tools</title>
+  <title>Bytefy - Online Tools</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" href="favicon.ico">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@304&display=swap" rel="stylesheet">

tools/src/tools/client-side/ascii-to-text/ascii-to-text.component.scss

@@ -1,34 +0,0 @@
-:host {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    width: 98vw;
-
-    .wrapper {
-        display: flex;
-        flex-direction: column;
-        width: 1140;
-        
-        .conversion {
-            justify-content: center;
-            display: flex;
-            align-items: center;
-            height: 70vh;
-    
-            p-floatlabel {
-                width: 30vw;
-            }
-    
-            textarea {
-                width: 100%;
-                height: 50vh;
-                padding: 12px 20px;
-                box-sizing: border-box;
-                border-radius: 4px;
-                font-size: 16px;
-                resize: none;
-            }
-        }
-    }
-}

tools/src/tools/client-side/guid/guid.component.scss

@@ -2,7 +2,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    margin-top: 20px;
     width: 98vw;
 
     p-panel {

tools/src/tools/client-side/word-counter/word-counter.component.html

@@ -0,0 +1,8 @@
+<app-dual-textarea 
+  title="Text Counter"
+  topPlaceholder="Enter Text here..."
+  bottomPlaceholder="Stats will appear here..."
+  [bottomDisabled]="true"
+  [bottomValue]="this.result" 
+  (topChange)="onTextChange($event)">
+</app-dual-textarea>

tools/src/tools/client-side/word-counter/word-counter.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { WordCounterComponent } from './word-counter.component';
+
+describe('WordCounterComponent', () => {
+  let component: WordCounterComponent;
+  let fixture: ComponentFixture<WordCounterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WordCounterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WordCounterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

tools/src/tools/client-side/word-counter/word-counter.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { DualTextareaComponent } from '../../../app/shared/dual-textarea/dual-textarea.component';
+
+@Component({
+  selector: 'app-word-counter',
+  templateUrl: './word-counter.component.html',
+  styleUrls: ['./word-counter.component.scss'],
+  standalone: true,
+  imports: [DualTextareaComponent]
+})
+export class WordCounterComponent {
+  words: number = 0;
+  characters: number = 0;
+  spaces: number = 0;
+  lines: number = 0;
+  sentences: number = 0;
+  paragraphs: number = 0;
+  result = '';
+
+  onTextChange(text: string): void {
+    this.words = text.split(/\s+/).filter(w => w.length > 0).length;
+    this.characters = text.length;
+    this.spaces = text.split(' ').length - 1;
+    this.lines = text.split('\n').length;
+    this.sentences = text.split(/[.!?]+/).length - 1;
+    this.paragraphs = text.split('\n\n').length;
+
+    this.result = `Words: ${this.words}\n`;
+    this.result += `Characters: ${this.characters}\n`;
+    this.result += `Spaces: ${this.spaces}\n`;
+    this.result += `Lines: ${this.lines}\n`;
+    this.result += `Sentences: ${this.sentences}\n`;
+    this.result += `Paragraphs: ${this.paragraphs}`;
+  }
+}