xyTom · quangmng · Feb 28, 2022 · Feb 28, 2022 · Feb 28, 2022 · Feb 28, 2022
diff --git a/README.md b/README.md
@@ -5,42 +5,26 @@ A URL Shortener created using Cloudflare Worker
 
 [API Documentation (API文档)](docs/API.md)
 
-# Getting start
-### 去Workers KV中创建一个命名空间
+# Getting started
 
 Go to Workers KV and create a namespace.
 
 ![](docs/kv_create_namespace.png)
 
-### 去Worker的Settings选选项卡中绑定KV Namespace
-
 Bind an instance of a KV Namespace to access its data in a Worker.
 
 ![](docs/worker_settings.jpg)
 
-### 其中Variable name填写`LINKS`, KV namespace 选择你刚刚创建的命名空间
 
 Where Variable name should set as `LINKS` and KV namespace is the namespace you just created in the first step.
 
 ![](docs/worker_kv_binding.png)
 
-### 复制本项目中的`index.js`的代码到Cloudflare Worker 
-
 Copy the `index.js` code from this project to Cloudflare Worker. 
 
-### 点击Save and Deploy
-
 Click Save and Deploy
 
 # Demo
 https://lnks.eu.org/
 
-Note: Because someone abuse this demo website, all the generated link will automatically expired after 24 hours. For long-term use, please deploy your own.
-
-注意：所有由Demo网站生成的链接24小时后会自动失效，如需长期使用请自行搭建。
-
-# crazypeace 修改版
-
-https://github.com/xyTom/Url-Shorten-Worker/tree/crazypeace
 
-支持功能：1、自定义短链 2、页面缓存设置过的短链 3、长链接文本框预搜索localStorage 4、增加删除某条短链的按钮 5、密码保护
diff --git a/index.html b/index.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html>
+<head>
+  <link rel="shortcut icon" type="image/png" href="https://raw.githubusercontent.com/quangmng/quangmng.github.io/main/assets/img/favicon.png">
+  <meta http-equiv="content-type" content="txt/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous">
+  <title>URL Shortener</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      cursor: default;
+    }
+    html, body {
+      height: 100%;
+    }
+    body {
+      display: -webkit-box;
+      display: flex;
+      -webkit-box-align: center;
+      align-items: center;
+      -webkit-box-pack: center;
+      justify-content: center;
+      vertical-align: center;
+      flex-wrap: wrap;
+      align-content: center;
+
+      color: #2a2b2c;
+      background-color: #ebedee;
+      overflow: hidden;
+    }
+    .card {
+      background-color: transparent;
+      width: 768px;
+    }
+    .card-text {
+      text-align: center;
+    }
+    .card-text > a {
+      text-decoration: none;
+      color: #007bff;
+    }
+    .card-text > a {
+      cursor: pointer;
+    }
+    .form-control {
+        cursor: auto;
+    }
+    @media (max-width: 769px) {
+      .card {
+        width: 80%;
+      }
+    }
+    @media (max-width: 420px) {
+      .card {
+        width: 95%;
+      }
+    }
+    @media (prefers-color-scheme: dark) { 
+      body {
+        color: #d9d9d9; 
+        background: #1b1b1b;
+      }
+      .card {
+        background-color: #252d38;
+      }
+    } 
+  </style>
+</head>
+<body>
+  <div class="card">
+    <h5 class="card-header">Shorten your URLs!</h5>
+    <div class="card-body">
+      <h5 class="card-title">Please enter the long URL to be shortened:</h5>
+      <div class="input-group mb-3">
+        <input type="text" class="form-control" placeholder="Example: https://example.com/" id="text">
+        <div class="input-group-append">
+          <button class="btn btn-primary" type="button" onclick='shorturl()' id="searchbtn">Shorten it</button>
+        </div>
+      </div>    
+      <div class="card-text">
+        <a href="https://github.com/quangmng/urlshortener/" target="_self">Make it yours on GitHub :)</a>
+      </div>
+      <p id="notice"></p>             
+    </div>
+  </div>
+  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Result</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body" id="result">No result</div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" onclick='copyurl("result")' data-toggle="popover" data-placement="bottom" data-content="Copied!">Copy</button>
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>    
+        </div>
+      </div>
+    </div>
+  </div>         
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/main.js" crossorigin="anonymous"></script>
+</body>
+</html>