oderelic.github.io/index.html at main · OdeRelic/oderelic.github.io · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OdeRelic - The Ultimate Retro Game Backup Manager</title>
  <meta name="description"
    content="Easily organize and prepare your classic games for SDCARD / HDD loaders  on retro consoles. Available for Windows, Mac, and Linux.">
  <meta name="keywords"
    content="OdeRelic, ODE Manager, Optical Drive Emulator, PS1, PS2, OPL, Dreamcast, GDEMU, ROM Manager, Retro Gaming, GameCube, PlayStation 2, PlayStation, Sega Saturn, retrogames, PSIO, XStation, GameCube Homebrew, Console Modding, Saroo, Swiss-GC, PlayStation 2 Homebrew">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://www.oderelic.com/">
  <meta property="og:title" content="OdeRelic - The Ultimate Retro Game Backup Manager">
  <meta property="og:description"
    content="Easily organize and prepare your classic games for SDCARD / HDD loaders on retro consoles. Available for Windows, Mac, and Linux.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.oderelic.com/">
  <meta property="og:image" content="https://www.oderelic.com/assets/bg.png">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="OdeRelic - The Ultimate Retro Game Backup Manager">
  <meta name="twitter:description"
    content="Easily organize and prepare your classic games for SDCARD / HDD loaders on retro consoles. Available for Windows, Mac, and Linux.">
  <meta name="twitter:image" content="https://www.oderelic.com/assets/bg.png">

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "OdeRelic",
    "operatingSystem": "Windows, macOS, Linux",
    "applicationCategory": "UtilitiesApplication",
    "url": "https://github.com/OdeRelic/OdeRelic",
    "downloadUrl": "https://github.com/OdeRelic/OdeRelic/releases",
    "license": "https://www.gnu.org/licenses/gpl-3.0.html",
    "isAccessibleForFree": true,
    "offers": {
      "@type": "Offer",
      "price": "0",
      "priceCurrency": "USD"
    },
    "description": "Easily organize and prepare your classic games for SDCARD / HDD loaders on retro consoles."
  }
  </script>

  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="icon" type="image/png" sizes="512x512" href="assets/applogo/icon_512x512.png">
  <link rel="apple-touch-icon" href="assets/applogo/icon_512x512.png">
  <link rel="stylesheet" href="styles.css">
  <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=Inter:wght@400;500;600&family=Outfit:wght@700;800;900&display=swap"
    rel="stylesheet">
</head>

