Majoramari · momenaymann · Jul 13, 2026
diff --git a/apps/web/src/app/app.routes.ts b/apps/web/src/app/app.routes.ts
@@ -7,6 +7,7 @@ import { Profile } from './pages/profile/profile';
 import { authGuard } from './core/auth/auth.guard';
 import { guestGuard } from './core/auth/guest.guard';
 import { Settings } from './pages/settings/settings';
+import { DocumentationComponent } from './pages/docs/docs';
 
 export const routes: Routes = [
   { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
@@ -25,6 +26,12 @@ export const routes: Routes = [
     canActivate: [authGuard],
     title: 'Settings — Seismic',
   },
+  {
+    path: 'documentation',
+    component: DocumentationComponent,
+    canActivate: [authGuard],
+    title: 'Documentation — Seismic',
+  },
   {
     path: ':username',
     component: Profile,

diff --git a/apps/web/src/app/pages/docs/docs.css b/apps/web/src/app/pages/docs/docs.css
@@ -0,0 +1,125 @@
+.app-container {
+  min-height: 100vh;
+  background-color: #0b0c0f;
+  color: #f3f4f6;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  padding: 4rem 3.5rem;
+  box-sizing: border-box;
+}
+
+.header-group {
+  margin-bottom: 3rem;
+}
+
+.doc-label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #71717a;
+  letter-spacing: 0.12em;
+  display: block;
+  margin-bottom: 0.6rem;
+}
+
+.header-group h1 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.03em;
+  color: #ffffff;
+}
+
+.subtitle {
+  color: #8c8e97;
+  margin-top: 0.8rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  max-width: 600px;
+}
+
+.editors-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 1.25rem;
+  max-width: 1200px;
+}
+
+@media (max-width: 1024px) {
+  .editors-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (max-width: 650px) {
+  .editors-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.editor-card {
+  background: #131417;
+  border: 1px solid #1c1d22;
+  border-radius: 12px;
+  padding: 2.25rem 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.editor-card.active {
+  border-color: #ea580c;
+  box-shadow: 0 0 10px rgba(234, 88, 12, 0.15);
+}
+
+.icon-inner-box {
+  width: 56px;
+  height: 56px;
+  background-color: #000000;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.25rem;
+}
+
+.icon-brand {
+  width: 34px;
+  height: 34px;
+}
+
+.editor-title {
+  font-size: 0.9rem;
+  color: #ffffff;
+  font-weight: 600;
+  text-align: center;
+}
+
+.jb-mini {
+  width: 32px;
+  height: 32px;
+  background-color: #000000;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.jb-mini span {
+  font-family: monospace;
+  font-weight: 900;
+  font-size: 0.7rem;
+  color: #ffffff;
+}
+
+.ij-border { border: 2px solid #FE2857; }
+.pc-border { border: 2px solid #3cd070; }
+.ws-border { border: 2px solid #00CDFF; }
+.go-border { border: 2px solid #ff46ae; }
+.rd-border { border: 2px solid #f2243d; }
+.cl-border { border: 2px solid #31db87; }
+.rm-border { border: 2px solid #ff1944; }
+.ps-border { border: 2px solid #b321ff; }
+.dg-border { border: 2px solid #21f3a2; }
+.rr-border { border: 2px solid #ff6e24; }
diff --git a/apps/web/src/app/pages/docs/docs.html b/apps/web/src/app/pages/docs/docs.html
@@ -0,0 +1,87 @@
+<div class="app-container">
+  <main class="content-section">
+
+    <div class="header-group">
+      <h1 class="doc-label">Documentation</h1>
+      <br>
+      <p class="subtitle">
+        Seismic — Track your coding time, free and open source.
+      </p>
+    </div>
+
+    <div class="editors-grid">
+      <div 
+        *ngFor="let editor of editors" 
+        class="editor-card" 
+        [class.active]="selectedEditorId === editor.id"
+        (click)="selectEditor(editor.id)"
+      >
+
+        <div class="icon-inner-box">
+
+          <svg *ngIf="editor.id === 'vs'" viewBox="0 0 24 24" fill="none" class="icon-brand">
+            <path d="M23.9 6.56a.48.48 0 00-.14-.33l-3.08-3.05a.47.47 0 00-.65 0l-9.03 8.16-4.32-3.67a.48.48 0 00-.6 0L.33 11.46a.48.48 0 000 .74l5.77 3.86a.47.47 0 00.6 0l4.31-3.66 9.03 8.16c.18.17.48.17.66 0l3.08-3.05a.48.48 0 00.13-.33V6.56z" fill="#007ACC"/>
+            <path d="M11 12L23.9 6.56l-3.08-3.05L11 12z" fill="#1F9CF0"/>
+            <path d="M11 12L.33 11.46l5.77 3.86L11 12z" fill="#00E2FF"/>
+            <path d="M11 12l9.82 8.87 3.08-3.05L11 12z" fill="#1F9CF0"/>
+            <path d="M11 12L.33 12.19l5.77-3.86L11 12z" fill="#007ACC"/>
+          </svg>
+
+          <div *ngIf="editor.id === 'ij'" class="jb-mini ij-border">
+            <span>IJ</span>
+          </div>
+
+          <div *ngIf="editor.id === 'pc'" class="jb-mini pc-border">
+            <span>PC</span>
+          </div>
+
+          <div *ngIf="editor.id === 'ws'" class="jb-mini ws-border">
+            <span>WS</span>
+          </div>
+
+          <div *ngIf="editor.id === 'go'" class="jb-mini go-border">
+            <span>GO</span>
+          </div>
+
+          <div *ngIf="editor.id === 'rd'" class="jb-mini rd-border">
+            <span>RD</span>
+          </div>
+
+          <div *ngIf="editor.id === 'cl'" class="jb-mini cl-border">
+            <span>CL</span>
+          </div>
+
+          <div *ngIf="editor.id === 'rm'" class="jb-mini rm-border">
+            <span>RM</span>
+          </div>
+
+          <div *ngIf="editor.id === 'ps'" class="jb-mini ps-border">
+            <span>PS</span>
+          </div>
+
+          <div *ngIf="editor.id === 'dg'" class="jb-mini dg-border">
+            <span>DG</span>
+          </div>
+
+          <svg *ngIf="editor.id === 'android'" viewBox="0 0 24 24" fill="none" class="icon-brand">
+            <circle cx="12" cy="12" r="10" fill="#1A73E8"/>
+            <path d="M12 5.5l5 11h-2.5l-2.5-6.5-2.5 6.5H7l5-11z" fill="#FFFFFF"/>
+            <circle cx="12" cy="9" r="1.3" fill="#FFFFFF"/>
+          </svg>
+
+          <div *ngIf="editor.id === 'rr'" class="jb-mini rr-border">
+            <span>RR</span>
+          </div>
+
+          <svg *ngIf="editor.id === 'neovim'" viewBox="0 0 24 24" class="icon-brand">
+            <path d="M19 3H16L7.5 15.5L4 12V3H1.5V21H4L12.5 8.5L16 12V21H19V3Z" fill="#22C55E"/>
+            <path d="M12.5 8.5L7.5 15.5L4 12L12.5 8.5Z" fill="#1F9CF0"/>
+          </svg>
+
+        </div>
+        <span class="editor-title">{{ editor.name }}</span>
+      </div>
+    </div>
+
+  </main>
+</div>
diff --git a/apps/web/src/app/pages/docs/docs.ts b/apps/web/src/app/pages/docs/docs.ts
@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+interface Editor {
+  name: string;
+  id: string;
+}
+
+@Component({
+  selector: 'app-documentation',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './docs.html',
+  styleUrls: ['./docs.css']
+})
+export class DocumentationComponent {
+
+  selectedEditorId: string = 'vs';
+
+  editors: Editor[] = [
+
+    { name: 'VS Code', id: 'vs' },
+    { name: 'IntelliJ IDEA', id: 'ij' },
+    { name: 'PyCharm', id: 'pc' },
+    { name: 'WebStorm', id: 'ws' },
+    { name: 'GoLand', id: 'go' },
+
+    { name: 'Rider', id: 'rd' },
+    { name: 'CLion', id: 'cl' },
+    { name: 'RubyMine', id: 'rm' },
+    { name: 'PhpStorm', id: 'ps' },
+    { name: 'DataGrip', id: 'dg' },
+
+    { name: 'Android Studio', id: 'android' },
+    { name: 'RustRover', id: 'rr' },
+    { name: 'Neovim', id: 'neovim' }
+  ];
+
+  // دالة لاختيار المحرر وتفعيل الإطار البرتقالي حوله
+  selectEditor(id: string) {
+    this.selectedEditorId = id;
+  }
+}
diff --git a/apps/web/src/app/shared/components/sidebar/sidebar.html b/apps/web/src/app/shared/components/sidebar/sidebar.html
@@ -67,6 +67,19 @@
       Dashboard
     </a>
 
+    <a
+      routerLink="/documentation"
+      routerLinkActive="sidebar-link-active"
+      class="sidebar-link"
+    >
+      <lucide-angular
+        [img]="ScrollIcon"
+        [size]="18"
+        class="sidebar-icon"
+      />
+      Docs
+    </a>
+
     <a
       routerLink="/leaderboard"
       routerLinkActive="sidebar-link-active"

diff --git a/apps/web/src/app/shared/components/sidebar/sidebar.ts b/apps/web/src/app/shared/components/sidebar/sidebar.ts
@@ -4,6 +4,7 @@ import { NgOptimizedImage } from '@angular/common';
 import {
   LucideAngularModule,
   Gauge,
+  ScrollText,
   Trophy,
   Settings,
   LogOut,
@@ -25,6 +26,7 @@ export class Sidebar {
   userService = inject(UserService);
 
   readonly GaugeIcon = Gauge;
+  readonly ScrollIcon = ScrollText;
   readonly TrophyIcon = Trophy;
   readonly SettingsIcon = Settings;
   readonly LogOutIcon = LogOut;