Created UI for CreateView

src/apps/account/templates/login.html

@@ -12,21 +12,20 @@
                placeholder="Username"
                name="username"
                value="{{ form.username.value|default:'' }}"
-               class="verify mt-1 block rounded-md border-2 border-slategray-200 hover:border-lightsteelblue-100 bg-gray-300 placeholder-lightsteelblue-100 focus:border-cadetblue-300" />
+               class="verify form-field submit-form" />
         {% if form.username.errors %}<p class="text-indianred-100 text-xs italic">{{ form.username.errors }}</p>{% endif %}
         <input type="password"
                placeholder="Password"
                name="password"
                value="{{ form.username.value|default:'' }}"
-               class="verify mt-1 block rounded-md border-2 border-slategray-200 hover:border-lightsteelblue-100 bg-gray-300 placeholder-lightsteelblue-100 focus:border-cadetblue-300" />
+               class="verify form-field submit-form" />
         {% if form.password.errors %}<p class="text-indianred-100 text-xs italic">{{ form.password.errors }}</p>{% endif %}
         <button type="submit"
                 id="submit-button"
-                class="px-12 py-2 border border-transparent rounded-md text-lightsteelblue-100 bg-slategray-200 opacity-50 transform ease-in-out duration-500 cursor-default">
-            Login
-        </button>
+                class="button submit-button-disabled text-lightsteelblue-100 bg-slategray-200">Login</button>
         <p>
-            Don't have an account? Create one <a class="underline text-skyblue-300" href="{% url 'signup' %}">Here</a>!
+            Don't have an account? Create one <a class="underline text-skyblue-300 hover:text-cadetblue-300 transform duration-300 ease-in-out"
+    href="{% url 'signup' %}">Here</a>!
         </p>
     </form>
 {% endblock %}

src/apps/account/templates/signup.html

@@ -13,33 +13,31 @@
                placeholder="Username"
                name="username"
                value="{{ form.username.value|default:'' }}"
-               class="verify mt-1 block rounded-md border-2 border-slategray-200 hover:border-lightsteelblue-100 bg-gray-300 placeholder-lightsteelblue-100 focus:border-cadetblue-300" />
+               class="verify form-field submit-form" />
         {% if form.username.errors %}<p class="text-indianred-100 text-xs italic">{{ form.username.errors }}</p>{% endif %}
         <input type="email"
                placeholder="Email (optional)"
                name="email"
                value="{{ form.email.value|default:'' }}"
-               class="mt-1 block rounded-md border-2 border-slategray-200 hover:border-lightsteelblue-100 bg-gray-300 placeholder-lightsteelblue-100 focus:border-cadetblue-300" />
+               class="form-field submit-form" />
         {% if form.email.errors %}<p class="text-indianred-100 text-xs italic">{{ form.email.errors }}</p>{% endif %}
         <input type="password"
                placeholder="Password"
                name="password1"
                value="{{ form.password1.value|default:'' }}"
-               class="verify mt-1 block rounded-md border-2 border-slategray-200 hover:border-lightsteelblue-100 bg-gray-300 placeholder-lightsteelblue-100 focus:border-cadetblue-300" />
+               class="verify form-field submit-form" />
         {% if form.password1.errors %}<p class="text-indianred-100 text-xs italic">{{ form.password1.errors }}</p>{% endif %}
         <input type="password"
                placeholder="Confirm password"
                name="password2"
                value="{{ form.password2.value|default:'' }}"
-               class="verify mt-1 block rounded-md border-2 border-slategray-200 hover:border-lightsteelblue-100 bg-gray-300 placeholder-lightsteelblue-100 focus:border-cadetblue-300" />
+               class="verify form-field submit-form" />
         {% if form.password2.errors %}<p class="text-indianred-100 text-xs italic">{{ form.password2.errors }}</p>{% endif %}
         <button type="submit"
                 id="submit-button"
