Hugging Face's logo

Spaces:
minhwai
/
pikachu_therapy
Sleeping

App Files Community
pikachu_therapy
File size: 11,727 Bytes 
3339ed0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
 
<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&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;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(&apos;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&apos;); 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>