garden 253987

This commit is contained in:
Flatlogic Bot 2025-09-17 23:20:15 +00:00
parent b36403767e
commit ee2fbaaaee
4 changed files with 122 additions and 3 deletions

View File

@ -261,7 +261,7 @@ header {
position: absolute;
bottom: 5%;
transform-origin: bottom center;
z-index: 7;
z-index: 15;
transition: transform 0.5s ease-out;
}
@ -614,6 +614,7 @@ body[data-theme="minimal"] {
--button-hover-bg: #7f9ad1;
}
/* --- Japanese Zen Theme --- */
body[data-theme="zen"] {
--panel-bg: rgba(255, 255, 255, 0.8);
--text-color: #4a4a4a;
@ -624,4 +625,108 @@ body[data-theme="zen"] {
--task-input-bg: rgba(255,255,255,0.6);
--task-input-border: transparent;
--button-hover-bg: #97c6a8;
}
}
body[data-theme="zen"] .sky, /* Hide default scene elements */
body[data-theme="zen"] .hills,
body[data-theme="zen"] .fantasy-scene {
display: none;
}
.zen-scene {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
/* overflow: hidden; */ /* This was causing the flowers to be clipped */
}
body[data-theme="zen"] #garden {
background: linear-gradient(to bottom, #efc2bd, #ffffff);
}
body[data-theme="zen"] .zen-scene {
opacity: 1;
}
body[data-theme="zen"] .ground {
display: none; /* hide default ground */
}
.zen-sun {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 600px;
border-radius: 50%;
background: #ed7968;
box-shadow: 0 0 80px rgba(237, 121, 104, 0.7);
bottom: 5%;
}
.torii-gate {
position: absolute;
bottom: 18%;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 150px;
z-index: 10;
}
.torii-pillar {
position: absolute;
bottom: 0;
width: 20px;
height: 120px;
background: #0c2e16;
border-radius: 5px 5px 0 0;
}
.torii-pillar.left {
left: 20px;
transform: rotate(-5deg);
}
.torii-pillar.right {
right: 20px;
transform: rotate(5deg);
}
.torii-beam {
position: absolute;
background: #0c2e16;
border-radius: 4px;
}
.torii-beam.middle {
top: 20px;
left: 0;
width: 100%;
height: 15px;
}
.torii-beam.top {
top: 0;
left: -20px;
width: calc(100% + 40px);
height: 20px;
border-radius: 10px 10px 0 0;
}
.zen-ground {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20%;
background: #0c2e16;
z-index: 3;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 287 KiB

View File

@ -15,7 +15,7 @@
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
<!-- 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body data-theme="minimal">
@ -80,6 +80,20 @@
</div>
<!-- ZEN SCENE -->
<div class="zen-scene">
<div class="zen-sun"></div>
<div class="cloud cloud-1"></div>
<div class="cloud cloud-2"></div>
<div class="torii-gate">
<div class="torii-pillar left"></div>
<div class="torii-pillar right"></div>
<div class="torii-beam top"></div>
<div class="torii-beam middle"></div>
</div>
<div class="zen-ground"></div>
</div>
<!-- Garden elements will be loaded here -->
</div>
<div class="garden-controls">