<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="./styles/generator.css">

<title data-i18n="title">NMS Glyph Generator</title>

<meta property="og:type" content="website">

<meta property="og:title" content="NMS Glyph Generator">

<meta property="og:description" content="Generate and share your No Man's Sky glyphs quickly and easily.">

<meta property="og:image" content="https://nmscd.com/assets/img/NMSGlyphRandomizer.png">

<meta property="og:url" content="https://nmscd.com/NMSGlyphRandomizer/">

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:title" content="NMS Glyph Generator">

<meta name="twitter:description" content="Generate and share your No Man's Sky glyphs quickly and easily.">

<meta name="twitter:image" content="https://nmscd.com/assets/img/NMSGlyphRandomizer.png">

<script src="https://unpkg.com/i18next/dist/umd/i18next.js"></script>

<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>

<script src="https://unpkg.com/jquery-i18next/jquery-i18next.min.js"></script>

<script src="./JS/glyphgeneratorV3.js" type="module"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">

<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

<a href="https://nmscd.com/" target="_blank" rel="noopener noreferrer">

<img src="https://wiki.nmscd.com/assets/images/webp/shared/nmscdbannerwhite.webp" alt="Logo NMS" class="logo">

</a>

<div class="language-selector">

<select id="lang" onchange="changeLanguage()">

Options will be populated by JavaScript

</select>

</div>

<div class="container">

<h1 data-i18n="header">Generador de Glifos NMS</h1>

<div id="progressBarContainer" class="progress-bar-container" style="display: none;">

<div class="progress-bar-header">

<span data-i18n="loadingData">Loading data...</span>

<span id="progressPercentage">0%</span>

</div>

<div class="progress-bar">

<div id="progressBarFill" class="progress-bar-fill"></div>

</div>

<div class="progress-bar-info">

<span id="progressInfo">0 / 0</span>

<span id="timeEstimate"></span>

</div>

</div>

<div class="region-selection">

<!-- <h3 data-i18n="regionSelection">Region Selection</h3> -->

<div class="region-group">

<div class="region-field">

<label for="galaxySelect" data-i18n="galaxy">Galaxy</label>

<select id="galaxySelect" onchange="onGalaxyChange(this)">

<option value="" data-i18n="loadingGalaxies">Loading galaxies...</option>

</select>

</div>

<div class="region-field">

<label for="civilizationSelect" data-i18n="civilization">Civilization</label>

<select id="civilizationSelect" onchange="onCivilizationChange(this)" disabled>

<option value="" data-i18n="selectGalaxyFirst">Select a galaxy first</option>

</select>

</div>

<div class="region-field">

<label for="regionSelect" data-i18n="region">Region</label>

<select id="regionSelect" onchange="onRegionChange(this)" disabled>

<option value="" data-i18n="selectGalaxyFirst">Select a galaxy first</option>

</select>

</div>

</div>

</div>

<div class="input-group">

<label for="regionInput" data-i18n="glyphinput">Introduce glifos (12):</label>

<input type="text" id="regionInput" maxlength="12" oninput="glyphInputOnChange(this)" placeholder="Opcional">

</div>

<div class="button-group">

<button id="generateButton" class="primary" onclick="displayRandomGlyphs()" data-i18n="button">Generar

Glifos</button>

<button id="copyButton" onclick="copyToClipboard()" disabled data-i18n="copyButton">Copiar Código</button>

</div>

<div class="glyph-output" id="glyphOutputContainer">

<div id="glyphOutput" class="glyph-display"></div>

<div id="glyphOutputHex" class="glyph-hex"></div>

</div>

</div>

const validPortalKeys = '0123456789ABCDEF';

function glyphInputOnChange(input) {

let newValue = input.value.toUpperCase();

input.value = validateGlyphInput(newValue);

}

function validateGlyphInput(glyphString) {

const formattedString = glyphString

.split('')

.filter(char => validPortalKeys.includes(char))

.join('');

return formattedString.substring(0, 12);

}