Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" /> | |
| <link | |
| rel="stylesheet" | |
| as="style" | |
| onload="this.rel='stylesheet'" | |
| href="https://fonts.googleapis.com/css2?display=swap&family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&family=Plus+Jakarta+Sans%3Awght%40400%3B500%3B700%3B800" | |
| /> | |
| <title>Galileo Design</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64," /> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> | |
| </head> | |
| <body> | |
| <div | |
| class="relative flex size-full min-h-screen bg-[#FFFFFF] group/design-root overflow-x-hidden" | |
| style='--checkbox-tick-svg: url('data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27rgb(255,255,255)%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e'); font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;' | |
| > | |
| <div class="layout-container flex h-full grow flex-col"> | |
| <header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#F4EFE6] px-10 py-3"> | |
| <div class="flex items-center gap-4 text-[#1C160C]"> | |
| <div class="size-4" style='background-image: url("./logo.png"); background-size: cover;'></div> | |
| <h2 class="text-[#1C160C] text-lg font-bold leading-tight tracking-[-0.015em]">Pikachu Therapy</h2> | |
| </div> | |
| <div class="flex flex-1 justify-end gap-8"> | |
| <div class="flex items-center gap-9"> | |
| <!-- <a class="text-[#1C160C] text-sm font-medium leading-normal hover:text-[#A18249]" href="#">Dashboard</a> | |
| <a class="text-[#1C160C] text-sm font-medium leading-normal hover:text-[#A18249]" href="#">Patient Records</a> --> | |
| <a class="text-[#1C160C] text-sm font-medium leading-normal hover:text-[#A18249]" href="page1.html">Dashboard</a> | |
| <a class="text-[#1C160C] text-sm font-medium leading-normal hover:text-[#A18249]" href="page2.html">Patient Records</a> | |
| </div> | |
| <div | |
| class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" | |
| style='background-image: url("https://cdn.usegalileo.ai/stability/0d34b163-8777-46b0-a8e7-c1907d4f7f95.png");' | |
| ></div> | |
| </div> | |
| </header> | |
| <div class="flex flex-1"> | |
| <div class="layout-content-container flex flex-col w-[240px] flex-none px-6 py-5"> | |
| <div class="flex h-full min-h-[500px] flex-col justify-between bg-[#FFFFFF] p-4"> | |
| <div class="flex flex-col gap-4"> | |
| <div class="flex gap-3"> | |
| <div | |
| class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" | |
| style='background-image: url("https://cdn.usegalileo.ai/stability/b1ac6a7f-e08f-4831-93e4-20e61e202c08.png");' | |
| ></div> | |
| <div class="flex flex-col"> | |
| <h1 class="text-[#1C160C] text-base font-medium leading-normal">Patient</h1> | |
| <p class="text-[#A18249] text-sm font-normal leading-normal">Hyeri Cho</p> | |
| </div> | |
| </div> | |
| <div class="flex flex-col gap-2"> | |
| <div class="flex items-center gap-3 px-3 py-2 rounded-full bg-[#F4EFE6]"> | |
| <div class="text-[#1C160C]" data-icon="Gauge" data-size="24px" data-weight="fill"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256"> | |
| <path | |
| d="M240,160v24a16,16,0,0,1-16,16H115.93a4,4,0,0,1-3.24-6.35L174.27,109a8.21,8.21,0,0,0-1.37-11.3,8,8,0,0,0-11.37,1.61l-72,99.06A4,4,0,0,1,86.25,200H32a16,16,0,0,1-16-16V161.13c0-1.79,0-3.57.13-5.33a4,4,0,0,1,4-3.8H48a8,8,0,0,0,8-8.53A8.17,8.17,0,0,0,47.73,136H23.92a4,4,0,0,1-3.87-5c12-43.84,49.66-77.13,95.52-82.28a4,4,0,0,1,4.43,4V80a8,8,0,0,0,8.53,8A8.17,8.17,0,0,0,136,79.73V52.67a4,4,0,0,1,4.43-4A112.18,112.18,0,0,1,236.23,131a4,4,0,0,1-3.88,5H208.27a8.17,8.17,0,0,0-8.25,7.47,8,8,0,0,0,8,8.53h27.92a4,4,0,0,1,4,3.86C240,157.23,240,158.61,240,160Z" | |
| ></path> | |
| </svg> | |
| </div> | |
| <p class="text-[#1C160C] text-sm font-medium leading-normal">Dashboard</p> | |
| </div> | |
| <div class="flex items-center gap-3 px-3 py-2"> | |
| <div class="text-[#1C160C]" data-icon="File" data-size="24px" data-weight="regular"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256"> | |
| <path | |
| d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Z" | |
| ></path> | |
| </svg> | |
| </div> | |
| <p class="text-[#1C160C] text-sm font-medium leading-normal">Patient Records</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="layout-content-container flex flex-col flex-1 px-10 py-5"> | |
| <div class="grid grid-cols-1 gap-6 md:grid-cols-3"> | |
| <div class="flex min-w-72 flex-1 flex-col gap-2"> | |
| <p class="text-[#1C160C] text-base font-medium leading-normal">Appetite Suppression</p> | |
| <p class="text-[#1C160C] tracking-light text-[32px] font-bold leading-tight truncate">-1000 points </p> | |
| <div class="flex gap-1"> | |
| <p class="text-[#A18249] text-base font-normal leading-normal">total AS</p> | |
| <p class="text-[#019863] text-base font-medium leading-normal">-50 points</p> | |
| </div> | |
| <div class="grid min-h-[180px] grid-flow-col gap-6 grid-rows-[1fr_auto] items-end justify-items-center px-3"> | |
| <div class="border-[#A18249] bg-[#F4EFE6] border-t-2 w-full" style="height: 100%;"></div> | |
| <p class="text-[#A18249] text-[13px] font-bold leading-normal tracking-[0.015em]">Before</p> | |
| <div class="border-[#A18249] bg-[#F4EFE6] border-t-2 w-full" style="height: 50%;"></div> | |
| <p class="text-[#A18249] text-[13px] font-bold leading-normal tracking-[0.015em]">After</p> | |
| </div> | |
| </div> | |
| <div class="flex min-w-72 flex-1 flex-col gap-2"> | |
| <p class="text-[#1C160C] text-base font-medium leading-normal">Average Effect</p> | |
| <p class="text-[#1C160C] tracking-light text-[32px] font-bold leading-tight truncate">29.3%</p> | |
| <div class="flex gap-1"> | |
| <p class="text-[#A18249] text-base font-normal leading-normal">7 times</p> | |
| <p class="text-[#C12929] text-base font-medium leading-normal">-205%</p> | |
| </div> | |
| <div class="grid min-h-[180px] grid-flow-col gap-6 grid-rows-[1fr_auto] items-end justify-items-center px-3"> | |
| <div class="border-[#A18249] bg-[#F4EFE6] border-t-2 w-full" style="height: 50%;"></div> | |
| <p class="text-[#A18249] text-[13px] font-bold leading-normal tracking-[0.015em]">1</p> | |
| <div class="border-[#A18249] bg-[#F4EFE6] border-t-2 w-full" style="height: 40%;"></div> | |
| <p class="text-[#A18249] text-[13px] font-bold leading-normal tracking-[0.015em]">2</p> | |
| <div class="border-[#A18249] bg-[#F4EFE6] border-t-2 w-full" style="height: 30%;"></div> | |
| <p class="text-[#A18249] text-[13px] font-bold leading-normal tracking-[0.015em]">3</p> | |
| <div class="border-[#A18249] bg-[#F4EFE6] border-t-2 w-full" style="height: 10%;"></div> | |
| <p class="text-[#A18249] text-[13px] font-bold leading-normal tracking-[0.015em]">4</p> | |
| <div class="border-[#A18249] bg-[#F4EFE6] border-t-2 w-full" style="height: 10%;"></div> | |
| <p class="text-[#A18249] text-[13px] font-bold leading-normal tracking-[0.015em]">5</p> | |
| <div class="border-[#A18249] bg-[#F4EFE6] border-t-2 w-full" style="height: 30%;"></div> | |
| <p class="text-[#A18249] text-[13px] font-bold leading-normal tracking-[0.015em]">6</p> | |
| <div class="border-[#A18249] bg-[#F4EFE6] border-t-2 w-full" style="height: 35%;"></div> | |
| <p class="text-[#A18249] text-[13px] font-bold leading-normal tracking-[0.015em]">7</p> | |
| </div> | |
| </div> | |
| <div class="flex min-w-72 flex-1 flex-col gap-2"> | |
| <p class="text-[#1C160C] text-base font-medium leading-normal">BMI variance index</p> | |
| <p class="text-[#1C160C] tracking-light text-[32px] font-bold leading-tight truncate">7kg/m^2</p> | |
| <div class="flex gap-1"> | |
| <p class="text-[#A18249] text-base font-normal leading-normal">Weekly Average</p> | |
| <p class="text-[#019863] text-base font-medium leading-normal">-5%</p> | |
| </div> | |
| <div class="flex min-h-[180px] flex-1 flex-col gap-8 py-4"> | |
| <svg width="100%" height="148" viewBox="-3 0 478 150" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"> | |
| <path | |
| d="M0 30 L50 40 L100 50 L150 60 L200 70 L250 80 L300 90 L350 100 L400 110 L450 120 L472 130 V149 H0 Z" | |
| fill="url(#paint0_linear_1131_5935)" | |
| ></path> | |
| <path | |
| d="M0 30 L50 40 L100 50 L150 60 L200 70 L250 80 L300 90 L350 100 L400 110 L450 120 L472 130" | |
| stroke="#A18249" | |
| stroke-width="3" | |
| stroke-linecap="round" | |
| ></path> | |
| <defs> | |
| <linearGradient id="paint0_linear_1131_5935" x1="236" y1="1" x2="236" y2="149" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#F4EFE6"></stop> | |
| <stop offset="1" stop-color="#F4EFE6" stop-opacity="0"></stop> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| <div class="flex justify-around"> | |
| <p class="text-[#A18249] text-[13px] font-bold leading-normal tracking-[0.015em]">Week 1</p> | |
| <p class="text-[#A18249] text-[13px] font-bold leading-normal tracking-[0.015em]">Week 2</p> | |
| <p class="text-[#A18249] text-[13px] font-bold leading-normal tracking-[0.015em]">Week 3</p> | |
| <p class="text-[#A18249] text-[13px] font-bold leading-normal tracking-[0.015em]">Week 4</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- <footer class="flex flex-col gap-6 px-5 py-10 text-center @container"> | |
| <p class="text-[#A18249] text-base font-normal leading-normal">Copyright 2024 Pikachu Therapy</p> | |
| </footer> --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="flex flex-col gap-6 px-5 py-10 text-center @container"> | |
| <p class="text-[#A18249] text-base font-normal leading-normal">Copyright 2024 Pikachu Therapy</p> | |
| </footer> | |
| </body> | |
| </html> | |