aboutsummaryrefslogtreecommitdiffstats
path: root/public
diff options
context:
space:
mode:
authorLibravatar vantezzen <properly@protonmail.com>2019-08-25 12:02:57 +0200
committerLibravatar vantezzen <properly@protonmail.com>2019-08-25 12:02:57 +0200
commit74de67c7d83ee9d8c632f6dde775ac7e0bdbbd04 (patch)
tree04c00351a372afc2d1d8d5525cb13fb8cf62f397 /public
parentAdd recipe store (diff)
downloadferdium-server-74de67c7d83ee9d8c632f6dde775ac7e0bdbbd04.tar.gz
ferdium-server-74de67c7d83ee9d8c632f6dde775ac7e0bdbbd04.tar.zst
ferdium-server-74de67c7d83ee9d8c632f6dde775ac7e0bdbbd04.zip
Add custom recipe creator
Diffstat (limited to 'public')
-rw-r--r--public/css/vanilla.css138
-rw-r--r--public/js/new.js23
-rw-r--r--public/new.html131
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 */
2html, body, div, span, applet, object, iframe,
3h1, h2, h3, h4, h5, h6, p, blockquote, pre,
4a, abbr, acronym, address, big, cite, code,
5del, dfn, em, img, ins, kbd, q, s, samp,
6small, strike, strong, sub, sup, tt, var,
7b, u, i, center,
8dl, dt, dd, ol, ul, li,
9fieldset, form, label, legend,
10table, caption, tbody, tfoot, thead, tr, th, td,
11article, aside, canvas, details, embed,
12figure, figcaption, footer, header, hgroup,
13menu, nav, output, ruby, section, summary,
14time, 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 */
43body {
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
49h1,h2,h3,h4,h5,h6,p,blockquote,dl,img,figure {
50 margin: 2rem 0;
51}
52
53h1,h2,h3,h4,h5,h6 { font-weight: bold; }
54h1 { font-size: 200%; }
55h2 { font-size: 150%; }
56h3 { font-size: 120%; }
57h4,h5,h6 { font-size: 100%; }
58h5, h6 { text-transform: uppercase; }
59
60header h1 { border-bottom: 1px solid; }
61
62p { margin: 2rem 0; }
63
64a,a:visited { color: var(--link-color); }
65
66strong, time, b { font-weight: bold; }
67em, dfn, i { font-style: italic; }
68sub { font-size: 60%; vertical-align: bottom; }
69small { font-size: 80%; }
70
71blockquote, q {
72 background: var(--secondary-color);
73 border-left: 10px solid var(--primary-color);
74 font-family: "Georgia", serif;
75 padding: 1rem;
76}
77blockquote p:first-child { margin-top: 0; }
78cite {
79 font-family: "Georgia", serif;
80 font-style: italic;
81 font-weight: bold;
82}
83
84kbd,code,samp,pre,var { font-family: monospace; font-weight: bold; }
85code, pre {
86 background: var(--tertiary-color);
87 padding: 0.5rem 1rem;
88}
89code pre , pre code { padding: 0; }
90
91
92
93/* Elements */
94hr {
95 background: var(--text-color);
96 border: 0;
97 height: 1px;
98 margin: 4rem 0;
99}
100
101img { max-width: 100%; }
102
103figure {
104 border: 1px solid var(--primary-color);
105 display: inline-block;
106 padding: 1rem;
107 width: auto;
108}
109figure img { margin: 0; }
110figure figcaption { font-size: 80%; }
111
112ul, ol { margin: 2rem 0; padding: 0 0 0 4rem; }
113
114dl dd { padding-left: 2rem; }
115
116table {
117 border: 1px solid var(--primary-color);
118 border-collapse: collapse;
119 table-layout: fixed;
120 width: 100%;
121}
122table caption { margin: 2rem 0; }
123table thead { text-align: center; }
124table tbody { text-align: right; }
125table tr { border-bottom: 1px solid var(--primary-color); }
126table tbody tr:nth-child(even) { background: var(--tertiary-color); }
127table th { background: var(--secondary-color); font-weight: bold; }
128table th, table td { padding: 1rem; }
129table 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 @@
1const elDrop = document.getElementById('dropzone');
2const submitBtn = document.getElementById('submitbutton');
3const fileInput = document.getElementById('files');
4
5elDrop.addEventListener('dragover', function (event) {
6 event.preventDefault();
7});
8
9elDrop.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});
21elDrop.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>
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-02 23:05:37 +0000