sosokker/ku-polls
1
0
Fork 0
mirror of https://github.com/Sosokker/ku-polls.git synced 2025-12-19 05:24:05 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update UI

Browse Source
This commit is contained in:
sosokker 2023-09-10 21:53:07 +07:00
parent 356e78a839
commit 66038b25d7
5 changed files with 464 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
polls/static/polls/js/detail.js Normal file
View File

@ -0,0 +1,38 @@
const toggleChoice = (button, choiceId) => {
const choiceInput = document.querySelector(`input[name="choice"][value="${choiceId}"]`);
if (choiceInput) {
// already selected -> unselect it
if (choiceInput.checked) {
choiceInput.checked = false;
button.classList.remove('bg-green-500', 'border-solid', 'border-2', 'border-black', 'hover:bg-green-600');
button.classList.add('bg-white', 'border-solid', 'border-2', 'border-black', 'hover:bg-white');
// Clear display
document.getElementById('selected-choice').textContent = 'Please Select a Choice😊';
} else {
// Unselect all choices
document.querySelectorAll('input[name="choice"]').forEach((choice) => {
choice.checked = false;
});
// Select the clicked choice
choiceInput.checked = true;
// Reset the style of all choice buttons
document.querySelectorAll('.choice-button').forEach((btn) => {
btn.classList.remove('bg-green-500', 'border-solid', 'border-2', 'border-black', 'hover:bg-green-600');
btn.classList.add('bg-white', 'border-solid', 'border-2', 'border-black', 'hover:bg-white');
});
button.classList.remove('bg-white', 'border-solid', 'border-2', 'border-black', 'hover:bg-white');
button.classList.add('bg-green-500', 'border-solid', 'border-2', 'border-black', 'hover:bg-green-600');
const choiceText = button.textContent.trim();
document.getElementById('selected-choice').textContent = `You select: ${choiceText}`;
}
// Enable the "Vote" button -> if select
const voteButton = document.getElementById('vote-button');
voteButton.disabled = !document.querySelector('input[name="choice"]:checked');
}
};

30
polls/templates/polls/base.html
View File

@ -2,16 +2,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/htmx.org@1.7.0/dist/htmx.js"></script> <script
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> src="https://unpkg.com/htmx.org@1.9.5"
<title>Your Poll Website</title> integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO"
</head> crossorigin="anonymous"></script>
<body class="bg-gray-100"> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% block content %} <script src="{% static 'polls/js/detail.js' %}"></script>
{% endblock content %} <script src="{% static 'polls/base.css' %}"></script>
</body> <title>Your Poll Website</title>
</html> </head>
<body class="bg-neutral-100">
{% block content %} {% endblock content %}
</body>
</html>

198
polls/templates/polls/detail.html
View File

