From 3252fda1fd612d8a53554c1ae0e18262527f597f Mon Sep 17 00:00:00 2001
From: wood <wood@czl.net>
Date: Tue, 29 Aug 2023 00:30:49 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=BC=A9=E7=9F=AD=E5=8D=95=E8=A1=8C?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=EF=BC=8C=E4=BF=A1=E6=81=AF=E8=BF=87=E5=A4=9A?=
 =?UTF-8?q?=E6=97=B6=E6=94=B9=E4=B8=BA=E5=BC=B9=E7=AA=97=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=20Fixes=20#12?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md      |   5 +--
 index.html     |  25 ++++++++++--
 static/css.css | 103 ++++++++++++++++++++++++++++++++++++++++++++++++-
 static/js.js   |  62 ++++++++++++++++++++++++++---
 4 files changed, 182 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 71998e8..fcd892e 100644
--- a/README.md
+++ b/README.md
@@ -9,9 +9,8 @@ Telegram交流群：https://t.me/ai_cn2023
 
 ## 最新示意图(2023.08.28)
 
-![img_v2_29c139e9-9114-42bc-a23d-cba36e635d1g.jpg](https://cdn-img.czl.net/2023/08/28/64eca918b5668.jpg)
-![img_v2_388e4f50-a9ee-452d-b0f1-16773bdfc9fg.jpg](https://cdn-img.czl.net/2023/08/28/64eca91cc90fe.jpg)
-![img_v2_0c1ed439-59b4-4a4a-bf82-b43bd97458ag.jpg](https://cdn-img.czl.net/2023/08/28/64eca9202c6d7.jpg)
+![1693240108324.png](https://cdn-img.czl.net/2023/08/29/64eccb2da01a1.png)
+![1693240132856.png](https://cdn-img.czl.net/2023/08/29/64eccb46017e7.png)
 
 
 ## SESS ID获取方法
diff --git a/index.html b/index.html
index 85aea54..fbd3434 100644
--- a/index.html
+++ b/index.html
@@ -56,15 +56,32 @@ <h2 id="result-head" style="visibility:hidden">查询结果</h2>
         <th style="width: 50px">GPT-3.5</th>
         <th style="width: 50px">GPT-4</th>
         <th style="width: 50px">32K</th>
-        <th style="width: 50px">绑卡</th>
-        <th style="width: 230px">绑卡信息</th>
-        <th style="width: 230px">组织信息</th>
-        <th style="width: 150px">速率</th>
+        <th style="width: 60px">绑卡</th>
+        <th style="width: 120px">绑卡信息</th>
+        <th style="width: 120px">组织信息</th>
+        <th style="width: 120px">速率</th>
         <th style="width: 50px;">是否有效</th>
       </tr>
     </thead>
     <tbody></tbody>
   </table>
+  <!-- This is the modal -->
+<!-- This is the modal -->
+<div id="myModal" class="modal">
+  <!-- Modal content -->
+  <div class="modal-content">
+    <div class="modal-header">
+      <h2>详细信息</h2>
+      <span class="close">&times;</span>
+
+    </div>
+    <div class="modal-body">
+      <p id="modalText"></p>
+    </div>
+  </div>
+</div>
+
+
   <footer>
     <p>广告链接：
       <a href="https://chat.czl.net" target="_blank">CZLChat</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
diff --git a/static/css.css b/static/css.css
index e79aba9..ee2ecf8 100644
--- a/static/css.css
+++ b/static/css.css
@@ -354,4 +354,105 @@ button.loading::before {
     width: .75rem;
     height: .75rem;
     animation: rotate .5s linear infinite;
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: 768px) {
+    /* 在小于768px的屏幕上生效的样式 */
+
+    /* 可以减小字体和表格单元格的大小，使其适应小屏设备 */
+    #result-table th, #result-table td {
+        font-size: 8px;
+        padding: 5px 3px;
+    }
+
+    /* 可以隐藏一些不是非常重要的列，以便更有效地利用屏幕空间 */
+    #result-table th:nth-child(n+12), #result-table td:nth-child(n+12) {
+        display: none;
+    }
+}
+
+#result-table {
+    border-collapse: separate;
+    border-spacing: 0 5px;
+    /* padding: 5px; */
+}
+
+
+#result-table td {
+    vertical-align: top;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 100;
+    padding-top: 100px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.5);
+}
+
+.modal-content {
+    position: relative;
+    display: flex;  
+    flex-direction: column;  
+    background-color: #fefefe;
+    color: #000000;
+    margin: auto;
+    width: 410px;
+    height: auto;
+    max-height: 80%;
+    border-radius: 12px;
+    white-space: pre-wrap;
+}
+.modal h2{
+    margin:8px;
+}
+.modal p{
+    margin-block-start:0;
+    margin-block-end: 0;
+}
+
+.close {
+    color: #FFF;
+    font-size: 28px;
+    font-weight: bold;
+    align-self: flex-end;  
+    margin:8px;  
+}
+
+.close:hover,
+.close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.modal-header {
+    padding: 0px;  
+    background-color: var(--color-primary);
+    color: white;
+    display: flex;  
+    justify-content: space-between;  
+    align-items: center;  
+    border-radius: 12px 12px 0px 0px;
+    /* height: 74px; */
+}
+
+.modal-body {
+    padding: 10px 16px;
+    overflow-y: auto;  
+    /* height:336px; */
+    display: flex;
+    align-items: flex-start;
+}
+
+#modalText{
+    margin: 0;
+}
+
+
+
diff --git a/static/js.js b/static/js.js
index f89c8bd..1d9e3d7 100644
--- a/static/js.js
+++ b/static/js.js
@@ -1,3 +1,22 @@
+// Get the modal
+var modal = document.getElementById("myModal");
+
+// Get the <span> element that closes the modal
+var span = document.getElementsByClassName("close")[0];
+
+// When the user clicks on <span> (x), close the modal
+span.onclick = function () {
+    modal.style.display = "none";
+}
+
+// When the user clicks anywhere outside of the modal, close it
+window.onclick = function (event) {
+    if (event.target == modal) {
+        modal.style.display = "none";
+    }
+}
+
+
 let queriedApiKeys = [];
 let serialNumber = 1;
 
