addet vimpage

2025-04-18 20:09:03 +02:00 · 2025-04-18 20:09:03 +02:00 · 595c4e1fea
commit 595c4e1fea
parent 7a15a56b36
1 changed files with 95 additions and 0 deletions
--- a/html/vimpage.html
+++ b/html/vimpage.html
@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Vim-style Dark Editor</title>
+    
+    <!-- Required dependencies -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
+    
+    <style>
+        /* Dark theme customization */
+        :root {
+            --bg-color: #1a1a1a;
+            --text-color: #f8f8f2;
+            --gutter-bg: #2a2a2a;
+            --gutter-border: #3a3a3a;
+        }
+
+        body {
+            margin: 0;
+            background: var(--bg-color);
+            height: 100vh;
+            display: flex;
+        }
+
+        .editor-container {
+            flex: 1;
+            position: relative;
+            font-family: 'FiraCode Nerd Font', monospace;
+        }
+
+        /* CodeMirror custom overrides */
+        .CodeMirror {
+            height: 100vh !important;
+            font-family: 'FiraCode Nerd Font', monospace;
+            font-size: 14px;
+            letter-spacing: 0.5px;
+        }
+
+        .CodeMirror-gutters {
+            background-color: var(--gutter-bg) !important;
+            border-right: 1px solid var(--gutter-border) !important;
+        }
+
+        /* Nerd Fonts fallback */
+        @font-face {
+            font-family: 'FiraCode Nerd Font';
+            src: url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@master/patched-fonts/FiraCode/Regular/complete/Fira%20Code%20Regular%20Nerd%20Font%20Complete.ttf');
+        }
+    </style>
+</head>
+<body>
+    <div class="editor-container">
+        <textarea id="editor"></textarea>
+    </div>
+
+    <!-- CodeMirror and dependencies -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/meta.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/keymap/vim.js"></script>
+    
+    <!-- Syntax modes -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/python/python.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js"></script>
+
+    <script>
+        // Initialize editor
+        const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
+            lineNumbers: true,
+            theme: 'monokai',
+            keyMap: 'vim',
+            mode: 'javascript',
+            showCursorWhenSelecting: true,
+            autofocus: true,
+            matchBrackets: true,
+            autoCloseBrackets: true,
+            lineWiseCopyCut: true,
+            extraKeys: {
+                'Ctrl-S': function(cm) {
+                    alert('Save implemented here');
+                }
+            }
+        });
+
+        // Auto-detect content type
+        editor.on('change', (cm) => {
+            const mode = CodeMirror.findModeByMIME(cm.getMode().name);
+            console.log('Current mode:', mode ? mode.name : 'plain');
+        });
+    </script>
+</body>
+</html>