diff --git a/public/index.html b/public/index.html index 3c04f4e6b..1f1557c03 100644 --- a/public/index.html +++ b/public/index.html @@ -1094,6 +1094,10 @@ + +
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index cd4d6baa3..285785e6c 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -50,6 +50,8 @@ let power_user = { italics_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeEmColor').trim()}`, fastui_bg_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeFastUIBGColor').trim()}`, blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBlurTintColor').trim()}`, + + waifuMode: false, }; const storage_keys = { @@ -73,6 +75,8 @@ const storage_keys = { fastui_bg_color: "TavernAI_fastui_bg_color", blur_tint_color: "TavernAI_blur_tint_color", blur_strength: "TavernAI_blur_strength", + + waifuMode: "TavernAI_waifuMode", }; const chat = document.getElementById('chat'); @@ -108,6 +112,12 @@ function switchUiMode() { $("#send_form").toggleClass("no-blur-sendtextarea", power_user.fast_ui_mode); } +function switchWaifuMode() { + const waifuMode = localStorage.getItem(storage_keys.waifuMode); + power_user.waifuMode = waifuMode === null ? true : waifuMode == "true"; + $("body").toggleClass("waifuMode", power_user.waifuMode); +} + function applyAvatarStyle() { power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND); $("body").toggleClass("big-avatars", power_user.avatar_style === avatar_styles.RECTANGULAR); @@ -204,6 +214,7 @@ applySheldWidth(); applyFontScale(); applyBlurStrength(); applyThemeColor(); +switchWaifuMode() // TODO delete in next release function loadFromLocalStorage() { @@ -229,7 +240,9 @@ function loadPowerUserSettings(settings) { // These are still local storage const fastUi = localStorage.getItem(storage_keys.fast_ui_mode); + const waifuMode = localStorage.getItem(storage_keys.waifuMode); power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true"; + power_user.waifuMode = waifuMode === null ? true : waifuMode == "true"; power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND); power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT); power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? sheld_width.DEFAULT); @@ -245,6 +258,7 @@ function loadPowerUserSettings(settings) { $("#always-force-name2-checkbox").prop("checked", power_user.always_force_name2); $("#custom_chat_separator").val(power_user.custom_chat_separator); $("#fast_ui_mode").prop("checked", power_user.fast_ui_mode); + $("#waifuMode").prop("checked", power_user.waifuMode); $("#multigen").prop("checked", power_user.multigen); $("#play_message_sound").prop("checked", power_user.play_message_sound); $("#play_sound_unfocused").prop("checked", power_user.play_sound_unfocused); @@ -338,6 +352,12 @@ $(document).ready(() => { switchUiMode(); }); + $("#waifuMode").change(function () { + power_user.waifuMode = $(this).prop("checked"); + localStorage.setItem(storage_keys.waifuMode, power_user.waifuMode); + switchWaifuMode(); + }); + $(`input[name="avatar_style"]`).on('input', function (e) { power_user.avatar_style = Number(e.target.value); localStorage.setItem(storage_keys.avatar_style, power_user.avatar_style); diff --git a/public/style.css b/public/style.css index deded3e39..a6b6bc35c 100644 --- a/public/style.css +++ b/public/style.css @@ -3224,6 +3224,7 @@ toolcool-color-picker { #world_popup, #send_form { border: 1px solid var(--grey30); + backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2)); } #chat { @@ -3255,6 +3256,7 @@ toolcool-color-picker { border-bottom: 1px solid var(--grey30); border-radius: 0 0 20px 20px; top: 40px; + backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2)); } #right-nav-panel h4 { @@ -3365,6 +3367,51 @@ body.no-blur #select_chat_popup { background-color: var(--SmartThemeFastUIBGColor) !important; } +/* wAIfu mode*/ + +body.waifuMode .expression-holder { + max-height: 90vh; + max-width: unset; + width: 100%; + position: fixed; + left: 0; + right: 0; + bottom: 100px; + padding-left: 10px; + padding-right: 10px; + text-align: center; + filter: drop-shadow(2px 2px 2px #51515199); + transition: 500ms; + z-index: 1; +} + +body.waifuMode img.expression { + height: 70vh; + max-width: 100%; + max-height: 90vh; + vertical-align: bottom; +} + +body.waifuMode #sheld { + display: grid; + grid-template-rows: 30vh min-content; + height: calc(100svh - 42px); + overflow-x: hidden; + max-width: 800px; + position: absolute; + left: 0; + right: 0; + /* bottom: 0; */ + top: 41px; + margin: 0 auto; + z-index: 2; + align-content: end; +} + +body.waifuMode #chat { + flex-direction: column-reverse; +} + /*this part only only applies to iOS devices*/ @supports (-webkit-touch-callout: none) { body { @@ -3403,7 +3450,7 @@ body.no-blur #select_chat_popup { max-width: unset; min-height: unset; max-height: unset; - + backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2)); left: 0; right: 0; top: 0;