@@ -362,6 +381,20 @@ function sendRequest() {
                 progressCell.appendChild(progressContainer); // 将容器添加到单元格中
                 row.appendChild(progressCell);
 
+                function createSeeMoreLink(text) {
+                    let seeMoreLink = document.createElement("a");
+                    seeMoreLink.href = "#";
+                    seeMoreLink.textContent = '全部';
+                    seeMoreLink.style.cursor = "pointer";
+                    seeMoreLink.style.textDecoration = "underline";
+                    seeMoreLink.onclick = (event) => {
+                        event.preventDefault();
+                        document.getElementById('modalText').textContent = text;
+                        document.getElementById('myModal').style.display = "block";
+                    };
+                    return seeMoreLink;
+                }
+
 
 
                 let expireTime = document.createElement("td");
@@ -388,7 +421,12 @@ function sendRequest() {
                 let SubInformation = document.createElement("td");
                 let SubInformationContainer = document.createElement("div");
                 SubInformationContainer.style.whiteSpace = "pre-wrap";
-                SubInformationContainer.textContent = data[8];
+                if (data[8].length > 50) {
+                    SubInformationContainer.textContent = data[8].slice(0, 25) + '... ';
+                    SubInformationContainer.appendChild(createSeeMoreLink(data[8]));
+                } else {
+                    SubInformationContainer.textContent = data[8];
+                }
                 SubInformation.appendChild(SubInformationContainer);
                 row.appendChild(SubInformation);
 
@@ -396,23 +434,37 @@ function sendRequest() {
                 let setidCell = document.createElement("td");
                 let setidCellContainer = document.createElement("div");
                 setidCellContainer.style.whiteSpace = "pre-wrap";
-                setidCellContainer.textContent = data[9];
+                if (data[9].length > 50) {
+                    setidCellContainer.textContent = data[9].slice(0, 25) + '... ';
+                    setidCellContainer.appendChild(createSeeMoreLink(data[9]));
+
+                } else {
+                    setidCellContainer.textContent = data[9];
+                }
                 setidCell.appendChild(setidCellContainer);
                 row.appendChild(setidCell);
 
+
                 let rateLimitsDataCell = document.createElement("td");
                 let rateLimitsDataContainer = document.createElement("div");
                 rateLimitsDataContainer.style.whiteSpace = "pre-wrap";
-                if (data[13]) { // checking if rateLimits data exists
+                if (data[13]) {
                     let rateLimitsData = data[13];
                     let models = ['gpt-3.5-turbo', 'gpt-3.5-turbo-16k', 'gpt-4', 'gpt-4-32k'];
+                    let rateLimitsText = '';
                     for (let model of models) {
                         if (rateLimitsData[model]) {
-                            rateLimitsDataContainer.textContent += `${model}:\n\tRPM: ${rateLimitsData[model].max_requests_per_1_minute}\n\tTPM: ${rateLimitsData[model].max_tokens_per_1_minute}\n\n`;
+                            rateLimitsText += `${model}:\n\tRPM: ${rateLimitsData[model].max_requests_per_1_minute}\n\tTPM: ${rateLimitsData[model].max_tokens_per_1_minute}\n\n`;
                         } else {
-                            rateLimitsDataContainer.textContent += model + ": ❌\n";
+                            rateLimitsText += model + ": ❌\n";
                         }
                     }
+                    if (rateLimitsText.length > 50) {
+                        rateLimitsDataContainer.textContent = rateLimitsText.slice(0, 25) + '... ';
+                        rateLimitsDataContainer.appendChild(createSeeMoreLink(rateLimitsText));
+                    } else {
+                        rateLimitsDataContainer.textContent = rateLimitsText;
+                    }
                 }
 
                 rateLimitsDataCell.appendChild(rateLimitsDataContainer);

From ff1d65de7556ae29a4174a7013aa09acc79f9ff9 Mon Sep 17 00:00:00 2001
From: wood <wood@czl.net>
Date: Tue, 29 Aug 2023 00:33:44 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html     |  6 +-----
 static/css.css | 10 ----------
 static/js.js   |  7 -------
 3 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/index.html b/index.html
index fbd3434..4f4aff1 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,9 @@
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>OpenAIAPI 信息查询</title>
+  <title>OpenAI API 信息查询</title>
   <meta name="description" content="批量快速查询OPENAI的余额，支持可视化展现已用比例、额度、已用量、未用量、是否GPT-4、是否GPT4-32K、是否绑卡、绑卡信息、组织信息、是否有效">
   <link rel="stylesheet" href="static/css.css" type="text/css" />
 </head>
@@ -65,10 +64,7 @@ <h2 id="result-head" style="visibility:hidden">查询结果</h2>
     </thead>
     <tbody></tbody>
   </table>
-  <!-- This is the modal -->
-<!-- This is the modal -->
 <div id="myModal" class="modal">
-  <!-- Modal content -->
   <div class="modal-content">
     <div class="modal-header">
       <h2>详细信息</h2>
diff --git a/static/css.css b/static/css.css
index ee2ecf8..5a16db3 100644
--- a/static/css.css
+++ b/static/css.css
@@ -183,16 +183,8 @@ button.loading::before {
 }
 
 footer {
-    /* padding: 2px; */
-    /* border-top: 1px solid var(--border-color); */
     text-align: center;
-    /* opacity: .5; */
-    /* position: fixed; */
-    /* bottom: 0; */
-    /* left: 0; */
     margin-top: 20px;
-    /* width: 100%; */
-    /* background-color:#212121; */
     line-height: unset !important;
     line-height: normal;
 }
@@ -439,13 +431,11 @@ button.loading::before {
     justify-content: space-between;  
     align-items: center;  
     border-radius: 12px 12px 0px 0px;
-    /* height: 74px; */
 }
 
 .modal-body {
     padding: 10px 16px;
     overflow-y: auto;  
-    /* height:336px; */
     display: flex;
     align-items: flex-start;
 }
diff --git a/static/js.js b/static/js.js
index 1d9e3d7..db468f4 100644
--- a/static/js.js
+++ b/static/js.js
@@ -1,15 +1,8 @@
-// Get the modal
 var modal = document.getElementById("myModal");
-
-// Get the <span> element that closes the modal
 var span = document.getElementsByClassName("close")[0];
-
-// When the user clicks on <span> (x), close the modal
 span.onclick = function () {
     modal.style.display = "none";
 }
-
-// When the user clicks anywhere outside of the modal, close it
 window.onclick = function (event) {
     if (event.target == modal) {
         modal.style.display = "none";