-                class="px-12 py-2 border border-transparent rounded-md text-lightsteelblue-100 bg-slategray-200 opacity-50 transform ease-in-out duration-500 cursor-default">
-            Sign Up
-        </button>
+                class="button submit-button-disabled text-lightsteelblue-100 bg-slategray-200" />Sign Up</button>
     <p>
         Have an account? Login <a class="underline text-skyblue-300" href="{% url 'login' %}">Here</a>!
     </p>
-    </form>
+</form>
 {% endblock %}

src/apps/fossdb/templates/create_view.html

@@ -3,32 +3,77 @@
 {% block title %}{{ title }}{% endblock %}
 {% block meta %}{% endblock %}
 {% block content %}
-    <form method="post" id="project-form">
+    <form class="flex flex-col items-center justify-center space-y-4 my-auto font-condensed"
+          method="post"
+          id="project-form">
         {% csrf_token %}
-        {{ form.as_p }}
-        {{ hosting_platform.management_form }}
-        {{ hosting_platform.as_table }}
-        <div id="language-formset">
-            {{ programming_language.management_form }}
-            {% for form in programming_language %}<div class="language-form">{{ form.as_table }}</div>{% endfor %}
+        {{ form.name }}
+        {{ form.description }}
+        <div class="flex gap-4 justify-center">
+            <div class="">
+                <p class="text-xl font-abel text-center">Licenses</p>
+                {{ form.license }}
             </div>
-        <!-- This button will trigger the JS to append another language form -->
-        <button type="button" id="add-more">+</button>
-        <!-- Render the empty form, which you'll use as a template for new entries -->
-        <!-- Wrap it in a container so you can reference it by id and hide it -->
-        <div id="empty-form" style="display:none;">{{ empty_form.as_table }}</div>
-        <button type="submit">Submit</button>
+            <div>
+                <p class="text-xl font-abel text-center">Tags</p>
+                {{ form.tag }}
+            </div>
+            <div>
+                <p class="text-xl font-abel text-center">Operating systems</p>
+                {{ form.operating_system }}
+            </div>
+        </div>
+        {{ hosting_platform.management_form }}
+        <div class="flex gap-4 items-center">
+            <p class="text-xl font-abel">Hosting platform:</p>
+            {{ hosting_platform }}
+        </div>
+        {{ programming_languages.management_form }}
+        <!-- Languages container -->
+        <div class="" id="languages-container">
+            {% for language in programming_languages %}
+                <div class="languages flex gap-4 items-center">
+                    {{ language.programming_language }}
+                    {{ language.percentage }}
+                </div>
+            {% endfor %}
+        </div>
+        <!-- Hidden empty form used as a template -->
+        <div id="empty-form" style="display:none">
+            <div class="flex gap-4 items-center">
+                {{ programming_languages.empty_form.programming_language }}
+                {{ programming_languages.empty_form.percentage }}
+                <button class="button submit-button-enabled text-gray-500 bg-indianred-100 remove-btn"
+                        type="button">Remove</button>
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <button class="button submit-button-enabled bg-skyblue-300 text-gray-500"
+                    type="button"
+                    id="add-language">+</button>
+        </div>
+        <button class="button submit-button-enabled bg-mediumaquamarine text-gray-500"
+                ype="submit">Save</button>
     </form>
