Skip to content
Snippets Groups Projects
index.html 1.75 KiB
Newer Older
kjk's avatar
kjk committed
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Karaoke Song Selection</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="font-sans bg-gray-100">
<div class="container mx-auto my-8">
    <h1 class="text-3xl font-bold mb-4">Song List</h1>

    <!-- Search Form -->
    <form action="{{ url_for('index') }}" method="get" class="mb-4">
        <label for="search" class="sr-only">Search</label>
        <input type="text" id="search" name="search" placeholder="Search by title or artist"
               class="p-2 border border-gray-300 rounded">
        <button type="submit" class="bg-blue-500 text-white p-2 rounded">Search</button>
    </form>

    <!-- Song List -->
    <ul class="list-disc pl-4">
        {% for song in songs %}
        <li class="mb-2">
            <strong>{{ song[1] }}</strong> by {{ song[2 ]}} - Play Count: {{ song[3] }}
            {% if song[4] %}
            {% if song[4] == 'Queued' %}
            <span class="text-green-500"> - Already Queued</span>
            {% elif song[4] == 'Played' %}
            <span class="text-blue-500"> - Already Played</span>
            {% elif song[4] == 'Rejected' %}
            <span class="text-red-500"> - Rejected</span>
            {% endif %}
            {% endif %}
            <form action="{{ url_for('add_to_queue', song_id=song[0]) }}" method="post" style="display:inline;">
                <button type="submit" class="bg-green-500 text-white p-1 rounded ml-2">Add</button>
            </form>
        </li>
        {% endfor %}
    </ul>

</div>
</body>
</html>