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');
}
};

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

@ -3,15 +3,19 @@
<!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
src="https://unpkg.com/htmx.org@1.9.5"
integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{% static 'polls/js/detail.js' %}"></script>
<script src="{% static 'polls/base.css' %}"></script>
<title>Your Poll Website</title> <title>Your Poll Website</title>
</head> </head>
<body class="bg-gray-100"> <body class="bg-neutral-100">
{% block content %} {% block content %} {% endblock content %}
{% endblock content %}
</body> </body>
</html> </html>

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

@ -1,26 +1,49 @@
{% extends 'polls/base.html' %} {% extends 'polls/base.html' %} {% block content %}
{% block content %}
<main> <main>
<nav class="bg-white p-4 shadow-xl border-b-2 border-solid border-neutral-700">
<div class="container mx-auto flex items-center justify-between">
<div class="text-2xl font-bold text-black">🤔{{ question.question_text }}</div>
<!-- Button -->
<div>
<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">
<!--End-->
</div>
</header>
</div>
</div>
</div>
</nav>
<!-- Vote Page Content --> <!-- Vote Page Content -->
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
<h1 class="text-3xl font-semibold mb-2">{{ question_text }}</h1> <!-- Participant + UP DOWN zone -->
<hr class="h-px my-4 bg-gray-200 border-0 dark:bg-gray-700"> <div class="flex flex-wrap items-center text-gray-600 mb-4 place-content-center">
<p class="text-gray-600 mb-4 hover:bg-amber-100 text-black px-2 py-1 rounded-md mr-2">{{ long_description }}</p> <div class="flex items-center text-black py-1 rounded-md mr-2">
<div class="relative">
<!-- Tags and Stats Section (tag) to be add --> <div class="rounded-lg bg-white p-4 shadow-md border-solid border-2 border-neutral-500 relative z-10">
<div class="flex flex-wrap items-center text-gray-600 mb-4">
<div class="flex items-center bg-orange-100 text-black px-2 py-1 rounded-md mr-2">
<span class="mr-2">👤 {{ participant_count }} Participants</span> <span class="mr-2">👤 {{ participant_count }} Participants</span>
<span class="mr-2">👍 {{ question.up_vote_percentage }}% Upvoted</span> <span class="mr-2">👍 {{ question.up_vote_percentage }}% Upvoted</span>
<span>👎 {{ question.down_vote_percentage }}% Downvoted</span> <span>👎 {{ question.down_vote_percentage }}% Downvoted</span>
</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>
</div>
</div> </div>
<!-- Modern Choice Selection --> <!-- Modern Choice Selection -->
<div class="bg-white p-4 rounded-lg shadow-md mb-4 "> <div class="bg-white p-4 rounded-lg shadow-md mb-4">
<h2 class="text-xl font-semibold mb-4">Which one would you prefer:</h2> <div class="relative">
<div class="rounded-lg bg-white p-4 shadow-md border-solid border-2 border-neutral-500 relative z-10">
<div class="bg-white p-4 rounded-lg shadow-md mb-4">
<p class="bg-white p-4 border-neutral-700 text-lg font-semibold overflow-hidden break-words">
{{ long_description }}
</p>
</div>
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<form action="{% url 'polls:vote' question.id %}" method="post" class="poll-form" id="poll-form"> <form action="{% url 'polls:vote' question.id %}" method="post" class="poll-form" id="poll-form">
{% csrf_token %} {% csrf_token %}
@ -28,9 +51,9 @@
<div id="selected-choice" class="mt-4 text-lg font-bold text-green-500">Please Select a Choice😊</div> <div id="selected-choice" class="mt-4 text-lg font-bold text-green-500">Please Select a Choice😊</div>
</div> </div>
{% if error_message %} {% if error_message %}
<div class="bg-red p-4 rounded-lg shadow-md mb-4 "> <div class="bg-red p-4 rounded-lg shadow-md mb-4">
<p class="error-message text-red-500"><strong>{{ error_message }}</strong></p> <p class="error-message text-red-500"><strong>{{ error_message }}</strong></p>
</div </div>
{% endif %} {% endif %}
<div class="bg-white p-4 rounded-lg shadow-md mb-4"> <div class="bg-white p-4 rounded-lg shadow-md mb-4">
<div class="grid grid-cols-3 gap-4"> <div class="grid grid-cols-3 gap-4">
@ -40,9 +63,8 @@
<input type="radio" name="choice" value="{{ choice.id }}" class="hidden" /> <input type="radio" name="choice" value="{{ choice.id }}" class="hidden" />
<button <button
type="button" type="button"
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" 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"
onclick="toggleChoice(this, '{{ choice.id }}')" onclick="toggleChoice(this, '{{ choice.id }}')">
>
{{ choice.choice_text }} {{ choice.choice_text }}
</button> </button>
</label> </label>
@ -52,59 +74,29 @@
<!-- Submit --> <!-- Submit -->
<div class="flex flex-row-reverse"> <div class="flex flex-row-reverse">
<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"> <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 Back to Polls
</a> </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"> <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 Go Back
</button> </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> <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> </div>
</form> </form>
</div> </div>
</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> </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 %}

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

