From 9a9fdeeaedaad3fe27c5bacfc7149efa9884c155 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 27 Jan 2026 00:20:52 +0000 Subject: [PATCH] feat: create custom Bliss-style background with CSS Replace external image with a custom procedural background: Sky: - Multi-layer blue gradient from deep blue to light horizon - 12 radial gradients creating fluffy white clouds - Clouds at various positions with varying opacity Rolling Hills: - Multiple elliptical gradients creating rolling hills effect - Foreground hills in bright vibrant green - Background hills slightly darker for depth - Base gradient from bright green to darker grass Grass Detail: - Subtle repeating linear gradients for grass texture - Slight diagonal lines suggesting grass blades All done with pure CSS - no external images needed. https://claude.ai/code/session_01MUG7BRZMG28eYmJHGbetRB --- index.html | 92 +++++++++++++++++++++++++++++++++++++++++++++++++-- ui/index.html | 92 +++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 180 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index ba5d458f4..28fced907 100644 --- a/index.html +++ b/index.html @@ -37,13 +37,99 @@ user-select: none; } - /* Desktop */ + /* Desktop - Custom Bliss-style background */ .desktop { width: 100%; height: calc(100vh - 30px); - background: url('https://i.imgur.com/K4SWWDY.jpeg') center center / cover no-repeat; position: relative; overflow: hidden; + /* Sky gradient */ + background: + /* Clouds - fluffy white shapes */ + radial-gradient(ellipse 120px 80px at 15% 25%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 40%, transparent 70%), + radial-gradient(ellipse 80px 50px at 18% 28%, rgba(255,255,255,0.9) 0%, transparent 60%), + radial-gradient(ellipse 100px 60px at 12% 22%, rgba(255,255,255,0.85) 0%, transparent 65%), + + radial-gradient(ellipse 150px 90px at 45% 18%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 45%, transparent 70%), + radial-gradient(ellipse 90px 55px at 42% 22%, rgba(255,255,255,0.9) 0%, transparent 60%), + radial-gradient(ellipse 110px 65px at 50% 15%, rgba(255,255,255,0.85) 0%, transparent 65%), + + radial-gradient(ellipse 130px 85px at 75% 22%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 40%, transparent 70%), + radial-gradient(ellipse 85px 50px at 78% 25%, rgba(255,255,255,0.9) 0%, transparent 60%), + radial-gradient(ellipse 95px 55px at 72% 19%, rgba(255,255,255,0.85) 0%, transparent 65%), + + radial-gradient(ellipse 100px 70px at 88% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 45%, transparent 70%), + radial-gradient(ellipse 70px 45px at 92% 28%, rgba(255,255,255,0.85) 0%, transparent 60%), + + radial-gradient(ellipse 90px 60px at 30% 35%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.6) 40%, transparent 70%), + + /* Sky gradient - bright blue at top, lighter toward horizon */ + linear-gradient(180deg, + #1e5799 0%, + #2989d8 20%, + #45a5dc 35%, + #7db9e8 50%, + #b3d9f2 65%, + #d4eaf7 80%, + #e8f4fc 100% + ); + } + + /* Rolling green hills */ + .desktop::before { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 55%; + background: + /* Foreground hill - brightest green with grass texture */ + radial-gradient(ellipse 180% 100% at 50% 150%, #4a9f38 0%, #3d8c2e 30%, transparent 60%), + /* Main rolling hill */ + radial-gradient(ellipse 200% 120% at 30% 100%, #5cb347 0%, #4a9f38 40%, transparent 70%), + radial-gradient(ellipse 180% 100% at 80% 110%, #52a83f 0%, #4a9f38 35%, transparent 65%), + /* Background hills - slightly darker/bluer */ + radial-gradient(ellipse 250% 80% at 60% 60%, #5fb84a 0%, #4da63c 50%, transparent 80%), + radial-gradient(ellipse 200% 70% at 20% 70%, #58b244 0%, #4a9f38 45%, transparent 75%), + /* Base green field */ + linear-gradient(180deg, + #6bc455 0%, + #5cb347 15%, + #4fa53d 30%, + #459935 50%, + #3d8c2e 70%, + #358026 85%, + #2d7420 100% + ); + z-index: 0; + } + + /* Grass detail overlay */ + .desktop::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 20%; + background: + repeating-linear-gradient( + 85deg, + transparent 0px, + transparent 3px, + rgba(70, 140, 50, 0.1) 3px, + rgba(70, 140, 50, 0.1) 4px + ), + repeating-linear-gradient( + 95deg, + transparent 0px, + transparent 4px, + rgba(90, 160, 60, 0.08) 4px, + rgba(90, 160, 60, 0.08) 5px + ); + z-index: 1; + pointer-events: none; } /* Desktop Icons */ @@ -55,6 +141,7 @@ position: absolute; top: 0; left: 0; + z-index: 10; } .desktop-icon { @@ -102,6 +189,7 @@ min-width: 300px; min-height: 200px; display: none; + z-index: 100; } .xp-window.active { diff --git a/ui/index.html b/ui/index.html index ba5d458f4..28fced907 100644 --- a/ui/index.html +++ b/ui/index.html @@ -37,13 +37,99 @@ user-select: none; } - /* Desktop */ + /* Desktop - Custom Bliss-style background */ .desktop { width: 100%; height: calc(100vh - 30px); - background: url('https://i.imgur.com/K4SWWDY.jpeg') center center / cover no-repeat; position: relative; overflow: hidden; + /* Sky gradient */ + background: + /* Clouds - fluffy white shapes */ + radial-gradient(ellipse 120px 80px at 15% 25%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 40%, transparent 70%), + radial-gradient(ellipse 80px 50px at 18% 28%, rgba(255,255,255,0.9) 0%, transparent 60%), + radial-gradient(ellipse 100px 60px at 12% 22%, rgba(255,255,255,0.85) 0%, transparent 65%), + + radial-gradient(ellipse 150px 90px at 45% 18%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 45%, transparent 70%), + radial-gradient(ellipse 90px 55px at 42% 22%, rgba(255,255,255,0.9) 0%, transparent 60%), + radial-gradient(ellipse 110px 65px at 50% 15%, rgba(255,255,255,0.85) 0%, transparent 65%), + + radial-gradient(ellipse 130px 85px at 75% 22%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 40%, transparent 70%), + radial-gradient(ellipse 85px 50px at 78% 25%, rgba(255,255,255,0.9) 0%, transparent 60%), + radial-gradient(ellipse 95px 55px at 72% 19%, rgba(255,255,255,0.85) 0%, transparent 65%), + + radial-gradient(ellipse 100px 70px at 88% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 45%, transparent 70%), + radial-gradient(ellipse 70px 45px at 92% 28%, rgba(255,255,255,0.85) 0%, transparent 60%), + + radial-gradient(ellipse 90px 60px at 30% 35%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.6) 40%, transparent 70%), + + /* Sky gradient - bright blue at top, lighter toward horizon */ + linear-gradient(180deg, + #1e5799 0%, + #2989d8 20%, + #45a5dc 35%, + #7db9e8 50%, + #b3d9f2 65%, + #d4eaf7 80%, + #e8f4fc 100% + ); + } + + /* Rolling green hills */ + .desktop::before { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 55%; + background: + /* Foreground hill - brightest green with grass texture */ + radial-gradient(ellipse 180% 100% at 50% 150%, #4a9f38 0%, #3d8c2e 30%, transparent 60%), + /* Main rolling hill */ + radial-gradient(ellipse 200% 120% at 30% 100%, #5cb347 0%, #4a9f38 40%, transparent 70%), + radial-gradient(ellipse 180% 100% at 80% 110%, #52a83f 0%, #4a9f38 35%, transparent 65%), + /* Background hills - slightly darker/bluer */ + radial-gradient(ellipse 250% 80% at 60% 60%, #5fb84a 0%, #4da63c 50%, transparent 80%), + radial-gradient(ellipse 200% 70% at 20% 70%, #58b244 0%, #4a9f38 45%, transparent 75%), + /* Base green field */ + linear-gradient(180deg, + #6bc455 0%, + #5cb347 15%, + #4fa53d 30%, + #459935 50%, + #3d8c2e 70%, + #358026 85%, + #2d7420 100% + ); + z-index: 0; + } + + /* Grass detail overlay */ + .desktop::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 20%; + background: + repeating-linear-gradient( + 85deg, + transparent 0px, + transparent 3px, + rgba(70, 140, 50, 0.1) 3px, + rgba(70, 140, 50, 0.1) 4px + ), + repeating-linear-gradient( + 95deg, + transparent 0px, + transparent 4px, + rgba(90, 160, 60, 0.08) 4px, + rgba(90, 160, 60, 0.08) 5px + ); + z-index: 1; + pointer-events: none; } /* Desktop Icons */ @@ -55,6 +141,7 @@ position: absolute; top: 0; left: 0; + z-index: 10; } .desktop-icon { @@ -102,6 +189,7 @@ min-width: 300px; min-height: 200px; display: none; + z-index: 100; } .xp-window.active {