mirror of
https://github.com/amiayweb/Hytale-F2P.git
synced 2026-02-26 07:41:45 -03:00
feat: create two columns for settings page
This commit is contained in:
Fazri Gading
131
GUI/index.html
131
GUI/index.html
@@ -304,6 +304,7 @@
|
||||
</div>
|
||||
|
||||
<div class="settings-content">
|
||||
<div class="settings-column">
|
||||
<div class="settings-section">
|
||||
<h3 class="settings-section-title">
|
||||
<i class="fas fa-gamepad"></i>
|
||||
@@ -405,8 +406,50 @@
|
||||
<div id="gpu-detection-info" class="gpu-detection-info"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h3 class="settings-section-title">
|
||||
<i class="fas fa-coffee"></i>
|
||||
<span data-i18n="settings.java">Java Runtime</span>
|
||||
</h3>
|
||||
|
||||
<div class="settings-option">
|
||||
<label class="settings-checkbox">
|
||||
<input type="checkbox" id="customJavaCheck" />
|
||||
<span class="checkmark"></span>
|
||||
<div class="checkbox-content">
|
||||
<div class="checkbox-title" data-i18n="settings.useCustomJava">Use
|
||||
Custom Java Path</div>
|
||||
<div class="checkbox-description" data-i18n="settings.javaDescription">
|
||||
Override the bundled Java runtime with
|
||||
your own installation</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="customJavaOptions" class="custom-java-options" style="display: none;">
|
||||
<div class="settings-input-group">
|
||||
<label class="settings-input-label" data-i18n="settings.javaPath">Java
|
||||
Executable Path</label>
|
||||
<div class="settings-input-with-button">
|
||||
<input type="text" id="customJavaPath" class="settings-input"
|
||||
data-i18n-placeholder="settings.javaPathPlaceholder" readonly />
|
||||
<button id="browseJavaBtn" class="settings-browse-btn">
|
||||
<i class="fas fa-folder-open"></i>
|
||||
<span data-i18n="settings.javaBrowse">Browse</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="settings-hint">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<span data-i18n="settings.javaHint">Select the Java installation folder
|
||||
(supports Windows, Mac, Linux)</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-column">
|
||||
<div class="settings-section">
|
||||
<h3 class="settings-section-title">
|
||||
<i class="fas fa-fingerprint"></i>
|
||||
@@ -451,28 +494,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h3 class="settings-section-title">
|
||||
<i class="fab fa-discord"></i>
|
||||
<span data-i18n="settings.discord">Discord Integration</span>
|
||||
</h3>
|
||||
|
||||
<div class="settings-option">
|
||||
<label class="settings-checkbox">
|
||||
<input type="checkbox" id="discordRPCCheck" checked />
|
||||
<span class="checkmark"></span>
|
||||
<div class="checkbox-content">
|
||||
<div class="checkbox-title" data-i18n="settings.enableRPC">Enable
|
||||
Discord Rich Presence</div>
|
||||
<div class="checkbox-description" data-i18n="settings.discordDescription">
|
||||
Show your launcher activity
|
||||
on Discord
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h3 class="settings-section-title">
|
||||
<i class="fas fa-window-close"></i>
|
||||
@@ -508,48 +529,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="settings-section">
|
||||
<h3 class="settings-section-title">
|
||||
<i class="fas fa-coffee"></i>
|
||||
<span data-i18n="settings.java">Java Runtime</span>
|
||||
</h3>
|
||||
|
||||
<div class="settings-option">
|
||||
<label class="settings-checkbox">
|
||||
<input type="checkbox" id="customJavaCheck" />
|
||||
<span class="checkmark"></span>
|
||||
<div class="checkbox-content">
|
||||
<div class="checkbox-title" data-i18n="settings.useCustomJava">Use
|
||||
Custom Java Path</div>
|
||||
<div class="checkbox-description" data-i18n="settings.javaDescription">
|
||||
Override the bundled Java runtime with
|
||||
your own installation</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="customJavaOptions" class="custom-java-options" style="display: none;">
|
||||
<div class="settings-input-group">
|
||||
<label class="settings-input-label" data-i18n="settings.javaPath">Java
|
||||
Executable Path</label>
|
||||
<div class="settings-input-with-button">
|
||||
<input type="text" id="customJavaPath" class="settings-input"
|
||||
data-i18n-placeholder="settings.javaPathPlaceholder" readonly />
|
||||
<button id="browseJavaBtn" class="settings-browse-btn">
|
||||
<i class="fas fa-folder-open"></i>
|
||||
<span data-i18n="settings.javaBrowse">Browse</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="settings-hint">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<span data-i18n="settings.javaHint">Select the Java installation folder
|
||||
(supports Windows, Mac, Linux)</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h3 class="settings-section-title">
|
||||
<i class="fas fa-language"></i>
|
||||
@@ -566,6 +545,30 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h3 class="settings-section-title">
|
||||
<i class="fab fa-discord"></i>
|
||||
<span data-i18n="settings.discord">Discord Integration</span>
|
||||
</h3>
|
||||
|
||||
<div class="settings-option">
|
||||
<label class="settings-checkbox">
|
||||
<input type="checkbox" id="discordRPCCheck" checked />
|
||||
<span class="checkmark"></span>
|
||||
<div class="checkbox-content">
|
||||
<div class="checkbox-title" data-i18n="settings.enableRPC">Enable
|
||||
Discord Rich Presence</div>
|
||||
<div class="checkbox-description" data-i18n="settings.discordDescription">
|
||||
Show your launcher activity
|
||||
on Discord
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1398,6 +1398,26 @@ body {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.settings-content {
|
||||
max-width: 1000px;
|
||||
flex-direction: row;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-column {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.setting-group {
|
||||
@@ -4466,6 +4486,12 @@ body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.settings-container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
@@ -4495,6 +4521,11 @@ body {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.settings-content .settings-section,
|
||||
.settings-column .settings-section {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.settings-section:hover {
|
||||
border-color: rgba(147, 51, 234, 0.3);
|
||||
box-shadow: 0 8px 32px rgba(147, 51, 234, 0.1);
|
||||
|
||||
Reference in New Issue
Block a user