mirror of
https://github.com/Sosokker/ku-polls.git
synced 2025-12-18 21:14:05 +01:00
184 lines
11 KiB
HTML
184 lines
11 KiB
HTML
{% extends 'polls/base.html' %} {% block content %}
|
|
<main>
|
|
<!-- Navbar -->
|
|
<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="text-2xl font-bold text-white">📝KU POLL</div>
|
|
|
|
<!-- Button -->
|
|
<div>
|
|
{% comment %}
|
|
<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>
|
|
</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>
|
|
{% endblock content %}
|