initial_template: setup basic frontend template for url shortener

kdgyimah · kdgyimah · commit 69bd69353169 · 2020-12-24T00:00:13.000Z
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,40 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <script defer src="script.js"></script>
+    <title> Custom URL Shortener </title>
+</head>
+<body>
+    <header>
+        <h1>
+            Custom URL Shortener for The Software Clones Repo
+        </h1>
+    </header>
+    <main>
+        <form method="post">
+            <div class="card">
+                <div class="form-control">
+                    <label for="url">
+                        URL: Enter the (https://) URL you want to generate a shorter URL for
+                    </label>
+                    <input type="text" name="url" id="url">
+                </div>
+                <div class="form-control">
+                    <label for="url">
+                        Slug (optional): This slug will be appended to the custom URL. Leave blank to generate automatically
+                    </label>
+                    <input type="text" name="slug" id="slug">
+                </div>
+                <div class="action">
+                    <button onclick="e.preventDefault()" type="submit" >Generate</button>
+                </div>
+                <div class="copyright">  
+                    &copy; <a href="https://github.com/Software-clones"> Software Clones </a>
+                </div>
+            </div>
+        </form>
+    </main>
+</body>
+</html>
diff --git a/public/styles.css b/public/styles.css
@@ -0,0 +1,59 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: inherit;
+}
+
+body {
+    font-family: 'Courier New', Courier, monospace;
+    padding-left: 2rem;
+    padding-right: 2rem;
+}
+
+header h1 {
+    text-align: center;
+}
+
+@media screen and (max-width: 767px){
+    h1 {
+        font-size: 1.5rem;
+    }
+}
+
+.card {
+    border: 1px solid darkgray;
+    border-radius: 8px;
+    padding: 1.5rem;
+    max-width: 500px;
+    margin: 20vh auto;
+
+}
+/* form items */
+.form-control > * {
+    display: block;
+    padding: 2rem 0;
+    width: 100%;
+}
+.form-control input {
+    min-height: 3rem;
+    padding: inherit;
+    padding-left: 1rem;
+    font-size: inherit;
+}
+.action {
+    margin: 2rem 0;
+}
+button[type="submit"]{
+    width: 100%;
+    font-size: 1.5rem;
+    padding: 20px;
+    cursor: pointer;
+}
+.copyright {
+    padding-top: 1rem;
+    text-align: right;
+}
+.copyright a {
+    text-decoration: none;
+}
