feat: add new css style

app.py

@@ -21,7 +21,7 @@ def get_player_info(player_backend_user_id):
 
 # start of gradio interface
 with gr.Blocks(theme=seafoam, css=get_content("css/style.css")) as demo:
-    player_info = gr.State(get_player_info("http://id.junyiacademy.org/d6317d299321450191dd5da599a48b3d"))
+    player_info = gr.State(get_player_info)
 
     with gr.Row():
         with gr.Column(
@@ -97,7 +97,7 @@ with gr.Blocks(theme=seafoam, css=get_content("css/style.css")) as demo:
     # handling player info
     with gr.Row():
         player_backend_id = gr.Textbox(
-            "http://id.junyiacademy.org/d6317d299321450191dd5da599a48b3d", visible=False, elem_id="player_backend_id"
+            "", visible=False, elem_id="player_backend_id"
         )
         player_info_query_btn = gr.Button("Query", elem_id="trigger_button")
 

css/style.css

@@ -1,9 +1,9 @@
-.gradio-container {
+/* .gradio-container {
     background: url('https://storage.googleapis.com/wpassets.junyiacademy.org/1/2023/11/background-scaled.jpg');
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
-}
+} */
 
 #player_avatar_container {
     place-items: center;
@@ -18,12 +18,69 @@
     border-color: #fff !important;
 }
 
+.achievements{
+    margin: 0 auto;
+    width: 80%;
+    height: 200px !important;
+    overflow: auto !important;
+
+}
+
+.achievements  [data-testid="block-label"] {
+    display: none;
+}
+
+[data-testid="number-input"] {
+    display: None !important;
+}
+
+#adventure_slider {
+    overflow: auto !important;
+    height: 200px;
+}
+
+#adventure_slider div{
+    color: #232323 !important;
+    font-size: large;
+}
+
+.textfield > * { 
+    border-radius: 8px !important;
+    display: block; 
+    padding-left: .75rem !important;
+    margin: 0.3rem auto;
+    margin-left: 0px !important;
+  }
+
+#adventure_container {
+    height: 200px;
+}
+
 #player_avatar_description h1{
     font-size: 2.5rem;
     text-align: center;
 }
 
-#pet_avatar_description h1{
+h1{
+    font-size: 2rem;
+    text-align: center;
+    font-weight: 100 !important;
+}
+
+h1::after {
+    content: '';
+    display: block;
+    width: 25%; /* Adjust this value to control the width of the line */
+    height: 4px; /* Thickness of the line */
+    border-radius: 4px;
+    background: #12d2ab; /* Color of the line */
+    position: absolute;
+    bottom: -7px;
+    left: 50%;
+    transform: translateX(-50%); /* This centers the line */
+}
+
+#achievements_description h1{
     font-size: 2rem;
     text-align: center;
 }
@@ -38,10 +95,15 @@
     text-align: center;
 }
 
-#achievement_log {
+#adventure_log {
     margin: 2.5rem auto 0 auto;
 }
 
+#achievement_log {
+    overflow: auto !important;
+    height: 200px;
+}
+
 #pet_gallery .grid-wrap button  {
     margin: .5vh;
     background: transparent !important;
@@ -66,6 +128,10 @@
     box-shadow: 0 0 10px rgba(0,0,0,0.3);
     backdrop-filter: blur(10px); 
 }
+
+.preview button {
+    color: #000;
+}
     
 ::-webkit-scrollbar {
         width: 5px;
@@ -76,6 +142,90 @@
     opacity: 0;
 }
 
+[for="range_id_0"] div{
+    background: #e4e4e48a;
+    border-radius: 20px;
+    padding: 5%;
+    margin: 5%;
+    line-height: 1.8;
+}
+
 [aria-label="Share"] {
     opacity: 0;
-}
+}
+
+#adventure_slider {
+    display: flex;
+    flex-direction: column;
+}
+
+input[type="range"]{
+    order: -1;
+}
+
+input[type="range"] {
+    -webkit-appearance: none; /* Removes default styling for Webkit browsers */
+    height: 20px; /* Makes the track thicker */
+    background: linear-gradient(#12d2ab, #16a1b1);
+    box-shadow: 0 0 10px #16a1b1;
+    border-radius: 20px; /* Round corners of the track */
+    padding: 20px;
+    margin: 10px 0;
+    order: -1;
+
+  }
+  
+  /* Styles for the slider thumb for Webkit browsers like Chrome and Safari */
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none; /* Overrides default webkit styles */
+    appearance: none;
+    height: 24px; /* Height of the thumb */
+    width: 24px; /* Width of the thumb */
+    border-radius: 50%; /* Rounded corners of the thumb */
+    background: #f3b968; /* Background color of the thumb */
+    margin-top: -6px; /* Ensures the thumb aligns with the track */
+    box-shadow: 0px -2px 5px #eb6584 inset, 0px 2px 5px #b7456e;
+  }
+  
+  /* Styles for the slider thumb for Firefox */
+  input[type="range"]::-moz-range-thumb {
+    width: 20px; /* Width of the thumb */
+    height: 28px; /* Height of the thumb */
+    border-radius: 5px; /* Rounded corners of the thumb */
+    background: #4CAF50; /* Background color of the thumb */
+  }
+  
+  /* Styles for the slider thumb for IE */
+  input[type="range"]::-ms-thumb {
+    width: 20px; /* Width of the thumb */
+    height: 28px; /* Height of the thumb */
+    border-radius: 5px; /* Rounded corners of the thumb */
+    background: #4CAF50; /* Background color of the thumb */
+  }
+  
+  /* Styles for the track (progress) for Webkit browsers */
+  input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 10px; /* Height of the track */
+    background: #eee;
+    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75) inset;
+    border-radius: 10px; /* Rounded corners of the track */
+  }
+  
+  /* Styles for the track for Firefox */
+  input[type="range"]::-moz-range-track {
+    width: 100%;
+    height: 30px; /* Height of the track */
+    background: #eee;
+    border-radius: 10px; /* Rounded corners of the track */
+  }
+  
+  /* Styles for the track for IE */
+  input[type="range"]::-ms-track {
+    width: 100%;
+    height: 30px; /* Height of the track */
+    background: #eee;
+    border-radius: 10px; /* Rounded corners of the track */
+    border: none; /* IE may require removing the border */
+  }
+