@ -1,110 +1,102 @@
{% extends 'polls/base.html' %} {% extends 'polls/base.html' %} {% block content %}
{% block content %}
<main> <main>
<!-- Vote Page Content --> <nav class="bg-white p-4 shadow-xl border-b-2 border-solid border-neutral-700">
<div class="container mx-auto p-4"> <div class="container mx-auto flex items-center justify-between">
<h1 class="text-3xl font-semibold mb-2">{{ question_text }}</h1> <div class="text-2xl font-bold text-black">🤔{{ question.question_text }}</div>
<hr class="h-px my-4 bg-gray-200 border-0 dark:bg-gray-700">
<p class="text-gray-600 mb-4 hover:bg-amber-100 text-black px-2 py-1 rounded-md mr-2">{{ long_description }}</p>
<!-- Tags and Stats Section (tag) to be add --> <!-- Button -->
<div class="flex flex-wrap items-center text-gray-600 mb-4"> <div>
<div class="flex items-center bg-orange-100 text-black px-2 py-1 rounded-md mr-2"> <div class="flex flex-wrap items-center space-x-2">
<span class="mr-2">👤 {{ participant_count }} Participants</span> <header class="flex items-center justify-center">
<span class="mr-2">👍 {{ question.up_vote_percentage }}% Upvoted</span> <div class="flex flex-wrap items-center space-x-2">
<span>👎 {{ question.down_vote_percentage }}% Downvoted</span> <!--End-->
</div> </div>
</div> </header>
</div>
</div>
</div>
</nav>
<!-- Modern Choice Selection --> <!-- Vote Page Content -->
<div class="bg-white p-4 rounded-lg shadow-md mb-4 "> <div class="container mx-auto p-4">
<h2 class="text-xl font-semibold mb-4">Which one would you prefer:</h2> <!-- Participant + UP DOWN zone -->
<div class="flex flex-wrap items-center text-gray-600 mb-4 place-content-center">
<div class="flex items-center text-black py-1 rounded-md mr-2">
<div class="relative">
<div class="rounded-lg bg-white p-4 shadow-md border-solid border-2 border-neutral-500 relative z-10">
<span class="mr-2">👤 {{ participant_count }} Participants</span>
<span class="mr-2">👍 {{ question.up_vote_percentage }}% Upvoted</span>
<span>👎 {{ question.down_vote_percentage }}% Downvoted</span>
</div>
<div
class="absolute inset-0 mt-1 ml-1 h-full w-full rounded-lg border-2 border-neutral-700 bg-gradient-to-r from-green-400 to-blue-500"></div>
</div>
</div>
</div>
</div>
<div class="flex flex-col space-y-4"> <!-- Modern Choice Selection -->
<form action="{% url 'polls:vote' question.id %}" method="post" class="poll-form" id="poll-form"> <div class="bg-white p-4 rounded-lg shadow-md mb-4">
{% csrf_token %} <div class="relative">
<div class="bg-white p-4 rounded-lg shadow-md mb-4"> <div class="rounded-lg bg-white p-4 shadow-md border-solid border-2 border-neutral-500 relative z-10">
<div id="selected-choice" class="mt-4 text-lg font-bold text-green-500">Please Select a Choice😊</div> <div class="bg-white p-4 rounded-lg shadow-md mb-4">
</div> <p class="bg-white p-4 border-neutral-700 text-lg font-semibold overflow-hidden break-words">
{% if error_message %} {{ long_description }}
<div class="bg-red p-4 rounded-lg shadow-md mb-4 "> </p>
<p class="error-message text-red-500"><strong>{{ error_message }}</strong></p> </div>
</div <div class="flex flex-col space-y-4">
{% endif %} <form action="{% url 'polls:vote' question.id %}" method="post" class="poll-form" id="poll-form">
<div class="bg-white p-4 rounded-lg shadow-md mb-4"> {% csrf_token %}
<div class="grid grid-cols-3 gap-4"> <div class="bg-white p-4 rounded-lg shadow-md mb-4">
<!-- Buttons as choices (hidden) --> <div id="selected-choice" class="mt-4 text-lg font-bold text-green-500">Please Select a Choice😊</div>
{% for choice in question.choice_set.all %} </div>
<label> {% if error_message %}
<input type="radio" name="choice" value="{{ choice.id }}" class="hidden" /> <div class="bg-red p-4 rounded-lg shadow-md mb-4">
<button <p class="error-message text-red-500"><strong>{{ error_message }}</strong></p>
type="button" </div>
class="choice-button bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg shadow-md transition-colors duration-300 w-full py-5 font-bold text-lg truncate" {% endif %}
onclick="toggleChoice(this, '{{ choice.id }}')" <div class="bg-white p-4 rounded-lg shadow-md mb-4">
> <div class="grid grid-cols-3 gap-4">
{{ choice.choice_text }} <!-- Buttons as choices (hidden) -->
</button> {% for choice in question.choice_set.all %}
</label> <label>
{% endfor %} <input type="radio" name="choice" value="{{ choice.id }}" class="hidden" />
</div> <button
</div> type="button"
class="choice-button bg-white-500 border-2 border-black hover:bg-neutral-200 text-black px-4 py-2 rounded-lg shadow-md transition-colors duration-300 w-full py-5 font-bold text-lg truncate"
<!-- Submit --> onclick="toggleChoice(this, '{{ choice.id }}')">
<div class="flex flex-row-reverse"> {{ choice.choice_text }}
<a href="{% url 'polls:index' %}" class="bg-orange-400 text-white px-4 py-2 rounded-lg hover:bg-orange-500 transition-colors duration-300"> </button>
Back to Polls </label>
</a> {% endfor %}
<button type="submit" class="bg-orange-400 text-white px-4 py-2 rounded-lg hover:bg-orange-600 transition-colors duration-300 hidden" id="vote-button"> </div>
Go Back </div>
</button>
<button class="bg-blue-500 text-white px-4 py-2 mx-5 rounded-lg hover:bg-blue-600 transition-colors duration-300">Vote</button> <!-- Submit -->
<div class="flex flex-row-reverse">
</div> <a
</form> href="{% url 'polls:index' %}"
</div> class="bg-orange-400 text-white px-4 py-2 rounded-lg hover:bg-orange-500 transition-colors duration-300">
</div> Back to Polls
</div> </a>
<button
type="submit"
class="bg-orange-400 text-white px-4 py-2 rounded-lg hover:bg-orange-600 transition-colors duration-300 hidden"
id="vote-button">
Go Back
</button>
<button
class="bg-blue-500 text-white px-4 py-2 mx-5 rounded-lg hover:bg-blue-600 transition-colors duration-300">
Vote
</button>
</div>
</form>
</div>
</div>
<div
class="absolute inset-0 mt-1 ml-1 h-full w-full rounded-lg border-2 border-neutral-700 bg-gradient-to-r from-green-400 to-blue-500"></div>
</div>
</div>
</main> </main>
<script>
const toggleChoice = (button, choiceId) => {
const choiceInput = document.querySelector(`input[name="choice"][value="${choiceId}"]`);
if (choiceInput) {
// already selected -> unselect it
if (choiceInput.checked) {
choiceInput.checked = false;
button.classList.remove('bg-green-500', 'border-solid', 'border-2', 'border-green-500', 'hover:bg-green-600');
button.classList.add('bg-blue-500', 'hover:bg-blue-600');
// Clear display
document.getElementById('selected-choice').textContent = 'Please Select a Choice😊';
} else {
// Unselect all choices
document.querySelectorAll('input[name="choice"]').forEach((choice) => {
choice.checked = false;
});
// Select the clicked choice
choiceInput.checked = true;
// Reset the style of all choice buttons
document.querySelectorAll('.choice-button').forEach((btn) => {
btn.classList.remove('bg-green-500', 'border-solid', 'border-2', 'border-green-500', 'hover:bg-green-600');
btn.classList.add('bg-blue-500', 'hover:bg-blue-600');
});
button.classList.remove('bg-blue-500', 'hover:bg-blue-600');
button.classList.add('bg-green-500', 'border-solid', 'border-2', 'border-green-500', 'hover:bg-green-600');
const choiceText = button.textContent.trim();
document.getElementById('selected-choice').textContent = `You selected: ${choiceText}`;
}
// Enable the "Vote" button -> if select
const voteButton = document.getElementById('vote-button');
voteButton.disabled = !document.querySelector('input[name="choice"]:checked');
}
};
</script>
{% endblock content %} {% endblock content %}

