garden 4
This commit is contained in:
Flatlogic Bot
parent
02402d8c31
commit
1f0c76f7ca
@ -263,7 +263,7 @@ header {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
transform-origin: bottom center;
|
||||
z-index: 4;
|
||||
z-index: 7;
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
@ -377,6 +377,11 @@ header {
|
||||
|
||||
/* --- Fantasy Forest Theme --- */
|
||||
|
||||
body[data-theme="fantasy"] {
|
||||
--primary-color: #9e7fde;
|
||||
--accent-color: #d9abff;
|
||||
}
|
||||
|
||||
body[data-theme="fantasy"] .cloud,
|
||||
body[data-theme="fantasy"] .hills {
|
||||
display: none;
|
||||
@ -392,6 +397,11 @@ body[data-theme="fantasy"] .hills {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
pointer-events: none;
|
||||
/* Background moved to #garden */
|
||||
}
|
||||
|
||||
body[data-theme="fantasy"] #garden {
|
||||
background: linear-gradient(to bottom, #1a0c2e, #3a1a5c);
|
||||
}
|
||||
|
||||
body[data-theme="fantasy"] .fantasy-scene {
|
||||
@ -399,11 +409,11 @@ body[data-theme="fantasy"] .fantasy-scene {
|
||||
}
|
||||
|
||||
body[data-theme="fantasy"] .sky {
|
||||
background: linear-gradient(to bottom, #1a0c2e, #3a1a5c);
|
||||
background: none;
|
||||
}
|
||||
|
||||
body[data-theme="fantasy"] .ground {
|
||||
background: #2a1a3c;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.fantasy-moon {
|
||||
@ -422,85 +432,166 @@ body[data-theme="fantasy"] .ground {
|
||||
|
||||
.fantasy-trees {
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
bottom: 15%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.fantasy-trees::before,
|
||||
.fantasy-trees::after {
|
||||
content: '';
|
||||
.tree {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
background: #110a1f;
|
||||
border-radius: 60% 60% 10px 10px;
|
||||
width: 10px; /* Trunk width */
|
||||
background: #2c1f3a;
|
||||
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 {
|
||||
.tree::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;
|
||||
bottom: 100%; /* Position the foliage above the trunk */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 120px;
|
||||
background: #2c1f3a;
|
||||
border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
|
||||
box-shadow: 0 -10px 0 #2c1f3a, 20px -25px 0 5px #2c1f3a, -20px -25px 0 5px #2c1f3a;
|
||||
}
|
||||
|
||||
.fantasy-mushrooms::before {
|
||||
bottom: 20px;
|
||||
/* Individual tree styles for variety */
|
||||
.tree-1 {
|
||||
left: 5%;
|
||||
height: 150px;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
.tree-1::after {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.tree-2 {
|
||||
left: 20%;
|
||||
animation-delay: 0.5s;
|
||||
height: 180px;
|
||||
transform: scale(1);
|
||||
}
|
||||
.tree-2::after {
|
||||
border-radius: 40% 60% 40% 40% / 70% 70% 30% 30%;
|
||||
box-shadow: 0 -15px 0 #2c1f3a, 25px -30px 0 8px #2c1f3a, -25px -30px 0 8px #2c1f3a;
|
||||
}
|
||||
|
||||
.fantasy-mushrooms::after {
|
||||
bottom: 10px;
|
||||
left: 80%;
|
||||
animation-delay: 1.5s;
|
||||
.tree-3 {
|
||||
left: 35%;
|
||||
height: 120px;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
.tree-3::after {
|
||||
width: 70px;
|
||||
height: 110px;
|
||||
box-shadow: 0 -8px 0 #2c1f3a, 15px -20px 0 3px #2c1f3a, -15px -20px 0 3px #2c1f3a;
|
||||
}
|
||||
|
||||
@keyframes glowing-mushroom {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
.tree-4 {
|
||||
right: 5%;
|
||||
height: 160px;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
.tree-4::after {
|
||||
width: 90px;
|
||||
height: 140px;
|
||||
border-radius: 60% 40% 50% 50% / 70% 70% 30% 30%;
|
||||
}
|
||||
|
||||
.tree-5 {
|
||||
right: 25%;
|
||||
height: 200px;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.tree-5::after {
|
||||
width: 110px;
|
||||
height: 160px;
|
||||
box-shadow: 0 -20px 0 #2c1f3a, 30px -40px 0 10px #2c1f3a, -30px -40px 0 10px #2c1f3a;
|
||||
}
|
||||
|
||||
.tree-6 {
|
||||
right: 40%;
|
||||
height: 140px;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
/* --- Stars --- */
|
||||
@keyframes flicker {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.2; }
|
||||
}
|
||||
|
||||
.stars-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 60%; /* Cover the sky area */
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
animation: flicker 3s infinite alternate;
|
||||
}
|
||||
|
||||
/* Random star positions and animation delays */
|
||||
.star:nth-child(1) { top: 10%; left: 5%; animation-delay: 0.1s; }
|
||||
.star:nth-child(2) { top: 50%; left: 10%; animation-delay: 0.5s; }
|
||||
.star:nth-child(3) { top: 20%; left: 15%; animation-delay: 1.2s; }
|
||||
.star:nth-child(4) { top: 40%; left: 20%; animation-delay: 0.8s; }
|
||||
.star:nth-child(5) { top: 60%; left: 25%; animation-delay: 0.3s; }
|
||||
.star:nth-child(6) { top: 15%; left: 30%; animation-delay: 1.5s; }
|
||||
.star:nth-child(7) { top: 35%; left: 35%; animation-delay: 0.2s; }
|
||||
.star:nth-child(8) { top: 55%; left: 40%; animation-delay: 1s; }
|
||||
.star:nth-child(9) { top: 5%; left: 45%; animation-delay: 0.7s; }
|
||||
.star:nth-child(10) { top: 25%; left: 50%; animation-delay: 1.3s; }
|
||||
.star:nth-child(11) { top: 45%; left: 55%; animation-delay: 0.4s; }
|
||||
.star:nth-child(12) { top: 65%; left: 60%; animation-delay: 1.1s; }
|
||||
.star:nth-child(13) { top: 10%; left: 65%; animation-delay: 0.6s; }
|
||||
.star:nth-child(14) { top: 30%; left: 70%; animation-delay: 1.4s; }
|
||||
.star:nth-child(15) { top: 50%; left: 75%; animation-delay: 0.9s; }
|
||||
.star:nth-child(16) { top: 70%; left: 80%; animation-delay: 0.1s; }
|
||||
.star:nth-child(17) { top: 20%; left: 85%; animation-delay: 1.6s; }
|
||||
.star:nth-child(18) { top: 40%; left: 90%; animation-delay: 0.3s; }
|
||||
.star:nth-child(19) { top: 60%; left: 95%; animation-delay: 1s; }
|
||||
.star:nth-child(20) { top: 5%; left: 98%; animation-delay: 0.5s; }
|
||||
.star:nth-child(21) { top: 15%; left: 2%; animation-delay: 1.2s; }
|
||||
.star:nth-child(22) { top: 35%; left: 8%; animation-delay: 0.8s; }
|
||||
.star:nth-child(23) { top: 55%; left: 12%; animation-delay: 0.2s; }
|
||||
.star:nth-child(24) { top: 25%; left: 18%; animation-delay: 1.5s; }
|
||||
.star:nth-child(25) { top: 45%; left: 22%; animation-delay: 0.4s; }
|
||||
.star:nth-child(26) { top: 65%; left: 28%; animation-delay: 1.1s; }
|
||||
.star:nth-child(27) { top: 10%; left: 32%; animation-delay: 0.6s; }
|
||||
.star:nth-child(28) { top: 30%; left: 38%; animation-delay: 1.4s; }
|
||||
.star:nth-child(29) { top: 50%; left: 42%; animation-delay: 0.9s; }
|
||||
.star:nth-child(30) { top: 70%; left: 48%; animation-delay: 0.1s; }
|
||||
.star:nth-child(31) { top: 20%; left: 52%; animation-delay: 1.6s; }
|
||||
.star:nth-child(32) { top: 40%; left: 58%; animation-delay: 0.3s; }
|
||||
.star:nth-child(33) { top: 60%; left: 62%; animation-delay: 1s; }
|
||||
.star:nth-child(34) { top: 5%; left: 68%; animation-delay: 0.5s; }
|
||||
.star:nth-child(35) { top: 25%; left: 72%; animation-delay: 1.3s; }
|
||||
.star:nth-child(36) { top: 45%; left: 78%; animation-delay: 0.4s; }
|
||||
.star:nth-child(37) { top: 65%; left: 82%; animation-delay: 1.1s; }
|
||||
.star:nth-child(38) { top: 10%; left: 88%; animation-delay: 0.6s; }
|
||||
.star:nth-child(39) { top: 30%; left: 92%; animation-delay: 1.4s; }
|
||||
.star:nth-child(40) { top: 50%; left: 96%; animation-delay: 0.9s; }
|
||||
.star:nth-child(41) { top: 70%; left: 3%; animation-delay: 0.2s; }
|
||||
.star:nth-child(42) { top: 15%; left: 9%; animation-delay: 1.5s; }
|
||||
.star:nth-child(43) { top: 35%; left: 14%; animation-delay: 0.8s; }
|
||||
.star:nth-child(44) { top: 55%; left: 19%; animation-delay: 0.1s; }
|
||||
.star:nth-child(45) { top: 25%; left: 24%; animation-delay: 1.2s; }
|
||||
.star:nth-child(46) { top: 45%; left: 29%; animation-delay: 0.7s; }
|
||||
.star:nth-child(47) { top: 65%; left: 34%; animation-delay: 1.6s; }
|
||||
.star:nth-child(48) { top: 10%; left: 39%; animation-delay: 0.3s; }
|
||||
.star:nth-child(49) { top: 30%; left: 44%; animation-delay: 1s; }
|
||||
.star:nth-child(50) { top: 50%; left: 49%; animation-delay: 0.5s; }
|
||||
BIN
assets/pasted-20250917-221532-222d0fc4.png
Normal file
BIN
assets/pasted-20250917-221532-222d0fc4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
assets/pasted-20250917-221647-a17a0342.png
Normal file
BIN
assets/pasted-20250917-221647-a17a0342.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
assets/pasted-20250917-221825-c91c5ef0.png
Normal file
BIN
assets/pasted-20250917-221825-c91c5ef0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
assets/pasted-20250917-222131-0185c064.png
Normal file
BIN
assets/pasted-20250917-222131-0185c064.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
BIN
assets/pasted-20250917-222344-28349d0f.png
Normal file
BIN
assets/pasted-20250917-222344-28349d0f.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
assets/pasted-20250917-223616-11873f05.png
Normal file
BIN
assets/pasted-20250917-223616-11873f05.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
43
index.php
43
index.php
@ -57,9 +57,27 @@
|
||||
<!-- 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 class="stars-container">
|
||||
<div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
|
||||
<div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
|
||||
<div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
|
||||
<div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
|
||||
<div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
|
||||
<div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
|
||||
<div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
|
||||
<div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
|
||||
<div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
|
||||
<div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div><div class="star"></div>
|
||||
</div>
|
||||
<div class="fantasy-trees">
|
||||
<div class="tree tree-1"></div>
|
||||
<div class="tree tree-2"></div>
|
||||
<div class="tree tree-3"></div>
|
||||
<div class="tree tree-4"></div>
|
||||
<div class="tree tree-5"></div>
|
||||
<div class="tree tree-6"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Garden elements will be loaded here -->
|
||||
@ -75,5 +93,24 @@
|
||||
<!-- Custom JS -->
|
||||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const themeButtons = document.querySelectorAll('.theme-btn');
|
||||
const body = document.body;
|
||||
|
||||
themeButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const theme = button.getAttribute('data-theme');
|
||||
|
||||
// Set theme on body
|
||||
body.setAttribute('data-theme', theme);
|
||||
|
||||
// Update active button
|
||||
themeButtons.forEach(btn => btn.classList.remove('active'));
|
||||
button.classList.add('active');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user