diff --git a/web/include/font.php b/web/include/font.php
new file mode 100644
index 00000000..4615147d
--- /dev/null
+++ b/web/include/font.php
@@ -0,0 +1,28 @@
+
diff --git a/web/include/lang.php b/web/include/lang.php
new file mode 100644
index 00000000..1cb27f26
--- /dev/null
+++ b/web/include/lang.php
@@ -0,0 +1,18 @@
+
diff --git a/web/include/style.php b/web/include/style.php
new file mode 100644
index 00000000..5fcecfff
--- /dev/null
+++ b/web/include/style.php
@@ -0,0 +1,250 @@
+
diff --git a/web/index.php b/web/index.php
deleted file mode 100644
index 49d94cbe..00000000
--- a/web/index.php
+++ /dev/null
@@ -1,529 +0,0 @@
-
-
-
-
-
- Syntax Highlightning for Textarea - adriancs
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-Python 代码转 PHP
-
-
- 风格:
-
- 字体:
-
- 字体尺寸:
-
- 编程语言:
-
- 行高 (%):
-
-
-
-
-
-
-
-
-
-
-
-
-快捷键
-
- -
-
Enter：换行，并保持与上一行相同的缩进
-
- -
-
Tab/Shift + Tab：增加/减少缩进（支持多行）
-
- -
-
Shift + Del 或 Shift + Backspace：删除整行
-
-
- -
-
Home：将光标移到文本中的第一个非空格字符之前
-
-
-
-
-
-
-
diff --git a/web/public/index.php b/web/public/index.php
new file mode 100644
index 00000000..2f25d884
--- /dev/null
+++ b/web/public/index.php
@@ -0,0 +1,162 @@
+
+
+
+
+
+ Convert Python code to PHP
+
+
+
+
+
+
+
+
+Python 代码转 PHP
+
+
+ 风格:
+
+ 字体:
+
+ 字体尺寸:
+
+ 编程语言:
+
+ 行高 (%):
+
+
+
+
+
+
+
+
+
+
+快捷键
+
+ -
+
Enter：换行，并保持与上一行相同的缩进
+
+ -
+
Tab/Shift + Tab：增加/减少缩进（支持多行）
+
+ -
+
Shift + Del 或 Shift + Backspace：删除整行
+
+
+ -
+
Home：将光标移到文本中的第一个非空格字符之前
+
+
+
+
+
+
+
diff --git a/web/public/static/css/style.css b/web/public/static/css/style.css
new file mode 100644
index 00000000..a60fd643
--- /dev/null
+++ b/web/public/static/css/style.css
@@ -0,0 +1,69 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
+
+#preCode code,
+textarea,
+#lineNumbers,
+.lineNumbers {
+ font-family: "Roboto Mono", monospace;
+ font-weight: 400;
+ font-size: 12pt;
+ line-height: 150%;
+}
+
+#divCodeWrapper {
+ height: calc(100vh - 200px);
+ max-height: 800px;
+ width: 1200px;
+ overflow: hidden;
+ border: 1px solid #a5a5a5;
+ position: relative;
+}
+
+#preCode {
+ height: 100%;
+ width: calc(100% - 50px);
+ position: absolute;
+ top: 0;
+ left: 50px;
+ overflow: hidden;
+ padding: 0;
+ margin: 0;
+ background: #1b1b1b;
+ border: none;
+}
+
+#preCode code {
+ padding: 15px;
+ height: calc(100% - 30px);
+ width: calc(100% - 30px);
+ overflow-y: scroll;
+ overflow-x: auto;
+}
+
+textarea {
+ position: absolute;
+ top: 0;
+ left: 50px;
+ height: calc(100% - 30px);
+ width: calc(100% - 80px);
+ padding: 15px;
+ z-index: 2;
+ overflow-x: auto;
+ overflow-y: scroll;
+ white-space: nowrap;
+ background-color: rgba(0, 0, 0, 0);
+ color: rgba(0, 0, 0, 0);
+ caret-color: white;
+ border: none;
+ outline: none;
+ border-left: 1px solid #383838;
+}
+
+#lineNumbers {
+ position: absolute;
+ text-align: right;
+ top: 0;
+ left: 0;
+ height: calc(100% - 50px);
+ overflow: hidden;
+}
diff --git a/web/codeEditorShortcutKeys.js b/web/public/static/js/codeEditorShortcutKeys.js
similarity index 100%
rename from web/codeEditorShortcutKeys.js
rename to web/public/static/js/codeEditorShortcutKeys.js