Skip to content

Commit 7c1abb5

Browse files
committed
updated
1 parent 7196d0b commit 7c1abb5

2 files changed

Lines changed: 148 additions & 62 deletions

File tree

routes/views.py

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,8 @@
55

66
@views_bp.route('/')
77
def home():
8-
return render_template('index.html', title="Home Page")
8+
return render_template(
9+
'index.html',
10+
title="WarpShare",
11+
display_name="WarpShare"
12+
)

templates/index.html

Lines changed: 143 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,144 @@
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

Comments
 (0)