From a069c135421c5eba168a97fdf106603c0579df44 Mon Sep 17 00:00:00 2001
From: wood chen <wood@czl.net>
Date: Mon, 11 Nov 2024 17:49:20 +0800
Subject: [PATCH] feat(handler, reference): Refactor home page to external HTML
 and update styles

---
 src/handler.ts | 173 ++--------------------------------------------
 参考.html      | 183 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 189 insertions(+), 167 deletions(-)
 create mode 100644 参考.html
diff --git a/src/handler.ts b/src/handler.ts
index 6504e7b..30ea89b 100644
--- a/src/handler.ts
+++ b/src/handler.ts
@@ -1,168 +1,3 @@
-function getHomePageHtml(): string {
-  return `
-    <html>
-      <head>
-        <title>CZL Docker镜像服务</title>
-        <link rel="shortcut icon" href="https://cdn-oracle.czl.net/img/2024/08/66c8417602ba0.ico">
-        <style> 
-        body {
-            font-family: system-ui, -apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif ;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            background-image: url('https://random-api.czl.net/pic/all');
-            background-size: cover;
-            background-position: center;
-            color: white;
-            text-shadow: 1px 1px 2px black;
-          }
-          .container {
-            background-color: rgba(0, 0, 0, 0.5);
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-            max-width: 600px;
-            width: 100%;
-          }
-          .step {
-            margin-bottom: 1em;
-          }
-          .step label {
-            margin-bottom: 0.5em;
-            display: block;
-          }
-          .step .input-group {
-            display: flex;
-            align-items: center;
-          }
-          .step textarea,
-          .step input {
-            flex: 1;
-            padding: 10px;
-            border-radius: 5px;
-            border: none;
-            margin-right: 10px;
-            color: black;
-          }
-          .button, .icon-button {
-            background-color: #4CAF50;
-            color: white;
-            padding: 10px 20px;
-            margin: 0 10px;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            min-width: 40px;
-            min-height: 40px;
-          }
-          .button:hover, .icon-button:hover {
-            background-color: #45a049;
-          }
-          .icon-button i {
-            font-size: 18px;
-          }
-        </style>
-      </head>
-      <body>
-        <div class="container">
-          <h1>快捷命令</h1>
-          <div class="step" style="color:blue;">
-          提示，支持docker.io, ghcr,quay,k8sgcr,gcr, 非docker.io需加上域名前缀
-          </div>
-          <div class="step">
-            <label>第一步：输入原始镜像地址获取命令.</label>
-            <div class="input-group">
-              <input type="text" id="imageInput" placeholder="woodchen/simplemirrorfetch" />
-              <button class="button" id="generateButton">获取命令</button>
-            </div>
-          </div>
-          <div class="step">
-            <label>第二步：代理拉取镜像</label>
-            <div class="input-group">
-              <textarea id="dockerPullCommand" readonly></textarea>
-              <button class="icon-button" onclick="copyToClipboard('dockerPullCommand')"><i>📋</i></button>
-            </div>
-          </div>
-          <div class="step">
-            <label>第三步：重命名镜像</label>
-            <div class="input-group">
-              <textarea id="dockerTagCommand" readonly></textarea>
-              <button class="icon-button" onclick="copyToClipboard('dockerTagCommand')"><i>📋</i></button>
-            </div>
-          </div>
-          <div class="step">
-            <label>第四步：删除代理镜像</label>
-            <div class="input-group">
-              <textarea id="dockerRmiCommand" readonly></textarea>
-              <button class="icon-button" onclick="copyToClipboard('dockerRmiCommand')"><i>📋</i></button>
-            </div>
-          </div>
-        </div>
-        <script>
-          document.addEventListener('DOMContentLoaded', (event) => {
-            document.getElementById('generateButton').addEventListener('click', generateCommands);
-          });
-
-          function generateCommands() {
-            const imageInput = document.getElementById('imageInput').value;
-            const source = getSourceFromImage(imageInput);
-            const imageName = getImageNameFromInput(imageInput, source);
-            const dockerPullCommand = \`docker pull \${source}/\${imageName}\`;
-            const dockerTagCommand = \`docker tag \${source}/\${imageName} \${imageName}\`;
-            const dockerRmiCommand = \`docker rmi \${source}/\${imageName}\`;
-
-            document.getElementById('dockerPullCommand').value = dockerPullCommand;
-            document.getElementById('dockerTagCommand').value = dockerTagCommand;
-            document.getElementById('dockerRmiCommand').value = dockerRmiCommand;
-          }
-
-          function getSourceFromImage(imageInput) {
-            const currentDomain = window.location.hostname;
-            if (imageInput.startsWith("gcr.io/")) {
-              return \`\${currentDomain}/gcr\`;
-            } else if (imageInput.startsWith("k8s.gcr.io/")) {
-              return \`\${currentDomain}/k8sgcr\`;
-            } else if (imageInput.startsWith("quay.io/")) {
-              return \`\${currentDomain}/quay\`;
-            } else if (imageInput.startsWith("ghcr.io/")) {
-              return \`\${currentDomain}/ghcr\`;
-            } else {
-              return currentDomain;
-            }
-          }
-
-          function getImageNameFromInput(imageInput, source) {
-            if (imageInput.startsWith("gcr.io/")) {
-              return imageInput.replace("gcr.io/", "");
-            } else if (imageInput.startsWith("k8s.gcr.io/")) {
-              return imageInput.replace("k8s.gcr.io/", "");
-            } else if (imageInput.startsWith("quay.io/")) {
-              return imageInput.replace("quay.io/", "");
-            } else if (imageInput.startsWith("ghcr.io/")) {
-              return imageInput.replace("ghcr.io/", "");
-            } else {
-              return imageInput;
-            }
-          }
-
-          function copyToClipboard(elementId) {
-            const copyText = document.getElementById(elementId);
-            copyText.select();
-            copyText.setSelectionRange(0, 99999); // For mobile devices
-            document.execCommand('copy');
-          }
-        </script>
-      </body>
-    </html>
-  `;
-}
-
 import { TokenProvider } from './token'
 import { Backend } from './backend'
 
