1 files changed, 103 insertions, 28 deletions
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 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
+  <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Create a new service</title>
+  <title>Create a new service</title>
-    <style>
+  <link rel="stylesheet" href="css/vanilla.css">
-        input {
-            margin-bottom: 1rem;
+  <style>
-        }
+    input {
-    </style>
+      margin-bottom: 1rem;
+      width: 100%;
+      padding: 0.5rem;
+    }
+    button {
+      display: flex;
+      overflow: hidden;
+      padding: 12px 12px;
+      cursor: pointer;
+      width: 100%;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      transition: all 150ms linear;
+      text-align: center;
+      white-space: nowrap;
+      text-decoration: none !important;
+      text-transform: none;
+      text-transform: capitalize;
+      color: #fff;
+      border: 0 none;
+      border-radius: 4px;
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 1.3;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      justify-content: center;
+      align-items: center;
+      flex: 0 0 160px;
+      box-shadow: 2px 5px 10px #e4e4e4;
+      color: #FFFFFF;
+      background: #161616;
+    }
+    #dropzone {
+      width: 100%;
+      height: 30vh;
+      background-color: #ebebeb;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      cursor: pointer;
+    }
+    #dropzone p {
+      font-size: 0.85rem;
+    }
+    #files {
+        display: none;
+    }
+  </style>
 </head>
 <body>
-    <h1>Create a new service</h1>
+  <h1>Create a new recipe</h1>
-    <form action="new" method="post" enctype="multipart/form-data">
+  <p>Please create a recipe using <a href="https://github.com/meetfranz/plugins/blob/master/docs/integration.md">the
-        <label for="author">Author</label><br />
+      official Franz guide</a>, then publish it here.</p>
-        <input type="text" name="author" placeholder="Jon Doe" required><br />
+  <form action="new" method="post" enctype="multipart/form-data">
+    <label for="author">Author</label><br />
+    <input type="text" name="author" placeholder="Jon Doe" required><br />
+    <label for="name">Name</label><br />
+    <input type="text" name="name" placeholder="Sample Service" required><br />
-        <label for="name">Name</label><br />
+    <label for="id">Service ID</label><br />
-        <input type="text" name="name" placeholder="Sample Service" required><br />
+    <input type="text" name="id" placeholder="sample-service" required><br />
-        <label for="id">Service ID</label><br />
+    <label for="png">Link to PNG image*</label><br />
-        <input type="text" name="id" placeholder="sample-service" required><br />
+    <input type="text" name="png" placeholder="https://.../logo.png" required><br />
-        <label for="png">Link to PNG image</label><br />
+    <label for="svg">Link to SVG image*</label><br />
-        <input type="text" name="png" placeholder="https://.../logo.png" required><br />
+    <input type="text" name="svg" placeholder="https://.../logo.svg" required><br />
+    *These images must be publicly availible and have CORS enabled in order to work.<br /><br />
-        <label for="svg">Link to SVG image</label><br />
+    <label for="package">Recipe files</label><br />
-        <input type="text" name="svg" placeholder="https://.../logo.svg" required><br />
+    <div id="dropzone" effectAllowed="move">
+      <div>
+        Drop recipe files here<br />or click here to select files
+        <p>
+          Drag and drop your recipe files into this area.<br />
+          Please do not select the folder that contains the files but rather the files itself.
+        </p>
+      </div>
+    </div>
+    <input type="file" name="files[]" id="files" value="" multiple><br /><br />
-        <label for="package">Package</label><br />
+    <button type="submit" id="submitbutton">Create recipe</button>
-        *Please package your service into a .tar.gz file<br />
+  </form>
-        <input type="file" name="package" id="package"><br />
-        <button type="submit">Create</button>
+  <script src="js/new.js"></script>
-    </form>
 </body>
-</html>
-\ No newline at end of file
+</html>

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>