commit b148a8a181737313229842f01fbb1c835538dac0
Author: wood <wood@czl.net>
Date:   Thu Aug 10 01:58:07 2023 +0800

    update

diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..42a78bd
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 wood chen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..05b77a0
--- /dev/null
+++ b/README.md
@@ -0,0 +1,33 @@
+# ChatGPT-Tailwind
+
+基于openai接口，Tailwind CSS + DaisyUI开发的用于chatgpt单页面应用，超轻超快，可以来回问答
+
+可以自定义修改模型参数，不过请求方式都是openai接口
+
+*练手页面，有问题请进群反馈*
+
+Telegram交流群：https://t.me/ai_cn2023
+
+
+## 例子
+
+![1691602575992.png](https://cdn-img.czl.net/2023/08/10/64d3cea9db3be.png)
+
+![1691602613726.png](https://cdn-img.czl.net/2023/08/10/64d3cecf903b7.png)
+
+
+## 使用方法
+
+1. 直接访问右侧域名,在页面中填入自己的代理地址、key、选择模型，发送消息即可。
+2. 如果无法访问，可自行下载index.html，本地打开即可。
+
+## 优点
+
+1. 左右布局，看起来更美观
+2. 单页面应用，访问速度快
+3. 现代化UI
+
+
+# 广告
+- [CZLChat](https://chat.czl.net)，稳定商业版AI服务。
+- [CZLOapi](https://oapi.czl.net)，AI接口代理服务，无需翻墙。
diff --git a/css.css b/css.css
new file mode 100644
index 0000000..d909805
--- /dev/null
+++ b/css.css
@@ -0,0 +1,655 @@
+.prose{
+    color: var(--tw-prose-body);
+    /* max-width: 65ch; */
+  }
+  
+  .prose :where([class~="lead"]):not(:where([class~="not-prose"] *)){
+    color: var(--tw-prose-lead);
+    font-size: 1.25em;
+    line-height: 1.6;
+    margin-top: 1.2em;
+    margin-bottom: 1.2em
+  }
+  
+  .prose :where(a):not(:where([class~="not-prose"] *)){
+    color: var(--tw-prose-links);
+    text-decoration: underline;
+    font-weight: 500
+  }
+  
+  .prose :where(strong):not(:where([class~="not-prose"] *)){
+    color: var(--tw-prose-bold);
+    font-weight: 600
+  }
+  
+  .prose :where(ol):not(:where([class~="not-prose"] *)){
+    list-style-type: decimal;
+    padding-left: 1.625em
+  }
+  
+  .prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)){
+    list-style-type: upper-alpha
+  }
+  
+  .prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)){
+    list-style-type: lower-alpha
+  }
+  
+  .prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)){
+    list-style-type: upper-alpha
+  }
+  
+  .prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)){
+    list-style-type: lower-alpha
+  }
+  
+  .prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)){
+    list-style-type: upper-roman
+  }
+  
+  .prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)){
+    list-style-type: lower-roman
+  }
+  
+  .prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)){
+    list-style-type: upper-roman
+  }
+  
+  .prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)){
+    list-style-type: lower-roman
+  }
+  
+  .prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)){
+    list-style-type: decimal
+  }
+  
+  .prose :where(ul):not(:where([class~="not-prose"] *)){
+    list-style-type: disc;
+    padding-left: 1.625em
+  }
+  
+  .prose :where(ol > li):not(:where([class~="not-prose"] *))::marker{
+    font-weight: 400;
+    color: var(--tw-prose-counters)
+  }
+  
+  .prose :where(ul > li):not(:where([class~="not-prose"] *))::marker{
+    color: var(--tw-prose-bullets)
+  }
+  
+  .prose :where(hr):not(:where([class~="not-prose"] *)){
+    border-color: var(--tw-prose-hr);
+    border-top-width: 1px;
+    margin-top: 3em;
+    margin-bottom: 3em
+  }
+  
+  .prose :where(blockquote):not(:where([class~="not-prose"] *)){
+    font-weight: 500;
+    font-style: italic;
+    color: var(--tw-prose-quotes);
+    border-left-width: 0.25rem;
+    border-left-color: var(--tw-prose-quote-borders);
+    quotes: "\201C""\201D""\2018""\2019";
+    margin-top: 1.6em;
+    margin-bottom: 1.6em;
+    padding-left: 1em
+  }
+  
+  .prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before{
+    content: open-quote
+  }
+  
+  .prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after{
+    content: close-quote
+  }
+  
+  .prose :where(h1):not(:where([class~="not-prose"] *)){
+    color: var(--tw-prose-headings);
+    font-weight: 800;
+    font-size: 2.25em;
+    margin-top: 0;
+    margin-bottom: 0.8888889em;
+    line-height: 1.1111111
+  }
+  
+  .prose :where(h1 strong):not(:where([class~="not-prose"] *)){
+    font-weight: 900
+  }
+  
+  .prose :where(h2):not(:where([class~="not-prose"] *)){
+    color: var(--tw-prose-headings);
+    font-weight: 700;
+    font-size: 1.5em;
+    margin-top: 2em;
+    margin-bottom: 1em;
+    line-height: 1.3333333
+  }
+  
+  .prose :where(h2 strong):not(:where([class~="not-prose"] *)){
+    font-weight: 800
+  }
+  
+  .prose :where(h3):not(:where([class~="not-prose"] *)){
+    color: var(--tw-prose-headings);
+    font-weight: 600;
+    font-size: 1.25em;
+    margin-top: 1.6em;
+    margin-bottom: 0.6em;
+    line-height: 1.6
+  }
+  
+  .prose :where(h3 strong):not(:where([class~="not-prose"] *)){
+    font-weight: 700
+  }
+  
+  .prose :where(h4):not(:where([class~="not-prose"] *)){
+    color: var(--tw-prose-headings);
+    font-weight: 600;
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    line-height: 1.5
+  }
+  
+  .prose :where(h4 strong):not(:where([class~="not-prose"] *)){
+    font-weight: 700
+  }
+  
+  .prose :where(figure > *):not(:where([class~="not-prose"] *)){
+    margin-top: 0;
+    margin-bottom: 0
+  }
+  
+  .prose :where(figcaption):not(:where([class~="not-prose"] *)){
+    color: var(--tw-prose-captions);
+    font-size: 0.875em;
+    line-height: 1.4285714;
+    margin-top: 0.8571429em
+  }
+  
+  .prose :where(code):not(:where([class~="not-prose"] *)){
+    color: var(--tw-prose-code);
+    font-weight: 600;
+    font-size: 0.875em
+  }
+  
+  .prose :where(code):not(:where([class~="not-prose"] *))::before{
+    content: "`"
+  }
+  
+  .prose :where(code):not(:where([class~="not-prose"] *))::after{
+    content: "`"
+  }
+  
+  .prose :where(a code):not(:where([class~="not-prose"] *)){
+    color: var(--tw-prose-links)
+  }
+  
+  .prose :where(pre):not(:where([class~="not-prose"] *)){
+    color: var(--tw-prose-pre-code);
+    background-color: var(--tw-prose-pre-bg);
+    overflow-x: auto;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.7142857;
+    margin-top: 1.7142857em;
+    margin-bottom: 1.7142857em;
+    border-radius: 0.375rem;
+    padding-top: 0.8571429em;
+    padding-right: 1.1428571em;
+    padding-bottom: 0.8571429em;
+    padding-left: 1.1428571em
+  }
+  
+  .prose :where(pre code):not(:where([class~="not-prose"] *)){
+    background-color: transparent;
+    border-width: 0;
+    border-radius: 0;
+    padding: 0;
+    font-weight: inherit;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    line-height: inherit
+  }
+  
+  .prose :where(pre code):not(:where([class~="not-prose"] *))::before{
+    content: none
+  }
+  
+  .prose :where(pre code):not(:where([class~="not-prose"] *))::after{
+    content: none
+  }
+  
+  .prose :where(table):not(:where([class~="not-prose"] *)){
+    width: 100%;
+    table-layout: auto;
+    text-align: left;
+    margin-top: 2em;
+    margin-bottom: 2em;
+    font-size: 0.875em;
+    line-height: 1.7142857
+  }
+  
+  .prose :where(thead):not(:where([class~="not-prose"] *)){
+    border-bottom-width: 1px;
+    border-bottom-color: var(--tw-prose-th-borders)
+  }
+  
+  .prose :where(thead th):not(:where([class~="not-prose"] *)){
+    color: var(--tw-prose-headings);
+    font-weight: 600;
+    vertical-align: bottom;
+    padding-right: 0.5714286em;
+    padding-bottom: 0.5714286em;
+    padding-left: 0.5714286em
+  }
+  
+  .prose :where(tbody tr):not(:where([class~="not-prose"] *)){
+    border-bottom-width: 1px;
+    border-bottom-color: var(--tw-prose-td-borders)
+  }
+  
+  .prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)){
+    border-bottom-width: 0
+  }
+  
+  .prose :where(tbody td):not(:where([class~="not-prose"] *)){
+    vertical-align: baseline;
+    padding-top: 0.5714286em;
+    padding-right: 0.5714286em;
+    padding-bottom: 0.5714286em;
+    padding-left: 0.5714286em
+  }
+  
+  .prose{
+    --tw-prose-body: #374151;
+    --tw-prose-headings: #111827;
+    --tw-prose-lead: #4b5563;
+    --tw-prose-links: #111827;
+    --tw-prose-bold: #111827;
+    --tw-prose-counters: #6b7280;
+    --tw-prose-bullets: #d1d5db;
+    --tw-prose-hr: #e5e7eb;
+    --tw-prose-quotes: #111827;
+    --tw-prose-quote-borders: #e5e7eb;
+    --tw-prose-captions: #6b7280;
+    --tw-prose-code: #111827;
+    --tw-prose-pre-code: #e5e7eb;
+    --tw-prose-pre-bg: #1f2937;
+    --tw-prose-th-borders: #d1d5db;
+    --tw-prose-td-borders: #e5e7eb;
+    --tw-prose-invert-body: #d1d5db;
+    --tw-prose-invert-headings: #fff;
+    --tw-prose-invert-lead: #9ca3af;
+    --tw-prose-invert-links: #fff;
+    --tw-prose-invert-bold: #fff;
+    --tw-prose-invert-counters: #9ca3af;
+    --tw-prose-invert-bullets: #4b5563;
+    --tw-prose-invert-hr: #374151;
+    --tw-prose-invert-quotes: #f3f4f6;
+    --tw-prose-invert-quote-borders: #374151;
+    --tw-prose-invert-captions: #9ca3af;
+    --tw-prose-invert-code: #fff;
+    --tw-prose-invert-pre-code: #d1d5db;
+    --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+    --tw-prose-invert-th-borders: #4b5563;
+    --tw-prose-invert-td-borders: #374151;
+    font-size: 1rem;
+    line-height: 1.75
+  }
+  
+  .prose :where(p):not(:where([class~="not-prose"] *)){
+    margin-top: 1.25em;
+    margin-bottom: 1.25em
+  }
+  
+  .prose :where(img):not(:where([class~="not-prose"] *)){
+    margin-top: 2em;
+    margin-bottom: 2em
+  }
+  
+  .prose :where(video):not(:where([class~="not-prose"] *)){
+    margin-top: 2em;
+    margin-bottom: 2em
+  }
+  
+  .prose :where(figure):not(:where([class~="not-prose"] *)){
+    margin-top: 2em;
+    margin-bottom: 2em
+  }
+  
+  .prose :where(h2 code):not(:where([class~="not-prose"] *)){
+    font-size: 0.875em
+  }
+  
+  .prose :where(h3 code):not(:where([class~="not-prose"] *)){
+    font-size: 0.9em
+  }
+  
+  .prose :where(li):not(:where([class~="not-prose"] *)){
+    margin-top: 0.5em;
+    margin-bottom: 0.5em
+  }
+  
+  .prose :where(ol > li):not(:where([class~="not-prose"] *)){
+    padding-left: 0.375em
+  }
+  
+  .prose :where(ul > li):not(:where([class~="not-prose"] *)){
+    padding-left: 0.375em
+  }
+  
+  .prose > :where(ul > li p):not(:where([class~="not-prose"] *)){
+    margin-top: 0.75em;
+    margin-bottom: 0.75em
+  }
+  
+  .prose > :where(ul > li > *:first-child):not(:where([class~="not-prose"] *)){
+    margin-top: 1.25em
+  }
+  
+  .prose > :where(ul > li > *:last-child):not(:where([class~="not-prose"] *)){
+    margin-bottom: 1.25em
+  }
+  
+  .prose > :where(ol > li > *:first-child):not(:where([class~="not-prose"] *)){
+    margin-top: 1.25em
+  }
+  
+  .prose > :where(ol > li > *:last-child):not(:where([class~="not-prose"] *)){
+    margin-bottom: 1.25em
+  }
+  
+  .prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)){
+    margin-top: 0.75em;
+    margin-bottom: 0.75em
+  }
+  
+  .prose :where(hr + *):not(:where([class~="not-prose"] *)){
+    margin-top: 0
+  }
+  
+  .prose :where(h2 + *):not(:where([class~="not-prose"] *)){
+    margin-top: 0
+  }
+  
+  .prose :where(h3 + *):not(:where([class~="not-prose"] *)){
+    margin-top: 0
+  }
+  
+  .prose :where(h4 + *):not(:where([class~="not-prose"] *)){
+    margin-top: 0
+  }
+  
+  .prose :where(thead th:first-child):not(:where([class~="not-prose"] *)){
+    padding-left: 0
+  }
+  
+  .prose :where(thead th:last-child):not(:where([class~="not-prose"] *)){
+    padding-right: 0
+  }
+  
+  .prose :where(tbody td:first-child):not(:where([class~="not-prose"] *)){
+    padding-left: 0
+  }
+  
+  .prose :where(tbody td:last-child):not(:where([class~="not-prose"] *)){
+    padding-right: 0
+  }
+  
+  .prose > :where(:first-child):not(:where([class~="not-prose"] *)){
+    margin-top: 0
+  }
+  
+  .prose > :where(:last-child):not(:where([class~="not-prose"] *)){
+    margin-bottom: 0
+  }
+  
+  .prose-slate{
+    --tw-prose-body: #334155;
+    --tw-prose-headings: #0f172a;
+    --tw-prose-lead: #475569;
+    --tw-prose-links: #0f172a;
+    --tw-prose-bold: #0f172a;
+    --tw-prose-counters: #64748b;
+    --tw-prose-bullets: #cbd5e1;
+    --tw-prose-hr: #e2e8f0;
+    --tw-prose-quotes: #0f172a;
+    --tw-prose-quote-borders: #e2e8f0;
+    --tw-prose-captions: #64748b;
+    --tw-prose-code: #0f172a;
+    --tw-prose-pre-code: #e2e8f0;
+    --tw-prose-pre-bg: #1e293b;
+    --tw-prose-th-borders: #cbd5e1;
+    --tw-prose-td-borders: #e2e8f0;
+    --tw-prose-invert-body: #cbd5e1;
+    --tw-prose-invert-headings: #fff;
+    --tw-prose-invert-lead: #94a3b8;
+    --tw-prose-invert-links: #fff;
+    --tw-prose-invert-bold: #fff;
+    --tw-prose-invert-counters: #94a3b8;
+    --tw-prose-invert-bullets: #475569;
+    --tw-prose-invert-hr: #334155;
+    --tw-prose-invert-quotes: #f1f5f9;
+    --tw-prose-invert-quote-borders: #334155;
+    --tw-prose-invert-captions: #94a3b8;
+    --tw-prose-invert-code: #fff;
+    --tw-prose-invert-pre-code: #cbd5e1;
+    --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+    --tw-prose-invert-th-borders: #475569;
+    --tw-prose-invert-td-borders: #334155
+  }
+  
+  @media (min-width: 1024px){
+    .lg\:prose-lg{
+      font-size: 1.125rem;
+      line-height: 1.7777778;
+    }
+  
+    .lg\:prose-lg :where(p):not(:where([class~="not-prose"] *)){
+      margin-top: 1.3333333em;
+      margin-bottom: 1.3333333em
+    }
+  
+    .lg\:prose-lg :where([class~="lead"]):not(:where([class~="not-prose"] *)){
+      font-size: 1.2222222em;
+      line-height: 1.4545455;
+      margin-top: 1.0909091em;
+      margin-bottom: 1.0909091em
+    }
+  
+    .lg\:prose-lg :where(blockquote):not(:where([class~="not-prose"] *)){
+      margin-top: 1.6666667em;
+      margin-bottom: 1.6666667em;
+      padding-left: 1em
+    }
+  
+    .lg\:prose-lg :where(h1):not(:where([class~="not-prose"] *)){
+      font-size: 2.6666667em;
+      margin-top: 0;
+      margin-bottom: 0.8333333em;
+      line-height: 1
+    }
+  
+    .lg\:prose-lg :where(h2):not(:where([class~="not-prose"] *)){
+      font-size: 1.6666667em;
+      margin-top: 1.8666667em;
+      margin-bottom: 1.0666667em;
+      line-height: 1.3333333
+    }
+  
+    .lg\:prose-lg :where(h3):not(:where([class~="not-prose"] *)){
+      font-size: 1.3333333em;
+      margin-top: 1.6666667em;
+      margin-bottom: 0.6666667em;
+      line-height: 1.5
+    }
+  
+    .lg\:prose-lg :where(h4):not(:where([class~="not-prose"] *)){
+      margin-top: 1.7777778em;
+      margin-bottom: 0.4444444em;
+      line-height: 1.5555556
+    }
+  
+    .lg\:prose-lg :where(img):not(:where([class~="not-prose"] *)){
+      margin-top: 1.7777778em;
+      margin-bottom: 1.7777778em
+    }
+  
+    .lg\:prose-lg :where(video):not(:where([class~="not-prose"] *)){
+      margin-top: 1.7777778em;
+      margin-bottom: 1.7777778em
+    }
+  
+    .lg\:prose-lg :where(figure):not(:where([class~="not-prose"] *)){
+      margin-top: 1.7777778em;
+      margin-bottom: 1.7777778em
+    }
+  
+    .lg\:prose-lg :where(figure > *):not(:where([class~="not-prose"] *)){
+      margin-top: 0;
+      margin-bottom: 0
+    }
+  
+    .lg\:prose-lg :where(figcaption):not(:where([class~="not-prose"] *)){
+      font-size: 0.8888889em;
+      line-height: 1.5;
+      margin-top: 1em
+    }
+  
+    .lg\:prose-lg :where(code):not(:where([class~="not-prose"] *)){
+      font-size: 0.8888889em
+    }
+  
+    .lg\:prose-lg :where(h2 code):not(:where([class~="not-prose"] *)){
+      font-size: 0.8666667em
+    }
+  
+    .lg\:prose-lg :where(h3 code):not(:where([class~="not-prose"] *)){
+      font-size: 0.875em
+    }
+  
+    .lg\:prose-lg :where(pre):not(:where([class~="not-prose"] *)){
+      font-size: 0.8888889em;
+      line-height: 1.75;
+      margin-top: 2em;
+      margin-bottom: 2em;
+      border-radius: 0.375rem;
+      padding-top: 1em;
+      padding-right: 1.5em;
+      padding-bottom: 1em;
+      padding-left: 1.5em
+    }
+  
+    .lg\:prose-lg :where(ol):not(:where([class~="not-prose"] *)){
+      padding-left: 1.5555556em
+    }
+  
+    .lg\:prose-lg :where(ul):not(:where([class~="not-prose"] *)){
+      padding-left: 1.5555556em
+    }
+  
+    .lg\:prose-lg :where(li):not(:where([class~="not-prose"] *)){
+      margin-top: 0.6666667em;
+      margin-bottom: 0.6666667em
+    }
+  
+    .lg\:prose-lg :where(ol > li):not(:where([class~="not-prose"] *)){
+      padding-left: 0.4444444em
+    }
+  
+    .lg\:prose-lg :where(ul > li):not(:where([class~="not-prose"] *)){
+      padding-left: 0.4444444em
+    }
+  
+    .lg\:prose-lg > :where(ul > li p):not(:where([class~="not-prose"] *)){
+      margin-top: 0.8888889em;
+      margin-bottom: 0.8888889em
+    }
+  
+    .lg\:prose-lg > :where(ul > li > *:first-child):not(:where([class~="not-prose"] *)){
+      margin-top: 1.3333333em
+    }
+  
+    .lg\:prose-lg > :where(ul > li > *:last-child):not(:where([class~="not-prose"] *)){
+      margin-bottom: 1.3333333em
+    }
+  
+    .lg\:prose-lg > :where(ol > li > *:first-child):not(:where([class~="not-prose"] *)){
+      margin-top: 1.3333333em
+    }
+  
+    .lg\:prose-lg > :where(ol > li > *:last-child):not(:where([class~="not-prose"] *)){
+      margin-bottom: 1.3333333em
+    }
+  
+    .lg\:prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)){
+      margin-top: 0.8888889em;
+      margin-bottom: 0.8888889em
+    }
+  
+    .lg\:prose-lg :where(hr):not(:where([class~="not-prose"] *)){
+      margin-top: 3.1111111em;
+      margin-bottom: 3.1111111em
+    }
+  
+    .lg\:prose-lg :where(hr + *):not(:where([class~="not-prose"] *)){
+      margin-top: 0
+    }
+  
+    .lg\:prose-lg :where(h2 + *):not(:where([class~="not-prose"] *)){
+      margin-top: 0
+    }
+  
+    .lg\:prose-lg :where(h3 + *):not(:where([class~="not-prose"] *)){
+      margin-top: 0
+    }
+  
+    .lg\:prose-lg :where(h4 + *):not(:where([class~="not-prose"] *)){
+      margin-top: 0
+    }
+  
+    .lg\:prose-lg :where(table):not(:where([class~="not-prose"] *)){
+      font-size: 0.8888889em;
+      line-height: 1.5
+    }
+  
+    .lg\:prose-lg :where(thead th):not(:where([class~="not-prose"] *)){
+      padding-right: 0.75em;
+      padding-bottom: 0.75em;
+      padding-left: 0.75em
+    }
+  
+    .lg\:prose-lg :where(thead th:first-child):not(:where([class~="not-prose"] *)){
+      padding-left: 0
+    }
+  
+    .lg\:prose-lg :where(thead th:last-child):not(:where([class~="not-prose"] *)){
+      padding-right: 0
+    }
+  
+    .lg\:prose-lg :where(tbody td):not(:where([class~="not-prose"] *)){
+      padding-top: 0.75em;
+      padding-right: 0.75em;
+      padding-bottom: 0.75em;
+      padding-left: 0.75em
+    }
+  
+    .lg\:prose-lg :where(tbody td:first-child):not(:where([class~="not-prose"] *)){
+      padding-left: 0
+    }
+  
+    .lg\:prose-lg :where(tbody td:last-child):not(:where([class~="not-prose"] *)){
+      padding-right: 0
+    }
+  
+    .lg\:prose-lg > :where(:first-child):not(:where([class~="not-prose"] *)){
+      margin-top: 0
+    }
+  
+    .lg\:prose-lg > :where(:last-child):not(:where([class~="not-prose"] *)){
+      margin-bottom: 0
+    }
+  }
+  
\ No newline at end of file
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..385421c
Binary files /dev/null and b/favicon.ico differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..813c994
--- /dev/null
+++ b/index.html
@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+
+<head>
+    <meta charset="utf-8">
+    <title>ChatGPT-Tailwind</title>
+    <meta name="viewport"
+        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+    <link href="https://unpkg.com/daisyui@3.5.1/dist/full.css" rel="stylesheet" type="text/css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
+    <style>
+        body {
+            font-family: system-ui, -apple-system, "Microsoft YaHei", Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif !important;
+        }
+    </style>
+    <link href="./css.css" rel="stylesheet" type="text/css">
+</head>
+
+<body class="pb-72 pt-20 h-full">
+    <!-- 头部展示 -->
+    <div class="w-full fixed top-0 bg-gray-700 text-center py-5 z-50">
+        <h1 class="text-white text-lg font-bold" >ChatGPT-Tailwind</h1>
+    </div>
+
+    <!-- 填写地址和密钥 -->
+    <div class="container mx-auto bg-blue-300 px-4 py-5  shadow-md hover:shadow-blue-500/50 -mt-5">
+        <div class="flex flex-wrap items-center justify-evenly ">
+            <div class="w-full sm:w-2/5 mb-4 px-4">
+                <div class="flex flex-col">
+                    <div class="flex items-center mb-1">
+                        <b>网址：</b>
+                        <input
+                            class="border-2 border-gray-300 bg-white h-10 px-2 rounded-lg text-sm flex-grow focus:outline-none"
+                            placeholder="api.openai.com" type="text" id="proxyurl" required value="oapi.czl.net" />
+                    </div>
+
+                    <p class="text-xs italics ">*代理域名，无需"https://"</p>
+                </div>
+            </div>
+            <div class="w-full sm:w-2/5 mb-4 px-4">
+                <div class="flex flex-col">
+                    <div class="flex items-center mb-1">
+                        <b>Key：</b>
+                        <input
+                            class="border-2 border-gray-300 bg-white h-10 px-2 rounded-lg text-sm flex-grow focus:outline-none"
+                            placeholder="sk-xxxxxxxxxxx" type="text" id="key" required />
+                    </div>
+                    <div class="text-xs italics">*填写你的key，<a href="https://oapi.czl.net" target="_blank"
+                            class="link link-error">获取国内可用key</a></div>
+                </div>
+            </div>
+
+            <div class="w-full sm:w-1/5 mb-4 px-4">
+                <div class="flex flex-col">
+                    <div class="flex items-center mb-1">
+                        <b>模型：</b>
+                        <select
+                            class="border-2 border-gray-300 bg-white h-10 px-2 rounded-lg text-sm flex-grow focus:outline-none select-primary"
+                            id="model">
+                            <!-- your options here -->
+                            <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
+                            <option value="gpt-3.5-turbo-0301">gpt-3.5-turbo-0301</option>
+                            <option value="gpt-3.5-turbo-0613">gpt-3.5-turbo-0613</option>
+                            <option value="gpt-3.5-turbo-16k">gpt-3.5-turbo-16k</option>
+                            <option value="gpt-3.5-turbo-16k-0613">gpt-3.5-turbo-16k-0613</option>
+                            <option value="gpt-4">gpt-4</option>
+                            <option value="gpt-4-0301">gpt-4-0301</option>
+                            <option value="gpt-4-0613">gpt-4-0613</option>
+                            <option value="gpt-4-32k">gpt-4-32k</option>
+                            <option value="gpt-4-32k-0613">gpt-4-32k-0613</option>
+                            <option value="PaLM-2">PaLM-2</option>
+                            <option value="ERINIE-Bot">ERNIE-Bot</option>
+                            <option value="ERNIE-Bot-turbo">ERNIE-Bot-turbo</option>
+                            <option value="BLOOMZ-7B">BLOOMZ-7B</option>
+                            <option value="Embedding-V1">Embedding-V1</option>
+                            <option value="chatglm_std">chatglm_std</option>
+                            <option value="chatglm_lite">chatglm_lite</option>
+                            <option value="chatglm_pro">chatglm_pro</option>
+                            <option value="qwen-v1">qwen-v1</option>
+                            <option value="qwen-plus-v1">qwen-plus-v1</option>
+                            <option value="SparkDesk">SparkDesk</option>
+                        </select>
+                    </div>
+                    <div class="text-xs italics">*选择模型</div>
+                </div>
+            </div>
+            <div class="w-full ">
+                <div class="flex items-center">
+                </div>
+            </div>
+        </div>
+        <div class="text-center py-2 bg-blue-100">
+            本项目由<a href="https://woodchen.ink" target="_blank" class="link link-accent">woodchen</a>开源于<a
+                class="link link-accent" href="https://github.com/woodchen-ink/ChatGPT-Tailwind"
+                target="_blank">Github</a>, 欢迎给个star
+        </div>
+    </div>
+
+    <!-- 对话展示 -->
+    <div class="container mx-auto" id="chatbox">
+    </div>
+
+    <!-- 底部固定 -->
+    <div class="w-full fixed bottom-0 bg-gray-700 py-4">
+        <div class="container mx-auto">
+            <textarea id="userInput" class="w-full textarea textarea-inf" type="text" rows="3"
+                placeholder="在这里输入问题...换行请按Shift+Enter"></textarea>
+            <button id="sendButton" class="btn  btn-info   btn-block">询问</button>
+        </div>
+    </div>
+
+
+    <script src="https://unpkg.com/jquery@3.7.0/dist/jquery.min.js"></script>
+    <script>
+        const url = new URL(window.location.href);
+        const chatbox = $("#chatbox");
+        const userInput = $("#userInput");
+        const sendButton = $("#sendButton");
+        $(document).ready(function () {
+            const messages = [];
+
+            sendButton.on("click", () => {
+                const message = userInput.val();
+                if (message) {
+                    messages.push({
+                        "role": "user",
+                        "content": message
+                    });
+                    chatbox.append(`<div class="chat chat-end"><div class="chat-image avatar">
+                        <div class="w-10 rounded-full">
+                        <img src="https://cdn-img.czl.net/2023/08/10/64d3b992cf86e.png" />
+                        </div>
+                        </div>
+                        <div class="chat-header">You</div><div class="chat-bubble chat-bubble-info">${message}</div><div>`);
+                    userInput.val("");
+                    sendButton.html('<span class="loading loading-infinity loading-lg"></span>');
+                    sendButton.removeClass('btn-info').addClass('btn-error');
+                    // sendButton.prop("disabled", true);
+                    fetchMessages();
+                }
+            });
+
+            userInput.on("keydown", (event) => {
+                if (event.keyCode === 13 && !event.ctrlKey && !event.shiftKey) {
+                    event.preventDefault();
+                    sendButton.click();
+                } else if (event.keyCode === 13 && (event.ctrlKey || event.shiftKey)) {
+                    event.preventDefault();
+                    const cursorPosition = userInput.prop("selectionStart");
+                    const currentValue = userInput.val();
+                    userInput.val(
+                        currentValue.slice(0, cursorPosition) +
+                        "\n" +
+                        currentValue.slice(cursorPosition)
+                    );
+                    userInput.prop("selectionStart", cursorPosition + 1);
+                    userInput.prop("selectionEnd", cursorPosition + 1);
+                }
+            });
+
+            function fetchMessages() {
+                let proxyurl = document.getElementById("proxyurl").value;
+                let key = document.getElementById("key").value;
+                let modelElement = document.getElementById("model");
+                let model = modelElement.options[modelElement.selectedIndex].value;
+                $("#proxyurl").val();
+                $("#key").val();
+
+                try {
+                    var settings = {
+                        "url": "https://" + proxyurl + "/v1/chat/completions",
+                        "method": "POST",
+                        "timeout": 0,
+                        "headers": {
+                            "Authorization": "Bearer " + key,
+                            "Content-Type": "application/json"
+                        },
+                        "data": JSON.stringify({
+                            "model": model,
+                            "messages": messages
+                        }),
+                    };
+
+                    $.ajax(settings).done(function (response) {
+                        console.log(response);
+
+                        const message = response.choices[0].message;
+                        messages.push({
+                            "role": message.role,
+                            "content": message.content
+                        });
+
+                        const htmlText = window.markdownit().render(message.content);
+                        chatbox.append(`<div class="chat chat-start"><div class="chat-image avatar">
+                        <div class="w-10 rounded-full">
+                        <img src="https://cdn-img.czl.net/2023/08/10/64d3b8c9819c7.png" />
+                        </div>
+                        </div>
+                        <div class="chat-header">AI</div><div class="chat-bubble chat-bubble-accent prose prose-slate">${htmlText}</div><div>`);
+                        sendButton.html('<span>询问</span>');
+                        sendButton.removeClass('btn-error').addClass('btn-info');
+
+                    }).fail(function (jqXHR, textStatus, errorThrown) {
+                        var response = JSON.parse(jqXHR.responseText);
+                        sendButton.html('<span>询问</span>');
+                        sendButton.removeClass('btn-error').addClass('btn-info');
+                        chatbox.append(`<div class="chat chat-start"><div class="chat-image avatar">
+                        <div class="w-10 rounded-full">
+                        <img src="https://cdn-img.czl.net/2023/08/10/64d3b8c9819c7.png" />
+                        </div>
+                        </div>
+                        <div class="chat-header">AI</div><div class="chat-bubble chat-bubble-error prose prose-slate">Error: ${response.error.message}</div><div>`);
+                    });
+
+                } catch (error) {
+                    sendButton.html('<span>询问</span>');
+                    sendButton.removeClass('btn-error').addClass('btn-info');
+                    chatbox.append(`<div class="chat chat-start"><div class="chat-image avatar">
+                        <div class="w-10 rounded-full">
+                        <img src="https://cdn-img.czl.net/2023/08/10/64d3b8c9819c7.png" />
+                        </div>
+                        </div>
+                        <div class="chat-header">AI</div><div class="chat-bubble chat-bubble-error prose prose-slate">Error: ${error.message}</div><div>`);
+                }
+            }
+        });
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..e2057a4
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+    //...
+    theme: {
+        // ...
+    },
+
+    // add daisyUI plugin
+    plugins: [
+        require("daisyui")
+    ],
+
+
+    //...
+}
\ No newline at end of file