@@ -183,14 +18,18 @@ export async function handleRequest(request: Request): Promise<Response> {
   const url = new URL(request.url)
 
   if (url.pathname === '/') {
-    return new Response(getHomePageHtml(), {
-      headers: { 'content-type': 'text/html;charset=UTF-8' },
+    return new Response(null, {
+      status: 301,
+      headers: {
+        'Location': 'https://onepage.czl.net/tools/docker_mirror.html'
+      }
     })
   }
 
   return handleRegistryRequest(request)
 }
 
+
 function copyProxyHeaders(inputHeaders: Headers): Headers {
   const headers = new Headers;
   for (const pair of inputHeaders.entries()) {
diff --git a/参考.html b/参考.html
new file mode 100644
index 0000000..3137987
--- /dev/null
+++ b/参考.html
@@ -0,0 +1,183 @@
+<html lang="zh-CN">
+
+<head>
+  <title>CZL Docker镜像服务</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description"
+    content="CZL Docker镜像服务提供了一个简单的界面来生成代理拉取、重命名和删除Docker镜像的命令。支持多种镜像源，包括docker.io, ghcr, quay, k8sgcr, gcr等。">
+    <link rel="shortcut icon" href="https://i-aws.czl.net/r2/2023/06/20/649168ec9d6a8.ico">
+  <link rel="stylesheet" href="https://i-aws.czl.net/cdnjs/ajax/libs/mdui/2.1.3/mdui.min.css" />
+  <script src="https://i-aws.czl.net/cdnjs/ajax/libs/mdui/2.1.3/mdui.global.js"></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      background-image: url('https://random-api.czl.net/pic/all');
+      background-size: cover;
+      background-position: center;
+      color: white;
+    }
+
+    .container {
+      background-color: rgba(0, 0, 0, 0.5);
+      padding: 20px;
+      border-radius: 10px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+      max-width: 600px;
+      width: 100%;
+    }
+
+    .step {
+      margin-bottom: 1em;
+    }
+
+    .step label {
+      margin-bottom: 0.5em;
+      display: block;
+    }
+
+    .step .input-group {
+      display: flex;
+      align-items: center;
+    }
+
+    .step textarea,
+    .step input {
+      flex: 1;
+      padding: 10px;
+      border-radius: 5px;
+      border: none;
+      margin-right: 10px;
+      color: black;
+    }
+
+    .button,
+    .icon-button {
+      background-color: #4CAF50;
+      color: white;
+      padding: 10px 20px;
+      margin: 0 10px;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 40px;
+      min-height: 40px;
+    }
+
+    .button:hover,
+    .icon-button:hover {
+      background-color: #45a049;
+    }
+
+    .icon-button i {
+      font-size: 18px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="nav-container"></div>
+  <script src="./nav.js"></script>
+  <script>document.addEventListener('DOMContentLoaded', initNavigation);</script>
+  <div class="container">
+    <h1>快捷命令</h1>
+    <div class="step" style="color:rgb(255, 0, 170); text-shadow: 1px 1px 2px black;">
+      提示，支持docker.io, ghcr,quay,k8sgcr,gcr, 非docker.io需加上域名前缀<br>
+      例如：woodchen/simplemirrorfetch <br> gcr.io/woodchen/simplemirrorfetch <br> quay.io/woodchen/simplemirrorfetch<br>
+      ghcr.io/woodchen/simplemirrorfetch<br> k8s.gcr.io/woodchen/simplemirrorfetch
+    </div>
+    <div class="step">
+      <label>第一步：输入原始镜像地址获取命令.</label>
+      <div class="input-group">
+        <input type="text" id="imageInput" placeholder="woodchen/simplemirrorfetch" />
+        <button class="button" id="generateButton">获取命令</button>
+      </div>
+    </div>
+    <div class="step">
+      <label>第二步：代理拉取镜像</label>
+      <div class="input-group">
+        <textarea id="dockerPullCommand" readonly></textarea>
+        <button class="icon-button" onclick="copyToClipboard('dockerPullCommand')"><i>📋</i></button>
+      </div>
+    </div>
+    <div class="step">
+      <label>第三步：重命名镜像</label>
+      <div class="input-group">
+        <textarea id="dockerTagCommand" readonly></textarea>
+        <button class="icon-button" onclick="copyToClipboard('dockerTagCommand')"><i>📋</i></button>
+      </div>
+    </div>
+    <div class="step">
+      <label>第四步：删除代理镜像</label>
+      <div class="input-group">
+        <textarea id="dockerRmiCommand" readonly></textarea>
+        <button class="icon-button" onclick="copyToClipboard('dockerRmiCommand')"><i>📋</i></button>
+      </div>
+    </div>
+  </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+      document.getElementById('generateButton').addEventListener('click', generateCommands);
+    });
+
+    function generateCommands() {
+      const imageInput = document.getElementById('imageInput').value;
+      const source = getSourceFromImage(imageInput);
+      const imageName = getImageNameFromInput(imageInput, source);
+      const dockerPullCommand = `docker pull ${source}/${imageName}`;
+      const dockerTagCommand = `docker tag ${source}/${imageName} ${imageName}`;
+      const dockerRmiCommand = `docker rmi ${source}/${imageName}`;
+
+      document.getElementById('dockerPullCommand').value = dockerPullCommand;
+      document.getElementById('dockerTagCommand').value = dockerTagCommand;
+      document.getElementById('dockerRmiCommand').value = dockerRmiCommand;
+    }
+
+    function getSourceFromImage(imageInput) {
+      const currentDomain = 'docker-mirror.czl.net';
+      if (imageInput.startsWith("gcr.io/")) {
+        return `${currentDomain}/gcr`;
+      } else if (imageInput.startsWith("k8s.gcr.io/")) {
+        return `${currentDomain}/k8sgcr`;
+      } else if (imageInput.startsWith("quay.io/")) {
+        return `${currentDomain}/quay`;
+      } else if (imageInput.startsWith("ghcr.io/")) {
+        return `${currentDomain}/ghcr`;
+      } else {
+        return currentDomain;
+      }
+    }
+
+    function getImageNameFromInput(imageInput, source) {
+      if (imageInput.startsWith("gcr.io/")) {
+        return imageInput.replace("gcr.io/", "");
+      } else if (imageInput.startsWith("k8s.gcr.io/")) {
+        return imageInput.replace("k8s.gcr.io/", "");
+      } else if (imageInput.startsWith("quay.io/")) {
+        return imageInput.replace("quay.io/", "");
+      } else if (imageInput.startsWith("ghcr.io/")) {
+        return imageInput.replace("ghcr.io/", "");
+      } else {
+        return imageInput;
+      }
+    }
+
+    function copyToClipboard(elementId) {
+      const copyText = document.getElementById(elementId);
+      copyText.select();
+      copyText.setSelectionRange(0, 99999); // For mobile devices
+      document.execCommand('copy');
+    }
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
