an-anime-game-launcher/public/html/settings.html
Observer KRypt0n_ cd49a5938e
Added directory-selector component
Made prefix folder selection design
2021-11-28 22:07:08 +02:00

271 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS styles -->
<link rel="stylesheet" href="../css/components.css">
<link rel="stylesheet" href="../css/settings.css">
<link rel="stylesheet" href="../css/hint.min.css">
<!-- JS scripts -->
<script>require('../js/lib/components.js');</script>
<script>require('../js/settings.js');</script>
<title i18id="SettingsTitle">Settings</title>
</head>
<body theme="light">
<div class="menu">
<div class="menu-item menu-item-active" anchor="general" i18id="General">General</div>
<div class="menu-item" anchor="enhancements" i18id="Enhancements">Enhancements</div>
<div class="menu-item" anchor="runners" i18id="WineVersion">Wine version</div>
<div class="menu-item" anchor="dxvks" i18id="DXVK">DXVK</div>
<div class="menu-item" anchor="shaders" i18id="Shaders">Shaders</div>
<div class="menu-item" anchor="environment" i18id="Environment">Environment</div>
<div class="menu-item" anchor="statistics" i18id="Statistics">Statistics</div>
</div>
<div class="settings">
<div class="settings-item" id="general">
<h2 i18id="General">General</h2>
<div class="select" id="language">
<span i18id="Language">Language</span>
<div class="select-options">
<ul>
<li value="en-us">English (US)</li>
<li value="zh-cn">中文(简化)(Chinese Simplified)</li>
<li value="de-de">Deutsch (German)</li>
<li value="fr-fr">Français (French)</li>
<li value="id-id">Indonesia (Indonesian)</li>
<li value="ja-jp">日本語 (Japanese)</li>
<li value="ko-kr">한국어 (Korean)</li>
<li value="pt-pt">Português (Portuguese)</li>
<li value="ru-ru">Pусский (Russian)</li>
<li value="es-es">Español (Spanish)</li>
<li value="th-th">ภาษาไทย (Thai)</li>
<li value="zh-tw">中文(繁體)(Chinese Traditional)</li>
<li value="vi-vn">Tiếng Việt (Vietnamese)</li>
</ul>
</div>
<div class="selected-item">
<span>English (US)</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 330.002 330.002" xml:space="preserve"><path d="M233.252,155.997L120.752,6.001c-4.972-6.628-14.372-7.97-21-3c-6.628,4.971-7.971,14.373-3,21 l105.75,140.997L96.752,306.001c-4.971,6.627-3.627,16.03,3,21c2.698,2.024,5.856,3.001,8.988,3.001 c4.561,0,9.065-2.072,12.012-6.001l112.5-150.004C237.252,168.664,237.252,161.33,233.252,155.997z"/></svg>
</div>
</div>
<br>
<div class="select" id="voicepack">
<span i18id="Voice">Voice Pack</span>
<div class="select-options">
<ul>
<li value="en-us">English (US)</li>
<li value="zh-cn">汉语 (Chinese)</li>
<li value="ja-jp">日本語 (Japanese)</li>
<li value="ko-kr">한국어 (Korean)</li>
</ul>
</div>
<div class="selected-item hint--top hint--medium">
<span>English (US)</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 330.002 330.002" xml:space="preserve"><path d="M233.252,155.997L120.752,6.001c-4.972-6.628-14.372-7.97-21-3c-6.628,4.971-7.971,14.373-3,21 l105.75,140.997L96.752,306.001c-4.971,6.627-3.627,16.03,3,21c2.698,2.024,5.856,3.001,8.988,3.001 c4.561,0,9.065-2.072,12.012-6.001l112.5-150.004C237.252,168.664,237.252,161.33,233.252,155.997z"/></svg>
</div>
</div>
<br>
<div class="select" id="gpu">
<span>GPU</span>
<div class="select-options">
<ul>
<li value="default">Default</li>
</ul>
</div>
<div class="selected-item">
<span>Default</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 330.002 330.002" xml:space="preserve"><path d="M233.252,155.997L120.752,6.001c-4.972-6.628-14.372-7.97-21-3c-6.628,4.971-7.971,14.373-3,21 l105.75,140.997L96.752,306.001c-4.971,6.627-3.627,16.03,3,21c2.698,2.024,5.856,3.001,8.988,3.001 c4.561,0,9.065-2.072,12.012-6.001l112.5-150.004C237.252,168.664,237.252,161.33,233.252,155.997z"/></svg>
</div>
</div>
<br>
<div class="select" id="theme">
<span i18id="Theme">Theme</span>
<div class="select-options">
<ul>
<li value="light" i18id="Light">Light</li>
<li value="dark" i18id="Dark">Dark</li>
<li value="system" i18id="System">System</li>
</ul>
</div>
<div class="selected-item">
<span>System</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 330.002 330.002" xml:space="preserve"><path d="M233.252,155.997L120.752,6.001c-4.972-6.628-14.372-7.97-21-3c-6.628,4.971-7.971,14.373-3,21 l105.75,140.997L96.752,306.001c-4.971,6.627-3.627,16.03,3,21c2.698,2.024,5.856,3.001,8.988,3.001 c4.561,0,9.065-2.072,12.012-6.001l112.5-150.004C237.252,168.664,237.252,161.33,233.252,155.997z"/></svg>
</div>
</div>
<br>
<div class="checkbox" id="discord-rpc">
Discord RPC
<div class="checkbox-mark">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
</div>
</div>
<br><br>
<div class="directory-selector" id="prefix">
<span>Prefix</span>
<input readonly>
<div>
<button class="button hint--top hint--small" data-hint="Select dir" id="choose-location">
<svg width="21px" height="21px" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 4)"><path d="m.5 1.5v9c0 1.1045695.8954305 2 2 2h10c1.1045695 0 2-.8954305 2-2v-6.00280762c.0007656-1.05436179-.8150774-1.91816512-1.8499357-1.99451426l-.1500643-.00468356-5 .00200544-2-2h-4c-.55228475 0-1 .44771525-1 1z"/><path d="m.5 2.5h7"/></g></svg>
</button>
<button class="button hint--top hint--small" data-hint="Reset dir" id="reset-location">
<svg width="15px" height="15px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.85355 2.14645C5.04882 2.34171 5.04882 2.65829 4.85355 2.85355L3.70711 4H9C11.4853 4 13.5 6.01472 13.5 8.5C13.5 10.9853 11.4853 13 9 13H5C4.72386 13 4.5 12.7761 4.5 12.5C4.5 12.2239 4.72386 12 5 12H9C10.933 12 12.5 10.433 12.5 8.5C12.5 6.567 10.933 5 9 5H3.70711L4.85355 6.14645C5.04882 6.34171 5.04882 6.65829 4.85355 6.85355C4.65829 7.04882 4.34171 7.04882 4.14645 6.85355L2.14645 4.85355C1.95118 4.65829 1.95118 4.34171 2.14645 4.14645L4.14645 2.14645C4.34171 1.95118 4.65829 1.95118 4.85355 2.14645Z" fill="currentColor"/></svg>
</button>
</div>
</div>
<br><br>
<div id="general-action-buttons">
<button class="button" id="launcher-folder">launcher folder</button>
<button class="button" id="winetricks">winetricks</button>
<button class="button" id="winecfg">winecfg</button>
</div>
<br>
</div>
<div class="settings-item" id="enhancements">
<h2 i18id="Enhancements">Enhancements</h2>
<div class="select" id="hud">
<span>HUD</span>
<div class="select-options">
<ul>
<li value="none">None</li>
<li value="dxvk">DXVK</li>
<li value="mangohud">MangoHud</li>
</ul>
</div>
<div class="selected-item">
<span>None</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 330.002 330.002" xml:space="preserve"><path d="M233.252,155.997L120.752,6.001c-4.972-6.628-14.372-7.97-21-3c-6.628,4.971-7.971,14.373-3,21 l105.75,140.997L96.752,306.001c-4.971,6.627-3.627,16.03,3,21c2.698,2.024,5.856,3.001,8.988,3.001 c4.561,0,9.065-2.072,12.012-6.001l112.5-150.004C237.252,168.664,237.252,161.33,233.252,155.997z"/></svg>
</div>
</div>
<br>
<div class="checkbox" id="gamemode">
GameMode
<div class="checkbox-mark">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
</div>
</div>
<br>
<div class="checkbox" id="autodelete-dxvk-logs">
<span i18id="AutoDeleteDXVKLogs">Auto-delete DXVK logs</span>
<div class="checkbox-mark">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
</div>
</div>
<br>
</div>
<div class="settings-item" id="runners">
<h2 i18id="WineVersion">Wine version</h2>
<div class="list" id="runners-list"></div>
</div>
<div class="settings-item" id="dxvks">
<h2>DXVK</h2>
<div class="list" id="dxvk-list"></div>
</div>
<div class="settings-item" id="shaders">
<h2 i18id="Shaders">Shaders</h2>
<div class="select" id="shaders-list">
<span i18id="Shaders">Shaders</span>
<div class="select-options">
<ul>
<li value="none">None</li>
</ul>
</div>
<div class="selected-item hint--top hint--small">
<span>None</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 330.002 330.002" xml:space="preserve"><path d="M233.252,155.997L120.752,6.001c-4.972-6.628-14.372-7.97-21-3c-6.628,4.971-7.971,14.373-3,21 l105.75,140.997L96.752,306.001c-4.971,6.627-3.627,16.03,3,21c2.698,2.024,5.856,3.001,8.988,3.001 c4.561,0,9.065-2.072,12.012-6.001l112.5-150.004C237.252,168.664,237.252,161.33,233.252,155.997z"/></svg>
</div>
</div>
<br>
</div>
<div class="settings-item" id="environment">
<h2 i18id="EnvironmentalVariables">Environmental variables</h2>
<div class="properties-list" id="env-list">
<table>
<tr>
<th i18id="Name">Name</th>
<th i18id="Value">Value</th>
</tr>
</table>
<div class="properties-list-buttons">
<button class="button" id="add" i18id="Add">Add</button>
<button class="button" id="delete" i18id="Delete">Delete</button>
</div>
</div>
</div>
<div class="settings-item" id="statistics">
<h2 i18id="Statistics">Statistics</h2>
<div>
<span i18id="YouPlayedFor">You've played for</span>
<span id="play-hours"></span>
<span i18id="hours">hours</span>
<span id="play-minutes"></span>
<span i18id="minutes">minutes</span>
</div>
</div>
</div>
</body>
</html>