From 22904567007b21c73e64159fbaafd1306cc2b627 Mon Sep 17 00:00:00 2001
From: SecCodeSmith <admin@seccodesmith.pl>
Date: Sun, 8 Jun 2025 11:48:41 +0200
Subject: [PATCH] Add initial spinner HTML template with styling and animations

---
 spinner.html | 459 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 459 insertions(+)
 create mode 100644 spinner.html
diff --git a/spinner.html b/spinner.html
new file mode 100644
index 0000000..c7de67c
--- /dev/null
+++ b/spinner.html
@@ -0,0 +1,459 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SecCodeSmith - Forging Code...</title>
+    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-dark: #0a0a0a;
+            --secondary-dark: #1a1a1a;
+            --accent-fire: #ff6400;
+            --accent-ember: #ff4500;
+            --accent-dragon: #8B0000;
+            --text-light: #f5f5f5;
+            --text-ash: #aaaaaa;
+            --glow-effect: 0 0 10px var(--accent-fire), 0 0 20px rgba(255, 100, 0, 0.4);
+            --card-bg: #141414;
+            --card-border: #2a2a2a;
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            background-color: var(--primary-dark);
+            color: var(--text-light);
+            font-family: 'Cinzel', serif;
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            position: relative;
+        }
+
+        /* Background gradient overlay */
+        body::before {
+            content: "";
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at 50% 50%, rgba(139, 0, 0, 0.08), rgba(10, 10, 10, 0.4));
+            pointer-events: none;
+            z-index: 0;
+        }
+        
+        /* Binary falling background */
+        .binary-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            opacity: 0.07;
+            overflow: hidden;
+        }
+        
+        .binary-line {
+            position: absolute;
+            font-family: 'Fira Code', monospace;
+            color: var(--accent-fire);
+            font-size: 0.8rem;
+            animation: fall linear infinite;
+            opacity: 0.7;
+        }
+        
+        @keyframes fall {
+            0% {
+                transform: translateY(-100%);
+            }
+            100% {
+                transform: translateY(100vh);
+            }
+        }
+        
+        /* Main loader container */
+        .loader-container {
+            text-align: center;
+            z-index: 10;
+            animation: fadeIn 0.5s ease-out;
+        }
+        
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        /* Anvil and hammer loader */
+        .forge-loader {
+            width: 200px;
+            height: 200px;
+            margin: 0 auto 2rem;
+            position: relative;
+        }
+        
+        /* Anvil icon container */
+        .anvil-container {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100px;
+            height: 100px;
+        }
+        
+        /* Fire glow effect */
+        .fire-glow {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 120px;
+            height: 120px;
+            background: radial-gradient(circle, rgba(255, 100, 0, 0.3), transparent 70%);
+            filter: blur(20px);
+            animation: pulse 2s ease-in-out infinite;
+        }
+        
+        @keyframes pulse {
+            0%, 100% {
+                transform: translate(-50%, -50%) scale(1);
+                opacity: 0.6;
+            }
+            50% {
+                transform: translate(-50%, -50%) scale(1.2);
+                opacity: 1;
+            }
+        }
+        
+        /* Central icon */
+        .forge-icon {
+            font-size: 60px;
+            color: var(--accent-fire);
+            text-shadow: var(--glow-effect);
+            animation: forge 2s ease-in-out infinite;
+            position: relative;
+            z-index: 2;
+        }
+        
+        @keyframes forge {
+            0%, 100% {
+                transform: scale(1) rotate(0deg);
+            }
+            25% {
+                transform: scale(0.95) rotate(-5deg);
+            }
+            50% {
+                transform: scale(1.1) rotate(5deg);
+            }
+            75% {
+                transform: scale(0.95) rotate(-3deg);
+            }
+        }
+        
+        /* Sparks container */
+        .sparks {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+        }
+        
+        .spark {
+            position: absolute;
+            width: 3px;
+            height: 3px;
+            background: var(--accent-fire);
+            border-radius: 50%;
+            box-shadow: 0 0 6px var(--accent-fire);
+            opacity: 0;
+        }
+        
+        .spark:nth-child(1) {
+            top: 50%;
+            left: 50%;
+            animation: spark1 2s ease-out infinite;
+        }
+        
+        .spark:nth-child(2) {
+            top: 50%;
+            left: 50%;
+            animation: spark2 2s ease-out infinite 0.2s;
+        }
+        
+        .spark:nth-child(3) {
+            top: 50%;
+            left: 50%;
+            animation: spark3 2s ease-out infinite 0.4s;
+        }
+        
+        .spark:nth-child(4) {
+            top: 50%;
+            left: 50%;
+            animation: spark4 2s ease-out infinite 0.6s;
+        }
+        
+        @keyframes spark1 {
+            0% {
+                transform: translate(0, 0);
+                opacity: 1;
+            }
+            100% {
+                transform: translate(-40px, -60px);
+                opacity: 0;
+            }
+        }
+        
+        @keyframes spark2 {
+            0% {
+                transform: translate(0, 0);
+                opacity: 1;
+            }
+            100% {
+                transform: translate(40px, -50px);
+                opacity: 0;
+            }
+        }
+        
+        @keyframes spark3 {
+            0% {
+                transform: translate(0, 0);
+                opacity: 1;
+            }
+            100% {
+                transform: translate(-30px, -70px);
+                opacity: 0;
+            }
+        }
+        
+        @keyframes spark4 {
+            0% {
+                transform: translate(0, 0);
+                opacity: 1;
+            }
+            100% {
+                transform: translate(35px, -65px);
+                opacity: 0;
+            }
+        }
+        
+        /* Logo and text */
+        .logo-wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 15px;
+            margin-bottom: 1rem;
+        }
+        
+        .logo-icon img {
+            width: 50px;
+            height: 50px;
+            filter: drop-shadow(0 0 10px rgba(255, 100, 0, 0.5));
+        }
+        
+        .logo-text {
+            font-weight: 700;
+            font-size: 2.5rem;
+            background: linear-gradient(to right, var(--accent-fire), var(--text-light));
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: 1px;
+        }
+        
+        .subtitle {
+            font-size: 1.2rem;
+            color: var(--text-ash);
+            margin-bottom: 2rem;
+        }
+        
+        /* Progress bar */
+        .progress-container {
+            width: 300px;
+            height: 6px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 3px;
+            overflow: hidden;
+            margin: 0 auto 1.5rem;
+            position: relative;
+        }
+        
+        .progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, var(--accent-dragon), var(--accent-fire));
+            border-radius: 3px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            animation: loading 2.5s ease-in-out infinite;
+        }
+        
+        @keyframes loading {
+            0% {
+                width: 0%;
+                left: 0;
+            }
+            50% {
+                width: 70%;
+                left: 0;
+            }
+            100% {
+                width: 30%;
+                left: 100%;
+            }
+        }
+        
+        /* Status message */
+        .status-message {
+            font-family: 'Fira Code', monospace;
+            font-size: 0.9rem;
+            color: var(--text-ash);
+            transition: opacity 0.3s ease;
+        }
+        
+        .status-message::before {
+            content: "< ";
+            color: var(--accent-fire);
+            opacity: 0.8;
+        }
+        
+        .status-message::after {
+            content: " />";
+            color: var(--accent-fire);
+            opacity: 0.8;
+        }
+        
+        /* Blinking cursor */
+        .blinking-cursor {
+            display: inline-block;
+            width: 8px;
+            height: 16px;
+            background-color: var(--accent-fire);
+            margin-left: 5px;
+            animation: blink 1s step-end infinite;
+            box-shadow: var(--glow-effect);
+            vertical-align: middle;
+        }
+        
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0; }
+        }
+        
+        /* Particles effect */
+        .particles {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 1;
+        }
+        
+        .particle {
+            position: absolute;
+            width: 2px;
+            height: 2px;
+            background-color: var(--accent-fire);
+            border-radius: 50%;
+            opacity: 0;
+            animation: rise linear forwards;
+        }
+        
+        @keyframes rise {
+            0% {
+                transform: translateY(0) translateX(0);
+                opacity: 0;
+            }
+            10% {
+                opacity: 0.8;
+            }
+            90% {
+                opacity: 0.8;
+            }
+            100% {
+                transform: translateY(-100px) translateX(var(--x));
+                opacity: 0;
+            }
+        }
+        
+        /* Responsive */
+        @media (max-width: 576px) {
+            .logo-text {
+                font-size: 2rem;
+            }
+            
+            .subtitle {
+                font-size: 1rem;
+            }
+            
+            .progress-container {
+                width: 250px;
+            }
+            
+            .forge-loader {
+                width: 150px;
+                height: 150px;
+            }
+            
+            .forge-icon {
+                font-size: 45px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="binary-bg" id="binary-bg"></div>
+    <div class="particles" id="particles"></div>
+    
+    <div class="loader-container">
+        <div class="forge-loader">
+            <div class="fire-glow"></div>
+            <div class="anvil-container">
+                <i class="fas fa-fire forge-icon"></i>
+                <div class="sparks">
+                    <div class="spark"></div>
+                    <div class="spark"></div>
+                    <div class="spark"></div>
+                    <div class="spark"></div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="logo-wrapper">
+            <div class="logo-icon">
+                <img src="favicon1.png" alt="SecCodeSmith" onerror="this.style.display='none'">
+            </div>
+            <h1 class="logo-text">SecCodeSmith</h1>
+        </div>
+        
+        <p class="subtitle">Forging Digital Solutions</p>
+        
+        <div class="progress-container">
+            <div class="progress-bar"></div>
+        </div>
+        
+        <div class="status-message" id="status">
+            Heating the forge<span class="blinking-cursor"></span>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
