1- <!DOCTYPE html>
1+ <!doctype html>
22< html lang ="en ">
3- < head >
4- < meta charset ="UTF-8 ">
5- < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6- < title > WarpShare</ title >
7- < link rel ="preconnect " href ="https://fonts.googleapis.com " />
8- < link href ="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap " rel ="stylesheet " />
9- < link rel ="stylesheet " href ="/static/css/styles.css " />
10- </ head >
11- < body >
12- < div id ="app ">
13- < nav class ="top-nav ">
14- < div class ="left ">
15- < div class ="dot "> </ div >
16- < h1 class ="logo "> < a href ="# "> WARPSHARE</ a > </ h1 >
17- < p class ="path "> < span class ="dir "> ~</ span > / < span class ="dir "> Documents</ span > / < span class ="dir "> Projects</ span > </ p >
18- </ div >
19- < div class ="right ">
20- < button class ="upload ">
21- < svg xmlns ="http://www.w3.org/2000/svg " height ="18px " viewBox ="0 -960 960 960 " width ="18px " fill ="#e8eaf2 "> < path d ="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z "/> </ svg >
22- Upload
23- </ button >
24- < button class ="new-folder ">
25- < svg xmlns ="http://www.w3.org/2000/svg " height ="20px " viewBox ="0 -960 960 960 " width ="20px " fill ="#e8eaf2 "> < path d ="M576-324h72v-72h72v-72h-72v-72h-72v72h-72v72h72v72ZM168-192q-29 0-50.5-21.5T96-264v-432q0-29.7 21.5-50.85Q139-768 168-768h216l96 96h312q29.7 0 50.85 21.15Q864-629.7 864-600v336q0 29-21.15 50.5T792-192H168Zm0-72h624v-336H450l-96-96H168v432Zm0 0v-432 432Z "/> </ svg >
26- New Folder
27- </ button >
28- < div class ="view ">
29- < button class ="grid active " onclick ="view('grid', event) ">
30- < p > < svg xmlns ="http://www.w3.org/2000/svg " height ="20px " viewBox ="0 -960 960 960 " width ="20px " fill ="#6b7280 "> < path d ="M144-528v-288h288v288H144Zm0 384v-288h288v288H144Zm384-384v-288h288v288H528Zm0 384v-288h288v288H528ZM216-600h144v-144H216v144Zm384 0h144v-144H600v144Zm0 384h144v-144H600v144Zm-384 0h144v-144H216v144Zm384-384Zm0 240Zm-240 0Zm0-240Z "/> </ svg > </ p >
31- </ button >
32- < button class ="list " onclick ="view('list') ">
33- < p > < svg xmlns ="http://www.w3.org/2000/svg " height ="18px " viewBox ="0 -960 960 960 " width ="18px " fill ="#6b7280 "> < path d ="M144-144v-72h672v72H144Zm0-300v-72h672v72H144Zm0-300v-72h672v72H144Z "/> </ svg > </ p >
34- </ button >
35- </ div >
36- </ div >
37- </ nav >
38- < nav class ="search-nav ">
39- < div class ="search-bar ">
40- < input type ="search " placeholder ="Search files . . . ">
41- < svg xmlns ="http://www.w3.org/2000/svg " class ="search-icon " height ="16px " viewBox ="0 -960 960 960 " width ="16px " fill ="#6b7280 "> < path d ="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z "/> </ svg >
42- </ div >
43- < p id ="items "> 0 items</ p >
44- </ nav >
45- < div id ="files " class ="grid-view ">
46-
47- </ div >
48- < div id ="menu ">
49- < button >
50- < p > < svg xmlns ="http://www.w3.org/2000/svg " height ="20px " viewBox ="0 -960 960 960 " width ="20px " fill ="#6b7280 "> < path d ="M480-336 288-528l51-51 105 105v-342h72v342l105-105 51 51-192 192ZM263.72-192Q234-192 213-213.15T192-264v-72h72v72h432v-72h72v72q0 29.7-21.16 50.85Q725.68-192 695.96-192H263.72Z "/> </ svg > Download</ p >
51- </ button >
52- < button >
53- < p > < svg xmlns ="http://www.w3.org/2000/svg " height ="20px " viewBox ="0 -960 960 960 " width ="20px " fill ="#6b7280 "> < path d ="M216-216h51l375-375-51-51-375 375v51Zm-72 72v-153l498-498q11-11 23.84-16 12.83-5 27-5 14.16 0 27.16 5t24 16l51 51q11 11 16 24t5 26.54q0 14.45-5.02 27.54T795-642L297-144H144Zm600-549-51-51 51 51Zm-127.95 76.95L591-642l51 51-25.95-25.05Z "/> </ svg > Edit</ p >
54- </ button >
55- < button class ='delete '>
56- < p > < svg xmlns ="http://www.w3.org/2000/svg " height ="20px " viewBox ="0 -960 960 960 " width ="20px " fill ="#6b7280 "> < path d ="m400-325 80-80 80 80 51-51-80-80 80-80-51-51-80 80-80-80-51 51 80 80-80 80 51 51Zm-88 181q-29.7 0-50.85-21.15Q240-186.3 240-216v-480h-48v-72h192v-48h192v48h192v72h-48v479.57Q720-186 698.85-165T648-144H312Zm336-552H312v480h336v-480Zm-336 0v480-480Z "/> </ svg > Delete</ p >
57- </ button >
58- </ div >
59- </ div >
60- < script src ="/static/js/index.js "> </ script >
61- </ body >
62- </ html >
3+ < head >
4+ < meta charset ="UTF-8 " />
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
6+ < title > {{ title }}</ title >
7+ < link rel ="preconnect " href ="https://fonts.googleapis.com " />
8+ < link
9+ href ="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap "
10+ rel ="stylesheet " />
11+ < link rel ="stylesheet " href ="/static/css/styles.css " />
12+ </ head >
13+ < body >
14+ < div id ="app ">
15+ < nav class ="top-nav ">
16+ < div class ="left ">
17+ < div class ="dot "> </ div >
18+ < h1 class ="logo "> < a href ="# "> {{ display_name }}</ a > </ h1 >
19+ < p class ="path ">
20+ < span class ="dir "> ~</ span > /
21+ < span class ="dir "> Documents</ span > /
22+ < span class ="dir "> Projects</ span >
23+ </ p >
24+ </ div >
25+ < div class ="right ">
26+ < button class ="upload ">
27+ < svg
28+ xmlns ="http://www.w3.org/2000/svg "
29+ height ="18px "
30+ viewBox ="0 -960 960 960 "
31+ width ="18px "
32+ fill ="#e8eaf2 ">
33+ < path
34+ d ="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z " />
35+ </ svg >
36+ Upload
37+ </ button >
38+ < button class ="new-folder ">
39+ < svg
40+ xmlns ="http://www.w3.org/2000/svg "
41+ height ="20px "
42+ viewBox ="0 -960 960 960 "
43+ width ="20px "
44+ fill ="#e8eaf2 ">
45+ < path
46+ d ="M576-324h72v-72h72v-72h-72v-72h-72v72h-72v72h72v72ZM168-192q-29 0-50.5-21.5T96-264v-432q0-29.7 21.5-50.85Q139-768 168-768h216l96 96h312q29.7 0 50.85 21.15Q864-629.7 864-600v336q0 29-21.15 50.5T792-192H168Zm0-72h624v-336H450l-96-96H168v432Zm0 0v-432 432Z " />
47+ </ svg >
48+ New Folder
49+ </ button >
50+ < div class ="view ">
51+ < button class ="grid active " onclick ="view('grid', event) ">
52+ < p >
53+ < svg
54+ xmlns ="http://www.w3.org/2000/svg "
55+ height ="20px "
56+ viewBox ="0 -960 960 960 "
57+ width ="20px "
58+ fill ="#6b7280 ">
59+ < path
60+ d ="M144-528v-288h288v288H144Zm0 384v-288h288v288H144Zm384-384v-288h288v288H528Zm0 384v-288h288v288H528ZM216-600h144v-144H216v144Zm384 0h144v-144H600v144Zm0 384h144v-144H600v144Zm-384 0h144v-144H216v144Zm384-384Zm0 240Zm-240 0Zm0-240Z " />
61+ </ svg >
62+ </ p >
63+ </ button >
64+ < button class ="list " onclick ="view('list') ">
65+ < p >
66+ < svg
67+ xmlns ="http://www.w3.org/2000/svg "
68+ height ="18px "
69+ viewBox ="0 -960 960 960 "
70+ width ="18px "
71+ fill ="#6b7280 ">
72+ < path
73+ d ="M144-144v-72h672v72H144Zm0-300v-72h672v72H144Zm0-300v-72h672v72H144Z " />
74+ </ svg >
75+ </ p >
76+ </ button >
77+ </ div >
78+ </ div >
79+ </ nav >
80+ < nav class ="search-nav ">
81+ < div class ="search-bar ">
82+ < input type ="search " placeholder ="Search files . . . " />
83+ < svg
84+ xmlns ="http://www.w3.org/2000/svg "
85+ class ="search-icon "
86+ height ="16px "
87+ viewBox ="0 -960 960 960 "
88+ width ="16px "
89+ fill ="#6b7280 ">
90+ < path
91+ d ="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z " />
92+ </ svg >
93+ </ div >
94+ < p id ="items "> 0 items</ p >
95+ </ nav >
96+ < div id ="files " class ="grid-view "> </ div >
97+ < div id ="menu ">
98+ < button >
99+ < p >
100+ < svg
101+ xmlns ="http://www.w3.org/2000/svg "
102+ height ="20px "
103+ viewBox ="0 -960 960 960 "
104+ width ="20px "
105+ fill ="#6b7280 ">
106+ < path
107+ d ="M480-336 288-528l51-51 105 105v-342h72v342l105-105 51 51-192 192ZM263.72-192Q234-192 213-213.15T192-264v-72h72v72h432v-72h72v72q0 29.7-21.16 50.85Q725.68-192 695.96-192H263.72Z " />
108+ </ svg >
109+ Download
110+ </ p >
111+ </ button >
112+ < button >
113+ < p >
114+ < svg
115+ xmlns ="http://www.w3.org/2000/svg "
116+ height ="20px "
117+ viewBox ="0 -960 960 960 "
118+ width ="20px "
119+ fill ="#6b7280 ">
120+ < path
121+ d ="M216-216h51l375-375-51-51-375 375v51Zm-72 72v-153l498-498q11-11 23.84-16 12.83-5 27-5 14.16 0 27.16 5t24 16l51 51q11 11 16 24t5 26.54q0 14.45-5.02 27.54T795-642L297-144H144Zm600-549-51-51 51 51Zm-127.95 76.95L591-642l51 51-25.95-25.05Z " />
122+ </ svg >
123+ Edit
124+ </ p >
125+ </ button >
126+ < button class ="delete ">
127+ < p >
128+ < svg
129+ xmlns ="http://www.w3.org/2000/svg "
130+ height ="20px "
131+ viewBox ="0 -960 960 960 "
132+ width ="20px "
133+ fill ="#6b7280 ">
134+ < path
135+ d ="m400-325 80-80 80 80 51-51-80-80 80-80-51-51-80 80-80-80-51 51 80 80-80 80 51 51Zm-88 181q-29.7 0-50.85-21.15Q240-186.3 240-216v-480h-48v-72h192v-48h192v48h192v72h-48v479.57Q720-186 698.85-165T648-144H312Zm336-552H312v480h336v-480Zm-336 0v480-480Z " />
136+ </ svg >
137+ Delete
138+ </ p >
139+ </ button >
140+ </ div >
141+ </ div >
142+ < script src ="/static/js/index.js "> </ script >
143+ </ body >
144+ </ html >
0 commit comments