Spaces:
Paused
Paused
| <html> | |
| <head> | |
| <script type="module"> | |
| import { store } from "/components/modals/full-screen-input/full-screen-store.js"; | |
| </script> | |
| </head> | |
| <body> | |
| <div x-data> | |
| <template x-if="$store.fullScreenInputModal"> | |
| <div id="fullScreenInputModal" x-data> | |
| <template x-teleport="body"> | |
| <div x-show="$store.fullScreenInputModal.isOpen" class="modal-overlay" | |
| @click.self="$store.fullScreenInputModal.handleClose()" | |
| @keydown.escape.window="$store.fullScreenInputModal.isOpen && $store.fullScreenInputModal.handleClose()" | |
| x-transition> | |
| <div class="modal-container full-screen-input-modal"> | |
| <div class="modal-content"> | |
| <button class="modal-close" @click="$store.fullScreenInputModal.handleClose()">×</button> | |
| <div class="editor-toolbar"> | |
| <div class="toolbar-group"> | |
| <button class="toolbar-button" @click="$store.fullScreenInputModal.undo()" :disabled="!$store.fullScreenInputModal.canUndo" title="Undo (Ctrl+Z)"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M3 7v6h6"></path> | |
| <path d="M21 17a9 9 0 00-9-9 9 9 0 00-6 2.3L3 13"></path> | |
| </svg> | |
| </button> | |
| <button class="toolbar-button" @click="$store.fullScreenInputModal.redo()" :disabled="!$store.fullScreenInputModal.canRedo" title="Redo (Ctrl+Shift+Z)"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M21 7v6h-6"></path> | |
| <path d="M3 17a9 9 0 019-9 9 9 0 016 2.3l3 2.7"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="toolbar-group"> | |
| <button class="toolbar-button" @click="$store.fullScreenInputModal.clearText()" title="Clear Text"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path> | |
| <line x1="10" y1="11" x2="10" y2="17"></line> | |
| <line x1="14" y1="11" x2="14" y2="17"></line> | |
| </svg> | |
| </button> | |
| <button class="toolbar-button" @click="$store.fullScreenInputModal.toggleWrap()" :class="{ active: $store.fullScreenInputModal.wordWrap }" title="Toggle Word Wrap"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M3 6h18M3 12h15l3 3-3 3M3 18h18"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <textarea id="full-screen-input" x-model="$store.fullScreenInputModal.inputText" | |
| placeholder="Type your message here..." | |
| @keydown.ctrl.enter="$store.fullScreenInputModal.handleClose()" | |
| @keydown.ctrl.z.prevent="$store.fullScreenInputModal.undo()" | |
| @keydown.ctrl.shift.z.prevent="$store.fullScreenInputModal.redo()" | |
| :style="{ 'white-space': $store.fullScreenInputModal.wordWrap ? 'pre-wrap' : 'pre' }" | |
| @input="$store.fullScreenInputModal.updateHistory()"></textarea> | |
| </div> | |
| <div class="modal-footer"> | |
| <div id="buttons-container"> | |
| <button class="btn btn-ok" @click="$store.fullScreenInputModal.handleClose()">Done (Ctrl+Enter)</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| </div> | |
| </template> | |
| </div> | |
| <style> | |
| /* Full Screen Input Modal Styles */ | |
| .full-screen-input-modal { | |
| width: 90%; | |
| max-width: 800px; | |
| max-height: 80vh; | |
| position: relative; | |
| padding: 0; | |
| background-color: rgb(20, 20, 20, 0.96); | |
| border: 1.5px solid var(--color-border); | |
| } | |
| .full-screen-input-modal .modal-content { | |
| height: calc(80vh); | |
| padding: 0; | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| .full-screen-input-modal .modal-footer { | |
| background: transparent; | |
| max-height: 50px; | |
| } | |
| #full-screen-input { | |
| width: 100%; | |
| height: calc(100% - 50px); | |
| border: none; | |
| background-color: transparent; | |
| color: var(--color-text); | |
| font-family: "Roboto Mono", monospace; | |
| font-optical-sizing: auto; | |
| font-size: 0.955rem; | |
| padding: 1.2rem 1rem; | |
| resize: none; | |
| outline: none; | |
| } | |
| .light-mode .full-screen-input-modal { | |
| background-color: rgb(220, 220, 220, 0.86); | |
| } | |
| .full-screen-input-modal .modal-footer { | |
| padding: 1rem 0; | |
| border-top: none; | |
| background: transparent; | |
| } | |
| .full-screen-input-modal h2 { | |
| margin: 0; | |
| padding: 0; | |
| font-size: 1.1rem; | |
| color: var(--color-text); | |
| opacity: 0.8; | |
| } | |
| .full-screen-input-modal .modal-close { | |
| position: absolute; | |
| top: 1.2rem; | |
| right: 1rem; | |
| font-size: 1.5rem; | |
| padding: 0 0.5rem; | |
| line-height: 0.8; | |
| } | |
| .full-screen-input-modal .btn-ok { | |
| margin-right: 1rem; | |
| } | |
| #full-screen-input::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| #full-screen-input::-webkit-scrollbar-track { | |
| background: transparent; | |
| margin: 14px; | |
| border-radius: 6px; | |
| } | |
| #full-screen-input::-webkit-scrollbar-thumb { | |
| background-color: rgba(155, 155, 155, 0.5); | |
| border-radius: 6px; | |
| -webkit-transition: background-color 0.2s ease; | |
| transition: background-color 0.2s ease; | |
| } | |
| #full-screen-input::-webkit-scrollbar-thumb:hover { | |
| background-color: rgba(155, 155, 155, 0.7); | |
| } | |
| </style> | |
| </body> | |
| </html> | |