isosilo/templates/index.html

97 lines
3.9 KiB
HTML
Raw Normal View History

2026-04-15 10:31:54 +02:00
<!doctype html>
<html>
2026-04-15 10:31:54 +02:00
<head>
<title>{{.Title}}</title>
<link rel="stylesheet" href="/static/css/style.css" />
<script src="/static/js/modal.js" defer></script>
</head>
<body>
<header><a class="logo" href="/">💿 ISOSilo</a></header>
<main>
<!-- ISO Info Modal -->
<div id="isoModal" class="modal-overlay">
<div class="modal-content">
<button class="close-btn" aria-label="Close">×</button>
<div class="modal-header">
<h2 id="modalTitle" class="modal-title">
ISO Information
</h2>
</div>
<div class="modal-body">
<img
id="modalImage"
class="modal-image"
alt="ISO cover"
/>
<p id="modalDescription" class="modal-description"></p>
</div>
</div>
</div>
<nav class="bc">
{{range $i, $c := .Breadcrumbs}}<a href="{{$c.URL}}"
>{{$c.Name}}</a
>
{{if lt (add1 $i) (len $.Breadcrumbs)}}/{{end}} {{end}}
</nav>
2026-04-15 10:31:54 +02:00
<div class="grid">
{{range .Items}} {{if .IsDir}}
<a href="/{{urlenc .RelativePath}}" class="card">
<div class="folder-icon">📁</div>
<div class="card-body">
<span class="card-name">{{.Name}}</span>
</div>
</a>
{{else}}
<div class="card">
<a href="/browse/{{urlenc .RelativePath}}">
{{if .HasImage}}<img
src="/raw/{{urlenc (trimExt .RelativePath)}}{{.ImageExt}}"
class="card-img"
/>
{{else}}
<div class="iso-icon">💿</div>
{{end}}
</a>
<div class="card-body">
<a
href="/browse/{{urlenc .RelativePath}}"
class="card-name"
>{{.Name}}</a
>
<p class="card-desc">
{{if .Description}}{{.Description}}{{else}}ISO Disk
Image{{end}}
</p>
<div
style="margin-top: 1rem; display: flex; gap: 0.5rem"
>
<button
class="info-btn dl-btn"
data-iso-name="{{.Name}}"
data-description="{{if .Description}}{{.Description}}{{else}}No description available{{end}}"
{{if
.HasImage}}data-image-src="/raw/{{urlenc (trimExt .RelativePath)}}{{.ImageExt}}"
{{end}}
>
Info
</button>
<a
href="/browse/{{urlenc .RelativePath}}"
class="dl-btn"
>Browse</a
>
<a
href="/raw/{{urlenc .RelativePath}}"
class="dl-btn"
download
>ISO</a
>
</div>
</div>
</div>
{{end}} {{end}}
</div>
</main>
</body>
</html>