1
Fork 0
mirror of https://github.com/redstrate/Auracite.git synced 2025-04-20 03:37:47 +00:00

Add icon, update website

This commit is contained in:
Joshua Goins 2024-11-01 19:46:48 -04:00
parent 06fd0f2c03
commit 50f23fe8ea
5 changed files with 172 additions and 66 deletions

View file

@ -1,66 +0,0 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Auracite</title>
</head>
<body>
<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
window.location.replace(uri);
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>
<h1>Auracite</h1>
<p>This tool allows you to export your FFXIV character into portable, generic formats.</p>
<details>
<p>Auracite uses the Lodestone for collecting data about your character. We use a proxy and that's unfortunately necessary, due to CORS compliance and Lodestone doing annoying browser compatibility checks we need to inject cookies for.</p>
<p>The entire process happens locally, and does not give me any personally identifiable data about you. We only collect what is already publicly available on the Lodestone.</p>
<summary>
How does this work?
</summary>
</details>
<details>
<p>Here is the list of requests we make to the Lodestone:</p>
<p>It makes <strong>one request</strong> to search for your character by it's name.</p>
<p>It makes <strong>one request</strong> to request your character's main page. The other pages are not yet considered.</p>
<p>It makes <strong>two requests</strong> to download images. This is currently your avatar and the full body portrait images.</p>
<summary>
What kind of requests does Auracite make?
</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 personal Dalamud plugin repository.</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>
<label for="name">Character Name:</label>
<input type="text" id="name" name="name" required minlength="4" maxlength="20" size="20" />
<input type="checkbox" id="scales" name="scales" />
<label for="scales">Connect to Dalamud Plugin</label>
<button class="favorite styled" type="button" id="downloadButton">Download</button>
<a href="https://github.com/redstrate/Auracite">Source Code</a>
<p id="statusMessage"></p>
</body>
</html>

BIN
web/auracite.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

21
web/auracite.svg Normal file
View file

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="56mm" height="56mm" version="1.1" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="linearGradient3" x1="18.796" x2="37.027" y1="28.548" y2="28.548" gradientTransform="rotate(25 27.93 27.996)" gradientUnits="userSpaceOnUse">
<stop stop-color="#d2d2d2" offset="0"/>
<stop stop-color="#fff" offset=".20101"/>
<stop stop-color="#fff" offset=".80997"/>
<stop stop-color="#d2d2d2" offset="1"/>
</linearGradient>
</defs>
<g stroke-width=".52917">
<path d="m26.407 9.65 16.523 7.7048c-5.6719 9.934-10.331 19.925-13.976 29.972l-16.523-7.7048c5.6834-9.5128 10.342-19.503 13.976-29.972z" fill="url(#linearGradient3)" stroke="#f0f0f0"/>
<g fill="#6c6c6c" stroke="#303030">
<path d="m24.496 8.7589 11.07-1.644 3.2043 1.5493 6.26 9.592-4.0648 3.032-0.20957-3.3878-4.1963-3.5161-3.4504 2.6698-0.28722-4.4127-5.5813-0.80934-2.6991 1.5388z"/>
<path d="m35.336 5.4129 3.9418-1.8462 1.2782 5.0601-2.0102 1.0243-3.2043-1.5493c-1.3234-2.5626-0.0055-2.6888-0.0055-2.6888z"/>
<path d="m15.148 48.353 1.2201 3.9905 4.5759-2.0119-0.56109-2.0834-3.245-1.462c-2.7606 0.51949-1.9898 1.5668-1.9898 1.5668z"/>
<path d="m10.903 37.555 5.9049 9.4328 3.2462 1.4596 11.324-1.2681-0.32527-4.9874-2.7065 1.9668-5.3797-0.97826-0.20321-4.2939-3.5344 2.551-4.2204-3.7279-0.57608-3.0139z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

130
web/index.html Normal file
View file

@ -0,0 +1,130 @@
<!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
window.location.replace(uri);
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>
<p><strong>Only characters from the North American data centers are supported at the moment.</strong></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>

21
zone.xiv.auracite.svg Normal file
View file

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="56mm" height="56mm" version="1.1" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="linearGradient3" x1="18.796" x2="37.027" y1="28.548" y2="28.548" gradientTransform="rotate(25 27.93 27.996)" gradientUnits="userSpaceOnUse">
<stop stop-color="#d2d2d2" offset="0"/>
<stop stop-color="#fff" offset=".20101"/>
<stop stop-color="#fff" offset=".80997"/>
<stop stop-color="#d2d2d2" offset="1"/>
</linearGradient>
</defs>
<g stroke-width=".52917">
<path d="m26.407 9.65 16.523 7.7048c-5.6719 9.934-10.331 19.925-13.976 29.972l-16.523-7.7048c5.6834-9.5128 10.342-19.503 13.976-29.972z" fill="url(#linearGradient3)" stroke="#f0f0f0"/>
<g fill="#6c6c6c" stroke="#303030">
<path d="m24.496 8.7589 11.07-1.644 3.2043 1.5493 6.26 9.592-4.0648 3.032-0.20957-3.3878-4.1963-3.5161-3.4504 2.6698-0.28722-4.4127-5.5813-0.80934-2.6991 1.5388z"/>
<path d="m35.336 5.4129 3.9418-1.8462 1.2782 5.0601-2.0102 1.0243-3.2043-1.5493c-1.3234-2.5626-0.0055-2.6888-0.0055-2.6888z"/>
<path d="m15.148 48.353 1.2201 3.9905 4.5759-2.0119-0.56109-2.0834-3.245-1.462c-2.7606 0.51949-1.9898 1.5668-1.9898 1.5668z"/>
<path d="m10.903 37.555 5.9049 9.4328 3.2462 1.4596 11.324-1.2681-0.32527-4.9874-2.7065 1.9668-5.3797-0.97826-0.20321-4.2939-3.5344 2.551-4.2204-3.7279-0.57608-3.0139z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB