kibi/f0ckm
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

ff

Browse Source
This commit is contained in:
Kibi Kelburton
2026-05-22 20:44:02 +02:00
parent 71f292f243
commit 0450d9e2ed
1 changed files with 101 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
views/settings.html
View File

@@ -40,7 +40,8 @@
<div class="avatar-upload-actions">
<button type="button" id="avatar-upload-btn" class="button" disabled>{{ t('settings.upload_btn') }}</button>
@if(avatar_file)
<button type="button" id="avatar-remove-btn" class="button button-danger">{{ t('settings.remove_custom') }}</button>
<button type="button" id="avatar-remove-btn" class="button button-danger">{{ t('settings.remove_custom')
}}</button>
@endif
</div>
<div id="avatar-upload-status" class="avatar-status"></div>
@@ -54,14 +55,16 @@
maxlength="255">{!! session.description || '' !!}</textarea>
<div class="profile-settings-actions">
<button type="button" id="btn-save-description" class="button">{{ t('settings.save_description') }}</button>
<button type="button" id="btn-clear-description" class="button button-danger">{{ t('settings.clear') }}</button>
<button type="button" id="btn-clear-description" class="button button-danger">{{ t('settings.clear')
}}</button>
</div>
<div id="description-status" class="avatar-status"></div>
</div>
</div>
@endif
<div class="setting-item" style="margin-top: 20px;">
<label for="username_color_picker" style="display: block; margin-bottom: 5px;">{{ t('settings.username_color') }}</label>
<label for="username_color_picker" style="display: block; margin-bottom: 5px;">{{ t('settings.username_color')
}}</label>
<div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
<input type="color" id="username_color_picker" value="{{ session.username_color || '#ffffff' }}"
style="width: 50px; height: 30px; padding: 0; border: 1px solid var(--nav-border-color); cursor: pointer; background: none;">
@@ -79,7 +82,8 @@
<div class="preferences-settings-wrapper">
<fieldset
style="border: 1px solid var(--nav-border-color); padding: 10px; border-radius: 4px; margin-bottom: 15px;">
<legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{ t('settings.ui_section') }}</legend>
<legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{ t('settings.ui_section')
}}</legend>
<div class="setting-item" style="margin-bottom: 15px;">
<label for="show_motd_toggle" style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
<input type="checkbox" id="show_motd_toggle" @if(session.show_motd !==false) checked @endif>
@@ -97,7 +101,8 @@
<div class="setting-item" style="margin-top: 15px;">
<label for="alternative_infobox_toggle"
style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
<input type="checkbox" id="alternative_infobox_toggle" @if(session.use_alternative_infobox===true) checked @endif>
<input type="checkbox" id="alternative_infobox_toggle" @if(session.use_alternative_infobox===true) checked
@endif>
<span>{{ t('settings.alternative_infobox') }}</span>
</label>
<small class="text-muted" style="margin-left: 25px;">{{ t('settings.alternative_infobox_hint') }}</small>
@@ -115,7 +120,9 @@
<input type="checkbox" id="image_expand_toggle">
<span>{{ t('settings.image_expand_on_click') || 'Expand images inline on click' }}</span>
</label>
<small class="text-muted" style="margin-left: 25px;">{{ t('settings.image_expand_on_click_hint') || 'Instead of opening the scroll zoom modal, clicking an image will expand it to full size within the page.' }}</small>
<small class="text-muted" style="margin-left: 25px;">{{ t('settings.image_expand_on_click_hint') || 'Instead
of opening the scroll zoom modal, clicking an image will expand it to full size within the page.'
}}</small>
</div>
<div class="setting-item" style="margin-top: 15px;">
<label for="disable_autoplay_toggle"
@@ -149,7 +156,8 @@
<div class="setting-item" style="margin-top: 15px;">
<label for="embed_youtube_in_comments_toggle"
style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
<input type="checkbox" id="embed_youtube_in_comments_toggle" @if(session.embed_youtube_in_comments !==false) checked @endif>
<input type="checkbox" id="embed_youtube_in_comments_toggle" @if(session.embed_youtube_in_comments
!==false) checked @endif>
<span>{{ t('settings.embed_yt') }}</span>
</label>
<small class="text-muted" style="margin-left: 25px;">{{ t('settings.embed_yt_hint') }}</small>
@@ -165,7 +173,8 @@
@endif
@if(allow_language_change)
<div class="setting-item" style="margin-top: 15px;">
<label for="language_select" style="display: block; margin-bottom: 5px; font-weight: bold;">{{ t('settings.language') }}</label>
<label for="language_select" style="display: block; margin-bottom: 5px; font-weight: bold;">{{
t('settings.language') }}</label>
<select id="language_select" class="input" style="padding: 6px 10px; max-width: 220px;">
<option value="" @if(!session.language) selected @endif>{{ t('settings.language_default') }}</option>
<option value="en" @if(session.language==='en' ) selected @endif>{{ t('settings.language_en') }}</option>
@@ -179,10 +188,14 @@
@endif
<div class="setting-item" style="margin-top: 15px;">
<label for="comment_display_mode_select" style="display: block; margin-bottom: 5px; font-weight: bold;">{{ t('settings.comment_display_mode') }}</label>
<select id="comment_display_mode_select" class="input" style="padding: 6px 10px; max-width: 220px;" @if(session.force_comment_display_mode) disabled @endif>
<option value="0" @if(session.comment_display_mode==0) selected @endif>{{ t('settings.comment_display_tree') }}</option>
<option value="1" @if(session.comment_display_mode==1) selected @endif>{{ t('settings.comment_display_linear') }}</option>
<label for="comment_display_mode_select" style="display: block; margin-bottom: 5px; font-weight: bold;">{{
t('settings.comment_display_mode') }}</label>
<select id="comment_display_mode_select" class="input" style="padding: 6px 10px; max-width: 220px;"
@if(session.force_comment_display_mode) disabled @endif>
<option value="0" @if(session.comment_display_mode==0) selected @endif>{{
t('settings.comment_display_tree') }}</option>
<option value="1" @if(session.comment_display_mode==1) selected @endif>{{
t('settings.comment_display_linear') }}</option>
</select>
<br><small class="text-muted">
@if(session.force_comment_display_mode)
@@ -196,20 +209,25 @@
<fieldset
style="border: 1px solid var(--nav-border-color); padding: 10px; border-radius: 4px; margin-bottom: 15px;">
<legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{ t('settings.notifications_section') }}</legend>
<legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{
t('settings.notifications_section') }}</legend>
<div class="setting-item">
<label class="checkbox-container" style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
<input type="checkbox" id="chk-receive-system-notifications" @if(session.receive_system_notifications !==false) checked @endif>
<input type="checkbox" id="chk-receive-system-notifications" @if(session.receive_system_notifications
!==false) checked @endif>
<span>{{ t('settings.receive_system_notifications') }}</span>
</label>
<small class="text-muted" style="margin-left: 25px;">{{ t('settings.receive_system_notifications_hint') }}</small>
<small class="text-muted" style="margin-left: 25px;">{{ t('settings.receive_system_notifications_hint')
}}</small>
</div>
<div class="setting-item" style="margin-top: 15px;">
<label class="checkbox-container" style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
<input type="checkbox" id="chk-receive-user-notifications" @if(session.receive_user_notifications !==false) checked @endif>
<input type="checkbox" id="chk-receive-user-notifications" @if(session.receive_user_notifications
!==false) checked @endif>
<span>{{ t('settings.receive_user_notifications') }}</span>
</label>
<small class="text-muted" style="margin-left: 25px;">{{ t('settings.receive_user_notifications_hint') }}</small>
<small class="text-muted" style="margin-left: 25px;">{{ t('settings.receive_user_notifications_hint')
}}</small>
</div>
<div class="setting-item" style="margin-top: 15px;">
<label class="checkbox-container" style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
@@ -222,9 +240,11 @@
<fieldset
style="border: 1px solid var(--nav-border-color); padding: 10px; border-radius: 4px; margin-bottom: 15px;">
<legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{ t('settings.appearance_section') }}</legend>
<legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{
t('settings.appearance_section') }}</legend>
<div class="setting-item" style="margin-top: 20px;">
<label for="website_font_select" style="display: block; margin-bottom: 5px; font-weight: bold;">{{ t('settings.website_font') }}</label>
<label for="website_font_select" style="display: block; margin-bottom: 5px; font-weight: bold;">{{
t('settings.website_font') }}</label>
<div style="display: flex; align-items: center; gap: 10px;">
<select id="website_font_select" class="input" style="flex: 1; max-width: 300px;">
<option value="">{{ t('settings.font_default') }}</option>
@@ -235,7 +255,8 @@
</div>
</div>
<div class="setting-item" style="margin-top: 20px;">
<label for="website_theme_select" style="display: block; margin-bottom: 5px; font-weight: bold;">{{ t('settings.theme') }}</label>
<label for="website_theme_select" style="display: block; margin-bottom: 5px; font-weight: bold;">{{
t('settings.theme') }}</label>
<div style="display: flex; align-items: center; gap: 10px;">
<select id="website_theme_select" class="input" style="flex: 1; max-width: 300px;">
@each(themes as t)
@@ -249,12 +270,14 @@
@if(enable_swf)
<fieldset
style="border: 1px solid var(--nav-border-color); padding: 10px; border-radius: 4px; margin-bottom: 15px;">
<legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{ t('settings.flash_section') }}</legend>
<legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">{{
t('settings.flash_section') }}</legend>
<div class="setting-item">
<label for="ruffle_background_toggle"
style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
<input type="checkbox" id="ruffle_background_toggle" @if(session.ruffle_background !==false) checked @endif>
<input type="checkbox" id="ruffle_background_toggle" @if(session.ruffle_background !==false) checked
@endif>
<span>{{ t('settings.flash_bg') }}</span>
</label>
<small class="text-muted" style="margin-left: 25px;">{{ t('settings.flash_bg_hint') }}</small>
@@ -266,8 +289,10 @@
</div>
@if(enable_data_export)
<h2>{{ t('settings.export_data_title') || 'Export Data' }}</h2>
<div class="export-settings-wrapper" style="background: rgba(0,0,0,0.1); padding: 20px; border-radius: 4px; border: 1px solid var(--nav-border-color); margin-bottom: 30px;">
<p>{{ t('settings.export_data_desc') || 'Download a copy of your data. This process happens entirely in your browser to protect your privacy and save server resources.' }}</p>
<div class="export-settings-wrapper"
style="background: rgba(0,0,0,0.1); padding: 20px; border-radius: 4px; border: 1px solid var(--nav-border-color); margin-bottom: 30px;">
<p>{{ t('settings.export_data_desc') || 'Download a copy of your data. This process happens entirely in your
browser to protect your privacy and save server resources.' }}</p>
<div class="setting-item" style="margin-bottom: 15px;">
<label class="checkbox-container" style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
@@ -283,25 +308,27 @@
</div>
<div id="export-progress-container" style="display: none; margin-bottom: 20px;">
<div class="progress-bar-wrapper" style="height: 20px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; margin-bottom: 5px;">
<div id="export-progress-bar" style="height: 100%; width: 0%; background: var(--accent); transition: width 0.3s;"></div>
<div class="progress-bar-wrapper"
style="height: 20px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; margin-bottom: 5px;">
<div id="export-progress-bar"
style="height: 100%; width: 0%; background: var(--accent); transition: width 0.3s;"></div>
</div>
<div id="export-status-text"
style="font-size: 0.9em; color: var(--text-muted);"
<div id="export-status-text" style="font-size: 0.9em; color: var(--text-muted);"
data-fetching="{{ t('settings.export_fetching_data') }}"
data-processing="{{ t('settings.export_processing_files') }}"
data-generating="{{ t('settings.export_generating_zip') }}"
data-complete="{{ t('settings.export_complete') }}"
data-failed="{{ t('settings.export_failed') }}"
data-complete="{{ t('settings.export_complete') }}" data-failed="{{ t('settings.export_failed') }}"
data-select-option="{{ t('settings.export_select_option') }}"
data-no-data="{{ t('settings.export_no_data') }}"
data-failed-alert="{{ t('settings.export_failed_alert') }}"
data-domain="{{ site_domain }}"
><span id="export-status-msg">{{ t('settings.export_preparing') || 'Preparing...' }}</span><span class="export-dots" id="export-animated-dots" style="display:none;"><span>.</span><span>.</span><span>.</span></span></div>
data-failed-alert="{{ t('settings.export_failed_alert') }}" data-domain="{{ site_domain }}"><span
id="export-status-msg">{{ t('settings.export_preparing') || 'Preparing...' }}</span><span
class="export-dots" id="export-animated-dots"
style="display:none;"><span>.</span><span>.</span><span>.</span></span></div>
</div>
<button type="button" id="btn-start-export" class="button button-primary">
<i class="fa-solid fa-download" style="margin-right: 5px;"></i> {{ t('settings.start_export') || 'Generate Export (ZIP)' }}
<i class="fa-solid fa-download" style="margin-right: 5px;"></i> {{ t('settings.start_export') || 'Generate
Export (ZIP)' }}
</button>
</div>
@endif
@@ -313,7 +340,8 @@
style="margin-bottom: 30px; border-collapse: separate; border-spacing: 0 5px;">
<tbody>
<tr>
<td style="width: 150px; font-weight: bold; color: var(--text-muted); border: none;">{{ t('settings.user_id') }}</td>
<td style="width: 150px; font-weight: bold; color: var(--text-muted); border: none;">{{
t('settings.user_id') }}</td>
<td style="border: none;">{{ session.id }}</td>
</tr>
<tr>
@@ -337,7 +365,8 @@
</tr>
<tr>
<td style="font-weight: bold; color: var(--text-muted); border: none;">{{ t('settings.joined') }}</td>
<td style="border: none;">@if(joined){{ new Date(joined).toLocaleDateString() }}@else {{ t('settings.joined_unknown') }} @endif</td>
<td style="border: none;">@if(joined){{ new Date(joined).toLocaleDateString() }}@else {{
t('settings.joined_unknown') }} @endif</td>
</tr>
</tbody>
</table>
@@ -411,8 +440,7 @@
<div id="api-key-section" class="account-settings-wrapper"
style="background: rgba(0,0,0,0.1); padding: 20px; border-radius: 4px; border: 1px solid var(--nav-border-color); margin-bottom: 30px;">
<p style="color: var(--text-muted); margin-bottom: 15px;">
Use this key to upload files via external tools or scripts without a browser session.
The key grants <strong>upload access only</strong> to your account — it cannot be used for comments or any other action.
Use this key to upload files via external tools or scripts like ShareX for example.
</p>
<div id="api-key-status-box" style="margin-bottom: 15px;">
@@ -421,8 +449,10 @@
<!-- Shown only after regenerate — full key revealed once for copying -->
<div id="api-key-reveal" style="display:none; margin-bottom: 15px;">
<div style="background: rgba(0,180,100,0.12); border: 1px solid rgba(0,180,100,0.4); border-radius: 4px; padding: 14px;">
<strong style="display:block; margin-bottom: 6px;">&#9888; Copy your key now &mdash; it will not be shown again in full:</strong>
<div
style="background: rgba(0,180,100,0.12); border: 1px solid rgba(0,180,100,0.4); border-radius: 4px; padding: 14px;">
<strong style="display:block; margin-bottom: 6px;">&#9888; Copy your key now &mdash; it will not be shown
again in full:</strong>
<div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
<code id="api-key-full-display"
style="flex: 1; word-break: break-all; font-size: 0.85em; background: rgba(0,0,0,0.25); padding: 8px 10px; border-radius: 4px; user-select: all;"></code>
@@ -434,22 +464,40 @@
<div style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
<button type="button" id="btn-regen-api-key" class="button button-primary">Generate / Regenerate Key</button>
<button type="button" id="btn-revoke-api-key" class="button button-danger" style="display:none;">Revoke Key</button>
<button type="button" id="btn-revoke-api-key" class="button button-danger" style="display:none;">Revoke
Key</button>
</div>
<div id="api-key-action-status" class="avatar-status" style="margin-top: 10px;"></div>
</div>
<style>
@keyframes exportDotBounce {
0%, 80%, 100% { transform: translateY(0); opacity: 0.3; }
40% { transform: translateY(-5px); opacity: 1; }
0%,
80%,
100% {
transform: translateY(0);
opacity: 0.3;
}
40% {
transform: translateY(-5px);
opacity: 1;
}
}
.export-dots span {
display: inline-block;
animation: exportDotBounce 1.2s infinite ease-in-out;
}
.export-dots span:nth-child(2) { animation-delay: 0.2s; }
.export-dots span:nth-child(3) { animation-delay: 0.4s; }
.export-dots span:nth-child(2) {
animation-delay: 0.2s;
}
.export-dots span:nth-child(3) {
animation-delay: 0.4s;
}
</style>
<script src="/s/js/jszip.min.js"></script>
<script src="/s/js/settings.js?v=@mtime(/public/s/js/settings.js)"></script>