admin/34179-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

garden 3

Browse Source
This commit is contained in:
Flatlogic Bot 2025-09-17 22:09:58 +00:00
parent 3858949372
commit 02402d8c31
2 changed files with 141 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
assets/css/custom.css
View File

@ -1,4 +1,3 @@
/* --- Base & Typography --- */
:root {
--font-family: 'Nunito', sans-serif;
@ -375,3 +374,133 @@ header {
.petal .p6 { transform: rotate(225deg); }
.petal .p7 { transform: rotate(270deg); }
.petal .p8 { transform: rotate(315deg); }
/* --- Fantasy Forest Theme --- */
body[data-theme="fantasy"] .cloud,
body[data-theme="fantasy"] .hills {
display: none;
}
.fantasy-scene {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
body[data-theme="fantasy"] .fantasy-scene {
opacity: 1;
}
body[data-theme="fantasy"] .sky {
background: linear-gradient(to bottom, #1a0c2e, #3a1a5c);
}
body[data-theme="fantasy"] .ground {
background: #2a1a3c;
}
.fantasy-moon {
position: absolute;
top: 15%;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: #f7f2d7;
box-shadow: 0 0 40px rgba(247, 242, 215, 0.7),
0 0 80px rgba(247, 242, 215, 0.5),
inset 0 0 10px rgba(255,255,255,0.5);
}
.fantasy-trees {
position: absolute;
bottom: 10%;
left: 0;
width: 100%;
height: 50%;
z-index: 6;
}
.fantasy-trees::before,
.fantasy-trees::after {
content: '';
position: absolute;
bottom: 0;
width: 150px;
height: 200px;
background: #110a1f;
border-radius: 60% 60% 10px 10px;
transform-origin: bottom center;
}
.fantasy-trees::before {
left: 10%;
transform: scale(0.9);
height: 180px;
}
.fantasy-trees::after {
right: 8%;
transform: scale(1.1);
}
.fantasy-mist {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25%;
background: linear-gradient(to top, rgba(42, 26, 60, 0.8), transparent);
z-index: 7;
}
.fantasy-mushrooms {
position: absolute;
bottom: 12%;
width: 100%;
height: 10%;
z-index: 8;
}
.fantasy-mushrooms::before,
.fantasy-mushrooms::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #00ffab;
box-shadow: 0 0 5px #00ffab, 0 0 10px #00ffab, 0 0 15px #00ffab;
animation: glowing-mushroom 3s infinite alternate;
}
.fantasy-mushrooms::before {
bottom: 20px;
left: 20%;
animation-delay: 0.5s;
}
.fantasy-mushrooms::after {
bottom: 10px;
left: 80%;
animation-delay: 1.5s;
}
@keyframes glowing-mushroom {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(0.9);
}
}

13
index.php
View File

@ -17,7 +17,7 @@
<!-- html2canvas for sharing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoVXM5RqaClp1MAJJStqyJubBCFpwg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body class="theme-zen">
<body data-theme="minimal">
<div class="app-container">
<!-- Task Manager Panel -->
@ -40,7 +40,7 @@
<div class="theme-switcher">
<button class="theme-btn" data-theme="zen">Japanese Zen</button>
<button class="theme-btn" data-theme="fantasy">Fantasy Forest</button>
<button class="theme-btn" data-theme="minimal">Modern Minimal</button>
<button class="theme-btn active" data-theme="minimal">Modern Minimal</button>
</div>
</header>
<div id="garden">
@ -53,6 +53,15 @@
<div class="hill hill-2"></div>
</div>
<div class="ground"></div>
<!-- FANTASY SCENE -->
<div class="fantasy-scene">
<div class="fantasy-moon"></div>
<div class="fantasy-trees"></div>
<div class="fantasy-mushrooms"></div>
<div class="fantasy-mist"></div>
</div>
<!-- Garden elements will be loaded here -->
</div>
<div class="garden-controls">