Spore-Community · Kade-N · Mar 21, 2026 · Mar 21, 2026
diff --git a/docs/CNAME b/docs/CNAME
@@ -0,0 +1 @@
+https://smfx.sporecommunity.com
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,10 @@
+# SMFX website
+This is just a simple one-page site, no real configuration, pretty much everything is in index.html.
+
+It uses Jekyll, which is built into GitHub Pages, to process some variables to pull data from the repo automatically.
+
+## Overview of files
+- `screenshots` contains the screenshots of the app that appear on the website.
+- `style` contains CSS, images, and fonts, which define the visual style of the website.
+- `CNAME` sets the website URL. This file should not be modified.
+- `index.html` is the webpage.
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,78 @@
+---
+download_url: https://github.com/Spore-Community/SporeModder-FX/releases/latest/download/SporeModderFX.zip
+java_url: https://aka.ms/download-jdk/microsoft-jdk-21-windows-x64.msi
+smc_discord_url: https://discord.gg/QR8CjQT
+---
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>SporeModder FX</title>
+
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
+    <link rel="stylesheet" href="/style/default.css">
+    <link rel="icon" href="/style/images/smfx.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta name="description" content="The most advanced and modern Spore data modding tool.">
+    <meta name="keywords" content="Spore, SporeModder, SporeModderFX, SMFX, SporeMaster, DBPF, package, mods">
+    <meta property="og:title" content="SporeModder FX">
+    <meta property="og:description" content="The most advanced and modern Spore data modding tool.">
+    <meta property="og:image" content="/style/images/smfx.png">
+</head>
+
+<body>
+
+    <header>
+        <div id="site-header" href="/">
+            <img id="site-logo" src="/style/images/smfx.png" width="64" height="64" alt="SporeModder FX Logo">
+            <h1 id="site-title">SporeModder FX</h1>
+        </div>
+    </header>
+
+    <article id="intro">
+
+        <div id="smfx-download">
+            <p>The most advanced and modern Spore data modding tool.</p>
+            <p>Open, browse, and edit the contents of Maxis Database Packed Files (DBPFs), also known as .package files.</p>
+            <p>Enhanced editing support for a wide variety of custom Maxis file formats used in Spore.</p>
+            <a rel="noopener" href="{{ page.download_url }}"><button>Download SporeModder FX</button></a>
+            <p>Requires <a rel="noopener" href="{{ page.java_url }}">Java 11 or newer</a></p>
+        </div>
+
+        <div id="useful-links">
+            <a href="{{ site.github.wiki_url }}"><button>Documentation</button></a>
+            <a href="{{ site.github.repository_url }}"><button>View on GitHub</button></a>
+            <a target="_blank" rel="noopener noreferrer" href="{{ page.smc_discord_url }}"><button>Spore Modding Community Discord</button></a>
+        </div>
+
+    </article>
+
+    <article>
+        <h2>User-friendly</h2>
+        <p>Simple, easy and pretty. A modern user interface for a modern tool.</p>
+        <img src="/screenshots/ui-ribbon.png" class="screenshot" alt="Screenshot of SMFX's ribbon UI">
+
+        <h2>Easy coding</h2>
+        <p>A new format that makes coding .prop files easier than ever. Includes error highlighting, so you can instantly detect what you are doing wrong. And autocomplete, to make coding a bit faster and more convienient.</p>
+        <img src="/screenshots/text-errors.png" class="screenshot" alt="Screenshot of SMFX's error highlighting">
+        <img src="/screenshots/text-autocomplete.png" class="screenshot" alt="Screenshot of SMFX's autocomplete">
+
+        <h2>User Interface Editor</h2>
+        <img src="/screenshots/ui-editor.png" class="screenshot" alt="Screenshot of SMFX's UI editor">
+
+        <h2>Texture Viewer</h2>
+        <img src="/screenshots/texture-viewer.png" class="screenshot" alt="Screenshot of SMFX's texture viewer">
+
+        <h2>Model Viewer</h2>
+        <img src="/screenshots/model-viewer.png" class="screenshot" alt="Screenshot of SMFX's model viewer">
+    </article>
+
+    <footer>
+        <p>SporeModder FX is maintained by various contributors from the Spore community. Contact via <a target="_blank" rel="noopener noreferrer" href="{{ page.smc_discord_url }}">Discord</a> or <a href="mailto:smfx@sporecommunity.com">email</a>. Source code on <a target="_blank" rel="noopener noreferrer" href="{{ site.github.repository_url }}">GitHub</a>. Licensed under the <a href="{{ site.github.license.url }}">{{ site.github.license.name }}</a>.</p>
+        <p><strong>Not associated with or endorsed by Electronic Arts or Maxis.</strong> SporeModder FX is unofficial and not supported by EA or Maxis.</p>
+    </footer>
+
+</body>
+
+</html>
diff --git a/docs/screenshots/model-viewer.png b/docs/screenshots/model-viewer.png
diff --git a/docs/screenshots/text-autocomplete.png b/docs/screenshots/text-autocomplete.png
diff --git a/docs/screenshots/text-errors.png b/docs/screenshots/text-errors.png
diff --git a/docs/screenshots/texture-viewer.png b/docs/screenshots/texture-viewer.png
diff --git a/docs/screenshots/ui-editor.png b/docs/screenshots/ui-editor.png
diff --git a/docs/screenshots/ui-ribbon.png b/docs/screenshots/ui-ribbon.png
diff --git a/docs/style/default.css b/docs/style/default.css
@@ -0,0 +1,124 @@
+@import "spore.css";
+
+:root {
+    --smfx: #d4dbdc;
+    --smfx-gradient: linear-gradient(#dce5e4, #cbd0d3);
+}
+
+html {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+    background: var(--spore-glyphic-bg);
+    color: var(--spore-text-color);
+}
+
+body {
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#site-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background: var(--smfx-gradient);
+    background-clip: text;
+    color: transparent;
+
+    text-decoration: none;
+}
+
+#site-logo {
+    width: 64px;
+    height: 64px;
+    margin-right: 16px;
+}
+
+article {
+    background: var(--spore-flat-bg);
+    padding: 32px;
+    margin-bottom: 32px;
+}
+
+footer {
+    font-size: 12px;
+}
+
+#intro {
+    display: flex;
+    gap: 64px;
+}
+
+#intro #useful-links button {
+    width: 100%;
+    margin-bottom: 16px;
+}
+
+.screenshot {
+    width: 100%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--spore-font);
+}
+
+a {
+    color: var(--spore-light-space);
+}
+
+hr {
+    border: 2px solid var(--spore-mid-space);
+    margin: 32px 0;
+}
+
+td, th {
+    border-top: 1px solid var(--spore-mid-space);
+    border-bottom: 1px solid var(--spore-mid-space);
+    padding: 4px;
+}
+
+input {
+    background: var(--spore-cool);
+    font-size: 16px;
+    padding: 5px 13px;
+    border: 3px var(--spore-neutral) solid;
+    border-radius: 32px;
+    outline: none;
+}
+
+input:focus {
+    border-color: var(--spore-light-space);
+}
+
+input:invalid:focus {
+    border-color: #A42433;
+}
+
+button {
+    background: var(--spore-mid-space);
+    color: var(--spore-white);
+    font-family: var(--spore-font);
+    font-size: 18px;
+    padding: 5px 13px;
+    border: 3px transparent solid;
+    border-radius: 32px;
+    transition: 0.1s;
+}
+
+button:hover {
+    border-color: var(--spore-light-space);
+}
+
+button:active {
+    background: var(--spore-deep-space-gradient);
+}
+
+button:disabled {
+    color: var(--spore-neutral);
+}
+
+pre {
+    white-space: pre-wrap;
+}
diff --git a/docs/style/fonts/Spore-Light.ttf b/docs/style/fonts/Spore-Light.ttf
diff --git a/docs/style/fonts/Spore-Regular.ttf b/docs/style/fonts/Spore-Regular.ttf
diff --git a/docs/style/images/glyphic-bg-dark.png b/docs/style/images/glyphic-bg-dark.png
diff --git a/docs/style/images/glyphic-bg-light.png b/docs/style/images/glyphic-bg-light.png
diff --git a/docs/style/images/smfx.png b/docs/style/images/smfx.png
diff --git a/docs/style/images/spore-galaxy.svg b/docs/style/images/spore-galaxy.svg
diff --git a/docs/style/spore.css b/docs/style/spore.css
@@ -0,0 +1,71 @@
+/* Fonts */
+
+@font-face {
+    font-family: Spore-Regular;
+    src: url(fonts/Spore-Regular.ttf);
+}
+
+@font-face {
+    font-family: Spore-Light;
+    src: url(fonts/Spore-Light.ttf);
+}
+
+@font-face {
+    font-family: "Trebuchet EA";
+    src: url(fonts/trebucheteabold.ttf);
+}
+
+@font-face {
+    font-family: "Palatino Sans EA";
+    src: url(fonts/palatinosanseabold.ttf);
+}
+
+
+/* Global styles */
+
+:root {
+    /* Colors */
+    --spore-white: #FFF;
+    --spore-cool: #F0F1F4;
+    --spore-neutral: #939496;
+    --spore-deep-grey: #6D6E70;
+    --spore-light-space: #4E9DD8;
+    --spore-mid-space: #2361A7;
+    --spore-deep-space: #000112;
+    --spore-accent-green: #B1CD49;
+    --spore-accent-orange: #E0932F;
+    --spore-accent-purple: #CA0088;
+    /* Gradients */
+    --spore-text-gradient: linear-gradient(#F6F6F6, #CED1D4);
+    --spore-cool-gradient: linear-gradient(#FFFFFF, #E9EEF0);
+    --spore-glass-pane-gradient: linear-gradient(#FBFBFB, #E4F0F6);
+    --spore-space-gradient: linear-gradient(#4171B5, #5057A3, #272458);
+    --spore-deep-space-gradient: linear-gradient(#2070B8, #233164, #00000D);
+    --spore-accent-green-gradient: linear-gradient(#B1CD49, #004620);
+    --spore-accent-orange-gradient: linear-gradient(#E0932F, #A42433);
+    --spore-accent-purple-gradient: linear-gradient(#CA0088, #5B308D);
+    /* Fonts */
+    --spore-font: Spore-Regular, sans-serif;
+    --spore-light-font: Spore-Light, sans-serif;
+    --spore-heading-font: "Palatino Sans EA", sans-serif;
+    --spore-body-font: "Trebuchet EA", sans-serif;
+    /* Images */
+    --spore-glyphic-bg-light: url(images/glyphic-bg-light.png) var(--spore-cool);
+    --spore-glyphic-bg-dark: url(images/glyphic-bg-dark.png) var(--spore-deep-space);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --spore-text-color: #000;
+        --spore-glyphic-bg: var(--spore-glyphic-bg-light);
+        --spore-flat-bg: var(--spore-cool);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --spore-text-color: #fff;
+        --spore-glyphic-bg: var(--spore-glyphic-bg-dark);
+        --spore-flat-bg: var(--spore-deep-space);
+    }
+}
diff --git a/smfx-website/.gitignore b/smfx-website/.gitignore
diff --git a/smfx-website/404.html b/smfx-website/404.html
diff --git a/smfx-website/Gemfile b/smfx-website/Gemfile