localstack-azure-samples/samples/web-app-cosmosdb-nosql-api/python/src/templates/index.html at 14ec0ce16fde04c3c9fec85f73d0094daa151939 · localstack/localstack-azure-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vacation Planner</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body style="background: linear-gradient(135deg, #fff 0%, #a2d4f7 100%); min-height: 100vh;">
    <div class="container py-4 my-5 bg-white bg-opacity-75 rounded-4 shadow-lg" style="max-width:600px;">
        <img src="{{ url_for('static', filename='summer_banner.jpg') }}" alt="Summer Banner" class="img-fluid rounded mb-3 w-100" style="max-height:180px; object-fit:cover;">

        <h1 class="display-9 fw-bold sea-title mb-4 text-center">Vacation Planner</h1>

        <form method="post" action="{{ url_for('index') }}" class="sea-form mb-4" style="max-width: 600px; margin: 0 auto;">
            <div style="display: flex; width: 100%;">
                <input type="hidden" name="row_id" value="{{ edit_id or '' }}">
                <input id="activityInput" type="text" name="activity" class="form-control sea-input"
                       placeholder="Enter a vacation activity..." value="{{ edit_activity or '' }}" required autofocus>
                <button type="submit" class="sea-btn ms-2">{{ 'Update' if edit_id else 'Add' }}</button>
            </div>
        </form>

        <div class="table-responsive" style="width: 100%;">
            <table class="table sea-table align-middle" style="width: 100%; margin: 0;">
                <thead>
                    <tr>
                        <th class="text-start">Activity</th>
                        <th class="text-center align-middle" style="width: 220px;" colspan="2">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for activity in activities %}
                    <tr>
                        <td class="text-start">{{ activity[1] }}</td>

                        <td class="text-start align-middle p-1" style="width: 110px;">
                            <form method="post" action="{{ url_for('delete', activity_id=activity[0]) }}" class="d-inline">
                                <button type="submit" class="sea-btn" style="width: 90px; font-size: 0.9rem;">Delete</button>
                            </form>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="3" class="text-center text-muted fst-italic py-4">No vacation plans yet!</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <script>
        // Auto-focus logic for the input field
        (function () {
            const input = document.getElementById('activityInput');
            if (!input) return;
            if (input.value && input.value.length > 0) {
                input.focus();
                const len = input.value.length;
                input.setSelectionRange(len, len);
            } else {
                input.focus();
            }
        })();
    </script>
</body>
</html>