Update mainpage.html

koda-git · Jan 15, 2023 · dac4832 · dac4832
1 parent a62b8ba
commit dac4832
Showing 1 changed file with 42 additions and 20 deletions.
diff --git a/src/main/webapp/mainpage.html b/src/main/webapp/mainpage.html
@@ -6,49 +6,71 @@
     <title>Preview</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        .container {
+            width: 250px;
+            height: 140px;
+            overflow: yes;
+        }
+
+        .container::-webkit-scrollbar {
+            width: 10px;
+        }
+
+        .container::-webkit-scrollbar-thumb {
+            background-color: #2f3542;
+            border-radius: 10px;
+            background-clip: padding-box;
+            border: 2px solid transparent;
+        }
+
+        .container::-webkit-scrollbar-track {
+            background-color: grey;
+            border-radius: 10px;
+            box-shadow: inset 0px 0px 5px white;
+        }
+
         html,
         body {
             display: flex;
             flex-direction: column;
             flex: 1;
-            width: 100%;
-            height: 100%;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
         }
     </style>
 </head>
 
 <body>
-    <div style="overflow: scroll; width:100%; height:150px; padding:10px;"></div>
-    <div style="font-size:90px; text-align:center; margin-top:150px;"> Welcome, Customer name!</div>
+    <div style="font-size:80px; font-weight:bold; text-align:auto; margin-left:185; margin-top:70px;"> Welcome, Customer name! </div>
     <div class="w-[100vw] h-[100vh] relative overflow-hidden bg-white">
-        <div class="flex flex-col justify-start items-center absolute left-[175px] top-[636px] gap-[43px] p-[30px] rounded-[30px] bg-[#83f]">
+        <div class="flex flex-col justify-start items-center absolute left-[175px] top-[480px] gap-[43px] p-[30px] rounded-[30px] bg-[#D8E5C4]" style="box-shadow: 0px 2px 5px 0 rgba(38,51,77,1);">
             <div class="flex justify-between items-center flex-grow-0 flex-shrink-0 w-[2010px] relative">
-                <p class="flex-grow-0 flex-shrink-0 w-[1093px] h-[30px] text-4xl font-bold text-left text-white"> New to Canada? </p>
+                <p class="flex-grow-0 flex-shrink-0 w-[1093px] h-[30px] text-4xl font-bold text-left text-black"> New to Canada? </p>
             </div>
             <svg width="996" height="193" viewBox="0 0 996 193" fill="none" xmlns="http://www.w3.org/2000/svg" class="flex-grow-0 flex-shrink-0 w-[992px] h-[193px] relative" preserveAspectRatio="none">
-                <circle cx="96" cy="95.5" r="92.5" fill="#D9D9D9"></circle>
-                <circle cx="903" cy="95.5" r="92.5" fill="#D9D9D9"></circle>
-                <circle cx="634" cy="95.5" r="92.5" fill="#D9D9D9"></circle>
-                <circle cx="365" cy="95.5" r="92.5" fill="#D9D9D9"></circle>
+                <circle cx="96" cy="95.5" r="92.5" fill="#FFFFFF"></circle>
+                <circle cx="903" cy="95.5" r="92.5" fill="#FFFFFF"></circle>
+                <circle cx="634" cy="95.5" r="92.5" fill="#FFFFFF"></circle>
+                <circle cx="365" cy="95.5" r="92.5" fill="#FFFFFF"></circle>
             </svg>
         </div>
-        <div class="flex flex-col justify-start items-center absolute left-[175px] top-[1000px] gap-[43px] p-[30px] rounded-[30px] bg-[#83f]">
-            <div class="flex justify-between items-center flex-grow-0 flex-shrink-0 w-[2010px] relative">
-                <p class="flex-grow-0 flex-shrink-0 w-[1093px] h-[30px] text-4xl font-bold text-left text-white"> Ask your question </p>
+        <div class="flex flex-col justify-start items-center absolute left-[175px] top-[840px] gap-[43px] p-[30px] rounded-[30px] bg-[#FDF4EA]" style="box-shadow: 0px 2px 5px 0 rgba(38,51,77,1);">
+            <div class="flex justify-between items-center flex-grow-0 flex-shrink-0 w-[2010px] h-[0] relative">
+                <div>
+                    <input type="text" placeholder="     Put_your_Question" maxlength="200" style="width:2000; height:220px; margin-top:235px">
+                </div>
             </div>
             <svg width="996" height="193" viewBox="0 0 996 193" fill="none" xmlns="http://www.w3.org/2000/svg" class="flex-grow-0 flex-shrink-0 w-[992px] h-[193px] relative" preserveAspectRatio="none">
             </svg>
         </div>
