-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgallery.html
More file actions
192 lines (164 loc) · 8.84 KB
/
Copy pathgallery.html
File metadata and controls
192 lines (164 loc) · 8.84 KB
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Compass World | Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Art, posters, and concept pieces from the Compass World universe." />
<link rel="icon" type="image/x-icon" href="contents/indexphoto/rotate.png" />
<!-- SEO -->
<link rel="canonical" href="https://guybracha.github.io/compass-world/gallery.html" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Guy Bracha" />
<meta name="keywords" content="Compass World, gallery, art, posters, concept art, superheroes" />
<!-- Open Graph -->
<meta property="og:title" content="Compass World – Gallery" />
<meta property="og:description" content="Browse artworks, posters, and concept pieces from the Compass World." />
<meta property="og:type" content="website" />
<meta property="og:image" content="contents/indexphoto/logo.webp" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Compass World – Gallery" />
<meta name="twitter:description" content="Art, posters, and concepts from the Compass World." />
<meta name="twitter:image" content="https://guybracha.github.io/compass-world/contents/indexphoto/logo.webp" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Bangers&display=swap" rel="stylesheet" />
<!-- Bootstrap + Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" />
<!-- Site styles -->
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/gallery.css" />
<!-- Modular scripts -->
<script src="assets/scripts/search.js" defer></script>
<script src="assets/scripts/filters.js" defer></script>
<script src="assets/scripts/navigation.js" defer></script>
<script src="assets/scripts/components.js" defer></script>
<script src="assets/scripts/ui-utils.js" defer></script>
<!-- Page script (kept external) -->
<script src="assets/scripts/gallery.js" defer></script>
<!-- Google Translate -->
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script defer src="assets/scripts/translate.js"></script>
<style>
/* תוספות עדינות לעמוד */
.glass { background: rgba(255,255,255,0.06); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.08); }
.gallery-card { transition: transform .2s ease, box-shadow .2s ease; }
.gallery-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.tag-badge { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); }
.filter-btn.active { background: #ffc107; color:#000; border-color:#ffc107; }
.empty-state { opacity:.8 }
</style>
<script defer src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script defer src="assets/scripts/animations.js"></script>
</head>
<body class="bg-dark text-white">
<!-- Navbar -->
<div id="nav-placeholder"></div>
<div id="google_translate_element" class="container mt-3"></div>
<!-- Hero -->
<header class="text-center py-4">
<a href="index.html">
<img class="hero-logo logo-glow" src="contents/indexphoto/logo.webp" alt="Compass World logo" />
</a>
<h1 class="display-4 text-warning">Gallery</h1>
<p class="lead mb-0">Posters, key art, and concept explorations from the <strong>Compass World</strong>. Filter by team, era, or theme and open any image for a closer look.</p>
</header>
<div class="container py-3">
<div class="row align-items-center g-4">
<div class="col-12 text-center">
<img class="img-fluid rounded-4 shadow-lg hero-image" src="contents/gallery/UniteCol-min.webp" alt="Compass Alliance artwork" loading="lazy"/>
</div>
</div>
</div>
<!-- Filters -->
<section class="container">
<div class="glass rounded-4 p-3 p-md-4" data-animate="reveal">
<div class="d-flex flex-wrap align-items-center gap-2">
<button class="btn btn-outline-light btn-sm filter-btn active" data-filter="all">All</button>
<button class="btn btn-outline-light btn-sm filter-btn" data-filter="alliance">Compass Alliance</button>
<button class="btn btn-outline-light btn-sm filter-btn" data-filter="prime">Prime-Children</button>
<button class="btn btn-outline-light btn-sm filter-btn" data-filter="villains">Villains</button>
<button class="btn btn-outline-light btn-sm filter-btn" data-filter="myth">Gods & Myth</button>
<button class="btn btn-outline-light btn-sm filter-btn" data-filter="space">Space</button>
<button class="btn btn-outline-light btn-sm filter-btn" data-filter="poster">Poster</button>
<div class="ms-auto d-flex align-items-center gap-2">
<div class="input-group input-group-sm" style="max-width:280px;">
<span class="input-group-text bg-transparent text-white border-secondary"><i class="bi bi-search"></i></span>
<input id="searchInput" type="search" class="form-control bg-transparent text-white border-secondary" placeholder="Search title or tags…" />
</div>
<button id="clearFilters" class="btn btn-outline-secondary btn-sm" title="Clear filters"><i class="bi bi-x-circle"></i></button>
</div>
</div>
</div>
</section>
<!-- Grid -->
<main class="container my-4">
<div id="galleryGrid" class="row g-3 g-md-4">
<!-- cards injected by assets/scripts/gallery.js -->
</div>
<div id="emptyState" class="empty-state text-center py-5 d-none">
<i class="bi bi-image" style="font-size:3rem;"></i>
<p class="mt-3 mb-0">No results. Try a different filter or search term.</p>
</div>
</main>
<!-- Modal viewer -->
<div class="modal fade" id="imgModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content bg-black text-white border-0">
<div class="modal-header border-0">
<h5 class="modal-title" id="imgModalTitle"></h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img id="imgModalImg" class="img-fluid rounded-3 w-100" alt="" />
<p id="imgModalCaption" class="text-secondary small mt-3 mb-0"></p>
</div>
</div>
</div>
</div>
<!-- CTA to Facebook group -->
<section class="container my-5 text-center">
<div class="glass p-4 rounded-4">
<h2 class="section-heading mb-3 text-primary"><i class="bi bi-facebook"></i> Join the Architects</h2>
<p class="mb-4">Share ideas, sketches, and feedback in the official community of the Compass World.</p>
<a href="https://www.facebook.com/groups/6941542269224419" target="_blank" rel="noopener" class="btn btn-primary btn-lg fw-bold">
<i class="bi bi-facebook"></i> Join Our Group
</a>
</div>
</section>
<!-- Footer -->
<footer class="site-footer py-4 mt-auto border-top-dark">
<div class="container footer-layout">
<div class="footer-meta text-secondary small">
<div>© <span id="year"></span> Compass World. All rights reserved.</div>
<div class="footer-links">
<a href="https://github.com/guybracha/compass-world" class="footer-link link-warning" target="_blank" rel="noopener">
<i class="bi bi-github"></i> Source Code
</a>
<a href="https://www.facebook.com/groups/6941542269224419" class="footer-link link-warning" target="_blank" rel="noopener" aria-label="Compass World Architects Facebook group">
<i class="bi bi-facebook"></i> Architects
</a>
</div>
</div>
<div class="footer-logo">
<img src="contents/art2025/symbol.png" alt="Compass symbol" class="logo-glow" />
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1LV563TQEJ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'G-1LV563TQEJ');
</script>
<!-- Small util: current year (kept inline to avoid coupling with gallery.js) -->
<script>
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>