Search/templates/images.html
2024-12-02 14:36:08 +01:00

159 lines
No EOL
8 KiB
HTML
Executable file
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{ if .IsThemeDark }}
<meta name="darkreader-lock">
{{ end }}
<title>{{ .Query }} - {{ translate "site_name" }}</title>
<link rel="stylesheet" href="/static/css/style.css">
<noscript>
<style>
img.placeholder-img {
display: none;
}
</style>
</noscript>
<link rel="stylesheet" href="/static/css/style-imageviewer.css">
<link rel="stylesheet" href="/static/css/style-fixedwidth.css">
<link rel="stylesheet" href="/static/css/{{.Theme}}.css">
<link rel="search" type="application/opensearchdescription+xml" title="{{ translate "site_name" }}" href="/opensearch.xml">
<!-- Icons -->
<link rel="icon" href="{{ .IconPathSVG }}" type="image/svg+xml">
<link rel="icon" href="{{ .IconPathPNG }}" type="image/png">
<link rel="apple-touch-icon" href="{{ .IconPathPNG }}">
</head>
<body>
<form action="/search" id="prev-next-form" class="results-search-container" method="GET" autocomplete="off">
<h1 class="logomobile">
<div class="logo-container" herf="/">
<a href="/">
logo
</a>
</div>
</h1>
<div class="wrapper-results">
<input type="text" name="q" value="{{ .Query }}" id="search-input"/>
<button id="search-wrapper-ico" class="material-icons-round" name="t" value="image">search</button>
<div class="autocomplete">
<ul>
</ul>
</div>
<input type="submit" class="hide" name="t" value="image" />
</div>
<div class="sub-search-button-wrapper">
<div class="search-container-results-btn">
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="text">search</button>
<button name="t" value="text" class="clickable">{{ translate "web" }}</button>
</div>
<div class="search-container-results-btn">
<button id="sub-search-wrapper-ico" class="material-icons-round clickable search-active" name="t" value="image">image</button>
<button name="t" value="image" class="clickable search-active">{{ translate "images" }}</button>
</div>
<div class="search-container-results-btn">
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="video">movie</button>
<button name="t" value="video" class="clickable">{{ translate "videos" }}</button>
</div>
<div class="search-container-results-btn">
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="forum">forum</button>
<button name="t" value="forum" class="clickable">{{ translate "forums" }}</button>
</div>
<div id="content" class="js-enabled">
<div class="search-container-results-btn">
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="map">map</button>
<button name="t" value="map" class="clickable">{{ translate "maps" }}</button>
</div>
</div>
<div class="search-container-results-btn">
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="file">share</button>
<button name="t" value="file" class="clickable">{{ translate "torrents" }}</button>
</div>
</div>
<noscript>
<input type="hidden" name="js_enabled" value="true">
</noscript>
</form>
<form class="results_settings" action="/search" method="get">
<input type="hidden" name="q" value="{{ .Query }}">
<select class="results-settings" name="safe" id="safeSearchSelect">
<option value="disabled" {{if eq .Safe "disabled"}}selected{{end}}>{{ translate "safe_search_off" }}</option>
<option value="active" {{if eq .Safe "active"}}selected{{end}}>{{ translate "safe_search_on" }}</option>
</select>
<select class="results-settings" name="lang" id="languageSelect">
{{range .LanguageOptions}}
<option value="{{.Code}}" {{if eq .Code $.CurrentLang}}selected{{end}}>{{.Name}}</option> <!-- this is too wide or too less, fix -->
{{end}}
</select>
<button class="results-save" name="t" value="image">{{ translate "save_settings" }}</button>
</form>
<div class="search-results" id="results">
<!-- Results go here -->
{{ if .Results }}
<div class="images images_viewer_hidden">
<!-- Images Grid -->
{{ range $index, $result := .Results }}
<div class="image">
{{ if $.HardCacheEnabled }}
<noscript>
<!-- JavaScript is disabled; serve actual images -->
<img src="{{ $result.ProxyFull }}" alt="{{ $result.Title }}" class="clickable" />
</noscript>
<!-- JavaScript is enabled; use placeholders -->
<img
src="/static/images/placeholder.svg"
data-id="{{ $result.ID }}"
data-full="{{ $result.ProxyFull }}"
data-proxy-full="{{ $result.ProxyThumb }}"
data-source="{{ $result.Source }}"
alt="{{ $result.Title }}"
class="clickable placeholder-img"
/>
{{ else }}
<!-- HardCacheEnabled is false; serve images directly -->
<img src="{{ $result.ProxyFull }}" alt="{{ $result.Title }}" class="clickable" />
{{ end }}
<div class="resolution">{{ $result.Width }} × {{ $result.Height }}</div>
<div class="details">
<span class="img_title clickable">{{ $result.Title }}</span>
</div>
</div>
{{ end }}
</div>
<!-- Nav buttons -->
<noscript>
<form action="/search" id="prev-next-form" class="results-search-container" method="GET" autocomplete="off">
<!-- Existing form fields -->
<input type="hidden" name="js_disabled" value="true">
</form>
<!-- Nav buttons -->
<div class="pagination">
{{ if .HasPrevPage }}
<a href="/search?q={{ .Query }}&t=image&p={{ sub .Page 1 }}">{{ translate "previous" }}</a>
{{ end }}
{{ if .HasNextPage }}
<a href="/search?q={{ .Query }}&t=image&p={{ add .Page 1 }}">{{ translate "next" }}</a>
{{ end }}
</div>
</noscript>
{{ else if .NoResults }}
<div class="no-results">{{ translate "no_results" .Query }}</div>
{{ else }}
<div class="no-more-results">{{ translate "no_more_results" }}</div>
{{ end }}
</div>
<div class="message-bottom-left" id="message-bottom-left">
<span>{{ translate "searching_for_new_results" }}</span>
</div>
<div id="image-viewer-overlay" style="display: none;"></div>
<div id="template-data" data-page="{{ .Page }}" data-query="{{ .Query }}" data-type="image" data-hard-cache-enabled="{{ .HardCacheEnabled }}"></div>
<script defer src="/static/js/autocomplete.js"></script>
<script defer src="/static/js/imagetitletrim.js"></script>
<script defer src="/static/js/imageviewer.js"></script>
<script defer src="/static/js/dynamicscrollingimages.js"></script>
</body>
</html>