-        <div class="flex flex-col justify-start items-start w-[1300px] h-[421px] absolute left-[930px] top-[182px] gap-[30px] px-10 pt-10 pb-[98px] rounded-[30px] bg-neutral-50" style="box-shadow: 0px 2px 5px 0 rgba(38,51,77,1);">
+        <div class="flex flex-col justify-start items-start w-[1300px] h-[421px] absolute left-[930px] top-[25px] gap-[30px] px-10 pt-10 pb-[98px] rounded-[30px] bg-neutral-50" style="box-shadow: 0px 2px 5px 0 rgba(38,51,77,1);">
             <div class="flex justify-between items-center self-stretch flex-grow-0 flex-shrink-0 relative">
                 <p class="flex-grow-0 flex-shrink-0 text-2xl font-bold text-left text-[#4d5e80]"> Transactions </p>
                 <div class="flex justify-start items-center flex-grow-0 flex-shrink-0" style="filter: drop-shadow(0px 2px 5px rgba(38,51,77,0.03));">
-                    <div class="flex justify-center items-center flex-grow-0 flex-shrink-0 h-10 relative gap-2.5 pl-5 pr-[15px] py-[15px] rounded-tl-[30px] rounded-bl-[30px] bg-white border-2 border-[#f5f6f7]">
+                    <div class="flex justify-center items-center flex-grow-0 flex-shrink-0 h-10 relative gap-2.5 pl-5 pr-[15px] py-[15px] rounded-tl-[30px] rounded-bl-[30px] bg-black border-2 border-[#f5f6f7]">
                         <p class="flex-grow-0 flex-shrink-0 text-xs font-black text-center text-[#6b7a99]"> Next Month </p>
                     </div>
-                    <div class="flex justify-center items-center flex-grow-0 flex-shrink-0 h-10 relative gap-2.5 pl-[15px] pr-5 py-[15px] rounded-tr-[30px] rounded-br-[30px] bg-white border-2 border-[#f5f6f7]">
+                    <div class="flex justify-center items-center flex-grow-0 flex-shrink-0 h-10 relative gap-2.5 pl-[15px] pr-5 py-[15px] rounded-tr-[30px] rounded-br-[30px] bg-black border-2 border-[#f5f6f7]">
                         <p class="flex-grow-0 flex-shrink-0 text-xs font-black text-center text-[#6b7a99]"> Last Month</p>
                     </div>
                 </div>
@@ -98,10 +120,10 @@
                 </div>
             </div>
         </div>
-        <div class="flex flex-col justify-start items-start w-[714px] h-[424px] absolute left-[175px] top-[182px] gap-5 p-10 rounded-[30px] bg-[#1a2233]">
+        <div class="flex flex-col justify-start items-start w-[714px] h-[424px] absolute left-[175px] top-[25px] gap-5 p-10 rounded-[30px] bg-[#1A2233]" style="box-shadow: px 5px 10px 0px rgba(255,255,255,1);">
             <div class="flex justify-between items-start self-stretch flex-grow-0 flex-shrink-0 relative">
-                <p class="flex-grow-0 flex-shrink-0 text-2xl font-bold text-left text-white">
-                    <span class="flex-grow-0 flex-shrink-0 text-2xl font-bold text-left text-white">Account Summary</span>
+                <p class="flex-grow-0 flex-shrink-0 text-2xl font-bold text-left text-withe">
+                    <span class="flex-grow-0 flex-shrink-0 text-2xl font-bold text-left text-White">Account Summary</span>
                 </p>
                 <div class="flex justify-center items-center flex-grow-0 flex-shrink-0 relative gap-2.5 p-[15px] rounded-[100px] bg-[#26334d] border-2 border-[#26334d]">
                     <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="flex-grow-0 flex-shrink-0 w-[30px] h-[30px] relative" preserveAspectRatio="none">
@@ -129,7 +151,7 @@
                     </div>
                 </div>
                 <div class="flex justify-start items-start flex-grow-0 flex-shrink-0 gap-5">
-                    <div class="flex justify-start items-start flex-grow-0 flex-shrink-0 w-16 h-0.5 gap-2.5 p-2.5 rounded-[10px] bg-white"></div>
+                    <div class="flex justify-start items-start flex-grow-0 flex-shrink-0 w-16 h-0.5 gap-2.5 p-2.5 rounded-[10px] bg-black"></div>
                     <div class="flex justify-start items-start flex-grow-0 flex-shrink-0 w-16 h-0.5 gap-2.5 p-2.5 rounded-[10px] bg-[#346]"></div>
                     <div class="flex justify-start items-start flex-grow-0 flex-shrink-0 w-16 h-0.5 gap-2.5 p-2.5 rounded-[10px] bg-[#346]"></div>
                 </div>