diff --git a/main.css b/main.css new file mode 100644 index 0000000000000000000000000000000000000000..1c91478163cfe4c0935df595db21689c15c37286 --- /dev/null +++ b/main.css @@ -0,0 +1,134 @@ +body { + background: #f7f7f7; +} + +.content { + margin-left: 2rem; + margin-right: 2rem; + font-family: Tahoma, Arial, sans-serif; +} + +.grid-container-elementsandrgraph { + display: grid; + grid-template-columns: 50% 50%; +} + +.grid-container-elementsandrgraph > div { + padding: 10px; +} + +.graph { + background-color: rgba(255, 255, 255, 0.8); + border-radius: 3%; + box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px; +} + +.grid-container1 { + display: grid; + grid-template-columns: 25% 25% 25% 25%; + gap: 10px; + padding: 10px; +} + +.grid-container1 > div { + background-color: rgba(255, 255, 255, 0.8); + text-align: left; + padding: 10px; + font-size: 15px; + border-radius: 3%; + box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px; +} + +.grid-container2 { + display: grid; + grid-template-columns: auto auto auto auto; + grid-template-rows: auto auto; + gap: 10px; + padding: 10px; + width: 50%; +} + +.grid-container2 > div { + background-color: rgba(255, 255, 255, 0.8); + text-align: center; + padding: 10px; + font-size: 15px; + border-radius: 3%; + box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px; +} + +.grid-container2 .progressbar { + width: 170px; + height: 190px; + position: relative; + align-items: center; + justify-content: center; +} + +.progressbar:hover { + transform: scale(1.03); + transition: transform 0.2s; +} + +.active { + background-color: aliceblue !important; + transform: scale(1.02); + transition: transform 0.2s; +} + +.grid-container2 .outer { + width: 120px; + height: 120px; + border-radius: 50%; + padding: 20px; + box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), + -6px -6px 10px -1px rgba(255, 255, 255, 0.7); +} + +.grid-container2 .inner { + width: 120px; + height: 120px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), + inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7), + -0.5px -0.5px 0px rgba(255, 255, 255, 1), 0.5px 0.5px 0px rgba(0, 0, 0, 0.15), + 0px 12px 10px -10px rgba(0, 0, 0, 0.05); +} + +.grid-container2 #number { + font-size: 30px; + font-weight: 600; +} + +.grid-container2 circle { + --fill: 440; + fill: none; + animation: anim 2s linear forwards; + stroke-dashoffset: var(--fill); + transition: stroke-dashoffset 2s; +} + +.grid-container2 svg { + transform: rotate(270deg); + position: absolute; + top: 10px; + left: 10px; +} + +.examples { + width: auto; + height: 160px; + background-color: rgba(255, 255, 255, 0.8); + border-radius: 3%; + box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px; + padding: 10px; +} + +.svgContainer { + display: none; + width: 50%; + height: 50%; +}