index.html 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Checklist</title>
  7. <style>
  8. body {
  9. background-color: #1F2933;
  10. color: #CBD2D9;
  11. }
  12. a {
  13. color: #E4E7EB;
  14. }
  15. .button {
  16. padding: 8px 12px;
  17. margin: 3px;
  18. border: none;
  19. border-radius: 5px;
  20. background-color: #52606D;
  21. color: white;
  22. cursor: pointer;
  23. text-decoration: none;
  24. display: inline-block;
  25. border-radius: 12px;
  26. box-shadow: 0 9px #999;
  27. }
  28. .button:hover {
  29. background-color: #616E7C;
  30. }
  31. .button:active {
  32. background-color: #9AA5B1;
  33. box-shadow: 0 5px #666;
  34. transform: translateY(4px);
  35. }
  36. </style>
  37. <script>
  38. function focusInput() { // Function to focus on the input field
  39. document.getElementById('itemInput').focus();
  40. }
  41. </script>
  42. </head>
  43. <body onload="focusInput()">
  44. <h1>Checklist</h1>
  45. <form method="POST" onsubmit="focusInput()">
  46. <input type="text" id="itemInput" name="item" placeholder="Add a new item" required>
  47. <button type="submit" class="button">Add</button>
  48. </form>
  49. <ul>
  50. {% if items %}
  51. {% for item in items %}
  52. {% if item.checked == 'no' %}
  53. <li style="text-decoration:none;">
  54. {{ item.name }}
  55. <a href="{{ url_for('checklist.check', item_id=loop.index0) }}">[Cross Off]</a>
  56. </li>
  57. {% else %}
  58. <li> <span style="text-decoration:line-through;">
  59. {{ item.name }}</span>
  60. <a href="{{ url_for('checklist.uncheck', item_id=loop.index0) }}">[Un-Cross]</a>
  61. </li>
  62. {% endif %}
  63. {% endfor %}
  64. {% endif %}
  65. </ul>
  66. <form action="{{ url_for('checklist.list') }}" method="get" style="display: inline;">
  67. <button type="submit" class="button">View List</button>
  68. </form>
  69. <form action="{{ url_for('checklist.clear') }}" method="get" style="display: inline;">
  70. <button type="submit" class="button">Clear List</button>
  71. </form>
  72. <br><br>
  73. </body>
  74. </html>