vision/index.html at main · caretak3r/vision · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vision Image Index</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Vision Image Index</h1>
            <div class="search-container">
                <input type="text" id="search-bar" placeholder="Search tags (space-separated)...">
            </div>
            <div id="metrics-bar" class="metrics-container">
                <!-- Metrics will be populated by JavaScript -->
                <div class="metrics-loading">Calculating collection metrics...</div>
            </div>
            <div class="sort-controls">
                <label for="sort-by">Sort by:</label>
                <select id="sort-by">
                    <option value="date-desc">Date (Newest First)</option>
                    <option value="date-asc">Date (Oldest First)</option>
                    <option value="tags-asc">Tags (A-Z)</option>
                    <option value="tags-desc">Tags (Z-A)</option>
                    <option value="filename-asc">Filename (A-Z)</option>
                    <option value="filename-desc">Filename (Z-A)</option>
                    <option value="size-asc">Size (Smallest First)</option>
                    <option value="size-desc">Size (Largest First)</option>
                </select>
            </div>
        </header>

        <main>
            <div id="image-grid"></div>
        </main>

        <div id="tooltip" style="display:none; position:absolute; z-index:100;"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>