init

Html/static/css/index.css

@@ -0,0 +1,162 @@
+
+        /* 左右两侧的页面内容 */
+        .sidebar {
+            background-color: #f0f0f0;
+            padding: 20px;
+            height: 100%;
+        }
+
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            margin: 0;
+        }
+        .chatbox {
+            flex-grow: 1;
+            padding: 20px;
+            height: 75%;
+            overflow-y: auto;
+            border: 1px solid #ccc;
+            background-color: #f9f9f9;
+        }
+
+        .chat-message {
+            max-width: 70%;
+            padding: 10px 15px;
+            border-radius: 20px;
+            margin-bottom: 10px;
+        }
+        .user-message {
+            background-color: #d1e7dd;
+            text-align: right;
+            margin-left: auto;
+        }
+        .server-message {
+            background-color: #f1f1f1;
+            text-align: left;
+            margin-right: auto;
+        }
+        textarea {
+            flex-grow: 1;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            resize: none;
+        }
+        button {
+            padding: 10px 20px;
+            margin-left: 10px;
+            background-color: #28a745;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        pre {
+            background-color: #eee;
+            padding: 10px;
+            border-radius: 4px;
+        }
+        code {
+            font-family: monospace;
+        }
+        /* 让父容器为flex布局 */
+        .maxcontainer {
+            display: flex;
+            flex-grow: 1;
+            height: 100%;
+            position: relative;
+        }
+        /* 中间的拖拽条 */
+        .resizer {
+            width: 5px;
+            background-color: #ccc;
+            cursor: ew-resize;
+            position: relative;
+        }
+        
+        .chatbox-header {
+            padding: 10px;
+            background-color: #f1f1f1;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid #ddd;
+        }
+
+
+        .input-area {
+            display: flex;
+            gap: 10px;
+            margin-top: 15px;
+            padding: 10px;
+            background-color: #f1f1f1;
+            border-top: 1px solid #ddd;
+        }
+
+        .slider-container, .language-toggle {
+            display: flex;
+            align-items: center;
+        }
+
+        .slider-container input[type="range"] {
+            width: 70%;
+            margin-left: 10px;
+        }
+
+        .btn-group-toggle .btn {
+            padding: 5px 10px;
+        }
+        #leftSidebar, .vscode-web, #rightSidebar {
+            height: 100vh;
+            overflow: auto;
+          }
+        
+        #dragbar, #dragbar2 {
+          background-color: #ccc;
+          cursor: col-resize;
+        }
+          /* 主容器，使用 grid 布局 */
+        #maxcontainer {
+            display: grid;
+            grid-template-columns: 1fr 5px 3fr 5px 1fr; /* 默认宽度比例 */
+            height: 100vh;
+        }
+        
+        /* 各区域基础样式 */
+        .sidebar {
+            overflow: auto; /* 确保内容可以滚动 */
+        }
+        
+        .vscode-web {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+        
+        .resizer {
+            background-color: #ccc;
+            cursor: col-resize;
+            width: 5px; /* 设置拖动条宽度 */
+        }
+                
+        .gutter {
+            background-color: #ccc; /* 分隔条颜色 */
+            cursor: col-resize;
+        }#container {
+            display: grid;
+            grid-template-columns: 1fr 5px 3fr 5px 1fr; /* 初始比例 */
+            height: 100vh;
+          }
+          
+          #leftSidebar, #vscodeWeb, #rightSidebar {
+            overflow: auto;
+          }
+          
+          #dragbar, #dragbar2 {
+            background-color: #ccc;
+            cursor: col-resize;
+          }
+