Skip to content

UI changes and refinements #118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vaibhavs-mishra merged 1 commit into from
Feb 23, 2025
Merged

UI changes and refinements #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions Algolyzer/community/templates/community/post_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,17 @@ <h2 class="text-xl lg:text-3xl font-bold break-words">{{ post.title }}</h2>
<form action="{% url 'vote_post' post.id 1 %}" method="POST">
{% csrf_token %}
<button type="submit" class="btn hover:btn-success border-1 border-solid border-success flex items-center">
👍
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="h-5 w-5">
<path fill="#63E6BE" d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/>
</svg>
</button>
</form>
<form action="{% url 'vote_post' post.id -1 %}" method="POST">
{% csrf_token %}
<button type="submit" class="btn hover:btn-error border-1 border-solid border-error flex items-center">
👎
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="h-5 w-5">
<path fill="#ed333b" d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/>
</svg>
</button>
</form>
<h1 class="text-xl font-bold text-secondary">{{ total_votes }}</h1>
Expand Down
45 changes: 31 additions & 14 deletions Algolyzer/templates/account/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,14 @@ <h1 class="text-2xl font-bold text-center text-primary">
>
{% if field.name == 'password' %}
<button
type="button"
class="absolute inset-y-0 right-2 flex items-center btn btn-sm btn-ghost transform -translate-y-1/2 top-1/2"
onclick="togglePasswordVisibility('{{ field.id_for_label }}')"
type="button"
class="absolute inset-y-0 right-2 flex items-center btn btn-sm btn-ghost transform -translate-y-1/2 top-1/2"
onclick="togglePasswordVisibility('{{ field.id_for_label }}', this)"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825l4.5-4.5M21 12a9 9 0 11-6-8.47" />
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 eye-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<!-- Open Eye Icon -->
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
{% endif %}
Expand Down Expand Up @@ -114,14 +116,29 @@ <h1 class="text-2xl font-bold text-center text-primary">
{% endblock extra_body %}

{% block scripts %}
<script>
function togglePasswordVisibility(inputId) {
const input = document.getElementById(inputId);
if (input.type === "password") {
input.type = "text";
} else {
input.type = "password";


<script>
function togglePasswordVisibility(inputId, button) {
const input = document.getElementById(inputId);
const icon = button.querySelector(".eye-icon");

if (input.type === "password") {
input.type = "text";
// Change to Closed Eye Icon
icon.innerHTML = `
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12s3-5 9-5 9 5 9 5-3 5-9 5-9-5-9-5z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.53 9.53a3 3 0 014.24 4.24" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1l22 22" />
`;
} else {
input.type = "password";
// Change to Open Eye Icon
icon.innerHTML = `
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
`;
}
}
}
</script>
</script
{% endblock %}
51 changes: 17 additions & 34 deletions Algolyzer/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,18 +101,11 @@
<!-- Footer Section -->
<footer class="footer bg-base-200 text-base-content p-10">
<nav>
<h6 class="footer-title">Services</h6>
<a class="link link-hover">Branding</a>
<a class="link link-hover">Design</a>
<a class="link link-hover">Marketing</a>
<a class="link link-hover">Advertisement</a>
</nav>
<nav>
<h6 class="footer-title">Company</h6>
<a class="link link-hover">About us</a>
<a class="link link-hover">Contact</a>
<a class="link link-hover">Jobs</a>
<a class="link link-hover">Press kit</a>
<h6 class="footer-title">Features</h6>
<a class="link link-hover" href="{% url 'study_home' %}">Study</a>
<a class="link link-hover" href="{% url 'playground_home' %}">Playground</a>
<a class="link link-hover" href="{% url 'quiz_home' %}">Quizzes</a>
<a class="link link-hover" href="{% url 'category_list' %}">Community Forum</a>
</nav>
<nav>
<h6 class="footer-title">Legal</h6>
Expand All @@ -123,34 +116,24 @@ <h6 class="footer-title">Legal</h6>
</footer>
<footer class="footer bg-base-200 text-base-content border-base-300 border-t px-10 py-4">
<aside class="grid-flow-col items-center">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill-rule="evenodd"
clip-rule="evenodd"
class="fill-current">
<path
d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>
</svg>
<a href="{% url 'home' %}" class="w-[30px]">
<img alt="Algolyzer logo" class="w-full h-full object-cover" src="{% static 'algolyzer.png' %}" />
</a>
<p>
ACME Industries Ltd.
pbvs
<br />
Providing reliable tech since 1992
The minds behind algolyzer
</p>
</aside>
<nav class="md:place-self-center md:justify-self-end">
<div class="grid grid-flow-col gap-4">
<a>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="fill-current">
<path
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
<a href="https://github.com/Priyanshu-Batham/Algolyzer">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 480 512"
class="fill-current w-6 h-6">
<path
d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"></path>
</svg>
</a>
<a>
Expand Down