-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathideas.html
More file actions
164 lines (142 loc) · 6.65 KB
/
Copy pathideas.html
File metadata and controls
164 lines (142 loc) · 6.65 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Compass World | Ideas & Concepts</title>
<meta name="description" content="Artifacts, relics, and creative concepts from the Compass World." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="contents/indexphoto/rotate.png" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Bangers&display=swap" rel="stylesheet" />
<!-- Bootstrap 5 + 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" />
<!-- Styles -->
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/ideas.css" />
<!-- Open Graph -->
<meta property="og:title" content="Compass World — Ideas & Concepts" />
<meta property="og:description" content="Artifacts, relics, and creative concepts shaping the multiverse of Compass World." />
<meta property="og:image" content="contents/indexphoto/logo.webp" />
<meta property="og:type" content="website" />
<!-- 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>
<script defer src="assets/scripts/components.js"></script>
<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>
<!-- Google Translate -->
<div id="google_translate_element" class="container mt-3"></div>
<!-- PAGE HEADER -->
<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">Ideas & Concepts</h1>
<p class="lead">Artifacts, relics, and visionary concepts that define the Compass World universe.</p>
</header>
<!-- MAIN CONTENT -->
<main class="container py-5">
<div class="ideas-grid">
<!-- Example Card 1 -->
<article class="ideas-col" data-type="artifact" data-animate="reveal">
<div class="idea-card">
<div class="idea-body">
<h3 class="idea-title">Starforged Blade</h3>
<div class="idea-meta"><span class="idea-dot"></span> First mention: 8th Century BCE</div>
<p class="idea-text">A sword forged from a fallen star; resonates near interdimensional rifts.</p>
<div class="idea-tags">
<span class="idea-tag is-gold">Artifact</span>
<span class="idea-tag">Prime Era</span>
</div>
</div>
<div class="idea-foot">
<span>Status: Unlocated</span>
<span class="idea-badge">Danger: Medium</span>
</div>
</div>
</article>
<!-- Example Card 2 -->
<article class="ideas-col" data-type="relic">
<div class="idea-card">
<div class="idea-body">
<h3 class="idea-title">Amulet of Riva</h3>
<div class="idea-meta"><span class="idea-dot"></span> First mention: Middle Ages</div>
<p class="idea-text">A talisman rumored to open gateways to alternate realities; highly coveted.</p>
<div class="idea-tags">
<span class="idea-tag is-red">Relic</span>
<span class="idea-tag">Occult</span>
</div>
</div>
<div class="idea-foot">
<span>Status: Missing</span>
<span class="idea-badge">Risk: High</span>
</div>
</div>
</article>
<!-- Example Card 3 -->
<article class="ideas-col" data-type="artifact">
<div class="idea-card">
<div class="idea-body">
<h3 class="idea-title">Armor of the Depths</h3>
<div class="idea-meta"><span class="idea-dot"></span> First mention: Age of Sail</div>
<p class="idea-text">A living armor crafted by the Sea People. Grants its wearer unmatched protection beneath the oceans.</p>
<div class="idea-tags">
<span class="idea-tag">Artifact</span>
<span class="idea-tag">Undersea</span>
</div>
</div>
<div class="idea-foot">
<span>Status: Recovered</span>
<span class="idea-badge">Danger: Low</span>
</div>
</div>
</article>
</div>
</main>
<!-- FOOTER -->
<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>
<!-- Back to top -->
<button class="btn btn-warning back-to-top" aria-label="Back to top"><i class="bi bi-arrow-up"></i></button>
<!-- 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>
</body>
</html>