-    <script>
-        document.querySelector("#add-more").addEventListener("click", function() {
-            var formIndex = document.querySelector("#id_language-TOTAL_FORMS").value;
-            var emptyFormDiv = document.querySelector("#empty-form");
-            var newFormHTML = emptyFormDiv.innerHTML.replace(/__prefix__/g, formIndex);
-            var newFormDiv = document.createElement("div");
-            newFormDiv.className = "language-form";
-            newFormDiv.innerHTML = newFormHTML;
-            document.querySelector("#language-formset").append(newFormDiv);
-            document.querySelector("#id_language-TOTAL_FORMS").value = parseInt(formIndex) + 1;
+    <script type="text/javascript">
+        window.addEventListener("DOMContentLoaded", () => {
+            document.getElementById("add-language").addEventListener("click", () => {
+                var formIndex = document.getElementById("id_projectprogramminglanguage_set-TOTAL_FORMS");
+                var emptyForm = document.getElementById("empty-form").innerHTML;
+
+                emptyForm = emptyForm.replace(/__prefix__/g, formIndex.value);
+
+                document.getElementById("languages-container")
+                    .insertAdjacentHTML("beforeend", emptyForm);
+
+                formIndex.value = parseInt(formIndex.value) + 1;
+            })
+            document.getElementById("languages-container").addEventListener("click", (e) => {
+                if (e.target && e.target.classList.contains("remove-btn")) {
+                    e.target.previousElementSibling.previousElementSibling.value = "";
+                    e.target.parentElement.style.display = "none"
+                }
+            });
         });
     </script>
 {% endblock %}

src/apps/fossdb/templates/delete_view.html

@@ -9,9 +9,9 @@
         {% csrf_token %}
         <input type="text"
                id="confirm-input"
-               class="mt-1 block rounded-md border-2 border-slategray-200 hover:border-lightsteelblue-100 bg-gray-300 placeholder-lightsteelblue-100 focus:border-cadetblue-300 text-center" />
+               class="text-center form-field border-slategray-200 hover:border-indianred-100 bg-gray-300 focus:border-indianred-100" />
         <button id="submit-button"
-                class="px-12 py-2 border border-transparent rounded-md text-lightsteelblue-100 font-bold uppercase bg-slategray-200 opacity-50 transform ease-in-out duration-500 cursor-default"
+                class="button submit-button-disabled text-lightsteelblue-100 bg-slategray-200 uppercase font-bold"
                 type="submit">Delete</button>
     </form>
     <script type="text/javascript">
@@ -23,30 +23,26 @@
         USER_INPUT.addEventListener("input", () => {
             if (confirm_string == USER_INPUT.value) {
                 SUBMIT_BUTTON.classList.remove(
-                    "bg-slategray-200",
+                    "submit-button-disabled",
                     "text-lightsteelblue-100",
-                    "opacity-50",
-                    "cursor-default"
+                    "bg-slategray-200"
                 )
                 SUBMIT_BUTTON.classList.add(
-                    "bg-indianred-100",
+                    "submit-button-enabled",
                     "text-gray-500",
-                    "opacity-100",
-                    "hover:opacity-60"
+                    "bg-indianred-100",
                 )
                 SUBMIT_BUTTON.disabled = false
             } else {
                 SUBMIT_BUTTON.classList.remove(
-                    "bg-indianred-100",
+                    "submit-button-enabled",
                     "text-gray-500",
-                    "opacity-100",
-                    "hover:opacity-60"
+                    "bg-indianred-100",
                 )
                 SUBMIT_BUTTON.classList.add(
-                    "bg-slategray-200",
+                    "submit-button-disabled",
                     "text-lightsteelblue-100",
-                    "opacity-50",
-                    "cursor-default"
+                    "bg-slategray-200"
                 )
                 SUBMIT_BUTTON.disabled = true
             }

src/apps/fossdb/templates/detailed_view.html

@@ -111,10 +111,10 @@
         </div>
         {% if user == project.owner %}
             <div class="flex justify-between mt-8 mx-16">
-                <button class="px-12 py-2 border border-transparent rounded-md text-gray-500 bg-skyblue-300 hover:opacity-60 transform ease-in-out duration-500">
+                <button class="button submit-button-enabled text-gray-500 bg-skyblue-300">
                     <a href="{% url 'project-update' project.owner project.name %}">Update</a>
                 </button>
-                <button class="px-12 py-2 border border-transparent rounded-md text-gray-500 bg-burlywood hover:opacity-60 transform ease-in-out duration-500">
+                <button class="button submit-button-enabled text-gray-500 bg-burlywood hover:opacity-60">
                     <a href="{% url 'project-delete' project.owner project.name %}">Delete</a>
                 </button>
             </div>

src/apps/tokyonight_night/static_src/src/styles.css

@@ -2,10 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@import url("https://fonts.googleapis.com/css2?family=Abel&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Rationale&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
-
 body {
     @apply leading-[normal] m-0;
 }
@@ -28,3 +24,27 @@ body {
     background: linear-gradient(to right, transparent, #27a1b9, transparent);
     transform: translateY(-50%);
 }
+
+.form-field {
+    @apply mt-1 block rounded-md border-2;
+}
+
+.submit-form {
+    @apply border-slategray-200 hover:border-lightsteelblue-100 bg-gray-300 placeholder-slategray-100 focus:border-cadetblue-300;
+}
+
+.checkbox-form {
+    @apply border-slategray-200 hover:border-lightsteelblue-100 bg-gray-300 placeholder-slategray-100 focus:border-cadetblue-300;
+}
+
+.button {
+    @apply font-abel px-12 py-2 border rounded-md transform ease-in-out duration-500;
+}
+
+.submit-button-disabled {
+    @apply opacity-50 cursor-default;
+}
+
+.submit-button-enabled {
+    @apply opacity-100 hover:opacity-60;
+}

src/apps/tokyonight_night/templates/base.html

@@ -7,11 +7,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link href="https://fonts.googleapis.com/css2?family=Abel&family=Rationale&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+        <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
               rel="stylesheet" />
-        <link href="https://fonts.googleapis.com/css2?family=Abel&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+        <link href="https://fonts.googleapis.com/css2?family=Abel&display=swap"
               rel="stylesheet" />
-        <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+        <link href="https://fonts.googleapis.com/css2?family=Rationale&display=swap"
               rel="stylesheet" />
         <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
               rel="stylesheet" />

src/static/js/buttons.js

@@ -1,3 +1,11 @@
+Array.from(document.getElementsByClassName("remove-btn")).forEach((button) => {
+    button.addEventListener("click", () => {
+        console.log("TRUE")
+        const hiddenDeleteInput = button.previousElementSibling
+        hiddenDeleteInput.value = "on"
+        button.parentElement.style.display = "none"
+    })
+})
 window.addEventListener("DOMContentLoaded", () => {
     const FORM_VERIFY = document.getElementsByClassName("verify")
     const SUBMIT_BUTTON = document.getElementById("submit-button")
@@ -10,30 +18,26 @@ window.addEventListener("DOMContentLoaded", () => {
             )
             if (ALL_FILLED) {
                 SUBMIT_BUTTON.classList.remove(
-                    "bg-slategray-200",
+                    "submit-button-disabled",
                     "text-lightsteelblue-100",
-                    "opacity-50",
-                    "cursor-default"
+                    "bg-slategray-200"
                 )
                 SUBMIT_BUTTON.classList.add(
-                    "bg-skyblue-300",
+                    "submit-button-enabled",
                     "text-gray-500",
-                    "opacity-100",
-                    "hover:opacity-60"
+                    "bg-skyblue-300"
                 )
                 SUBMIT_BUTTON.disabled = false
             } else {
                 SUBMIT_BUTTON.classList.remove(
-                    "bg-skyblue-300",
+                    "submit-button-enabled",
                     "text-gray-500",
-                    "opacity-100",
-                    "hover:opacity-60"
+                    "bg-skyblue-300"
                 )
                 SUBMIT_BUTTON.classList.add(
-                    "bg-slategray-200",
+                    "submit-button-disabled",
                     "text-lightsteelblue-100",
-                    "opacity-50",
-                    "cursor-default"
+                    "bg-slategray-200"
                 )
                 SUBMIT_BUTTON.disabled = true
             }