Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/public/radial.html
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-06-25 09:47:46 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-06-25 09:47:46 -0700
commitdd9e937094e2375ea77ce757e3073bd10b40f0aa (patch)
tree5879d6703fdf28c3171ff340ab29739a32380b51 /public/radial.html
parentc829db0df8edbb2e3b13f5675ac420117584ac04 (diff)
Make the tree copse its own thing, and not a building
Diffstat (limited to 'public/radial.html')
-rw-r--r--public/radial.html329
1 files changed, 2 insertions, 327 deletions
diff --git a/public/radial.html b/public/radial.html
index a7f137e..96dd569 100644
--- a/public/radial.html
+++ b/public/radial.html
@@ -2,332 +2,7 @@
<html>
<head>
- <style>
- polygon {
- fill: inherit;
- stroke: inherit;
- stroke-width: 0.25px;
- }
-
- svg {
- border: 1px solid slategray;
- fill: none;
- }
-
- text {
- font-size: 4px;
- text-anchor: middle;
- user-select: none;
- font-family: sans-serif;
- fill: black;
- /* display: none; */
- }
-
- use[href="#hex"] {
- stroke: #666;
- /* fill: wheat; */
- fill: navajowhite;
- /* fill: url(#asterisk); */
- }
-
- .building .doors {
- display: inline;
- fill: none;
- fill-opacity: 1;
- stroke: #ff9900;
- stroke-width: 2.5;
- stroke-linecap: square;
- stroke-dasharray: none;
- stroke-opacity: 1;
- }
-
- .building .floor {
- opacity: 1;
- fill: #ffffff;
- fill-opacity: 0.5;
- stroke: none;
- }
-
- .building .inner-wall {
- fill: none;
- stroke: #ffffff;
- stroke-width: 1;
- stroke-linecap: square;
- }
-
- .building .outer-wall {
- fill: none;
- stroke: #000000;
- stroke-width: 2;
- stroke-linecap: square;
- }
-
- .view-elevation-roof .doors,
- .view-elevation-roof .inner-wall,
- .view-elevation-roof .outer-wall {
- display: none;
- }
-
- /* [class^="elevation"] {
- display: none;
- }
-
- [class="elevation-0"] {
- display: inline;
- } */
-
- .elevation-basement {
- fill: lightgray;
- display: none;
- }
-
- .elevation-0 use[href="#hex"] {
- /* fill: green; */
- }
-
- .elevation-1,
- .elevation-2 {
- display: inline;
- }
-
- .elevation-1 use[href="#hex"] {
- fill: lightblue;
- }
-
- .elevation-2 use[href="#hex"] {
- fill: lightpink;
- }
-
- .building .elevation-1 {
- fill: lightblue;
- }
-
- .elevation-roof {
- display: none;
- }
-
- .building .elevation-basement use {
- fill: lightgray;
- }
-
- .building .elevation-0 use {
- fill: white;
- }
-
- .building .elevation-1 use {
- fill: lightblue;
- }
-
- .building .elevation-2 use {
- fill: lightgreen;
- }
-
- .building .elevation-3 use {
- fill: lightpink;
- }
-
- .view-elevation-roof .floor {
- fill: darkgray;
- }
-
- .building .elevation-1 {
- display: none;
- }
-
- .building > * {
- display: none;
- }
-
- [data-view-elevation="-1"] [class^="elevation"] {
- display: none;
- }
-
- [data-view-elevation="-1"] .building > * {
- display: none;
- }
-
- [data-view-elevation="-1"] .building > .elevation-basement,
- [data-view-elevation="-1"] .building > .elevation-basement ~ .structure {
- display: inline;
- }
-
- [data-view-elevation="0"] .building .elevation-0,
- [data-view-elevation="0"] .building .elevation-0 ~ .structure {
- display: inline;
- }
-
- [data-view-elevation="1"] .building .elevation-1,
- [data-view-elevation="1"] .building .elevation-1 ~ .structure {
- display: inline;
- }
-
- [data-view-elevation="1"] .building .elevation-1 + .structure [class*='wall'] {
- display: none;
- }
-
- [data-view-elevation="1"] .building .elevation-1 + .structure .floor {
- fill: gray;
- }
-
- [data-view-elevation="2"] .building .elevation-2,
- [data-view-elevation="2"] .building .elevation-2 ~ .structure {
- display: inline;
- }
-
- [data-view-elevation="2"] .building .elevation-2 + .structure [class*='wall'] {
- display: none;
- }
-
- [data-view-elevation="2"] .building .elevation-2 + .structure .floor {
- fill: gray;
- }
-
- [data-view-elevation="3"] .building .elevation-3,
- [data-view-elevation="3"] .building .elevation-3 ~ .structure {
- display: inline;
- }
-
- [data-view-elevation="3"] .building .elevation-3 + .structure [class*='wall'] {
- display: none;
- }
-
- [data-view-elevation="3"] .building .elevation-3 + .structure .floor {
- fill: gray;
- }
-
- [data-view-elevation="0"] .elevation-0 {
- display: inline;
- }
-
- [data-view-elevation="1"] > .elevation-0,
- [data-view-elevation="1"] > .elevation-1 {
- display: inline;
- }
-
- [data-view-elevation="1"] .building .elevation-1 {
- display: inline;
- }
-
- .view-elevation-0 .elevation-0 {
- display: inline;
- }
-
- .view-elevation-1 .elevation-0 {
- display: inline;
- }
-
- .view-elevation-1 .elevation-1 {
- display: inline;
- }
-
- .view-elevation-1 .building .elevation-0 {
- display: none;
- }
-
- .view-elevation-1 .building .elevation-1 {
- /* display: none; */
- }
-
- .view-elevation-roof .elevation-roof {
- display: inline;
- }
-
- .view-elevation-basement [class^="elevation"] {
- display: none;
- }
-
- .view-elevation-basement .elevation-basement {
- display: inline;
- }
-
- .view-elevation-basement .doors {
- display: none;
- }
-
- .building [class*="elevation"] use {
- /* fill-opacity: 0.33; */
- stroke: black;
- }
-
- .building {
- /* display: none; */
- /* opacity: 0.2 */
- }
-
- #tree .trunk {
- fill: brown;
- }
-
- #tree .branches {
- fill: rgb(141, 202, 141);
- stroke: green;
- }
-
- #bush {
- fill: rgb(141, 202, 141);
- stroke: green;
- stroke-width: 0.5px;
- transform: scale(0.9);
- }
-
- .select-elevation {
- position: fixed;
- right: 0;
- top: 50%;
- margin-right: 10px;
- background-color: #FFFFFF99;
- border: 1px solid gray;
- padding: 2px;
- font-family: sans-serif;
- font-size: 10pt;
- }
-
- .select-elevation label {
- display: block;
- margin: 2px 0;
- text-align: center;
- border: 1px solid transparent;
- user-select: none;
- }
-
- .select-elevation input {
- display: none;
- }
-
- input:checked+label {
- border: 1px solid salmon;
- border-radius: 3px;
- background-color: #cdd9e9;
- }
-
- [class^="part"] use {
- fill-opacity: 0.75;
- }
-
- .part-1 use {
- fill: lightseagreen;
- }
-
- .part-2 use {
- fill: lightyellow;
- }
-
- .part-3 use {
- fill: lightblue;
- }
-
- .part-4 use {
- fill: lightsteelblue;
- }
-
- .part-5 use {
- fill: lightsalmon;
- }
-
- .part-6 use {
- fill: lightgreen;
- }
- </style>
+ <link rel="stylesheet" href="assets/css/radial.css">
</head>
<body>
@@ -419,7 +94,7 @@
d="m -90.93,-112.5 h 51.96 l 8.66,15 h 95.26 l 8.66,-15 h 43.3 v 15 l -25.98,45 v 60 h 34.64 v 75 h -43.3 v -30 H 12.99 l -25.98,45 h -103.92 v -90 h 25.98 z m 77.94,30 v 15 h 69.28 v -15 m -86.6,37.5 v 7.5 m 0,-60 V -75 M 73.61,-112.5 V -75 M -90.93,-37.5 H 90.93 m 0,45 H -90.93 m 173.2,45 v -15 h 43.3 m -112.58,0 h -43.3 v 60 m 43.3,-45 v -45 m -69.28,30 h -60.62 m 60.62,30 h -60.62 m 60.62,-60 v 90" />
</g>
- <g id="terrain">
+ <g id="terrain" class="terrain">
<rect id="terrain-floor" class="floor" x="-52.75" y="-68" width="105.5" height="136" id="rect3415" />
<g id="terrain-trees">
<use href="#tree" transform="translate(-27,-45.25)" />