Solvaldr-The-Sun-Tyrant/index.html at main · hejhdiss/Solvaldr-The-Sun-Tyrant · GitHub

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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Solvaldr: The Sun Tyrant - Interactive Concept</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            transition: background-color 0.5s ease;
        }
        h1, h2, h3 {
            font-family: 'Cinzel', serif;
        }
        .cinzel {
            font-family: 'Cinzel', serif;
        }
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .tab-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out;
        }
        .section-light { background-color: #FDF6E3; color: #586E75; }
        .section-dark { background-color: #002B36; color: #93A1A1; }
        .highlight-gold { color: #B58900; }
        .border-gold { border-color: #B58900; }
        .bg-gold-transparent { background-color: rgba(181, 137, 0, 0.1); }
    </style>
</head>
<body class="section-dark">

    <header id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-colors duration-500 bg-transparent">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex-shrink-0">
                    <h1 class="text-xl font-bold cinzel">Solvaldr</h1>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-4">
                        <a href="#premise" class="hover:text-white px-3 py-2 rounded-md text-sm font-medium">The Curse</a>
                        <a href="#gameplay" class="hover:text-white px-3 py-2 rounded-md text-sm font-medium">Gameplay</a>
                        <a href="#themes" class="hover:text-white px-3 py-2 rounded-md text-sm font-medium">Themes</a>
                        <a href="#tech" class="hover:text-white px-3 py-2 rounded-md text-sm font-medium">Technology</a>
                        <a href="#endings" class="hover:text-white px-3 py-2 rounded-md text-sm font-medium">Endings</a>
                        <a href="#read-more" class="hover:text-white px-3 py-2 rounded-md text-sm font-medium">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <main>
        <section id="hero" class="h-screen flex items-center justify-center text-center section-dark">
            <div class="fade-in">
                <h1 class="text-6xl md:text-8xl font-bold cinzel tracking-widest text-white">SOLVALDR</h1>
                <p class="text-xl md:text-2xl mt-4 max-w-3xl mx-auto highlight-gold">They said the sun would save us. It only ever burned us.</p>
                <p class="text-lg md:text-xl mt-8 max-w-2xl mx-auto text-gray-400">An interactive concept for a 3D narrative puzzle-adventure.</p>
            </div>
        </section>

        <section id="premise" class="py-20 md:py-32">
            <div class="section-light py-20">
                <div class="max-w-4xl mx-auto px-4 text-center fade-in">
                    <h2 class="text-4xl font-bold">The World That Worships Light</h2>
                    <p class="mt-4 text-lg">Imagine a world where the sun is not just a star, but a god. Temples stretch skyward. Cities are built around radiant monuments. Children grow up believing that light is purity, and darkness is evil. This is the grand lie humanity lives by.</p>
                </div>
            </div>
            <div class="section-dark py-20">
                <div class="max-w-4xl mx-auto px-4 text-center fade-in">
                    <h2 class="text-4xl font-bold text-white">The Truth That Hides in Shadow</h2>
                    <p class="mt-4 text-lg">But for you, light means death. You are part of a cursed generation, born into a forgotten bloodline that cannot survive in sunlight. Exiled, hidden, and hunted, you live in the cracks of a society that would kill you for what you are, all while praying to the force that destroys you.</p>
                </div>
            </div>
            <div class="section-light py-20">
                <div class="max-w-4xl mx-auto px-4 fade-in">
                    <h3 class="text-3xl font-bold text-center">A Curse Buried Beneath Time</h3>
                    <div class="mt-8 grid md:grid-cols-2 gap-8 items-center">
                        <div>
                            <p class="text-lg mb-4">Centuries ago, a wise tribe grew independent of the gods, not through violence, but through their pursuit of knowledge and discovery of their own value. For this, they were branded heretics.</p>
                            <p class="text-lg">The gods struck back. Not with fire, but with time. A generational curse was cast: every hundred years, a new generation would walk in shadow and be devoured by the light.</p>
                        </div>
                        <div class="border-l-4 border-gold pl-6">
                            <p class="text-xl font-semibold italic">"The curse was never about punishment. It was a result of a god's cosmic experiment or boredom, born of divine arrogance and unspeakable cruelty."</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="gameplay" class="py-20 md:py-32 section-dark">
            <div class="max-w-6xl mx-auto px-4 text-center fade-in">
                <h2 class="text-4xl font-bold text-white">Pillars of Gameplay</h2>
                <p class="mt-4 text-lg max-w-3xl mx-auto">Survival is a puzzle. The world is a story. Truth is the only weapon.</p>
                <div class="mt-12 grid sm:grid-cols-1 md:grid-cols-3 gap-8 text-left">
                    <div class="gameplay-tab border border-gray-700 rounded-lg p-6 cursor-pointer hover:bg-gray-800 transition">
                        <h3 class="text-2xl font-bold text-white">Light as the Enemy</h3>
                        <p class="mt-2">Navigate a world where every sunbeam is a lethal trap. Solve puzzles by manipulating shadows, moving objects, and activating ancient machinery to forge a path through the deadly light.</p>
                    </div>
                    <div class="gameplay-tab border border-gray-700 rounded-lg p-6 cursor-pointer hover:bg-gray-800 transition">
                        <h3 class="text-2xl font-bold text-white">Environmental Storytelling</h3>
                        <p class="mt-2">The story is not told, it is discovered. With minimal dialogue, the lore unfolds through hidden murals, forbidden scriptures, and haunting echoes from the past trapped within ancient relics.</p>
                    </div>
                    <div class="gameplay-tab border border-gray-700 rounded-lg p-6 cursor-pointer hover:bg-gray-800 transition">
                        <h3 class="text-2xl font-bold text-white">Non-Linear Exploration</h3>
                        <p class="mt-2">Explore vast, interconnected shadowed ruins, hidden temples, and underground sanctuaries in any order. The world rewards the curious with its deepest secrets and forgotten histories.</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="themes" class="py-20 md:py-32 section-light">
            <div class="max-w-4xl mx-auto px-4 text-center fade-in">
                <h2 class="text-4xl font-bold">The Burning Truth</h2>
                <p class="mt-4 text-lg">Solvaldr is a meditation on profound, challenging themes.</p>
                <div class="mt-10 grid grid-cols-2 md:grid-cols-4 gap-8">
                    <div class="text-center">
                        <span class="text-4xl highlight-gold">🧬</span>
                        <h3 class="text-xl font-bold mt-2">Generational Trauma</h3>
                    </div>
                    <div class="text-center">
                        <span class="text-4xl highlight-gold">👁️</span>
                        <h3 class="text-xl font-bold mt-2">Divine Manipulation</h3>
                    </div>
                    <div class="text-center">
                        <span class="text-4xl highlight-gold">📜</span>
                        <h3 class="text-xl font-bold mt-2">Erased History</h3>
                    </div>
                    <div class="text-center">
                        <span class="text-4xl highlight-gold">⚖️</span>
                        <h3 class="text-xl font-bold mt-2">Truth vs Belief</h3>
                    </div>
                </div>
                 <p class="mt-12 text-xl italic">"The game questions the morality of gods, the foundations of faith built on lies, and the devastating cost of forgotten truth."</p>
            </div>
        </section>

        <section id="tech" class="py-20 md:py-32 section-dark">
             <div class="max-w-6xl mx-auto px-4 text-center fade-in">
                <h2 class="text-4xl font-bold text-white">Forged in Unreal Engine 5</h2>
                <p class="mt-4 text-lg">Leveraging cutting-edge technology to create a world of surreal, mythic beauty.</p>
                <div class="mt-12 grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-8">
                    <div class="tech-card p-4 rounded-lg group">
                        <h3 class="text-2xl font-bold text-white">Lumen</h3>
                        <p class="mt-2 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Dynamic global illumination for puzzles built from realistic, shifting light and shadow.</p>
                    </div>
                    <div class="tech-card p-4 rounded-lg group">
                        <h3 class="text-2xl font-bold text-white">Nanite</h3>
                        <p class="mt-2 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Rendering vast, intricate ruins with cinematic detail without performance loss.</p>
                    </div>
                    <div class="tech-card p-4 rounded-lg group">
                        <h3 class="text-2xl font-bold text-white">World Partition</h3>
                        <p class="mt-2 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300">A seamless, open world where exploration flows without loading screens.</p>
                    </div>
                    <div class="tech-card p-4 rounded-lg group">
                        <h3 class="text-2xl font-bold text-white">MetaSounds</h3>
                        <p class="mt-2 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Immersive spatial audio where every whisper and echo has a place in the world.</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="endings" class="py-20 md:py-32 section-light">
            <div class="max-w-5xl mx-auto px-4 text-center fade-in">
                <h2 class="text-4xl font-bold">The Final Question</h2>
                <p class="mt-4 text-lg">The game ends not with an answer, but with a choice and a fire in the soul.</p>
                <div class="mt-12 grid sm:grid-cols-2 md:grid-cols-4 gap-6">
                    <div class="ending-card p-6 rounded-lg border-2 border-transparent hover:border-gold hover:bg-gold-transparent transition h-48 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold">Rebellion</h3>
                        <p class="mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Ignite the fire of uprising from the shadows.</p>
                    </div>
                    <div class="ending-card p-6 rounded-lg border-2 border-transparent hover:border-gold hover:bg-gold-transparent transition h-48 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold">Sacrifice</h3>
                         <p class="mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Become the final truth, burned into the memory of the light.</p>
                    </div>
                    <div class="ending-card p-6 rounded-lg border-2 border-transparent hover:border-gold hover:bg-gold-transparent transition h-48 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold">Submission</h3>
                         <p class="mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Accept a false salvation and become a puppet of the tyrant.</p>
                    </div>
                    <div class="ending-card p-6 rounded-lg border-2 border-transparent hover:border-gold hover:bg-gold-transparent transition h-48 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold">Silence</h3>
                         <p class="mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Walk into the unknown, to confront a god or an empty throne.</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="read-more" class="py-20 md:py-32 section-dark">
            <div class="max-w-4xl mx-auto px-4 text-center fade-in">
                <h2 class="text-4xl font-bold text-white">Explore the Concept Further</h2>
                <p class="mt-4 text-lg text-gray-400">Read the full article about Solvaldr: The Sun Tyrant on various platforms.</p>
                <div class="mt-8 space-y-4">
                    <a href="https://www.linkedin.com/pulse/solvaldr-sun-tyrant-devlog-concept-showcase-muhammed-shafin-p-xfhke" target="_blank" class="block text-xl text-white hover:text-gold underline">LinkedIn Article</a>
                    <a href="https://dev.to/hejhdiss/solvaldr-the-sun-tyrant-devlog-concept-showcase-1860" target="_blank" class="block text-xl text-white hover:text-gold underline">Dev.to Article</a>
                    <a href="https://medium.com/@hejhdiss/solvaldr-the-sun-tyrant-devlog-concept-showcase-bf81d94aa05b" target="_blank" class="block text-xl text-white hover:text-gold underline">Medium Article</a>
                </div>
            </div>
        </section>

    </main>

    <footer class="section-dark py-8 text-center text-gray-400">
        <p>Concept by Muhammed Shafin P.</p>
        <p class="text-sm mt-2">Licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" class="underline hover:text-white">CC BY-SA 4.0</a>.</p>
        <p class="text-sm mt-1">GitHub: <a href="https://github.com/hejhdiss" class="underline hover:text-white">hejhdiss</a></p>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                    }
                });
            }, { threshold: 0.1 });

            document.querySelectorAll('.fade-in').forEach(el => {
                observer.observe(el);
            });

            const navbar = document.getElementById('navbar');
            const sections = document.querySelectorAll('main section');
            const navLinks = document.querySelectorAll('#navbar a');

            const navObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const sectionId = entry.target.id;
                        if(sectionId === 'hero' || entry.target.classList.contains('section-dark')) {
                            navbar.classList.remove('section-light', 'shadow-md');
                            navbar.classList.add('section-dark');
                        } else {
                            navbar.classList.remove('section-dark');
                            navbar.classList.add('section-light', 'shadow-md');
                        }

                        navLinks.forEach(link => {
                           link.classList.remove('highlight-gold');
                           if(link.getAttribute('href') === `#${sectionId}`) {
                               link.classList.add('highlight-gold');
                           }
                        });
                    }
                });
            }, { rootMargin: "-50% 0px -50% 0px" });

            sections.forEach(sec => navObserver.observe(sec));

            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });

            const endingCards = document.querySelectorAll('.ending-card');
            endingCards.forEach(card => {
                card.addEventListener('mouseenter', () => card.classList.add('group'));
                card.addEventListener('mouseleave', () => card.classList.remove('group'));
            });
        });
    </script>
</body>
</html>