ku-polls/polls/templates/polls/index.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">
        {% if user.is_authenticated %}
        📝KU POLL | 👋 Hi! {{ user.username }}
        {% else %}
        📝KU POLL
        {% endif %}
      </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-->
            </div>
          </header>
          {% if user.is_authenticated %}
          <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>
        <a href="{% url 'logout' %}" 
        class="flex items-center whitespace-nowrap rounded-full border border-transparent bg-red-600 px-5 py-2 text-sm font-bold text-white transition duration-150 ease-in-out hover:scale-[101%] hover:bg-red-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 out <span class="hidden sm:inline-block">😭</span></span>
        </a>
        {% else %}
        <a href="{% url 'login' %}" 
        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-red-900">
            <span>Sign in <span class="hidden sm:inline-block">😎</span></span>
        </a>
        {% endif %}
      </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 truncate">{{ 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.participants }} 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 truncate">{{ 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.participants }} 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 %}