diff options
Diffstat (limited to 'public')
-rw-r--r-- | public/css/vanilla.css | 138 | ||||
-rw-r--r-- | public/js/new.js | 23 | ||||
-rw-r--r-- | public/new.html | 131 |
3 files changed, 264 insertions, 28 deletions
diff --git a/public/css/vanilla.css b/public/css/vanilla.css new file mode 100644 index 0000000..37bc051 --- /dev/null +++ b/public/css/vanilla.css | |||
@@ -0,0 +1,138 @@ | |||
1 | /* Reset */ | ||
2 | html, body, div, span, applet, object, iframe, | ||
3 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
4 | a, abbr, acronym, address, big, cite, code, | ||
5 | del, dfn, em, img, ins, kbd, q, s, samp, | ||
6 | small, strike, strong, sub, sup, tt, var, | ||
7 | b, u, i, center, | ||
8 | dl, dt, dd, ol, ul, li, | ||
9 | fieldset, form, label, legend, | ||
10 | table, caption, tbody, tfoot, thead, tr, th, td, | ||
11 | article, aside, canvas, details, embed, | ||
12 | figure, figcaption, footer, header, hgroup, | ||
13 | menu, nav, output, ruby, section, summary, | ||
14 | time, mark, audio, video { | ||
15 | margin: 0; | ||
16 | padding: 0; | ||
17 | border: 0; | ||
18 | font-size: 100%; | ||
19 | font: inherit; | ||
20 | vertical-align: baseline; | ||
21 | } | ||
22 | * { | ||
23 | box-sizing: border-box; | ||
24 | } | ||
25 | |||
26 | |||
27 | |||
28 | /* Variables */ | ||
29 | :root { | ||
30 | --desktop-font-size: 1.3rem/1.5; | ||
31 | --mobile-font-size: 1.1rem/1.4; | ||
32 | --text-color: #2d2d2d; | ||
33 | --link-color: blue; | ||
34 | --primary-color: lightsteelblue; | ||
35 | --secondary-color: aliceblue; | ||
36 | --tertiary-color: whitesmoke; | ||
37 | } | ||
38 | |||
39 | |||
40 | |||
41 | |||
42 | /* Typography */ | ||
43 | body { | ||
44 | color: var(--text-color); | ||
45 | padding: 3rem; | ||
46 | font: var(--desktop-font-size) -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol"; | ||
47 | } | ||
48 | |||
49 | h1,h2,h3,h4,h5,h6,p,blockquote,dl,img,figure { | ||
50 | margin: 2rem 0; | ||
51 | } | ||
52 | |||
53 | h1,h2,h3,h4,h5,h6 { font-weight: bold; } | ||
54 | h1 { font-size: 200%; } | ||
55 | h2 { font-size: 150%; } | ||
56 | h3 { font-size: 120%; } | ||
57 | h4,h5,h6 { font-size: 100%; } | ||
58 | h5, h6 { text-transform: uppercase; } | ||
59 | |||
60 | header h1 { border-bottom: 1px solid; } | ||
61 | |||
62 | p { margin: 2rem 0; } | ||
63 | |||
64 | a,a:visited { color: var(--link-color); } | ||
65 | |||
66 | strong, time, b { font-weight: bold; } | ||
67 | em, dfn, i { font-style: italic; } | ||
68 | sub { font-size: 60%; vertical-align: bottom; } | ||
69 | small { font-size: 80%; } | ||
70 | |||
71 | blockquote, q { | ||
72 | background: var(--secondary-color); | ||
73 | border-left: 10px solid var(--primary-color); | ||
74 | font-family: "Georgia", serif; | ||
75 | padding: 1rem; | ||
76 | } | ||
77 | blockquote p:first-child { margin-top: 0; } | ||
78 | cite { | ||
79 | font-family: "Georgia", serif; | ||
80 | font-style: italic; | ||
81 | font-weight: bold; | ||
82 | } | ||
83 | |||
84 | kbd,code,samp,pre,var { font-family: monospace; font-weight: bold; } | ||
85 | code, pre { | ||
86 | background: var(--tertiary-color); | ||
87 | padding: 0.5rem 1rem; | ||
88 | } | ||
89 | code pre , pre code { padding: 0; } | ||
90 | |||
91 | |||
92 | |||
93 | /* Elements */ | ||
94 | hr { | ||
95 | background: var(--text-color); | ||
96 | border: 0; | ||
97 | height: 1px; | ||
98 | margin: 4rem 0; | ||
99 | } | ||
100 | |||
101 | img { max-width: 100%; } | ||
102 | |||
103 | figure { | ||
104 | border: 1px solid var(--primary-color); | ||
105 | display: inline-block; | ||
106 | padding: 1rem; | ||
107 | width: auto; | ||
108 | } | ||
109 | figure img { margin: 0; } | ||
110 | figure figcaption { font-size: 80%; } | ||
111 | |||
112 | ul, ol { margin: 2rem 0; padding: 0 0 0 4rem; } | ||
113 | |||
114 | dl dd { padding-left: 2rem; } | ||
115 | |||
116 | table { | ||
117 | border: 1px solid var(--primary-color); | ||
118 | border-collapse: collapse; | ||
119 | table-layout: fixed; | ||
120 | width: 100%; | ||
121 | } | ||
122 | table caption { margin: 2rem 0; } | ||
123 | table thead { text-align: center; } | ||
124 | table tbody { text-align: right; } | ||
125 | table tr { border-bottom: 1px solid var(--primary-color); } | ||
126 | table tbody tr:nth-child(even) { background: var(--tertiary-color); } | ||
127 | table th { background: var(--secondary-color); font-weight: bold; } | ||
128 | table th, table td { padding: 1rem; } | ||
129 | table th:not(last-of-type), table td:not(last-of-type) { border-right: 1px solid var(--primary-color); } | ||
130 | |||
131 | |||
132 | |||
133 | /* Mobile Styling */ | ||
134 | @media screen and (max-width: 50rem) { | ||
135 | body { | ||
136 | font: var(--mobile-font-size) -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol" | ||
137 | } | ||
138 | } \ No newline at end of file | ||
diff --git a/public/js/new.js b/public/js/new.js new file mode 100644 index 0000000..4f54245 --- /dev/null +++ b/public/js/new.js | |||
@@ -0,0 +1,23 @@ | |||
1 | const elDrop = document.getElementById('dropzone'); | ||
2 | const submitBtn = document.getElementById('submitbutton'); | ||
3 | const fileInput = document.getElementById('files'); | ||
4 | |||
5 | elDrop.addEventListener('dragover', function (event) { | ||
6 | event.preventDefault(); | ||
7 | }); | ||
8 | |||
9 | elDrop.addEventListener('drop', async function (event) { | ||
10 | event.preventDefault(); | ||
11 | |||
12 | submitBtn.disabled = true; | ||
13 | |||
14 | fileInput.files = event.dataTransfer.files; | ||
15 | |||
16 | elDrop.innerText = `✓ ${fileInput.files.length} files selected`; | ||
17 | elDrop.style.height = 'inherit'; | ||
18 | |||
19 | submitBtn.disabled = false; | ||
20 | }); | ||
21 | elDrop.addEventListener('click', () => { | ||
22 | fileInput.click(); | ||
23 | }) \ No newline at end of file | ||
diff --git a/public/new.html b/public/new.html index 69deafd..b0e4b41 100644 --- a/public/new.html +++ b/public/new.html | |||
@@ -1,40 +1,115 @@ | |||
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <html lang="en"> | 2 | <html lang="en"> |
3 | |||
3 | <head> | 4 | <head> |
4 | <meta charset="UTF-8"> | 5 | <meta charset="UTF-8"> |
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 | <meta http-equiv="X-UA-Compatible" content="ie=edge"> | 7 | <meta http-equiv="X-UA-Compatible" content="ie=edge"> |
7 | <title>Create a new service</title> | 8 | <title>Create a new service</title> |
8 | 9 | ||
9 | <style> | 10 | <link rel="stylesheet" href="css/vanilla.css"> |
10 | input { | 11 | |
11 | margin-bottom: 1rem; | 12 | <style> |
12 | } | 13 | input { |
13 | </style> | 14 | margin-bottom: 1rem; |
15 | width: 100%; | ||
16 | padding: 0.5rem; | ||
17 | } | ||
18 | |||
19 | button { | ||
20 | display: flex; | ||
21 | overflow: hidden; | ||
22 | padding: 12px 12px; | ||
23 | cursor: pointer; | ||
24 | width: 100%; | ||
25 | -webkit-user-select: none; | ||
26 | -moz-user-select: none; | ||
27 | -ms-user-select: none; | ||
28 | user-select: none; | ||
29 | transition: all 150ms linear; | ||
30 | text-align: center; | ||
31 | white-space: nowrap; | ||
32 | text-decoration: none !important; | ||
33 | text-transform: none; | ||
34 | text-transform: capitalize; | ||
35 | color: #fff; | ||
36 | border: 0 none; | ||
37 | border-radius: 4px; | ||
38 | font-size: 13px; | ||
39 | font-weight: 500; | ||
40 | line-height: 1.3; | ||
41 | -webkit-appearance: none; | ||
42 | -moz-appearance: none; | ||
43 | appearance: none; | ||
44 | justify-content: center; | ||
45 | align-items: center; | ||
46 | flex: 0 0 160px; | ||
47 | box-shadow: 2px 5px 10px #e4e4e4; | ||
48 | color: #FFFFFF; | ||
49 | background: #161616; | ||
50 | } | ||
51 | |||
52 | #dropzone { | ||
53 | width: 100%; | ||
54 | height: 30vh; | ||
55 | background-color: #ebebeb; | ||
56 | |||
57 | display: flex; | ||
58 | align-items: center; | ||
59 | justify-content: center; | ||
60 | text-align: center; | ||
61 | |||
62 | cursor: pointer; | ||
63 | } | ||
64 | |||
65 | #dropzone p { | ||
66 | font-size: 0.85rem; | ||
67 | } | ||
68 | |||
69 | #files { | ||
70 | display: none; | ||
71 | } | ||
72 | |||
73 | </style> | ||
14 | </head> | 74 | </head> |
75 | |||
15 | <body> | 76 | <body> |
16 | <h1>Create a new service</h1> | 77 | <h1>Create a new recipe</h1> |
17 | <form action="new" method="post" enctype="multipart/form-data"> | 78 | <p>Please create a recipe using <a href="https://github.com/meetfranz/plugins/blob/master/docs/integration.md">the |
18 | <label for="author">Author</label><br /> | 79 | official Franz guide</a>, then publish it here.</p> |
19 | <input type="text" name="author" placeholder="Jon Doe" required><br /> | 80 | <form action="new" method="post" enctype="multipart/form-data"> |
81 | <label for="author">Author</label><br /> | ||
82 | <input type="text" name="author" placeholder="Jon Doe" required><br /> | ||
83 | |||
84 | <label for="name">Name</label><br /> | ||
85 | <input type="text" name="name" placeholder="Sample Service" required><br /> | ||
20 | 86 | ||
21 | <label for="name">Name</label><br /> | 87 | <label for="id">Service ID</label><br /> |
22 | <input type="text" name="name" placeholder="Sample Service" required><br /> | 88 | <input type="text" name="id" placeholder="sample-service" required><br /> |
23 | 89 | ||
24 | <label for="id">Service ID</label><br /> | 90 | <label for="png">Link to PNG image*</label><br /> |
25 | <input type="text" name="id" placeholder="sample-service" required><br /> | 91 | <input type="text" name="png" placeholder="https://.../logo.png" required><br /> |
26 | 92 | ||
27 | <label for="png">Link to PNG image</label><br /> | 93 | <label for="svg">Link to SVG image*</label><br /> |
28 | <input type="text" name="png" placeholder="https://.../logo.png" required><br /> | 94 | <input type="text" name="svg" placeholder="https://.../logo.svg" required><br /> |
95 | *These images must be publicly availible and have CORS enabled in order to work.<br /><br /> | ||
29 | 96 | ||
30 | <label for="svg">Link to SVG image</label><br /> | 97 | <label for="package">Recipe files</label><br /> |
31 | <input type="text" name="svg" placeholder="https://.../logo.svg" required><br /> | 98 | <div id="dropzone" effectAllowed="move"> |
99 | <div> | ||
100 | Drop recipe files here<br />or click here to select files | ||
101 | <p> | ||
102 | Drag and drop your recipe files into this area.<br /> | ||
103 | Please do not select the folder that contains the files but rather the files itself. | ||
104 | </p> | ||
105 | </div> | ||
106 | </div> | ||
107 | <input type="file" name="files[]" id="files" value="" multiple><br /><br /> | ||
32 | 108 | ||
33 | <label for="package">Package</label><br /> | 109 | <button type="submit" id="submitbutton">Create recipe</button> |
34 | *Please package your service into a .tar.gz file<br /> | 110 | </form> |
35 | <input type="file" name="package" id="package"><br /> | ||
36 | 111 | ||
37 | <button type="submit">Create</button> | 112 | <script src="js/new.js"></script> |
38 | </form> | ||
39 | </body> | 113 | </body> |
40 | </html> \ No newline at end of file | 114 | |
115 | </html> | ||