1
Fork 0
mirror of https://github.com/redstrate/Auracite.git synced 2025-04-23 13:17:45 +00:00
auracite/web/index.html

128 lines
5.3 KiB
HTML

<!doctype html>
<html lang="en-US">
<head>
<link rel="icon" href="auracite.ico" />
<meta charset="utf-8"/>
<title>Auracite</title>
<script type="module">
import init, {archive_character_base64} from "./pkg/auracite.js";
function archive() {
init().then(() => {
archive_character_base64(document.getElementById("name").value, document.getElementById("scales").checked).then((uri) => {
// Download character archive
var link = document.createElement('a');
link.download = document.getElementById("name").value + ".zip";
link.href = uri;
link.click();
document.getElementById("statusMessage").innerText = "Archive complete!";
}).catch((err) => {
document.getElementById("statusMessage").innerText = err;
});
});
}
document.querySelector('#downloadButton').addEventListener('click', archive);
</script>
<style>
body {
background-color: #2e3537;
margin: 0;
color: #d0cccc;
font-family: sans-serif;
}
a:link {
color: #b3d2f9;
}
a:visited {
color: #7495bf;
}
main {
width: 800px;
margin: auto;
}
#mainimg {
width: 100%;
height: 300px;
object-fit: none;
object-position: center;
}
#mainhero {
position: absolute;
top: 150px;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
input {
margin-top: 10px;
}
button {
margin-top: 10px;
}
summary {
font-weight: bold;
}
#statusMessage {
color: red;
}
</style>
</head>
<body>
<main>
<div style="text-align:center">
<img src="auracite.svg"/>
<h1>Auracite</h1>
</div>
<p>Auracite allows you to export your FFXIV character into portable, generic formats. Enter your character's name below, and optionally use the Dalamud plugin to export your character's data.</p>
<p>Not all data is saved yet, see <a href="https://github.com/redstrate/Auracite?tab=readme-ov-file#supported-data">this table</a> for what is currently supported.</p>
<label for="name">Character Name:</label>
<br>
<input type="text" id="name" name="name" required minlength="4" maxlength="20" size="20" autofocus/>
<br>
<input type="checkbox" id="scales" name="scales"/>
<label for="scales">Connect to Dalamud Plugin</label>
<br>
<button class="favorite styled" type="button" id="downloadButton">Archive</button>
<br>
<p id="statusMessage"></p>
<details>
<p>Auracite uses the <a href="https://na.finalfantasyxiv.com/lodestone">Lodestone</a> for collecting data about your character. However, we can't connect to the
Lodestone directly. It uses a proxy which injects CORS compliance and browser compatibility cookies.</p>
<p>The entire process happens locally, and does not give me any personally identifiable data about you. It only
collects what is already publicly available on the Lodestone, and optionally data from the game client.</p>
<summary>
How does this work?
</summary>
</details>
<details>
<p>Auracite can only collect as much data about your character as they make publicly available on the Lodestone.</p>
<p>To work around this, I created a Dalamud plugin to collect even more information. It's available in my <a href="https://github.com/redstrate/DalamudPlugins">personal
Dalamud plugin repository</a>.</p>
<p>The plugin needs to start a local HTTP server in order to communicate with Auracite. To prevent this from running
all the time, you must type <code>/auracite begin</code> before clicking the "Download" button. Once the process
is complete, the server is shutdown automatically. It's always safe to disable the plugin when you're not using
Auracite.</p>
<p>The website connects to your game client locally, and it does not use my server to proxy any data. No data leaves
your device.</p>
<summary>
What is the "Connect to Dalamud Plugin" option?
</summary>
</details>
<footer>
<p>Maintained by <a href="https://redstrate.com/">redstrate</a>. See the <a href="https://github.com/redstrate/Auracite">source code</a>.</p>
</footer>
</main>
</body>
</html>