WikiTableWebapp/html_template.html at main · maimorag/WikiTableWebapp · 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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Wikipedia Table Grouper</title>
    <style>
      body {
        font-family: Tahoma, sans-serif;
        background-color: #d0f0c0; /* pastel green */
        text-align: center;
        padding: 20px;
      }
      h1 {
        color: #2e5339;
      }
      form {
        margin-bottom: 30px;
      }
      input[type="text"] {
        padding: 5px;
        font-size: 14px;
        margin: 5px;
      }
      input[type="submit"] {
        padding: 8px 16px;
        font-size: 14px;
        cursor: pointer;
        background-color: #7bbf6a;
        color: white;
        border: none;
        border-radius: 4px;
      }
      img {
        margin-top: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }
      ul {
        list-style: none;
        padding: 0;
      }
      li {
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <h1>Wikipedia Table Grouper</h1>
    <form method="POST">
      <label for="page">Wikipedia List Page:</label>
      <input
        type="text"
        name="page"
        placeholder="List_of_animal_names"
        required
      />
      <br />
      <label for="column">Group by Column Name:</label>
      <input
        type="text"
        name="column"
        placeholder="Collateral adjective"
        required
      />
      <br /><br />
      <input type="submit" value="Group" />
    </form>

    {% if grouped_data %}
    <h2>Grouped Results:</h2>
    {% for key, values in grouped_data.items() %}
    <h3>{{ key }}</h3>
    <ul>
      {% for name, img in values %}
      <li>
        {{ name }}<br />
        {% if img %}
        <img src="{{ img }}" alt="{{ name }}" width="120" />
        {% else %} No image available {% endif %}
      </li>
      {% endfor %}
    </ul>
    {% endfor %} {% endif %}
  </body>
</html>