iwm_browser/iwm_browser/templates/search.html
2022-10-29 17:26:04 +02:00

90 lines
3.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/index.css">
<link rel="stylesheet" href="/static/main.css">
<link rel="stylesheet" href="/static/search/search.css">
<link rel="stylesheet" href="/static/search/searchResults.css">
<!-- Optional features -->
<script>
function copy(obj) {
// copies the contents of the
// input field to clipboard, and
// adds the "copied" css class
navigator.clipboard.writeText(obj.value);
alert("Level code copied")
}
</script>
</head>
<body>
<div class="Search">
<div class="contentBox_">
<div class="header">Search</div>
<div class="splitter"></div>
<div class='searchBar'>
<form action="/search" method="get">
<div class="search_entry">
<input type='text' id="q" name="q" value='{{ searchValue }}' placeholder="Enter a level name or code"/>
<button class="searchButton" id='searchButton' type='submit'>🔍</button>
</div>
<details>
<summary>More options</summary>
<div class="sortType">
<label for="sort">Sort type</label>
<select id="sort" name="sort">
<option value="average_rating">Rating</option>
<option value="created_at">Upload date</option>
<option value="average_difficulty">Difficulty</option>
<option value="play_count">Plays</option>
</select>
<select id="dir" name="dir">
<option value="desc">Descending</option>
<option value="asc">Ascending</option>
</select>
</div>
<div class="upload_date">
<label for="date">Upload date</label>
<select id="date" name="date">
<option value="-1">All time</option>
<option value="720">Past 30 days</option>
<option value="168">Past 7 days</option>
<option value="24">Past day</option>
</select>
</div>
</details>
</form>
</div>
{% if searchResults %}
<div class="searchResults">
{% for map in searchResults %}
<div class="searchResultCard">
<div class="thumbnail"><img src="{{ THUMB_URL }}/{{ map['ID'] }}.png"></div>
<div class="details">
<div class="basic">
<div class="levelTitle">{{ map['Name'] }}</div>
<div class="levelDifficulty"><span>Difficulty: {{ '▲' * map['AverageUserDifficulty']|int }}</span></div>
<div class="creatorName">by <b>{{ map['CreatorName'] }}</b></div>
<div class="levelRating">{{ map['NumThumbsUp'] }} 👍 {{ map['NumThumbsDown'] }} 👎</div>
<div class="levelCode">Code: <input type="text" onclick="copy(this)" readonly=1 value="{{ map['MapCode'] }}" /></div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="searchResultsFooter">
<p>Page {{ searchPage+1 }}</p>
{% if not searchPage <= 0 %}<a href="/search?q={{ searchValue }}&p={{ searchPage-1 }}">Prev</a>{% endif %}
{% if not entryNumber < entryLimit %}<a href="/search?q={{ searchValue }}&p={{ searchPage+1 }}">Next</a>{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
</body>
</html>