ui
Browse files- src/routes/+page.svelte +140 -2
src/routes/+page.svelte
CHANGED
@@ -1,2 +1,140 @@
|
|
1 |
-
<
|
2 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<div class="flex bg-black/95 text-gray-300/90">
|
2 |
+
<div class="w-64">
|
3 |
+
<button class="text-white p-4 border border-white">New chat</button>
|
4 |
+
</div>
|
5 |
+
<div class="relative flex-1 overflow-y-auto">
|
6 |
+
<div class="mx-auto flex h-screen max-h-screen max-w-4xl flex-col gap-8 pt-12">
|
7 |
+
<div class="flex items-start justify-start gap-4 leading-relaxed">
|
8 |
+
<img
|
9 |
+
src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
|
10 |
+
class="mt-5 h-4 w-4 flex-none rounded-full shadow-lg shadow-white/40"
|
11 |
+
/>
|
12 |
+
<div
|
13 |
+
class="text-blue-00 group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5"
|
14 |
+
>
|
15 |
+
Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
|
16 |
+
consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum,
|
17 |
+
dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet consectetur
|
18 |
+
adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit
|
19 |
+
amet consectetur adipisicing elit. Dolorum maiores quo officiis?
|
20 |
+
</div>
|
21 |
+
</div>
|
22 |
+
<div class="mb-2 flex items-start justify-start gap-4 text-gray-300/70">
|
23 |
+
<div class="mt-4 h-4 w-4 flex-none rounded-full" />
|
24 |
+
<div class="rounded-2xl px-4 py-3.5">
|
25 |
+
Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
|
26 |
+
consectetur adipisicing eLorem ipsum
|
27 |
+
</div>
|
28 |
+
</div>
|
29 |
+
<div class="flex items-start justify-start gap-4 leading-relaxed">
|
30 |
+
<img
|
31 |
+
src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
|
32 |
+
class="mt-5 h-3 w-3 flex-none rounded-full bg-white"
|
33 |
+
/>
|
34 |
+
<div
|
35 |
+
class="text-blue-00 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5"
|
36 |
+
>
|
37 |
+
<p>
|
38 |
+
Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
|
39 |
+
consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem
|
40 |
+
ipsum, dolor sit
|
41 |
+
</p>
|
42 |
+
<div class="mt-4 flex flex-wrap gap-4 first:mt-0">
|
43 |
+
<img
|
44 |
+
src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/7a6fcbc9-3440-49b4-9c33-eaadc59a462d"
|
45 |
+
alt=""
|
46 |
+
class="max-h-[360px] rounded-xl"
|
47 |
+
/>
|
48 |
+
<img
|
49 |
+
src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/11d91b58-4305-45de-b608-1142ddc118a7"
|
50 |
+
alt=""
|
51 |
+
class="max-h-[360px] rounded-xl"
|
52 |
+
/>
|
53 |
+
</div>
|
54 |
+
</div>
|
55 |
+
</div>
|
56 |
+
<div class="flex items-start justify-start gap-4 leading-relaxed">
|
57 |
+
<img
|
58 |
+
src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
|
59 |
+
class="mt-5 h-3 w-3 flex-none rounded-full bg-white"
|
60 |
+
/>
|
61 |
+
<div
|
62 |
+
class="text-blue-00 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5"
|
63 |
+
>
|
64 |
+
<p>
|
65 |
+
Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
|
66 |
+
consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem
|
67 |
+
ipsum, dolor sit
|
68 |
+
</p>
|
69 |
+
<div class="mt-4 flex flex-wrap gap-4 first:mt-0">
|
70 |
+
<img
|
71 |
+
src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/7a6fcbc9-3440-49b4-9c33-eaadc59a462d"
|
72 |
+
alt=""
|
73 |
+
class="max-h-[360px] rounded-xl"
|
74 |
+
/>
|
75 |
+
<img
|
76 |
+
src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/11d91b58-4305-45de-b608-1142ddc118a7"
|
77 |
+
alt=""
|
78 |
+
class="max-h-[360px] rounded-xl"
|
79 |
+
/>
|
80 |
+
</div>
|
81 |
+
</div>
|
82 |
+
</div>
|
83 |
+
<div class="flex items-start justify-start gap-4 leading-relaxed">
|
84 |
+
<img
|
85 |
+
src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
|
86 |
+
class="mt-5 h-3 w-3 flex-none rounded-full bg-white"
|
87 |
+
/>
|
88 |
+
<div
|
89 |
+
class="text-blue-00 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5"
|
90 |
+
>
|
91 |
+
<p>
|
92 |
+
Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
|
93 |
+
consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem
|
94 |
+
ipsum, dolor sit
|
95 |
+
</p>
|
96 |
+
<div class="mt-4 flex flex-wrap gap-4 first:mt-0">
|
97 |
+
<img
|
98 |
+
src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/7a6fcbc9-3440-49b4-9c33-eaadc59a462d"
|
99 |
+
alt=""
|
100 |
+
class="max-h-[360px] rounded-xl"
|
101 |
+
/>
|
102 |
+
<img
|
103 |
+
src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/11d91b58-4305-45de-b608-1142ddc118a7"
|
104 |
+
alt=""
|
105 |
+
class="max-h-[360px] rounded-xl"
|
106 |
+
/>
|
107 |
+
</div>
|
108 |
+
</div>
|
109 |
+
</div>
|
110 |
+
<div class="flex items-start justify-start gap-4 text-gray-300">
|
111 |
+
<div class="mt-4 h-4 w-4 flex-none rounded-full" />
|
112 |
+
<div class="rounded-2xl px-4 py-3.5">
|
113 |
+
Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
|
114 |
+
consectetur adipisicing eLorem ipsum
|
115 |
+
</div>
|
116 |
+
</div>
|
117 |
+
<div class="flex items-start justify-start gap-4 leading-relaxed">
|
118 |
+
<img
|
119 |
+
src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
|
120 |
+
class="mt-5 h-4 w-4 flex-none rounded-full shadow-lg shadow-white/40"
|
121 |
+
/>
|
122 |
+
<div
|
123 |
+
class="group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5 text-blue-900"
|
124 |
+
>
|
125 |
+
<div class="h-4 w-2 animate-pulse bg-white/20" />
|
126 |
+
</div>
|
127 |
+
</div>
|
128 |
+
</div>
|
129 |
+
<div class="fixed inset-x-0 bottom-12 mx-auto max-w-4xl">
|
130 |
+
<div
|
131 |
+
class="w-full rounded-2xl border border-black bg-gradient-to-br from-gray-800/40 to-gray-800/50 px-4 py-3.5 shadow-2xl shadow-white/5 outline-none ring-gray-700 focus:ring-1"
|
132 |
+
role="textbox"
|
133 |
+
contenteditable
|
134 |
+
>
|
135 |
+
Ask anything...
|
136 |
+
</div>
|
137 |
+
<!-- <textarea class="w-full rounded-2xl bg-slate-800/80 px-4 py-3.5 shadow-xl" rows="1" placeholder="Write anything..."></textarea> -->
|
138 |
+
</div>
|
139 |
+
</div>
|
140 |
+
</div>
|