From 8f926099c19c989579af3e90fbc3aa92db03193c Mon Sep 17 00:00:00 2001 From: SE JIHAD <153150003+sejihad@users.noreply.github.com> Date: Sun, 26 Apr 2026 12:13:28 +0600 Subject: [PATCH 1/2] Add index.html for Advanced Terminal Clock project --- .../Terminal-Clock-SE-Jihad/index.html | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 Frontend-Projects/Terminal-Clock-SE-Jihad/index.html diff --git a/Frontend-Projects/Terminal-Clock-SE-Jihad/index.html b/Frontend-Projects/Terminal-Clock-SE-Jihad/index.html new file mode 100644 index 0000000000..f92c17bb24 --- /dev/null +++ b/Frontend-Projects/Terminal-Clock-SE-Jihad/index.html @@ -0,0 +1,44 @@ + + + + + + + Advanced Terminal Clock + + + + +
+ +
+
+
+ + + +
+
bash - root@sejihad:~
+
+ +
+
+ root@sejihad:~$ + +
+ + + + +
+
+ + + + From 9738c4def2ffd4cc872f5f80f31fa3503c575a71 Mon Sep 17 00:00:00 2001 From: SE JIHAD <153150003+sejihad@users.noreply.github.com> Date: Sun, 26 Apr 2026 12:14:14 +0600 Subject: [PATCH 2/2] all required files uploaded --- .../Terminal-Clock-SE-Jihad/README.md | 25 +++ .../Terminal-Clock-SE-Jihad/script.js | 76 +++++++ .../Terminal-Clock-SE-Jihad/style.css | 195 ++++++++++++++++++ 3 files changed, 296 insertions(+) create mode 100644 Frontend-Projects/Terminal-Clock-SE-Jihad/README.md create mode 100644 Frontend-Projects/Terminal-Clock-SE-Jihad/script.js create mode 100644 Frontend-Projects/Terminal-Clock-SE-Jihad/style.css diff --git a/Frontend-Projects/Terminal-Clock-SE-Jihad/README.md b/Frontend-Projects/Terminal-Clock-SE-Jihad/README.md new file mode 100644 index 0000000000..9785090027 --- /dev/null +++ b/Frontend-Projects/Terminal-Clock-SE-Jihad/README.md @@ -0,0 +1,25 @@ +# 💻 Advanced Terminal Clock + +> A fully responsive, hacker-style terminal digital clock built with pure HTML, CSS, and Vanilla JavaScript. + +### 🔗 [Live Preview Here](https://sejihad.github.io/terminal-clock) + +## ✨ Features + +- **Retro Terminal Vibe:** Authentic Linux/MacOS terminal workspace interface. +- **Boot Sequence Animation:** Realistic JS typing effect before the clock initializes. +- **CRT & Neon Glow:** Vintage scanlines and hacker-green text glow effects. +- **100% Responsive:** Fluid typography scaling (`clamp()`) for perfect mobile view without media queries. +- **Clean Code:** Modular, fail-safe, and well-structured Vanilla JS. + +## 🛠️ Tech Stack + +- **HTML5** (Semantic structure) +- **CSS3** (Custom Properties, Flexbox/Grid, Animations) +- **JavaScript** (ES6+, DOM Manipulation, Time Logic) + +## 🚀 How to Run Locally + +1. Clone the repository: + ```bash + git clone https://github.com/sejihad/terminal-clock.git diff --git a/Frontend-Projects/Terminal-Clock-SE-Jihad/script.js b/Frontend-Projects/Terminal-Clock-SE-Jihad/script.js new file mode 100644 index 0000000000..1ac349951a --- /dev/null +++ b/Frontend-Projects/Terminal-Clock-SE-Jihad/script.js @@ -0,0 +1,76 @@ +// Add leading zero to numbers +const padZero = (num) => num.toString().padStart(2, "0"); + +// Get current date and time +const getDateTimeData = () => { + const now = new Date(); + + let rawHours = now.getHours(); + const isPM = rawHours >= 12; + const ampmStr = isPM ? "PM" : "AM"; + + const hours = padZero(rawHours % 12 || 12); + const minutes = padZero(now.getMinutes()); + const seconds = padZero(now.getSeconds()); + + const dateOptions = { + weekday: "short", + year: "numeric", + month: "long", + day: "2-digit", + }; + const formattedDate = now.toLocaleDateString("en-US", dateOptions); + + return { + timeString: `${hours}:${minutes}:${seconds}`, + ampm: ampmStr, + dateString: formattedDate, + }; +}; + +// Update the DOM elements +const renderClock = () => { + const timeEl = document.getElementById("sys-time"); + const dateEl = document.getElementById("sys-date"); + + if (!timeEl || !dateEl) return; + + const data = getDateTimeData(); + timeEl.innerHTML = `${data.timeString} ${data.ampm}`; + dateEl.textContent = `[*] Current System Date: ${data.dateString}`; +}; + +// Pro-level Typing Animation +const runBootSequence = () => { + const cmdText = "./start_clock.sh"; + const cmdElement = document.getElementById("cmd-text"); + const cursor = document.getElementById("cmd-cursor"); + const clockContainer = document.getElementById("clock-container"); + const newPrompt = document.getElementById("new-prompt"); + + let i = 0; + + // Typing effect logic + const typingInterval = setInterval(() => { + if (i < cmdText.length) { + cmdElement.textContent += cmdText.charAt(i); + i++; + } else { + clearInterval(typingInterval); + + // Wait a moment, then "execute" the command + setTimeout(() => { + cursor.style.display = "none"; // Hide upper cursor + clockContainer.classList.remove("hidden"); + newPrompt.classList.remove("hidden"); + + // Start the clock engine + renderClock(); + setInterval(renderClock, 1000); + }, 500); + } + }, 100); // Typing speed +}; + +// Start everything when DOM loads +document.addEventListener("DOMContentLoaded", runBootSequence); diff --git a/Frontend-Projects/Terminal-Clock-SE-Jihad/style.css b/Frontend-Projects/Terminal-Clock-SE-Jihad/style.css new file mode 100644 index 0000000000..7bf65a4692 --- /dev/null +++ b/Frontend-Projects/Terminal-Clock-SE-Jihad/style.css @@ -0,0 +1,195 @@ +@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&display=swap"); + +:root { + --bg-main: #050505; + --bg-term: rgba(15, 15, 18, 0.95); + --term-border: #27272a; + --text-primary: #00ff41; + --text-secondary: #888; + --text-path: #3b82f6; + --font-mono: "Fira Code", monospace; + --glow: 0 0 10px rgba(0, 255, 65, 0.4), 0 0 20px rgba(0, 255, 65, 0.2); +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + background-color: var(--bg-main); + display: grid; + place-items: center; + min-height: 100vh; + font-family: var(--font-mono); + overflow: hidden; + padding: 1rem; +} + +/* CRT Scanline Effect */ +.scanlines { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: + linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), + linear-gradient( + 90deg, + rgba(255, 0, 0, 0.06), + rgba(0, 255, 0, 0.02), + rgba(0, 0, 255, 0.06) + ); + background-size: + 100% 4px, + 3px 100%; + pointer-events: none; + z-index: 50; +} + +/* Responsive Wrapper */ +.term-wrapper { + width: 100%; + max-width: 650px; + background-color: var(--bg-term); + border-radius: 10px; + border: 1px solid #333; + box-shadow: + 0 20px 60px rgba(0, 255, 65, 0.05), + inset 0 0 20px rgba(0, 0, 0, 0.5); + backdrop-filter: blur(5px); + z-index: 10; +} + +.term-header { + background-color: #121214; + padding: 0.8rem 1.2rem; + display: flex; + align-items: center; + border-bottom: 1px solid var(--term-border); +} + +.window-controls { + display: flex; + gap: 6px; + flex-shrink: 0; +} + +.window-controls span { + display: inline-block; + width: 13px; + height: 13px; + border-radius: 50%; +} +.window-controls span:nth-child(1) { + background: #ff5f56; + box-shadow: 0 0 5px #ff5f56; +} +.window-controls span:nth-child(2) { + background: #ffbd2e; + box-shadow: 0 0 5px #ffbd2e; +} +.window-controls span:nth-child(3) { + background: #27c93f; + box-shadow: 0 0 5px #27c93f; +} + +.window-title { + color: var(--text-secondary); + /* Fluid typography for title */ + font-size: clamp(0.7rem, 2vw, 0.85rem); + flex-grow: 1; + text-align: center; + /* Remove strict padding so it centers nicely on mobile */ + padding-right: 45px; +} + +/* Fluid Padding for different screens */ +.term-content { + padding: clamp(1rem, 5vw, 2rem); +} + +/* Fluid Typography for text elements */ +.input-line { + font-size: clamp(0.85rem, 3vw, 1rem); + margin-bottom: 1.5rem; + word-wrap: break-word; +} + +.path { + color: var(--text-path); + font-weight: 700; + margin-right: 0.5rem; +} +.cmd { + color: #fff; + text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); +} + +.output-block { + border-left: 2px solid rgba(0, 255, 65, 0.3); + padding-left: clamp(0.8rem, 3vw, 1.5rem); + margin-bottom: 1.5rem; + transition: opacity 0.5s ease-in; +} + +.date-text { + color: var(--text-secondary); + font-size: clamp(0.75rem, 2.5vw, 1rem); + margin-bottom: 0.5rem; +} + +.time-text { + color: var(--text-primary); + /* Magic part: Font size scales smoothly from 2.5rem (mobile) to 4rem (desktop) */ + font-size: clamp(2.5rem, 8vw, 4rem); + font-weight: 700; + text-shadow: var(--glow); + letter-spacing: 2px; + line-height: 1.2; +} + +.time-text span.ampm { + font-size: clamp(1rem, 3vw, 1.5rem); + color: var(--text-secondary); + text-shadow: none; +} + +.block-cursor { + display: inline-block; + width: clamp(6px, 2vw, 10px); + height: 1.1em; + background-color: var(--text-primary); + vertical-align: middle; + animation: blinker 1s step-end infinite; + box-shadow: var(--glow); +} + +.mt { + margin-top: 2rem; +} +.hidden { + display: none; + opacity: 0; +} + +@keyframes blinker { + 50% { + opacity: 0; + } +} + +/* Extra check for very small screens (like iPhone SE) */ +@media (max-width: 400px) { + .path { + display: block; /* Username path will sit above the command */ + margin-bottom: 0.3rem; + } + .window-title { + padding-right: 0; + text-align: left; + padding-left: 15px; + } +}