@ -1,42 +1,82 @@
{% 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>
</header>
<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">
<span>Sign in <span class="hidden sm:inline-block">😎</span></span>
</a>
</div>
</div> </div>
</div> </div>
</nav> </nav>
<!-- Main Content --> <!--MAIN-->
<!-- Search Section -->
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
<header class="mb-4 flex items-center justify-between"> {% comment %} <header class="mb-4 flex items-center justify-center">
<h1 class="text-2xl font-semibold">Explore Polls</h1> <div class="flex flex-wrap items-center space-x-2">
<button class="rounded-md bg-green-500 px-4 py-2 text-white">New Poll</button> <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">
</header> <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 --> <!-- Filter Section -->
<div class="mb-4"> {% 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" /> <input type="text" placeholder="Search for polls..." class="w-full rounded-md border border-gray-300 px-4 py-2" />
</div> </div> {% endcomment %}
<!-- Trends Polls Section --> <!-- Trends Polls Section -->
<section class="mb-6"> <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="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"> <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{% for question in latest_question_list %} {% for question in latest_question_list %}
<a class="rounded-lg bg-white p-4 shadow-md"> <div class="relative">
<h2 class="mb-2 text-xl font-semibold">{{ question.question_text }}</h2> <!-- INFO -->
<hr class="h-px my-2 bg-gray-200 border-0 dark:bg-gray-400"> <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> <p class="mb-2 text-gray-600">{{ question.short_description }}</p>
<div class="mb-2 flex items-center text-gray-600"> <div class="mb-2 flex items-center text-gray-600">
<span class="mr-2">👍</span> <span class="mr-2">👍</span>
@ -48,13 +88,24 @@
<!-- Tag / Time --> <!-- Tag / Time -->
<div class="flex items-center text-gray-600"> <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-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> <span class="mr-2 rounded-md bg-orange-100 px-2 py-1 text-black">{{ question.participant_count }} Participants 👤</span>
</div> </div>
<div class="flex items-center text-gray-600 py-4"> <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
<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> 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> </div>
</a>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
@ -62,36 +113,71 @@
<!-- Poll Cards Section --> <!-- Poll Cards Section -->
<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="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"> <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 %} {% for question in latest_question_list %}
<a href="{% url 'polls:detail' question.id %}" class="rounded-lg bg-white p-4 shadow-md"> <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> <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> <p class="mb-2 text-gray-600">{{ question.short_description }}</p>
<div class="mb-2 flex items-center text-gray-600"> <div class="mb-2 flex items-center text-gray-600">
<span class="mr-2">👍</span> <span class="mr-2">👍</span>
<span>{{ question.up_vote_percentage }}% Upvoted</span> <span>{{ question.up_vote_percentage }}% Upvoted</span>
<span class="ml-4 mr-2">👎</span> <span class="ml-4 mr-2">👎</span>
<span>{{ question.down_vote_percentage }}% Downvoted</span> <span>{{ question.down_vote_percentage }}% Downvoted</span>
</div> </div>
<!-- Tag Time --> <!-- Tag / Time -->
<div class="flex items-center text-gray-600"> <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-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> <span class="mr-2 rounded-md bg-orange-100 px-2 py-1 text-black">{{ question.participant_count }} Participants 👤</span>
</div> </div>
<div class="flex items-center text-gray-600 py-4"> <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
<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> 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> </div>
</a>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</section> </section>
</div> </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 %}

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

@ -2,13 +2,34 @@
{% block content %} {% block content %}
<main> <main>
<nav class="bg-white p-4 shadow-xl border-b-2 border-solid border-neutral-700">
<div class="container mx-auto flex items-center justify-between">
<div class="text-2xl font-bold text-black">🤔{{ question.question_text }}</div>
<!-- Button -->
<div>
<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">
<!--End-->
<button
onclick="window.location.href='{% url 'polls:index' %}'"
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">
Back to Polls
</button>
</div>
</header>
</div>
</div>
</div>
</nav>
<!-- Result Page Content --> <!-- Result Page Content -->
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
<h1 class="text-3xl font-semibold mb-4">{{ question.question_text }}</h1>
<hr class="h-px my-4 bg-gray-200 border-0 dark:bg-gray-700">
<!-- Result Summary --> <!-- Result Summary -->
<div class="bg-white p-4 rounded-lg shadow-md mb-4"> <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> <h2 class="text-xl font-semibold mb-2">Result Summary:</h2>
{% for choice in question.choice_set.all %} {% for choice in question.choice_set.all %}
@ -23,38 +44,57 @@
</div> </div>
{% endfor %} {% endfor %}
</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>
<!-- 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">
<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">
<h2 class="text-xl font-semibold mb-2">🕵️ Statistics</h2> <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.participant_count }} Participants 👤</span> <span class="mr-2 rounded-md bg-orange-100 px-2 py-1 text-black">
{{ 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.up_vote_percentage }}% </span>
<span class="mr-2 rounded-md bg-orange-100 px-2 py-1 text-black" >👎 {{ question.down_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
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> </div>
<!-- Pie Chart --> <!-- Pie Chart -->
<div class="col-span-1 bg-white p-4 rounded-lg shadow-md mb-4"> <div class="relative">
<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">
<h2 class="text-xl font-semibold mb-2">👋 Vote Percentage</h2> <h2 class="text-xl font-semibold mb-2">👋 Vote Percentage</h2>
<div class="w-full h-48 bg-gray-100 rounded-lg"> <div class="w-full h-48 bg-white rounded-lg">
<canvas id="percentageChart"></canvas> <canvas id="percentageChart"></canvas>
</div> </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">
<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">
<h2 class="text-xl font-semibold mb-2">👏 Vote Count</h2> <h2 class="text-xl font-semibold mb-2">👏 Vote Count</h2>
<div class="w-full h-48 bg-gray-100 rounded-lg"> <div class="w-full h-48 bg-white rounded-lg">
<canvas id="voteCountChart"></canvas> <canvas id="voteCountChart"></canvas>
</div> </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> </div>
<!-- Back to Polls Button --> <!-- Back to Polls Button -->
<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"> {% 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 Back to Polls
</a> </a> {% endcomment %}
</div> </div>
</main> </main>
@ -112,6 +152,5 @@
} }
} }
}); });
</script> </script>
{% endblock content %} {% endblock content %}