From 36dfa900fe7c116e6cf76c36047bf5d9f6c0c029 Mon Sep 17 00:00:00 2001
From: Shayan Rais <shanraisshan@gmail.com>
Date: Sat, 4 Apr 2026 21:36:20 +0500
Subject: [PATCH] add daily-workflows video thumbnail

Co-Authored-By: Claude <noreply@anthropic.com>
---
 !/thumbnail/daily-workflows.html | 137 +++++++++++++++++++++++++++++++
 1 file changed, 137 insertions(+)
 create mode 100644 !/thumbnail/daily-workflows.html
diff --git a/!/thumbnail/daily-workflows.html b/!/thumbnail/daily-workflows.html
new file mode 100644
index 0000000..e9b8156
--- /dev/null
+++ b/!/thumbnail/daily-workflows.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>How I Run Daily Workflows</title>
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            background: #ffffff;
+            color: #1a1a1a;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            text-align: center;
+            padding: 40px;
+        }
+
+        .header-row {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 20px;
+            margin-bottom: 40px;
+        }
+
+        .title-logo {
+            width: 160px;
+            height: 126px;
+            flex-shrink: 0;
+        }
+
+        .title-logo svg {
+            width: 100%;
+            height: 100%;
+        }
+
+        .pixel-title {
+            font-family: 'Press Start 2P', monospace;
+            font-size: 2.8rem;
+            color: #E07C4C;
+            line-height: 1.4;
+            text-align: left;
+        }
+
+        .subtitle {
+            font-size: 3.5rem;
+            color: #555;
+            margin-bottom: 16px;
+            font-weight: 600;
+        }
+
+        .project-line {
+            font-size: 1.3rem;
+            color: #666;
+            margin-bottom: 50px;
+            font-weight: 400;
+        }
+
+        .subtitle .how-i-run {
+            color: #1a1a1a;
+            font-weight: 700;
+        }
+
+        .subtitle .workflows {
+            display: inline-block;
+            color: #16a34a;
+            font-weight: 700;
+            background: linear-gradient(90deg, #16a34a 0%, #4ade80 50%, #16a34a 100%);
+            background-size: 200% 100%;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            animation: shimmer-seq 10s ease-in-out infinite;
+        }
+
+        @keyframes shimmer-seq {
+            0% { background-position: 200% 0; }
+            20% { background-position: -200% 0; }
+            100% { background-position: -200% 0; }
+        }
+
+        .footer {
+            margin-top: 60px;
+            font-size: 0.95rem;
+            color: #888;
+        }
+    </style>
+</head>
+<body>
+    <div class="header-row">
+    <div class="title-logo">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 90" width="160" height="126">
+            <style>
+                .claude-body { animation: claude-jump 0.5s ease-in-out infinite; transform-origin: center bottom; }
+                .claude-shadow { animation: claude-shadow-scale 0.5s ease-in-out infinite; }
+                .claude-left-arm { animation: claude-wave-left 0.5s ease-in-out infinite; transform-origin: right center; }
+                .claude-right-arm { animation: claude-wave-right 0.5s ease-in-out infinite; transform-origin: left center; }
+                .claude-left-ear { animation: claude-ear-bounce 0.5s ease-in-out infinite; transform-origin: center bottom; }
+                .claude-right-ear { animation: claude-ear-bounce 0.5s ease-in-out infinite 0.1s; transform-origin: center bottom; }
+                @keyframes claude-jump { 0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); } 30% { transform: translateY(-16px) scaleY(1.1) scaleX(0.95); } 50% { transform: translateY(-18px) scaleY(1.05) scaleX(0.98); } 80% { transform: translateY(-5px) scaleY(0.95) scaleX(1.05); } }
+                @keyframes claude-shadow-scale { 0%, 100% { transform: scaleX(1); opacity: 0.25; } 50% { transform: scaleX(0.4); opacity: 0.08; } }
+                @keyframes claude-wave-left { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-25deg); } }
+                @keyframes claude-wave-right { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(25deg); } }
+                @keyframes claude-ear-bounce { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(1.2); } 60% { transform: scaleY(0.85); } }
+            </style>
+            <ellipse class="claude-shadow" cx="50" cy="82" rx="22" ry="5" fill="#000"/>
+            <g class="claude-body">
+                <rect class="claude-left-ear" x="22" y="10" width="8" height="14" fill="#E07C4C"/>
+                <rect class="claude-right-ear" x="70" y="10" width="8" height="14" fill="#E07C4C"/>
+                <rect x="18" y="24" width="64" height="4" fill="#E07C4C"/>
+                <rect x="14" y="28" width="72" height="32" fill="#E07C4C"/>
+                <rect x="30" y="34" width="8" height="10" fill="#000000"/>
+                <rect x="62" y="34" width="8" height="10" fill="#000000"/>
+                <rect class="claude-left-arm" x="2" y="36" width="12" height="8" fill="#E07C4C"/>
+                <rect class="claude-right-arm" x="86" y="36" width="12" height="8" fill="#E07C4C"/>
+                <rect x="24" y="60" width="12" height="14" fill="#E07C4C"/>
+                <rect x="64" y="60" width="12" height="14" fill="#E07C4C"/>
+            </g>
+        </svg>
+    </div>
+    <div class="pixel-title">CLAUDE CODE<br>BEST PRACTICE</div>
+    </div>
+    <p class="subtitle"><span class="how-i-run">HOW I RUN DAILY</span> <span class="workflows">WORKFLOWS</span></p>
+    <p class="project-line">Explained using live project <strong>Claude Code Best Practice</strong></p>
+    <p class="footer">As of Claude Code v2.1.91 | April 04, 2026</p>
+</body>
+</html>
