1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Stress Buster â Games Library</title> 7 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%231e3050'/><circle cx='50' cy='50' r='30' fill='white' opacity='0.8'/></svg>"> 8 <link rel="canonical" href="https://www.anishmoncivarghese.com/games/index.html"> 9 <link rel="preconnect" href="https://fonts.googleapis.com"> 10 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 11 <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet"> 12 <style> 13 :root { 14 --cream: #faf8f5; 15 --white: #ffffff; 16 --amber: #d97706; 17 --navy: #1e3050; 18 --ink: #1c1917; 19 --ink-muted: #78716c; 20 --border: #e7e0d8; 21 --font-serif: 'EB Garamond', Georgia, serif; 22 --font-ui: system-ui, -apple-system, sans-serif; 23 } 24 25 * { box-sizing: border-box; margin: 0; padding: 0; } 26 27 body { 28 font-family: var(--font-ui); 29 background: var(--cream); 30 color: var(--ink); 31 line-height: 1.6; 32 -webkit-font-smoothing: antialiased; 33 } 34 35 /* ââ Nav ââ */ 36 nav { 37 height: 60px; 38 display: flex; 39 align-items: center; 40 padding: 0 32px; 41 justify-content: space-between; 42 border-bottom: 1px solid var(--border); 43 background: rgba(255,255,255,0.8); 44 backdrop-filter: blur(12px); 45 position: sticky; 46 top: 0; 47 z-index: 100; 48 } 49 50 .nav-logo { 51 font-family: var(--font-serif); 52 font-size: 20px; 53 font-weight: 600; 54 color: var(--ink); 55 text-decoration: none; 56 } 57 58 /* ââ Hero ââ */ 59 .hero { 60 padding: 80px 24px 60px; 61 text-align: center; 62 max-width: 800px; 63 margin: 0 auto; 64 } 65 66 .hero h1 { 67 font-family: var(--font-serif); 68 font-size: clamp(32px, 5vw, 56px); 69 font-weight: 500; 70 margin-bottom: 16px; 71 letter-spacing: -0.01em; 72 } 73 74 .hero p { 75 font-size: 18px; 76 color: var(--ink-muted); 77 } 78 79 /* ââ Game Grid ââ */ 80 .game-grid { 81 display: grid; 82 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 83 gap: 24px; 84 padding: 0 32px 100px; 85 max-width: 1200px; 86 margin: 0 auto; 87 } 88 89 .game-card { 90 background: var(--white); 91 border: 1px solid var(--border); 92 border-radius: 20px; 93 padding: 32px; 94 text-decoration: none; 95 color: inherit; 96 transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); 97 display: flex; 98 flex-direction: column; 99 position: relative; 100 overflow: hidden; 101 } 102 103 .game-card:hover { 104 transform: translateY(-4px); 105 box-shadow: 0 12px 30px rgba(0,0,0,0.06); 106 border-color: var(--amber); 107 } 108 109 .card-icon { 110 width: 48px; 111 height: 48px; 112 background: var(--cream); 113 border-radius: 12px; 114 display: flex; 115 align-items: center; 116 justify-content: center; 117 margin-bottom: 24px; 118 font-size: 24px; 119 } 120 121 .game-card h3 { 122 font-family: var(--font-serif); 123 font-size: 24px; 124 font-weight: 600; 125 margin-bottom: 8px; 126 } 127 128 .game-card p { 129 font-size: 14px; 130 color: var(--ink-muted); 131 line-height: 1.6; 132 } 133 134 .badge { 135 display: inline-block; 136 padding: 4px 10px; 137 background: #fef3c7; 138 color: #92400e; 139 font-size: 10px; 140 font-weight: 700; 141 border-radius: 100px; 142 text-transform: uppercase; 143 letter-spacing: 0.05em; 144 margin-bottom: 12px; 145 } 146 147 .coming-soon { 148 opacity: 0.6; 149 cursor: not-allowed; 150 } 151 152 .coming-soon:hover { 153 transform: none; 154 box-shadow: none; 155 border-color: var(--border); 156 } 157 158 @media (max-width: 600px) { 159 .game-grid { padding: 0 20px 80px; } 160 .hero { padding: 60px 20px 40px; } 161 } 162 </style> 163</head> 164<body> 165 166 <nav> 167 <a href="../" class="nav-logo">Anish</a> 168 <div class="nav-links"> 169 <a href="../#work" style="text-decoration:none; font-size:14px; color:var(--ink-muted);">Back to Site</a> 170 </div> 171 </nav> 172 173 <section class="hero"> 174 <h1>Stress Buster</h1> 175 <p>A collection of small, satisfying tools to help you reset and clear your mind.</p> 176 </section> 177 178 <main class="game-grid"> 179 180 <!-- Game 1: Bubble Wrap --> 181 <a href="bubble-wrap/index.html" class="game-card">
182 <span class="badge">Sensory</span> 183 <div class="card-icon">ð«§</div> 184 <h3>Digital Bubble Wrap</h3> 185 <p>The satisfying feel of popping bubbles. Switch between Zen and Rage modes depending on your mood.</p> 186 </a> 187 188 <!-- Game 2: Fluid Simulation --> 189 <a href="infinite-canvas/index.html" class="game-card"> 190 <span class="badge">Creative</span> 191 <div class="card-icon">ð</div> 192 <h3>Infinite Canvas</h3> 193 <p>Swirl colorful fluids and create temporary art that fades like a dream. Snapshot your favorites as wallpapers.</p> 194 </a> 195 196 <!-- Game 3: Organize --> 197 <a href="organize/index.html" class="game-card"> 198 <span class="badge">Cognitive</span> 199 <div class="card-icon">ð¦</div> 200 <h3>Organize the Chaos</h3> 201 <p>Tidy up jumbled items for a cognitive reset. No scores, just the satisfaction of perfect order.</p> 202 </a> 203 204 <!-- Game 4: Breathing --> 205 <a href="breathing/index.html" class="game-card"> 206 <span class="badge">Wellness</span> 207 <div class="card-icon">ð«</div> 208 <h3>Breathing Guide</h3> 209 <p>Regulate your nervous system with guided breathing cycles. Box, 4-7-8, and Calm modes.</p> 210 </a> 211 212 <!-- Game 5: Destruction --> 213 <a href="destruction/index.html" class="game-card"> 214 <span class="badge">Catharsis</span> 215 <div class="card-icon">ð¨</div> 216 <h3>Destruction Therapy</h3> 217 <p>Shatter a glass structure for a safe release of tension. Click or fling to destroy, then mend for a fresh start.</p> 218 </a> 219 220 </main> 221 222</body> 223</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.