Improve text input styling and behavior to match book design theme. Changes include: 1. Update input styling to span full width with subtle bottom border. 2. Add custom blinking cursor with terminal-like behavior. 3. Implement auto-focus functionality for better UX. 4. Reset cursor position after command submission.

2025-04-01 11:11:10 +00:00
parent 1882acac8c
commit 5cb31a65d9
3 changed files with 161 additions and 47 deletions
@@ -33,8 +33,10 @@
                </div>
                
                <div id="command_input">
-                    <input type="text" id="player_input" placeholder="Enter your command..." autofocus>
-                    <button id="submit_command">Submit</button>
+                    <div class="input-wrapper">
+                        <input type="text" id="player_input" placeholder="Enter your command..." autofocus>
+                        <span id="cursor"></span>
+                    </div>
                </div>    
              </div>
              <div class="l10n-remark" id="remark"><i><sup>*</sup>click on page or press spacebar to fast forward text animation</i></div>