add website

app/static/css/avatar.css

@@ -0,0 +1,95 @@
+#main {
+    display: flex;
+    min-height: 100vh;
+    margin-top: 40px;
+}
+
+
+.head {
+    width: 60px;
+    border: 1px solid var(--linebreak);
+    cursor: pointer;
+    height: 60px;
+    margin: 0 auto;
+    display: block;
+    border-radius: 5px;
+}
+.torso {
+    width: 120px;
+    border: 1px solid var(--linebreak);
+    cursor: pointer;
+    height: 120px;
+    margin: 0 auto;
+    display: block;
+    margin-top: 10px;
+    border-radius: 5px;
+}
+.leftArm {
+    width: 50px;
+    border: 1px solid var(--linebreak);
+    cursor: pointer;
+    height: 120px;
+    margin: 0 auto;
+    display: block;
+    z-index: 99;
+    margin-left: -60px;
+    border-radius: 5px;
+}
+.rightArm {
+    width: 50px;
+    border: 1px solid var(--linebreak);
+    cursor: pointer;
+    height: 120px;
+    margin: 0 auto;
+    display: block;
+    z-index: 99;
+    margin-left: 130px;
+    border-radius: 5px;
+    margin-top: -120px;
+}
+.legs {
+    width: 120px;
+    height: 100%;
+    margin: 10px auto 0 auto;
+    display: block;
+}
+.leftLeg {
+    float: left;
+    width: calc(50% - 10px);
+    border: 1px solid var(--linebreak);
+    cursor: pointer;
+    height: 120px;
+    margin-right: 10px;
+    border-radius: 5px;
+}
+.rightLeg {
+    float: right;
+    width: calc(50% - 10px);
+    border: 1px solid var(--linebreak);
+    cursor: pointer;
+    height: 120px;
+    margin-left: 10px;
+    border-radius: 5px;
+}
+
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--surface-alt); /* Adjust the opacity and color as needed */
+    z-index: 9999; /* Make sure the overlay is above other elements */
+    border-radius: 5px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+
+.color-picker-item {
+    border-radius: 50%;
+    border: 1px solid var(--linebreak);
+    width: 30px;
+    height: 30px;
+    margin: 2px;
+    cursor: pointer;
+}