Ver 1

src/static/css/listing.css

@@ -0,0 +1,46 @@
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 20px 0;
+    font-size: 16px;
+    text-align: left;
+}
+
+table th, table td {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+
+table th {
+    background-color: #f4f4f4;
+    color: #333;
+    text-align: center;
+}
+
+table tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+table tr:hover {
+    background-color: #f1f1f1;
+}
+
+.delete-button {
+    background-color: #ff4d4d;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.3s ease-in-out;
+    display: inline-block;
+    margin: 0 auto;
+}
+.delete-button:active {
+    background-color: #d93636;
+}
+
+.delete-button:hover {
+    background-color: #d93636;
+}

src/static/css/style.css

@@ -0,0 +1,83 @@
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
+body {
+    /* Soft gray background color */
+    background-color: #f5f5f5;
+    font-family: "Fira Code", sans-serif;
+    margin: 0;
+    padding: 0;
+    display:flex;
+    flex-direction: column;
+    min-height: 100vh;
+    margin:0;
+}
+
+nav {
+    background-color: #333;
+    color: white;
+    text-align: center;
+    display: flex;
+    justify-content: space-between;
+    top:0;
+    position: sticky;
+    padding: 10px 0;
+    z-index: 1000;
+
+}
+
+nav a {
+    color: white;
+    text-decoration: none;
+    padding: 10px 20px;
+    font-size: 16px;
+    transition: background-color 0.3s ease-in-out;
+}
+
+nav a:hover {
+    background-color: #444; /* Slightly lighter background on hover */
+    border-radius: 5px;
+}
+
+.container {
+    max-width: 1200px; /* Center the content */
+    width: 100%;
+    margin: 0 auto;
+    padding: 20px;
+    flex: 1;
+}
+
+.content {
+    background-color: white;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    margin-top: 20px;
+}
+
+footer {
+    background-color: #333;
+    color: white;
+    text-align: center;
+    padding: 10px 0;
+    margin-top: 40px;
+    /* Put on very bottom without making absolute */
+}
+
+footer a {
+    color: #ffc107;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+
+
+.bad-wrong {
+    color: #ff4d4d;
+}
+
+.success {
+    color: #28a745;
+}

src/static/css/textForm.css

@@ -0,0 +1,65 @@
+form {
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    margin: 20px auto;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+form h1 {
+    font-size: 24px;
+    margin-bottom: 10px;
+    color: #333;
+    text-align: center;
+}
+
+form input[type="text"], form input[type="url"], form input[type="password"], form button {
+    width: 100%;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+
+form input[type="text"]:focus, form input[type="url"]:focus {
+    border-color: #007bff;
+    outline: none;
+    box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
+}
+
+form button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background-color 0.3s ease-in-out;
+}
+
+form button:hover {
+    background-color: #0056b3;
+}
+
+form .error-message {
+    color: #ff4d4d;
+    font-size: 14px;
+    margin-top: -10px;
+}
+
+form .success-message {
+    color: #28a745;
+    font-size: 14px;
+    margin-top: -10px;
+    text-align: center;
+}
+
+form .optional {
+    font-size: 12px;
+    color: #777;
+    text-align: right;
+}

src/static/js/validLink.js

@@ -0,0 +1,77 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const form = document.querySelector('form');
+    const destLinkInput = form.querySelector('input[name="dest_link"]');
+    const customLinkInput = form.querySelector('input[name="custom_link"]');
+    const destLinkError = document.createElement('p');
+    const customLinkError = document.createElement('p');
+
+    destLinkError.classList.add('error-message');
+    customLinkError.classList.add('error-message');
+
+    // Append error messages right after inputs
+    destLinkInput.parentNode.insertBefore(destLinkError, destLinkInput.nextSibling);
+    customLinkInput.parentNode.insertBefore(customLinkError, customLinkInput.nextSibling);
+
+    // Function to validate URLs
+    const isValidURL = (url) => {
+        const pattern = new RegExp(
+            '^(https?:\\/\\/)?' + // Protocol (http or https)
+            '(([a-zA-Z0-9_-]+\\.)+[a-zA-Z]{2,6})' + // Domain name
+            '(\\/[a-zA-Z0-9@:%_\\+.~#?&//=]*)?$', // Path, query, or fragment
+            'i'
+        );
+        return pattern.test(url);
+    };
+
+    // Function to add https:// if missing
+    const addHttpsIfMissing = (url) => {
+        if (!/^https?:\/\//i.test(url)) {
+            return 'https://' + url;
+        }
+        return url;
+    };
+
+    // Validate destination link on input
+    destLinkInput.addEventListener('blur', () => {
+        // Auto-correct the URL if missing protocol
+        destLinkInput.value = addHttpsIfMissing(destLinkInput.value);
+
+        // Validate URL
+        if (!isValidURL(destLinkInput.value)) {
+            destLinkError.textContent = 'Please enter a valid URL (e.g., https://example.com)';
+        } else {
+            destLinkError.textContent = '';
+        }
+    });
+
+    // Validate custom link for valid characters
+    customLinkInput.addEventListener('input', () => {
+        if (customLinkInput.value && /[^a-zA-Z0-9_-]/.test(customLinkInput.value)) {
+            customLinkError.textContent = 'Custom link can only contain letters, numbers, dashes, and underscores.';
+        } else {
+            customLinkError.textContent = '';
+        }
+    });
+
+    // Validate form on submit
+    form.addEventListener('submit', (event) => {
+        let isValid = true;
+
+        // Auto-correct the URL if missing protocol
+        destLinkInput.value = addHttpsIfMissing(destLinkInput.value);
+
+        if (!isValidURL(destLinkInput.value)) {
+            destLinkError.textContent = 'Please enter a valid URL (e.g., https://example.com)';
+            isValid = false;
+        }
+
+        if (customLinkInput.value && /[^a-zA-Z0-9_-]/.test(customLinkInput.value)) {
+            customLinkError.textContent = 'Custom link can only contain letters, numbers, dashes, and underscores.';
+            isValid = false;
+        }
+
+        if (!isValid) {
+            event.preventDefault(); // Prevent form submission if validation fails
+        }
+    });
+});