Projet final V9

This commit is contained in:
Flatlogic Bot 2026-02-19 16:15:51 +00:00
parent e988030fc8
commit 224fc0227c
2 changed files with 77 additions and 25 deletions

View File

@ -39,6 +39,7 @@
[data-theme="light"] .bg-dark {
background-color: #ebedef !important;
border: 1px solid #dbdee1 !important;
}
[data-theme="light"] .text-white {
@ -60,12 +61,23 @@
color: #313338 !important;
}
[data-theme="light"] .nav-link.text-white {
[data-theme="light"] .nav-link.text-white,
[data-theme="light"] .settings-nav-sidebar .nav-link {
color: #313338 !important;
}
[data-theme="light"] .nav-link.text-white.active {
[data-theme="light"] .nav-link.text-white.active,
[data-theme="light"] .settings-nav-sidebar .nav-link.active {
color: var(--blurple) !important;
background-color: #e3e5e8 !important;
}
[data-theme="dark"] .settings-nav-sidebar .nav-link {
color: #dbdee1;
}
[data-theme="dark"] .settings-nav-sidebar .nav-link.active {
background-color: #3f4147;
}
[data-theme="light"] .btn-outline-secondary {
@ -177,6 +189,46 @@
border: 1px solid #dbdee1;
}
.settings-nav-sidebar {
background-color: #2b2d31;
}
.settings-section-bg {
background-color: #232428;
}
.settings-inner-bg {
background-color: #1e1f22;
}
[data-theme="light"] .settings-nav-sidebar {
background-color: #f2f3f5;
}
[data-theme="light"] .settings-section-bg {
background-color: #ebedef;
}
[data-theme="light"] .settings-inner-bg {
background-color: #ffffff;
}
.settings-footer-bg {
background-color: #2b2d31;
}
.settings-cancel-btn {
color: white;
}
[data-theme="light"] .settings-footer-bg {
background-color: #f2f3f5;
}
[data-theme="light"] .settings-cancel-btn {
color: #5c5e66;
}
[data-theme="light"] .modal-content {
background-color: #ffffff;
color: #313338;

View File

@ -1197,30 +1197,30 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<!-- User Settings Modal -->
<div class="modal fade" id="userSettingsModal" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content border-0 shadow-lg" style="background-color: #313338; min-height: 500px;">
<div class="modal-content border-0 shadow-lg" style="min-height: 500px;">
<div class="modal-header border-0 pb-0">
<h5 class="modal-title fw-bold">User Settings</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body p-0">
<div class="d-flex flex-row h-100" style="min-height: 450px;">
<!-- Settings Sidebar -->
<div class="settings-nav-sidebar p-3 border-end border-secondary" style="width: 200px; background-color: #2b2d31;">
<div class="settings-nav-sidebar p-3 border-end border-secondary" style="width: 200px;">
<ul class="nav flex-column nav-pills" id="userSettingsTabs" role="tablist">
<li class="nav-item mb-1">
<button class="nav-link active w-100 text-start text-white border-0 py-2 px-3" data-bs-toggle="pill" data-bs-target="#settings-profile" type="button">My Profile</button>
<button class="nav-link active w-100 text-start border-0 py-2 px-3" data-bs-toggle="pill" data-bs-target="#settings-profile" type="button">My Profile</button>
</li>
<li class="nav-item mb-1">
<button class="nav-link w-100 text-start text-white border-0 py-2 px-3" data-bs-toggle="pill" data-bs-target="#settings-appearance" type="button">Appearance</button>
<button class="nav-link w-100 text-start border-0 py-2 px-3" data-bs-toggle="pill" data-bs-target="#settings-appearance" type="button">Appearance</button>
</li>
<li class="nav-item mb-1">
<button class="nav-link w-100 text-start text-white border-0 py-2 px-3" data-bs-toggle="pill" data-bs-target="#settings-voice" type="button">Voice & Video</button>
<button class="nav-link w-100 text-start border-0 py-2 px-3" data-bs-toggle="pill" data-bs-target="#settings-voice" type="button">Voice & Video</button>
</li>
<li class="nav-item mb-1">
<button class="nav-link w-100 text-start text-white border-0 py-2 px-3" data-bs-toggle="pill" data-bs-target="#settings-whispers" type="button" onclick="loadWhisperSettings()">Whispers (TeamSpeak Style)</button>
<button class="nav-link w-100 text-start border-0 py-2 px-3" data-bs-toggle="pill" data-bs-target="#settings-whispers" type="button" onclick="loadWhisperSettings()">Whispers (TeamSpeak Style)</button>
</li>
<li class="nav-item mb-1">
<button class="nav-link w-100 text-start text-white border-0 py-2 px-3" data-bs-toggle="pill" data-bs-target="#settings-notifications" type="button">Notifications</button>
<button class="nav-link w-100 text-start border-0 py-2 px-3" data-bs-toggle="pill" data-bs-target="#settings-notifications" type="button">Notifications</button>
</li>
</ul>
</div>
@ -1232,7 +1232,7 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<!-- Profile Tab -->
<div class="tab-pane fade show active" id="settings-profile" role="tabpanel">
<h5 class="mb-4 fw-bold text-uppercase" style="font-size: 0.8em; color: var(--text-muted);">User Profile</h5>
<div class="row align-items-center mb-4 p-3 rounded" style="background-color: #232428;">
<div class="row align-items-center mb-4 p-3 rounded settings-section-bg">
<div class="col-md-3 text-center">
<div class="message-avatar mx-auto mb-2" id="settings-avatar-preview" style="width: 80px; height: 80px; <?php echo $user['avatar_url'] ? "background-image: url('{$user['avatar_url']}');" : ""; ?>"></div>
<input type="hidden" name="avatar_url" id="settings-avatar-url" value="<?php echo htmlspecialchars($user['avatar_url'] ?? ''); ?>">
@ -1251,7 +1251,7 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<input type="text" id="avatar-search-query" class="form-control bg-dark border-0 text-white" placeholder="e.g. cat, abstract, gamer">
<button class="btn btn-primary px-3" type="button" id="search-avatar-btn">Search</button>
</div>
<div id="avatar-results" class="d-flex flex-wrap gap-2 overflow-auto p-2 rounded" style="max-height: 180px; background-color: #1e1f22;">
<div id="avatar-results" class="d-flex flex-wrap gap-2 overflow-auto p-2 rounded settings-inner-bg" style="max-height: 180px;">
<div class="w-100 text-center text-muted py-3 small">Search for images to change your avatar.</div>
</div>
</div>
@ -1311,20 +1311,20 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<div class="col-md-6">
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" name="voice_echo_cancellation" id="echo-cancellation-switch" value="1" <?php echo ($user['voice_echo_cancellation'] ?? 1) ? 'checked' : ''; ?>>
<label class="form-check-label text-white" for="echo-cancellation-switch">Echo Cancellation</label>
<label class="form-check-label" for="echo-cancellation-switch">Echo Cancellation</label>
</div>
<div class="form-text text-muted small mb-3">Reduces echo from your speakers being picked up by your mic.</div>
</div>
<div class="col-md-6">
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" name="voice_noise_suppression" id="noise-suppression-switch" value="1" <?php echo ($user['voice_noise_suppression'] ?? 1) ? 'checked' : ''; ?>>
<label class="form-check-label text-white" for="noise-suppression-switch">Noise Suppression</label>
<label class="form-check-label" for="noise-suppression-switch">Noise Suppression</label>
</div>
<div class="form-text text-muted small mb-3">Filters out background noise like fans or keyboard clicks.</div>
</div>
</div>
<div class="p-3 rounded mb-4" style="background-color: #232428;">
<div class="p-3 rounded mb-4 settings-section-bg">
<label class="form-label text-uppercase fw-bold mb-3" style="font-size: 0.7em; color: var(--text-muted);">Input Mode</label>
<div class="d-flex gap-3 mb-4">
<div class="form-check custom-radio-card flex-grow-1">
@ -1345,7 +1345,7 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<div id="ptt-settings-container" style="<?php echo ($user['voice_mode'] ?? 'vox') == 'ptt' ? '' : 'display: none;'; ?>">
<div class="mb-3">
<label class="form-label small text-white fw-bold">Shortcut Key</label>
<label class="form-label small fw-bold">Shortcut Key</label>
<input type="text" name="voice_ptt_key" id="voice_ptt_key_input" class="form-control bg-dark text-white border-0" value="<?php echo htmlspecialchars($user['voice_ptt_key'] ?? 'v'); ?>" placeholder="Click and press a key..." readonly style="cursor: pointer; caret-color: transparent;">
<div class="form-text text-muted" style="font-size: 0.8em;">Click the box and press any key to set your PTT shortcut.</div>
</div>
@ -1353,8 +1353,8 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<div id="vox-settings-container" style="<?php echo ($user['voice_mode'] ?? 'vox') == 'vox' ? '' : 'display: none;'; ?>">
<div class="mb-3">
<label class="form-label small text-white fw-bold">Input Sensitivity</label>
<div class="voice-meter-container mb-2" style="height: 8px; background: #1e1f22; border-radius: 4px; overflow: hidden; position: relative;">
<label class="form-label small fw-bold">Input Sensitivity</label>
<div class="voice-meter-container mb-2" style="height: 8px; background: var(--bg-servers); border-radius: 4px; overflow: hidden; position: relative;">
<div id="voice-meter-bar" style="height: 100%; width: 0%; background: #23a559; transition: width 0.1s;"></div>
<div id="voice-meter-threshold" style="position: absolute; top: 0; bottom: 0; width: 2px; background: #f23f43; z-index: 2;"></div>
</div>
@ -1382,7 +1382,7 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<div class="tab-pane fade" id="settings-whispers" role="tabpanel">
<h5 class="mb-4 fw-bold text-uppercase" style="font-size: 0.8em; color: var(--text-muted);">Whisper Configurations</h5>
<div class="p-3 rounded mb-4" style="background-color: #232428;">
<div class="p-3 rounded mb-4 settings-section-bg">
<p class="small text-muted mb-3">Whisper allows you to talk to specific users or entire channels regardless of which channel you are currently in. This only works in Push-to-Talk mode for the whisper itself.</p>
<div id="whisper-list" class="mb-4">
@ -1392,7 +1392,7 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<hr class="border-secondary my-4">
<h6 class="text-white small fw-bold mb-3">Add New Whisper</h6>
<h6 class="small fw-bold mb-3">Add New Whisper</h6>
<div class="row g-2">
<div class="col-md-4">
<label class="form-label small text-muted">Target Type</label>
@ -1431,15 +1431,15 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<!-- Notifications Tab -->
<div class="tab-pane fade" id="settings-notifications" role="tabpanel">
<h5 class="mb-4 fw-bold text-uppercase" style="font-size: 0.8em; color: var(--text-muted);">Notifications</h5>
<div class="p-3 rounded" style="background-color: #232428;">
<div class="p-3 rounded settings-section-bg">
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" name="dnd_mode" id="dnd-switch" value="1" <?php echo ($user['dnd_mode'] ?? 0) ? 'checked' : ''; ?>>
<label class="form-check-label text-white" for="dnd-switch">Do Not Disturb</label>
<label class="form-check-label" for="dnd-switch">Do Not Disturb</label>
<div class="form-text text-muted" style="font-size: 0.8em;">Mute all desktop notifications.</div>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="sound_notifications" id="sound-switch" value="1" <?php echo ($user['sound_notifications'] ?? 0) ? 'checked' : ''; ?>>
<label class="form-check-label text-white" for="sound-switch">Sound Notifications</label>
<label class="form-check-label" for="sound-switch">Sound Notifications</label>
<div class="form-text text-muted" style="font-size: 0.8em;">Play a sound when you are mentioned.</div>
</div>
</div>
@ -1449,8 +1449,8 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
</div>
</div>
</div>
<div class="modal-footer border-0" style="background-color: #2b2d31;">
<button type="button" class="btn btn-link text-white text-decoration-none" data-bs-dismiss="modal">Cancel</button>
<div class="modal-footer border-0 settings-footer-bg">
<button type="button" class="btn btn-link text-decoration-none settings-cancel-btn" data-bs-dismiss="modal">Cancel</button>
<button type="button" onclick="handleSaveUserSettings(this)" class="btn btn-primary" style="background-color: var(--blurple); border: none; padding: 10px 32px; font-weight: 600;">Save Changes</button>
</div>
</div>