268
polls/templates/polls/index.html
View File

@ -1,97 +1,183 @@
{% extends 'polls/base.html' %} {% extends 'polls/base.html' %} {% block content %}
{% block content %}
<main> <main>
<!-- Navbar --> <!-- Navbar -->
<nav class="bg-blue-500 p-4"> <nav class="bg-blue-500 p-4 shadow-xl border-b-2 border-solid border-neutral-700">
<div class="container mx-auto flex items-center justify-between"> <div class="container mx-auto flex items-center justify-between">
<div class="text-2xl font-semibold text-white">KU POLL</div> <div class="text-2xl font-bold text-white">📝KU POLL</div>
<!-- Button --> <!-- Button -->
<div> <div>
{% comment %} <button class="mr-4 rounded-md bg-green-500 px-4 py-2 text-white">New Poll</button> {% endcomment %} {% comment %}
<button class="text-white">Sign In</button> <button class="mr-4 rounded-md bg-green-500 px-4 py-2 text-white">New Poll</button>
{% endcomment %}
<div class="flex flex-wrap items-center space-x-2">
<header class="flex items-center justify-center">
<div class="flex flex-wrap items-center space-x-2">
<!--Searchhhh-->
<form class="group relative z-30 flex flex-grow flex-col items-center space-y-2 rounded-lg border-2 border-neutral-700 bg-white p-1 pl-2 text-lg md:flex-row md:space-y-0 md:space-x-1 md:rounded-full">
<div class="flex w-full items-center rounded-lg bg-neutral-200 py-1 px-2 focus-within:outline-none focus-within:ring-2 focus-within:ring-purple-400 md:rounded-full">
<div>🔎</div>
<input type="text" name="q" class="font-semibold w-full border-none bg-transparent focus:outline-none focus:ring focus:ring-transparent text-sm">
</div>
<button type="submit">
<span class="flex items-center whitespace-nowrap rounded-full border border-transparent bg-green-500 px-5 py-2 text-sm font-bold text-white transition duration-150 ease-in-out hover:scale-[101%] hover:bg-green-700 focus:bg-green-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 active:bg-green-900">
Search
</span>
</button>
</form>
<!--End-->
<button class="flex items-center whitespace-nowrap rounded-full border border-transparent bg-green-500 px-5 py-2 text-sm font-bold text-white transition duration-150 ease-in-out hover:scale-[101%] hover:bg-green-700 focus:bg-green-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 active:bg-green-900">
New Poll
</button>
</div> </div>
</div> </header>
</nav> <a href=""
class="flex items-center whitespace-nowrap rounded-full border border-transparent bg-neutral-800 px-5 py-2 text-sm font-bold text-white transition duration-150 ease-in-out hover:scale-[101%] hover:bg-neutral-700 focus:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 active:bg-neutral-900">
<!-- Main Content --> <span>Sign in <span class="hidden sm:inline-block">😎</span></span>
<div class="container mx-auto p-4"> </a>
<header class="mb-4 flex items-center justify-between"> </div>
<h1 class="text-2xl font-semibold">Explore Polls</h1> </div>
<button class="rounded-md bg-green-500 px-4 py-2 text-white">New Poll</button>
</header>
<!-- Filter Section -->
<div class="mb-4">
<input type="text" placeholder="Search for polls..." class="w-full rounded-md border border-gray-300 px-4 py-2" />
</div>
<!-- Trends Polls Section -->
<section class="mb-6">
<h2 class="mb-4 text-2xl font-semibold">Trending</h2>
<div class="bg-white p-4 rounded-lg shadow-md mb-4">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{% for question in latest_question_list %}
<a class="rounded-lg bg-white p-4 shadow-md">
<h2 class="mb-2 text-xl font-semibold">{{ question.question_text }}</h2>
<hr class="h-px my-2 bg-gray-200 border-0 dark:bg-gray-400">
<p class="mb-2 text-gray-600">{{ question.short_description }}</p>
<div class="mb-2 flex items-center text-gray-600">
<span class="mr-2">👍</span>
<span>{{ question.up_vote_percentage }}% Upvoted</span>
<span class="ml-4 mr-2">👎</span>
<span>{{ question.down_vote_percentage }}% Downvoted</span>
</div>
<!-- Tag / Time -->
<div class="flex items-center text-gray-600">
<span class="mr-2 rounded-md bg-green-500 px-2 py-1 text-white">🕒 {{ question.time_left }}</span>
<span class="mr-2 rounded-md bg-orange-100 px-2 py-1 text-black"> {{ question.participant_count }} Participants 👤</span>
</div>
<div class="flex items-center text-gray-600 py-4">
<button onclick="window.location.href='{% url 'polls:detail' question.id %}'" class="mr-2 rounded-md bg-white px-2 py-1 text-black border-solid border-2 border-black hover:bg-gray-500 transform translate-y-0 hover:translate-y-1 transition-transform">VOTE</button>
<button onclick="window.location.href='{% url 'polls:results' question.id %}'" class="mr-2 rounded-md bg-white px-2 py-1 text-black border-solid border-2 border-black hover:bg-gray-500 transform translate-y-0 hover:translate-y-1 transition-transform">VIEW</button>
</div>
</a>
{% endfor %}
</div>
</div>
</section>
<!-- Poll Cards Section -->
<section>
<h2 class="mb-4 text-2xl font-semibold">Polls</h2>
<div class="bg-white p-4 rounded-lg shadow-md mb-4">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
{% for question in latest_question_list %}
<a href="{% url 'polls:detail' question.id %}" class="rounded-lg bg-white p-4 shadow-md">
<h2 class="mb-2 text-xl font-semibold">{{ question.question_text }}</h2>
<p class="mb-2 text-gray-600">{{ question.short_description }}</p>
<div class="mb-2 flex items-center text-gray-600">
<span class="mr-2">👍</span>
<span>{{ question.up_vote_percentage }}% Upvoted</span>
<span class="ml-4 mr-2">👎</span>
<span>{{ question.down_vote_percentage }}% Downvoted</span>
</div>
<!-- Tag Time -->
<div class="flex items-center text-gray-600">
<span class="mr-2 rounded-md bg-green-500 px-2 py-1 text-white">🕒 {{ question.time_left }}</span>
<span class="mr-2 rounded-md bg-orange-100 px-2 py-1 text-black"> {{ question.participant_count }} Participants 👤</span>
</div>
<div class="flex items-center text-gray-600 py-4">
<button onclick="window.location.href='{% url 'polls:detail' question.id %}'" class="mr-2 rounded-md bg-white px-2 py-1 text-black border-solid border-2 border-black hover:bg-gray-500 transform translate-y-0 hover:translate-y-1 transition-transform">VOTE</button>
<button onclick="window.location.href='{% url 'polls:results' question.id %}'" class="mr-2 rounded-md bg-white px-2 py-1 text-black border-solid border-2 border-black hover:bg-gray-500 transform translate-y-0 hover:translate-y-1 transition-transform">VIEW</button>
</div>
</a>
{% endfor %}
</div>
</div>
</section>
</div> </div>
</nav>
<!--MAIN-->
<!-- Search Section -->
<div class="container mx-auto p-4">
{% comment %} <header class="mb-4 flex items-center justify-center">
<div class="flex flex-wrap items-center space-x-2">
<form wire:submit.prevent="claimUsername" class="group relative z-30 flex flex-grow flex-col items-center space-y-2 rounded-lg border-2 border-neutral-700 bg-white p-1 pl-2 text-lg md:flex-row md:space-y-0 md:space-x-1 md:rounded-full">
<div class="flex w-full items-center rounded-lg bg-neutral-200 py-1 px-2 focus-within:outline-none focus-within:ring-2 focus-within:ring-purple-400 md:rounded-full">
<div>🔎</div>
<input type="text" name="username" id="username" wire:model="username" class="font-semibold w-full border-none bg-transparent focus:outline-none focus:ring focus:ring-transparent text-sm">
</div>
<button type="submit">
<span class="flex items-center whitespace-nowrap rounded-full border border-transparent bg-green-500 px-5 py-2 text-sm font-bold text-white transition duration-150 ease-in-out hover:scale-[101%] hover:bg-green-700 focus:bg-green-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 active:bg-green-900">
Search
</span>
</button>
</form>
<button class="flex items-center whitespace-nowrap rounded-full border border-transparent bg-green-500 px-5 py-2 text-sm font-bold text-white transition duration-150 ease-in-out hover:scale-[101%] hover:bg-green-700 focus:bg-green-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 active:bg-green-900">New Poll</button>
</div>
</header> {% endcomment %}
<!-- Filter Section -->
{% comment %} <div class="mb-4">
<input type="text" placeholder="Search for polls..." class="w-full rounded-md border border-gray-300 px-4 py-2" />
</div> {% endcomment %}
<!-- Trends Polls Section -->
<section class="mb-6">
<div class="bg-white p-4 rounded-lg shadow-md mb-4">
<h2 class="text-2xl font-bold bg-gradient-to-r from-red-600 via-orange-600 to-yellow-600 bg-clip-text text-transparent lg:inline">Top Polls Today</h2>
<hr class="h-px my-4 bg-gray-200 border-0 dark:bg-gray-400" />
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{% for question in latest_question_list %}
<div class="relative">
<!-- INFO -->
<div class="rounded-lg bg-white p-4 shadow-md border-solid border-2 border-yellow-500 relative z-10 transform translate-y-0 hover:translate-y-1 transition-transform">
<h2 class="mb-2 text-xl font-bold">{{ question.question_text }}</h2>
<hr class="h-px my-2 bg-gray-200 border-0 dark:bg-gray-400" />
<p class="mb-2 text-gray-600">{{ question.short_description }}</p>
<div class="mb-2 flex items-center text-gray-600">
<span class="mr-2">👍</span>
<span>{{ question.up_vote_percentage }}% Upvoted</span>
<span class="ml-4 mr-2">👎</span>
<span>{{ question.down_vote_percentage }}% Downvoted</span>
</div>
<!-- Tag / Time -->
<div class="flex items-center text-gray-600">
<span class="mr-2 rounded-md bg-green-500 px-2 py-1 text-white">🕒 {{ question.time_left }}</span>
<span class="mr-2 rounded-md bg-orange-100 px-2 py-1 text-black">{{ question.participant_count }} Participants 👤</span>
</div>
<div class="flex items-center text-gray-600 py-4">
<button
onclick="window.location.href='{% url 'polls:detail' question.id %}'"
class="mr-2 rounded-md bg-yellow-100 px-2 py-1 text-black font-semibold border-solid border-2 border-yellow-500 hover:bg-yellow-500 transform translate-y-0 hover:translate-y-1 transition-transform">
VOTE
</button>
<button
onclick="window.location.href='{% url 'polls:results' question.id %}'"
class="mr-2 rounded-md bg-yellow-100 px-2 py-1 text-black font-semibold border-solid border-2 border-yellow-500 hover:bg-yellow-500 transform translate-y-0 hover:translate-y-1 transition-transform">
VIEW
</button>
</div>
</div>
<div class="absolute inset-0 mt-1 ml-1 h-full w-full rounded-lg border-2 border-yellow-700 bg-gradient-to-r from-yellow-600 via-yellow-300 to-yellow-600">
</div>
</div>
{% endfor %}
</div>
</div>
</section>
<!-- Poll Cards Section -->
<section>
<div class="bg-white p-4 rounded-lg shadow-md mb-4">
<h2 class="mb-4 text-2xl font-bold">All Polls</h2>
<hr class="h-px my-4 bg-gray-200 border-0 dark:bg-gray-400" />
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
{% for question in latest_question_list %}
<div class="relative">
<!-- INFO -->
<div class="rounded-lg bg-white p-4 shadow-md border-solid border-2 border-neutral-500 relative z-10 transform translate-y-0 hover:translate-y-1 transition-transform">
<h2 class="mb-2 text-xl font-semibold">{{ question.question_text }}</h2>
<hr class="h-px my-2 bg-gray-200 border-0 dark:bg-gray-400" />
<p class="mb-2 text-gray-600">{{ question.short_description }}</p>
<div class="mb-2 flex items-center text-gray-600">
<span class="mr-2">👍</span>
<span>{{ question.up_vote_percentage }}% Upvoted</span>
<span class="ml-4 mr-2">👎</span>
<span>{{ question.down_vote_percentage }}% Downvoted</span>
</div>
<!-- Tag / Time -->
<div class="flex items-center text-gray-600">
<span class="mr-2 rounded-md bg-green-500 px-2 py-1 text-white">🕒 {{ question.time_left }}</span>
<span class="mr-2 rounded-md bg-orange-100 px-2 py-1 text-black">{{ question.participant_count }} Participants 👤</span>
</div>
<div class="flex items-center text-gray-600 py-4">
<button
onclick="window.location.href='{% url 'polls:detail' question.id %}'"
class="mr-2 rounded-md bg-white px-2 py-1 text-black border-solid border-2 border-black hover:bg-gray-500 transform translate-y-0 hover:translate-y-1 transition-transform">
VOTE
</button>
<button
onclick="window.location.href='{% url 'polls:results' question.id %}'"
class="mr-2 rounded-md bg-white px-2 py-1 text-black border-solid border-2 border-black hover:bg-gray-500 transform translate-y-0 hover:translate-y-1 transition-transform">
VIEW
</button>
</div>
</div>
{% if forloop.counter|divisibleby:2 %}
<div class="absolute inset-0 mt-1 ml-1 h-full w-full rounded-lg border-2 border-neutral-700 bg-gradient-to-r from-green-400 to-blue-500">
</div>
{% else %}
<div class="absolute inset-0 mt-1 ml-1 h-full w-full rounded-lg border-2 border-neutral-700 bg-gradient-to-r from-orange-400 to-red-500">
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</section>
</div>
<div class="border-t border-neutral-700 bg-white">
<div class="container mx-auto flex max-w-7xl flex-col items-center py-8 px-8 sm:flex-row">
<a href="{% url 'polls:index' %}" class="flex items-center gap-3 font-bold tracking-tight text-neutral-900">
<span>Ku Poll</span>
</a>
<p class="mt-4 text-sm text-neutral-500 sm:ml-4 sm:mt-0 sm:border-l sm:border-neutral-200 sm:pl-4">
Ku Poll is a project in <a href="https://cpske.github.io/ISP/" class="text-neutral-900">ISP</a>.
</p>
<span
class="mt-4 inline-flex items-center justify-center space-x-5 text-sm sm:ml-auto sm:mt-0 sm:justify-start">
<a href="https://github.com/Sosokker/ku-polls" class="text-neutral-400 hover:text-blue-500">
<span>Repository</span>
</a>
</a>
</span>
</div>
</div>
</main> </main>
{% endblock content %} {% endblock content %}

