Separate Clock Page

src/app/app.routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '@angular/router';
 import { MainPage } from './pages/main/main';
 import { KnownIssuesPage } from './pages/known-issues/known-issues';
+import { ClockPage } from './pages/clock/clock';
 
 export const routes: Routes = [
   { path: '', component: MainPage },
   { path: 'known-issues', component: KnownIssuesPage },
+  { path: 'clock', component: ClockPage },
 ];

src/app/components/clock/clock.scss

@@ -14,13 +14,13 @@
 }
 
 .clock-date {
-  font-size: 1.25rem;
+  font-size: 1.2rem;
   font-weight: 500;
   color: #333;
 }
 
 .clock-time {
-  font-size: 1.5rem;
+  font-size: 2rem;
-  font-weight: 700;
+  font-weight: 600;
   color: #000;
 }

src/app/pages/clock/clock.html

@@ -0,0 +1,11 @@
+<div class="container">
+  <h1>Clock Component Test</h1>
+
+  <section id="clock">
+    <clock></clock>
+  </section>
+
+  <p style="text-align: center;">
+    <a routerLink="/" style="color: #666; text-decoration: none;">Go to Main</a>
+  </p>
+</div>

src/app/pages/clock/clock.scss

@@ -0,0 +1,7 @@
+#clock {
+  font-family: "Wanted Sans Variable", sans-serif !important;
+  font-feature-settings: "tnum";
+
+  padding-top: 72px;
+  padding-bottom: 72px;
+}

src/app/pages/clock/clock.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { Clock } from '../../components/clock/clock';
+
+@Component({
+  selector: 'app-clock-page',
+  standalone: true,
+  imports: [Clock, RouterLink],
+  templateUrl: './clock.html',
+  styleUrl: './clock.scss',
+})
+export class ClockPage {}

src/app/pages/known-issues/known-issues.scss

@@ -1,15 +1,4 @@
-.container {
-  padding: 40px;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
 section {
-  margin-bottom: 24px;
-  padding: 20px;
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  border-radius: 8px;
-
   p {
     line-height: 1.4;
   }

src/app/pages/main/main.html

@@ -33,6 +33,4 @@
       </div>
     </div>
   </section>
-
-  <section id="clock"><clock></clock></section>
 </div>

src/app/pages/main/main.scss

@@ -1,16 +1,3 @@
-.container {
-  padding: 40px;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-section {
-  margin-bottom: 40px;
-  padding: 20px;
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  border-radius: 8px;
-}
-
 section#dropdown-test {
   dropdown {
     width: 324px;
@@ -20,8 +7,3 @@ section#dropdown-test {
 .test-container {
   max-width: 100%;
 }
-
-#clock {
-  padding-top: 48px;
-  padding-bottom: 48px;
-}

src/app/pages/main/main.ts

@@ -1,12 +1,11 @@
 import { Component, signal } from '@angular/core';
 import { Switch } from '../../components/switch/switch';
 import { Dropdown, DropdownOption } from '../../components/dropdown/dropdown';
-import { Clock } from '../../components/clock/clock';
 
 @Component({
   selector: 'app-main-page',
   standalone: true,
-  imports: [Switch, Dropdown, Clock],
+  imports: [Switch, Dropdown],
   templateUrl: './main.html',
   styleUrl: './main.scss',
 })

src/styles.scss

@@ -54,3 +54,16 @@ p {
   font-weight: 500;
 }
 
+.container {
+  padding: 40px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+section {
+  margin-bottom: 40px;
+  padding: 20px;
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+}
+