<body>

  <header>
    <div class="logo">
      <img src="assets/applogo/icon_512x512.png" alt="OdeRelic Game Manager Logo">
      ODERELIC <span class="beta-tag">BETA</span>
    </div>
    <nav class="nav-links">
      <a href="#features">Features</a>
      <a href="#platforms">Platforms</a>
      <a href="#community">Community</a>
      <a href="https://github.com/OdeRelic/OdeRelic" target="_blank">GitHub</a>
    </nav>
  </header>

  <main>
    <section class="hero">
      <div class="hero-content animate-on-scroll">
        <h1>The Ultimate Retro Game Backup Manager</h1>
        <p>Easily organize, convert, and prepare your classic games for modern SDCARD / HDD loaders on your favorite
          retro
          consoles. No tech degree required. <br><strong style="color:var(--neon-cyan)">Currently in Public
            Beta.</strong></p>
        <div class="cta-group">
          <a href="https://github.com/OdeRelic/OdeRelic/releases" class="btn btn-primary" target="_blank">Download
            Latest</a>
          <a href="https://github.com/OdeRelic/OdeRelic" class="btn btn-secondary" target="_blank">View on GitHub</a>
        </div>
      </div>
    </section>

    <section id="features" class="features">
      <h2 class="section-title animate-on-scroll">Features Made Simple</h2>
      <div class="features-grid">

        <div class="feature-card animate-on-scroll">
          <div class="icon-wrapper">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 002-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10">
              </path>
            </svg>
          </div>
          <h3>Lightning Fast</h3>
          <p>Whether you have ten games or ten thousand, our app scans your drives instantly without ever freezing your
            computer.</p>
        </div>

        <div class="feature-card animate-on-scroll">
          <div class="icon-wrapper">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
            </svg>
          </div>
          <h3>Native Performance</h3>
          <p>Unlike bulky alternatives, OdeRelic is built naturally for your operating system—giving you blazing fast
            speeds and absolutely zero UI lag.</p>
        </div>

        <div class="feature-card animate-on-scroll">
          <div class="icon-wrapper">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
            </svg>
          </div>
          <h3>Automatic Conversion</h3>
          <p>Just drop in your game files. We automatically handle all the confusing formatting and conversions into
            exactly what your console expects.</p>
        </div>

        <div class="feature-card animate-on-scroll">
          <div class="icon-wrapper">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path>
            </svg>
          </div>
          <h3>Beautiful Cover Art</h3>
          <p>We automatically identify your games and download gorgeous high-quality cover art so your collection always
            looks amazing on the TV.</p>
        </div>

        <div class="feature-card animate-on-scroll">
          <div class="icon-wrapper">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z">
              </path>
            </svg>
          </div>
          <h3>Ready to Play</h3>
          <p>We set up all the complicated folders and system files automatically so you can skip the setup and get
            straight to playing your favorite classics.</p>
        </div>

      </div>
    </section>

    <section id="screenshots" class="screenshots">
      <h2 class="section-title animate-on-scroll">See It In Action</h2>
      <div class="screenshots-grid">
        <div class="screenshot-wrapper animate-on-scroll">
          <img src="assets/screenshots/HOME-DASHBOARD.png" alt="Home Dashboard View" class="screenshot-img"
            loading="lazy">
        </div>
        <div class="screenshot-wrapper animate-on-scroll">
          <img src="assets/screenshots/OPL-PS1-Library-Screenshot.png" alt="PS1 Library View" class="screenshot-img"
            loading="lazy">
        </div>
        <div class="screenshot-wrapper animate-on-scroll">
          <img src="assets/screenshots/OPL-PS2-Library-Screenshot.png" alt="PS2 Library View" class="screenshot-img"
            loading="lazy">
        </div>
      </div>
    </section>

    <section id="platforms" class="platforms">
      <h2 class="section-title animate-on-scroll">Supported Consoles</h2>
      <div class="platforms-container">

        <div class="platform animate-on-scroll">
          <img src="assets/consoles/ps1.png" alt="PlayStation 1" class="platform-img" loading="lazy">
          <p>PS1<br><small style="color:var(--text-muted);font-weight:400">XStation</small></p>
          <p>PS1<br><small style="color:var(--neon-cyan);font-weight:400">Coming Soon (PSIO)</small></p>
        </div>

        <div class="platform animate-on-scroll">
          <img src="assets/consoles/ps2.png" alt="PlayStation 2" class="platform-img" loading="lazy">
          <p>PS2<br><small style="color:var(--text-muted);font-weight:400">Open PS2 Loader / POPSTARTER</small></p>
        </div>

        <div class="platform animate-on-scroll">
          <img src="assets/consoles/dreamcast.png" alt="Sega Dreamcast" class="platform-img" loading="lazy">
          <p>Dreamcast<br><small style="color:var(--text-muted);font-weight:400">GDEMU (OpenMenu) </small></p>
        </div>

        <div class="platform animate-on-scroll">
          <img src="assets/consoles/saturn.png" alt="Sega Saturn" class="platform-img" loading="lazy">
          <p>Saturn<br><small style="color:var(--neon-cyan);font-weight:400">Coming Soon (Saroo)</small></p>
        </div>

        <div class="platform animate-on-scroll">
          <img src="assets/consoles/gamecube.png" alt="Nintendo Gamecube" class="platform-img" loading="lazy">
          <p>Gamecube<br><small style="color:var(--text-muted);font-weight:400">Swiss</small></p>
        </div>

      </div>
    </section>

    <section id="community" class="features" style="background:var(--bg-dark);">
      <h2 class="section-title animate-on-scroll" style="margin-bottom:2rem;">Help Shape the Future</h2>
      <p style="text-align:center; color:var(--text-muted); font-size:1.1rem; max-width:600px; margin:0 auto 3rem auto;"
        class="animate-on-scroll">
        OdeRelic is an open-source project evolving through community feedback. We'd love to hear from you!
      </p>

      <div class="features-grid" style="max-width:800px;">
        <div class="feature-card animate-on-scroll"
          style="display:flex; flex-direction:column; align-items:center; text-align:center;">
          <div class="icon-wrapper">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
              </path>
            </svg>
          </div>
          <h3>Report a Bug</h3>
          <p style="margin-bottom:1.5rem; flex-grow:1;">Encountered a crash or odd behavior while organizing your
            library? Let us know so we can fix it.</p>
          <a href="https://github.com/OdeRelic/OdeRelic/issues/new?labels=bug" target="_blank" class="btn btn-secondary"
            style="width:100%;">Open Bug Report</a>
        </div>

        <div class="feature-card animate-on-scroll"
          style="display:flex; flex-direction:column; align-items:center; text-align:center;">
          <div class="icon-wrapper">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z">
              </path>
            </svg>
          </div>
          <h3>Request a Feature</h3>
          <p style="margin-bottom:1.5rem; flex-grow:1;">Have ideas for a new console integration or tool? Drop a
            suggestion in our tracker.</p>
          <a href="https://github.com/OdeRelic/OdeRelic/issues/new?labels=enhancement" target="_blank"
            class="btn btn-secondary" style="width:100%;">Suggest a Feature</a>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="logo">
      <img src="assets/applogo/icon_512x512.png" alt="OdeRelic Game Manager Logo">
      ODERELIC
    </div>
    <p>A fast, native cross-platform app built in modern C++ and Qt QML.</p>
    <p class="legal-disclaimer"><strong>Legal Disclaimer:</strong> OdeRelic is intended solely for managing personal
      backups of legally owned retro game collections. This software must not be used for downloading, sharing, or
      distributing copyrighted or pirated content.</p>
    <p>&copy; 2026 OdeRelic Project. Released under GPL-3.0 License.</p>
  </footer>

  <!-- Lightbox Overlay -->
  <div id="lightbox" class="lightbox">
    <span class="close-lightbox">&times;</span>
    <img class="lightbox-content" id="lightbox-img">
  </div>

  <script src="script.js"></script>
</body>

</html>