Skip to content

Commit d98cd51

Browse files
vsochvsoch
committed
adding missing static files
1 parent 0fb9a13 commit d98cd51

File tree

2 files changed

+343
-0
lines changed

2 files changed

+343
-0
lines changed

‎upload/main/static/css/style.css

+303
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
1+
body {
2+
/* bwaaahahha this color... */
3+
background: darkmagenta;
4+
}
5+
6+
/* Table */
7+
8+
table {
9+
font-family: 'Roboto', sans-serif;
10+
border-collapse: collapse;
11+
width: 100%;
12+
}
13+
14+
td {
15+
color: white;
16+
}
17+
18+
thead td {
19+
color: #6e006c;
20+
}
21+
22+
th, td {
23+
font-family: 'Roboto', sans-serif;
24+
padding: 8px;
25+
text-align: left;
26+
border-bottom: 1px solid #F7F7F7;
27+
}
28+
thead tr td {
29+
font-family: 'Roboto', sans-serif;
30+
font-weight: bold;
31+
font-size: 100%;
32+
}
33+
.tbtitle {
34+
font-family: 'Roboto', sans-serif;
35+
color:white;
36+
}
37+
38+
/* File Upload */
39+
40+
.zone {
41+
margin: auto;
42+
border: 5px dashed white;
43+
text-align: center;
44+
background-color: #d3a5dc9c;
45+
color: white;
46+
z-index: 20;
47+
padding: 20px;
48+
transition: all 0.3s ease-out;
49+
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 0.25em 0 rgba(0, 0, 0, 0.25);
50+
}
51+
.zone .btnCompression .active {
52+
background: #EB6A5A;
53+
color: white;
54+
}
55+
.zone i {
56+
text-align: center;
57+
font-size: 10em;
58+
color: #fff;
59+
margin-top: 50px;
60+
}
61+
.zone .selectFile {
62+
height: 50px;
63+
margin: 20px auto;
64+
position: relative;
65+
width: 200px;
66+
}
67+
.zone label,
68+
.zone input {
69+
cursor: pointer;
70+
display: block;
71+
height: 50px;
72+
left: 0;
73+
position: absolute;
74+
top: 0;
75+
width: 100%;
76+
border-radius: 5px;
77+
}
78+
.zone label {
79+
background: #fff;
80+
font-family: 'Roboto', sans-serif;
81+
color: #EB6A5A;
82+
display: inline-block;
83+
font-size: 1.2em;
84+
line-height: 50px;
85+
padding: 0;
86+
text-align: center;
87+
white-space: nowrap;
88+
text-transform: uppercase;
89+
font-weight: 400;
90+
box-shadow: 0 1px 1px gray;
91+
}
92+
.zone input[type=file] {
93+
opacity: 0;
94+
}
95+
.zone.in {
96+
color: white;
97+
border-color: white;
98+
background: radial-gradient(ellipse at center, #EB6A5A 0, #c9402f 100%);
99+
}
100+
.zone.in i {
101+
color: #fff;
102+
}
103+
.zone.in label {
104+
background: #fff;
105+
color: #EB6A5A;
106+
}
107+
.zone.hover {
108+
color: gray;
109+
border-color: white;
110+
background: #fff;
111+
border: 5px dashed gray;
112+
}
113+
.zone.hover i {
114+
color: #EB6A5A;
115+
}
116+
.zone.hover label {
117+
background: #fff;
118+
color: #EB6A5A;
119+
}
120+
.zone.fade {
121+
transition: all 0.3s ease-out;
122+
opacity: 1;
123+
}
124+
125+
#cloud {
126+
cursor: pointer;
127+
}
128+
129+
.container {
130+
width: 650px;
131+
display: block;
132+
position: relative;
133+
box-sizing: border-box;
134+
padding: 60px;
135+
top: 100px;
136+
left: calc(50% - 325px);
137+
box-shadow: -10px 10px 40px 0px rgba(0, 0, 0, 0.3);
138+
background-color: mediumorchid;
139+
border-radius: 20px;
140+
}
141+
142+
.label, .form input, .form textarea {
143+
width: 100%;
144+
box-sizing: border-box;
145+
font-family: 'Roboto', sans-serif;
146+
outline-style: none;
147+
outline-color: transparent;
148+
background-color: transparent;
149+
fill: transparent;
150+
border: none;
151+
margin: 0;
152+
}
153+
154+
@-webkit-keyframes autofill {
155+
to {
156+
color: rgba(255, 255, 255, 1);
157+
font-weight: 300;
158+
background: transparent;
159+
}
160+
}
161+
162+
.form input:-webkit-autofill,
163+
.form textarea:-webkit-autofill {
164+
-webkit-animation-name: autofill;
165+
-webkit-animation-fill-mode: both;
166+
}
167+
168+
.form input::-webkit-input-placeholder,
169+
.form textarea::-webkit-input-placeholder {
170+
color: rgba(255, 255, 255, 1);
171+
font-weight: 400;
172+
}
173+
.form input:-moz-placeholder,
174+
.form textarea:-moz-placeholder {
175+
color: rgba(255, 255, 255, 1);
176+
opacity: 1;
177+
font-weight: 400;
178+
}
179+
.form input::-moz-placeholder,
180+
.form textarea::-moz-placeholder {
181+
color: rgba(255, 255, 255, 1);
182+
opacity: 1;
183+
font-weight: 400;
184+
}
185+
.form input:-ms-input-placeholder,
186+
.form textarea:-ms-input-placeholder {
187+
color: rgba(255, 255, 255, 1);
188+
font-weight: 400;
189+
}
190+
.form input::-ms-input-placeholder,
191+
.form textarea::-ms-input-placeholder {
192+
color: rgba(255, 255, 255, 1);
193+
font-weight: 400;
194+
}
195+
196+
.form input {
197+
height: 50px;
198+
}
199+
200+
.form textarea {
201+
min-height: 50px;
202+
max-height: 300px;
203+
height: auto;
204+
display: inline-block;
205+
resize: none;
206+
padding: 10px 0;
207+
}
208+
209+
.form input[type="submit"] {
210+
width: auto;
211+
padding: 0 40px;
212+
margin: 40px 0 0 0;
213+
font-weight: 400;
214+
box-shadow: inset 0 0 0 2px rgba(255 ,255 ,255 , 1);
215+
cursor: pointer;
216+
border-radius: 30px;
217+
}
218+
219+
.form input[type="submit"]:hover {
220+
background-color: rgba(255, 255, 255, 1);
221+
color: rgba(105, 60, 150, 1);
222+
transition: all 0.2s ease-in-out;
223+
}
224+
225+
.form input[type="submit"]:focus {
226+
box-shadow: inset 0 0 0 2px rgba(255 ,255 ,255 , 1), 0 0 10px 0 rgba(255 ,255 ,255 , 0.4);
227+
}
228+
229+
.form label {
230+
display: block;
231+
position: absolute;
232+
top: 30px;
233+
font-size: 20px;
234+
font-weight: 400;
235+
color: rgba(255, 255, 255, 1);
236+
z-index: -1;
237+
}
238+
239+
.form input,
240+
.form textarea {
241+
margin: 20px 0 0 0;
242+
font-size: 20px;
243+
font-weight: 300;
244+
color: rgba(255, 255, 255, 1);
245+
box-shadow: inset 0 -2px 0 0 rgba(230 ,190 ,50 , 1);
246+
}
247+
248+
.field {
249+
position: relative;
250+
}
251+
252+
.field input[type="text"]:focus ~ label,
253+
.field input[type="email"]:focus ~ label,
254+
.field textarea:focus ~ label,
255+
.field input[type="text"]:valid ~ label,
256+
.field input[type="email"]:valid ~ label,
257+
.field textarea:valid ~ label,
258+
.field input:not([value=""]) ~ label,
259+
.field textarea:not([value=""]) ~ label {
260+
top: 10px;
261+
font-size: 16px;
262+
font-weight: 400;
263+
color: rgba(255, 255, 255, 1);
264+
z-index: 1;
265+
transition: all 0.2s ease-in-out, color 0s;
266+
}
267+
268+
.field input[type="text"]:focus ~ label,
269+
.field input[type="email"]:focus ~ label,
270+
.field textarea:focus ~ label {
271+
color: rgba(255, 255, 255, 1);
272+
}
273+
274+
.field input[type="text"]:valid ~ label,
275+
.field input[type="email"]:valid ~ label,
276+
.field textarea:valid ~ label {
277+
color: rgba(20, 200, 200, 1);
278+
}
279+
280+
.field input[type="text"]:not(:focus):invalid ~ label,
281+
.field input[type="email"]:not(:focus):invalid ~ label,
282+
.field textarea:not(:focus):invalid ~ label {
283+
color: rgba(230 ,190 ,50 , 1);
284+
transition: all 0.2s ease-in-out;
285+
}
286+
287+
.field input:focus,
288+
.field textarea:focus {
289+
box-shadow: inset 0 -2px 0 0 rgba(255 ,255 ,255 , 1);
290+
transition: all 0.2s ease-in-out;
291+
}
292+
293+
.field input:valid,
294+
.field textarea:valid {
295+
box-shadow: inset 0 -2px 0 0 rgba(20, 200, 200, 1);
296+
transition: all 0.2s ease-in-out;
297+
}
298+
299+
.field input[value=""]:not(:focus):invalid,
300+
.field textarea[value=""]:not(:focus):invalid {
301+
box-shadow: inset 0 -2px 0 0 rgba(255 ,255 ,255 , 0.6);
302+
transition: all 0.2s ease-in-out;
303+
}

‎upload/main/static/js/selector.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// Upload on cloud click
2+
3+
$('#cloud').click(function(){
4+
console.log('dinosaur!')
5+
$('#file').click();
6+
});
7+
8+
$(document).bind('dragover', function (e) {
9+
10+
var dropZone = $('.zone'),
11+
timeout = window.dropZoneTimeout;
12+
if (!timeout) {
13+
dropZone.addClass('in');
14+
} else {
15+
clearTimeout(timeout);
16+
}
17+
var found = false,
18+
node = e.target;
19+
do {
20+
if (node === dropZone[0]) {
21+
found = true;
22+
break;
23+
}
24+
node = node.parentNode;
25+
} while (node != null);
26+
if (found) {
27+
dropZone.addClass('hover');
28+
} else {
29+
dropZone.removeClass('hover');
30+
}
31+
window.dropZoneTimeout = setTimeout(function () {
32+
window.dropZoneTimeout = null;
33+
dropZone.removeClass('in hover');
34+
}, 100);
35+
});
36+
37+
// Change the color so the user knows to submit
38+
$("#file").change(function(){
39+
$('form').submit();
40+
});

0 commit comments

Comments
 (0)