chore: Restructure package directories

cmd/api/assets/style.css

@@ -0,0 +1,201 @@
+:root {
+	--primary: #4338ca;
+	--secondary: #333;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+:focus {
+  outline: 0;
+}
+
+body {
+	font-family: "Segoe UI", "Helvetica Neue", Inter, sans-serif;
+	font-size: 16px;
+	line-height: 24px;
+	color: #111;
+	margin: 0 auto;
+}
+
+h1, h2, h3, h4 {
+    line-height: 1.3em;
+}
+
+a {
+	color: var(--primary);
+}
+	a:hover {
+		color: #111;
+		text-decoration: none;
+	}
+
+input, select, button {
+	border-radius: 5px;
+	border: 1px solid #ddd;
+	font-size: 1.3rem;
+	padding: 10px 15px;
+	width: 100%;
+}
+	input:focus, select:focus {
+		border-color: var(--primary); 
+	}
+	button {
+		border-color: var(--primary); 
+		background: var(--primary); 
+		color: #fff;
+		cursor: pointer;
+		width: auto;
+		padding: 10px 30px;
+	}
+		button:focus,
+		button:hover {
+			border-color: var(--secondary); 
+			background: var(--secondary); 
+		}
+
+label {
+	display: block;
+	padding-bottom: 0.5rem;
+}
+
+.box {
+	box-shadow: 1px 1px 4px #eee;
+	border: 1px solid #eee;
+	padding: 30px;
+	border-radius: 3px;
+}
+
+.hidden {
+	display: none !important;
+}
+
+.main {
+	margin: 60px auto 30px auto;
+	max-width: 900px;
+}
+
+header {
+	text-align: center;
+	font-size: 1.5em;
+	margin-bottom: 60px;
+}
+	.logo span {
+		color: var(--primary);
+		font-weight: 900;
+	}
+
+form {
+	margin-bottom: 45px;
+}
+
+	.row {
+		display: flex;
+		margin-bottom: 15px;
+	}
+		.row .field {
+			flex: 50%;
+		}
+		.row .field:last-child {
+			margin-left: 30px;
+		}
+
+		.submit {
+			text-align: right;
+		}
+	.help {
+		color: #666;
+		font-size: 0.875em;
+	}
+
+#message {
+	color: #ff3300;
+}
+
+table.box {
+	width: 100%;
+	max-width: 100%;
+	padding: 0;
+}
+	table th {
+		background: #f9fafb;
+		color: #666;
+		font-size: 0.875em;
+		border-bottom: 1px solid #ddd;
+	}
+	table th, tbody td {
+		padding: 10px 15px;
+		text-align: left;
+	}
+	td.name {
+		font-weight: bold;
+	}
+	th.type, td.type {
+		text-align: center;
+	}
+	td.type {
+		background: #d1fae5;
+		color: #065f46;
+		font-weight: bold;
+	}
+
+footer {
+	margin: 60px 0 0 0;
+	text-align: center;
+}
+	footer a {
+		text-decoration: none;
+	}
+
+
+@media (max-width: 650px) {
+	.main {
+		margin: 60px 30px 30px 30px;
+	}
+	.box {
+		box-shadow: none;
+		border: 0;
+		padding: 0;
+	}
+
+	.row {
+		display: block;
+	}
+	.field {
+		margin: 0 0 20px 0;
+	}
+	.row .field:last-child {
+		margin: 0;
+	}
+	.submit button {
+		width: 100%;
+	}
+
+	table {
+		table-layout: fixed;
+	}
+    table th {
+    	width: 100%;
+    }
+    table tr {
+        border-bottom: 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin-bottom: 30px;
+    }
+    table td {
+        border: 1px solid #eee;
+        margin: 0 -1px -1px 0;
+        position: relative;
+        width: 100%;
+		word-wrap:break-word;
+    }
+    table th.type, table td.type {
+    	text-align: left;
+    }
+    table td span {
+        display: block;
+    }
+}