235
polls/templates/polls/results.html
View File

@ -2,116 +2,155 @@
{% block content %} {% block content %}
<main> <main>
<!-- Result Page Content --> <nav class="bg-white p-4 shadow-xl border-b-2 border-solid border-neutral-700">
<div class="container mx-auto p-4"> <div class="container mx-auto flex items-center justify-between">
<h1 class="text-3xl font-semibold mb-4">{{ question.question_text }}</h1> <div class="text-2xl font-bold text-black">🤔{{ question.question_text }}</div>
<hr class="h-px my-4 bg-gray-200 border-0 dark:bg-gray-700">
<!-- Result Summary --> <!-- Button -->
<div class="bg-white p-4 rounded-lg shadow-md mb-4"> <div>
<h2 class="text-xl font-semibold mb-2">Result Summary:</h2> <div class="flex flex-wrap items-center space-x-2">
<header class="flex items-center justify-center">
{% for choice in question.choice_set.all %} <div class="flex flex-wrap items-center space-x-2">
<div class="flex justify-between items-center mb-2"> <!--End-->
<span>{{ choice.choice_text }}</span> <button
<div class="flex items-center"> onclick="window.location.href='{% url 'polls:index' %}'"
<span class="mr-2">👍 {{ choice.votes }}</span> class="flex items-center whitespace-nowrap rounded-full border border-transparent bg-orange-400 px-5 py-2 text-sm font-bold text-white transition duration-150 ease-in-out hover:scale-[101%] hover:bg-orange-700 focus:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 active:bg-orange-900">
<div class="percentage-bar"> Back to Polls
<div class="bar bg-blue-500 h-2" style="width: {{ choice.calculate_percentage }}%;"></div> </button>
</div>
</div>
</div> </div>
{% endfor %} </header>
</div>
</div>
</div>
</nav>
<!-- Result Page Content -->
<div class="container mx-auto p-4">
<!-- Result Summary -->
<div class="relative">
<div class="bg-white p-4 rounded-lg shadow-md mb-4 z-10 relative border-black border-solid border-2">
<h2 class="text-xl font-semibold mb-2">Result Summary:</h2>
{% for choice in question.choice_set.all %}
<div class="flex justify-between items-center mb-2">
<span>{{ choice.choice_text }}</span>
<div class="flex items-center">
<span class="mr-2">👍 {{ choice.votes }}</span>
<div class="percentage-bar">
<div class="bar bg-blue-500 h-2" style="width: {{ choice.calculate_percentage }}%;"></div>
</div>
</div> </div>
</div>
{% endfor %}
</div>
<div
class="absolute inset-0 mt-1 ml-1 w-full rounded-lg border-2 border-neutral-700 bg-gradient-to-r from-green-400 to-blue-500 h-full"></div>
</div>
<!-- Result Page Content --> <!-- Result Page Content -->
<div class="container mx-auto grid grid-cols-3 gap-4"> <div class="container mx-auto grid grid-cols-3 gap-4">
<!-- Statistics --> <!-- Statistics -->
<div class="col-span-1 bg-white p-4 rounded-lg shadow-md mb-4"> <div class="relative">
<h2 class="text-xl font-semibold mb-2">🕵️ Statistics</h2> <div class="col-span-1 bg-white py-4 rounded-lg shadow-md mb-4 relative z-10 border-solid border-black border-2 h-full">
<span class="mr-2 rounded-md bg-orange-100 px-2 py-1 text-black"> {{ question.participant_count }} Participants 👤</span> <h2 class="text-xl font-semibold mb-2">🕵️ Statistics</h2>
<span class="mr-2 rounded-md bg-orange-100 px-2 py-1 text-black">👍 {{ question.up_vote_percentage }}% </span> <span class="mr-2 rounded-md bg-orange-100 px-2 py-1 text-black">
<span class="mr-2 rounded-md bg-orange-100 px-2 py-1 text-black" >👎 {{ question.down_vote_percentage }}% </span> {{ question.participant_count }} Participants 👤
</span>
<span class="mr-2 rounded-md bg-orange-100 px-2 py-1 text-black">👍 {{ question.up_vote_percentage }}% </span>
<span class="mr-2 rounded-md bg-orange-100 px-2 py-1 text-black">👎 {{ question.down_vote_percentage }}% </span>
</div> </div>
<div
class="absolute inset-0 mt-1 ml-1 w-full rounded-lg border-2 border-neutral-700 bg-gradient-to-r from-green-400 to-blue-500 h-full"></div>
</div>
<!-- Pie Chart --> <!-- Pie Chart -->
<div class="col-span-1 bg-white p-4 rounded-lg shadow-md mb-4"> <div class="relative">
<h2 class="text-xl font-semibold mb-2">👋 Vote Percentage</h2> <div class="col-span-1 bg-white py-4 rounded-lg shadow-md mb-4 relative z-10 border-solid border-black border-2 h-full">
<div class="w-full h-48 bg-gray-100 rounded-lg"> <h2 class="text-xl font-semibold mb-2">👋 Vote Percentage</h2>
<canvas id="percentageChart"></canvas> <div class="w-full h-48 bg-white rounded-lg">
</div> <canvas id="percentageChart"></canvas>
</div>
</div> </div>
<div
class="absolute inset-0 mt-1 ml-1 w-full rounded-lg border-2 border-neutral-700 bg-gradient-to-r from-green-400 to-blue-500 h-full"></div>
</div>
<!-- Bar Chart --> <!-- Bar Chart -->
<div class="col-span-1 bg-white p-4 rounded-lg shadow-md mb-4"> <div class="relative">
<h2 class="text-xl font-semibold mb-2">👏 Vote Count</h2> <div class="col-span-1 bg-white py-4 rounded-lg shadow-md mb-4 relative z-10 border-solid border-black border-2 h-full">
<div class="w-full h-48 bg-gray-100 rounded-lg"> <h2 class="text-xl font-semibold mb-2">👏 Vote Count</h2>
<canvas id="voteCountChart"></canvas> <div class="w-full h-48 bg-white rounded-lg">
</div> <canvas id="voteCountChart"></canvas>
</div> </div>
</div> </div>
<div
<!-- Back to Polls Button --> class="absolute inset-0 mt-1 ml-1 w-full rounded-lg border-2 border-neutral-700 bg-gradient-to-r from-green-400 to-blue-500 h-full"></div>
<a href="{% url 'polls:index' %}" class="bg-orange-400 text-white px-4 py-2 rounded-lg hover:bg-orange-500 transition-colors duration-300"> </div>
Back to Polls
</a> <!-- Back to Polls Button -->
</div> {% comment %} <a
href="{% url 'polls:index' %}"
class="bg-orange-400 text-white px-4 py-2 rounded-lg hover:bg-orange-500 transition-colors duration-300">
Back to Polls
</a> {% endcomment %}
</div>
</main> </main>
<script> <script>
var percentageCtx = document.getElementById('percentageChart').getContext('2d'); var percentageCtx = document.getElementById('percentageChart').getContext('2d');
var percentageChart = new Chart(percentageCtx, { var percentageChart = new Chart(percentageCtx, {
type: 'pie', type: 'pie',
data: { data: {
labels: [{% for choice in question.choice_set.all %}"{{ choice.choice_text }}",{% endfor %}], labels: [{% for choice in question.choice_set.all %}"{{ choice.choice_text }}",{% endfor %}],
datasets: [{ datasets: [{
label: 'Percentage', label: 'Percentage',
data: [{% for choice in question.choice_set.all %}{{ choice.calculate_percentage }},{% endfor %}], data: [{% for choice in question.choice_set.all %}{{ choice.calculate_percentage }},{% endfor %}],
backgroundColor: [ backgroundColor: [
'rgba(75, 192, 192, 0.2)', 'rgba(75, 192, 192, 0.2)',
'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)',
], ],
borderColor: [ borderColor: [
'rgba(75, 192, 192, 1)', 'rgba(75, 192, 192, 1)',
'rgba(255, 99, 132, 1)', 'rgba(255, 99, 132, 1)',
], ],
borderWidth: 1 borderWidth: 1
}] }]
}, },
options: { options: {
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
} }
}); });
var voteCountCtx = document.getElementById('voteCountChart').getContext('2d'); var voteCountCtx = document.getElementById('voteCountChart').getContext('2d');
var voteCountChart = new Chart(voteCountCtx, { var voteCountChart = new Chart(voteCountCtx, {
type: 'bar', type: 'bar',
data: { data: {
labels: [{% for choice in question.choice_set.all %}"{{ choice.choice_text }}",{% endfor %}], labels: [{% for choice in question.choice_set.all %}"{{ choice.choice_text }}",{% endfor %}],
datasets: [{ datasets: [{
label: 'Vote Count', label: 'Vote Count',
data: [{% for choice in question.choice_set.all %}{{ choice.votes }},{% endfor %}], data: [{% for choice in question.choice_set.all %}{{ choice.votes }},{% endfor %}],
backgroundColor: [ backgroundColor: [
'rgba(75, 192, 192, 0.2)', 'rgba(75, 192, 192, 0.2)',
'rgba(255, 99, 132, 0.2)', 'rgba(255, 99, 132, 0.2)',
], ],
borderColor: [ borderColor: [
'rgba(75, 192, 192, 1)', 'rgba(75, 192, 192, 1)',
'rgba(255, 99, 132, 1)', 'rgba(255, 99, 132, 1)',
], ],
borderWidth: 1 borderWidth: 1
}] }]
}, },
options: { options: {
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
scales: { scales: {
y: { y: {
beginAtZero: true beginAtZero: true
} }
} }
} }
}); });
</script> </script>
{% endblock content %} {% endblock content %}