vineyard/index.html at main · UniqueName12345/vineyard · 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Just a random e621.net browser ">
    <meta name="og:image" content="">
    <meta name="og:title" content="e621.net Browser">
    <meta name="og:site_name" content="e621.net Browser">
    <meta name="og:description" content="Just a random e621.net browser ">
    <meta name="author" content="Robin888b / Raven Spart">
    <meta name="theme-color" content="#031F4B">
    <title>e621.net Browser</title>

    <meta name="color-scheme" content="dark">
    <link rel="apple-touch-icon" sizes="180x180" href="">
    <link rel="icon" type="image/png" sizes="32x32" href="">
    <link rel="icon" type="image/png" sizes="16x16" href="">
    <link rel="manifest" href="">
    <link rel="shortcut icon" href="">
    <meta name="msapplication-TileColor" content="#031F4B">
    <meta name="msapplication-config" content="">
    <meta name="theme-color" content="#031F4B">

    <link rel="stylesheet" href="./src/style.css">
    <script src="./src/app.js" defer></script>
</head>
<body>
    <header>
        <nav>
            <div class="header-content">
                <h1><a href="/">Vineyard by <a href="https://uniquename12345.github.io/">UniqueName12345</a></a></h1>
                <div class="search-box">
                    <input type="search" id="quick-search" placeholder="Quick search...">
                </div>
                <div class="nav-links">
                    <a href="about.html">About</a>
                </div>
            </div>
        </nav>
    </header>

    <section id="S1">
        <div id="search">
            <div class="search-container">
                <input type="search" id="searchBox" placeholder="Search tags... (use space to separate multiple tags)">
                <input type="button" id="searchButton" value="Search" onclick="search()">
            </div>

            <div class="searchOption">
                <div class="search-option-item">
                    <p>Order:</p>
                    <select id="orderSelect">
                        <option value="1" selected>Random</option>
                        <option value="2">Score</option>
                    </select>
                </div>

                <div id="ratingDiv" class="search-option-item">
                    <p>Rating:</p>
                    <select id="rattingOption">
                        <option value="0" title="*Wags tail* Show me everything! >w<">All</option>
                        <option value="s" selected title="*Happy bounces* Just the family-friendly fluff! Perfect for showing your fursona to your grandma! :3">Safe</option>
                        <option value="q" title="*Blushes and adjusts collar* Getting a bit spicy here... but still keeping it classy! owo">Questionable</option>
                        <option value="e" title="*Smirks knowingly* OwO What's this? You know exactly what you're getting into... ( ͡° ᴥ ͡°)">Explicit</option>
                    </select>
                </div>

                <div class="search-option-item">
                    <p>Minimum score:</p>
                    <input type="number" id="minimumScoreInput" placeholder="0" value="0">
                </div>
            </div>
        </div>

        <div id="galerie">
            <div id="loading-message" class="hidden">
                <div class="loading-spinner"></div>
                <p>Loading images...</p>
            </div>
            <div id="welcome-message">
                <h2>Welcome to Vineyard</h2>
                <p>Enter your search terms above to begin browsing images</p>
                <p class="search-tip">Tips:
                    <br>• Use space or comma to separate multiple tags
                    <br>• Search for a specific work using #ID (e.g. #1234567)
                    <br>• Use type:png/jpg for images only, or type:webm/mp4 for videos only
                </p>
            </div>
        </div>

        <div class="button">
            <button onclick="search(-1)">Previous</button>
            <span>Page <span id="pageNumber">1</span></span>
            <button onclick="search(1)">Next</button>
        </div>
    </section>

    <div id="modal">
        <div id="modalBackground"></div>
        <div id="modalContent">
            <img src="" id="modalImg" alt="Post Image">
            <div class="modal-info">
                <p>
                    <span class="post-id">ID: <span id="postId">0</span></span>
                    <span class="separator">|</span>
                    <span class="rating">Rating: <span id="postRating">unknown</span></span>
                </p>
                <div class="post-actions">
                    <button id="downloadPost" class="action-button">
                        <span class="action-icon">⬇️</span>
                        Download
                    </button>
                    <button id="viewOnE6" class="action-button">
                        <span class="action-icon">🔗</span>
                        View on e621
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="age-verification-modal" class="modal">
        <div class="modal-content verification-content">
            <h2>Age Verification</h2>
            <p id="verification-message"></p>
            <div class="verify-checkbox">
                <label>
                    <input type="checkbox" id="age-verify-checkbox">
                    *Raises paw solemnly* I confirm that I am at least 18 years old
                </label>
            </div>
            <div class="verify-buttons">
                <button id="verify-cancel" class="verify-button cancel">
                    *Backs away* Nevermind...
                </button>
                <button id="verify-confirm" class="verify-button confirm" disabled>
                    *Nods* I understand
                </button>
            </div>
        </div>
    </div>

</body>
</html>