一大波更新

dist/app.js

@@ -38,6 +38,7 @@ const app = createApp({
       display: flex;
       flex-direction: column;
       width: 100vw;
+      min-width: 1024px;
       height: 100vh;
       background: radial-gradient(ellipse, var(--color-red-a), transparent),
         radial-gradient(ellipse at bottom, var(--color-teal-a), transparent),
@@ -48,27 +49,16 @@ const app = createApp({
           var(--color-blue-1)
         );
     }
-    :host::before,
+
     :host::after {
-      position: fixed;
-      bottom: -100px;
       display: block;
-      width: 1280px;
+      position: absolute;
-      height: 480px;
+      bottom: 0;
-      border-radius: 50%;
+      width: 100%;
-      background: rgba(255, 255, 255, 0.1);
+      height: 75px;
+      background: url(/assets/img/cat.svg) no-repeat;
       content: '';
     }
-    :host::before {
-      left: -256px;
-      transform: rotate(30deg);
-    }
-    :host::after {
-      right: -144px;
-      bottom: -160px;
-      width: 960px;
-      transform: rotate(-30deg);
-    }
     .main-body {
       flex: 1;
     }
@@ -82,16 +72,16 @@ const app = createApp({
       if (checked) {
         return (this.$store.user = JSON.parse(user))
       }
-      fetch('/login/check')
+      // fetch('/login/check')
-        .then(r => {
+      //   .then(r => {
-          localStorage.setItem('token', r.data.token)
+      //     localStorage.setItem('token', r.data.token)
-          sessionStorage.setItem('session_checked', 1)
+      //     sessionStorage.setItem('session_checked', 1)
-          this.$store.user = JSON.parse(user)
+      //     this.$store.user = JSON.parse(user)
-        })
+      //   })
-        .catch(r => {
+      //   .catch(r => {
-          localStorage.removeItem('token')
+      //     localStorage.removeItem('token')
-          localStorage.removeItem('user')
+      //     localStorage.removeItem('user')
-        })
+      //   })
     }
   }
 })

dist/assets/app.css

@@ -0,0 +1 @@
+::-webkit-scrollbar{width:0;height:0;background-color:rgba(0,0,0,0)}::-webkit-scrollbar-thumb{background-color:#c6c7ca;border-radius:10px}::-webkit-scrollbar-thumb:hover{background-color:#a1a1a1}::-webkit-scrollbar-track{background-color:rgba(0,0,0,0)}

dist/assets/app.scss

@@ -0,0 +1,17 @@
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #c6c7ca;
+  border-radius: 10px;
+  &:hover {
+    background-color: #a1a1a1;
+  }
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}

dist/assets/img/cat.svg

@@ -0,0 +1,24 @@
+<svg width="1920" height="75" xmlns="http://www.w3.org/2000/svg"
+  stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
+  <style>
+    .cat {transform: translateX(-223px);animation: cat 20s ease-out infinite}
+    @keyframes cat {to {transform: translateX(1720px);}}
+  </style>
+  <defs>
+    <g id="cat" fill="none" stroke="rgba(255,255,255,.6)" stroke-width="1.5">
+      <path
+        d="M198.167 52.515c0-3.891-3.336-4.466-3.336-14.894m6.924 4.821v9.997m3.485-.169c0-3.435 2.17-7.598 2.17-13.068 0-5.471-.66-10.29-.836-13.274m-1.265.431s3.384-.265 4.553-5.546"/>
+      <path
+        d="M200.146 15.96s-1.42-4.408-2.62-4.408c-1.2 0-3.298 5.753-3.298 14.428 0 2.24-11.69 8.123-9.211 21.709.398 2.18 1.394 6.337 1.394 6.353 0 .016 2.518 9.529-2.87 9.529-1.12 0-1.657-.62-2.778-.62-1.12 0-2.024.765-2.024 1.758s1.11 3.434 5.065 3.434c7.147 0 7.419-5.987 7.419-9.867 0-3.88-.036-2.68-.036-3.314 0-2.127 1.772-2.56 2.43-2.801"/>
+      <ellipse cx="203" cy="19" rx=".5" ry="0.8" fill="#fff" />
+      <path
+        d="M202.432 14.465c3.543 0 4.374 4.288 7.066 4.288m-4.572-5.561s-1.015-2.334-1.891-2.334c-.876 0-2.14 2.429-2.14 2.429"/>
+    </g>
+  </defs>
+  <use href="#cat" class="cat" />
+  <use href="#cat" class="cat" style="animation-delay:2s;animation-duration:25s" />
+  <use href="#cat" class="cat" style="animation-delay:4s;animation-duration:30s" />
+  <use href="#cat" class="cat" style="animation-delay:6s;animation-duration:35s" />
+  <use href="#cat" class="cat" style="animation-delay:8s;animation-duration:40s" />
+  <path fill="rgba(255,255,255,.3)" d="M0 53h1920v2H0z" />
+</svg>

dist/components/about.js

@@ -5,23 +5,25 @@
  */
 
 import { html, css, Component } from 'wkit'
+import { watch } from 'wkitd'
 
 import './titlebar.js'
 
 class About extends Component {
+  static animation = { type: 'scale' }
+
   static styles = [
     css`
       :host {
         display: flex;
         position: fixed;
-        left: 50%;
+        left: calc(50vw - 360px);
-        top: 50%;
+        top: calc(50vh - 280px);
         z-index: 2;
-        width: 800px;
+        width: 720px;
-        height: 640px;
+        height: 560px;
         font-size: 14px;
         color: var(--color-dark-1);
-        transform: translate(-50%, -50%);
         -webkit-user-select: none;
         user-select: none;
       }
@@ -32,7 +34,7 @@ class About extends Component {
         width: 100%;
         height: 100%;
         border-radius: 8px;
-        background: rgba(255, 255, 255, 0.75);
+        background: rgba(255, 255, 255, 0.93);
         box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
       }
     `,
@@ -43,7 +45,9 @@ class About extends Component {
         flex-direction: column;
         align-items: center;
         justify-content: space-between;
+        gap: 12px;
         padding: 32px 64px;
+        line-height: 1.5;
       }
 
       .name {
@@ -53,22 +57,44 @@ class About extends Component {
         text-decoration: none;
         color: var(--color-blue-1);
       }
+      summary {
+        text-indent: 2em;
+      }
+      .holder {
+        flex: 1;
+      }
     `
   ]
 
-  #date = new Date().format('m月d日 H:i')
+  #hide() {
+    this.$store.aboutAppShow = false
+  }
 
-  mounted() {}
+  mounted() {
+    watch('$store.aboutAppShow', v => {
+      this.$animate(!v)
+    })
+  }
 
   render() {
     return html`
       <main class="container">
-        <wc-titlebar></wc-titlebar>
+        <wc-titlebar
+          minimize
+          @close=${this.#hide}
+          @minimize=${this.#hide}
+        ></wc-titlebar>
         <div class="content">
           <header class="name">APP STORE</header>
           <cite>v1.0.0</cite>
-          <mark>dd</mark>
+          <summary>
-
+            Linux在线应用商店, 是一个应用分享平台, 每个人都可以提交应用信息,
+            并分享使用体验。本平台并不支持在线安装到本地,
+            仅提供应用的基本信息、使用体验, 以及官方的安装方法,
+            不保证该软件能适配所有的发行版或某个发行版的所有版本,
+            具体请参考官方说明, 或分享者自己的发行版信息。
+          </summary>
+          <span class="holder"></span>
           <footer>
             &copy; Powered By yutent, with
             <a href="https://git.wkit.fun/bytedo/wkitd" target="_blank"

dist/components/dock.js

@@ -29,7 +29,13 @@ class Dock extends Component {
         padding: 12px;
         border-radius: 16px;
         background: rgba(255, 255, 255, 0.5);
+        transform: translateX(-100%);
+        transition: transform 0.2s ease-in-out;
         box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
+
+        &:hover {
+          transform: translateX(0);
+        }
       }
     `,
     css`
@@ -80,8 +86,11 @@ class Dock extends Component {
 
   render() {
     return html`
-      <div class="container">
+      <main class="container">
-        <span class="dashboard"></span>
+        <span
+          class="dashboard"
+          @click=${_ => (this.$store.storeAppShow = true)}
+        ></span>
         <mark class="pipe"></mark>
         <nav class="apps">
           <a class="item"></a>
@@ -90,8 +99,11 @@ class Dock extends Component {
           <a class="item"></a>
         </nav>
         <mark class="pipe"></mark>
-        <span class="trash"></span>
+        <span
-      </div>
+          class="trash"
+          @click=${_ => (this.$store.aboutAppShow = true)}
+        ></span>
+      </main>
     `
   }
 }

dist/components/slider.js

@@ -0,0 +1,61 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/12/19 16:53:27
+ */
+
+import { html, css, Component } from 'wkit'
+
+class Slider extends Component {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        width: 100%;
+        height: 256px;
+      }
+
+      .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+      }
+      li {
+        list-style: none;
+      }
+    `,
+    css`
+      .list {
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        .item {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          border-radius: 16px;
+          background: var(--color-blue-1);
+        }
+      }
+    `
+  ]
+
+  render() {
+    return html`
+      <main class="container">
+        <ul class="list">
+          <li class="item"></li>
+          <li class="item"></li>
+          <li class="item"></li>
+        </ul>
+      </main>
+    `
+  }
+}
+
+Slider.reg('slider')

dist/components/titlebar.js

@@ -20,6 +20,7 @@ class Titlebar extends Component {
       height: 48px;
       padding: 0 16px;
       border-radius: 8px 8px 0 0;
+      background: var(--titlebar-background, transparent);
       color: var(--color-dark-1);
     }
     .btns {
@@ -32,17 +33,29 @@ class Titlebar extends Component {
         width: 12px;
         height: 12px;
         border-radius: 50%;
-        background: var(--color-red-1);
+        background: var(--color-grey-1);
-        cursor: pointer;
+        cursor: default;
 
-        &:nth-child(2) {
+        &:nth-child(1) {
-          background: var(--color-orange-1);
+          background: var(--color-red-1);
-        }
+          cursor: pointer;
-        &:nth-child(3) {
-          background: var(--color-green-1);
         }
       }
     }
+
+    :host([minimize]) .btns {
+      i:nth-child(2) {
+        background: var(--color-orange-1);
+        cursor: pointer;
+      }
+    }
+
+    :host([maximize]) .btns {
+      i:nth-child(3) {
+        background: var(--color-green-1);
+        cursor: pointer;
+      }
+    }
   `
 
   #handleClick(ev) {

dist/lib/ui/css/reset-basic.css

@@ -17,25 +17,112 @@
  * 
  */
 
-* {margin: 0;padding: 0;vertical-align: baseline;box-sizing: border-box;}
+* {
-::before, ::after {box-sizing: border-box;}
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+  box-sizing: border-box;
+}
+
+::before,
+::after {
+  box-sizing: border-box;
+}
+
 /* HTML5 display-role reset for older browsers */
-article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,content {display: block;}
+article,
-img {border: 0;display: inline-block;}
+aside,
-ol,ul {list-style: none;}
+details,
-blockquote, q {quotes: none;}
+figcaption,
-blockquote::before, blockquote::after, q::before, q::after {content: '';content: none;}
+figure,
-table {border-collapse: collapse;border-spacing: 0;}
+footer,
-a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline: none;}
+header,
-::-moz-focus-inner {border: none;outline: none;}
+hgroup,
+menu,
+nav,
+section,
+content {
+  display: block;
+}
 
-body {font-family: 'Helvetica Neue', Arial, 'WenQuanYi Micro Hei', 'PingFang SC', 'Hiragino Sans GB', 'Segoe UI', 'Microsoft Yahei', sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;}
+img {
-code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;white-space:pre-wrap;}
+  border: 0;
+  display: inline-block;
+}
 
-.noselect {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;}
+ol,
-.noselect img, .noselect a {-webkit-user-drag: none;}
+ul {
-.text-ell {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
+  list-style: none;
-.text-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+a:focus,
+input,
+textarea,
+button:focus,
+input:focus,
+textarea:focus {
+  outline: none;
+}
+
+::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+
+body {
+  font-family: 'Helvetica Neue', Arial, 'WenQuanYi Micro Hei', 'PingFang SC', 'Hiragino Sans GB', 'Segoe UI', 'Microsoft Yahei', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+
+code,
+pre,
+samp {
+  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+  white-space: pre-wrap;
+}
+
+.noselect {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.noselect img,
+.noselect a {
+  -webkit-user-drag: none;
+}
+
+.text-ell {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.text-thin {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
 :root {
   /* primary */
@@ -83,4 +170,4 @@ code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
   --color-drag-background: #fdf6ec;
   --color-readonly-background: #f7f8fb;
   --color-disabled-background: #fef0f0;
-}
+}

dist/store.js

@@ -2,12 +2,7 @@ import { createStore } from 'wkitd'
 
 export default createStore({
   user: {},
-  stats: {
+  aboutAppShow: false,
-    0: '❌已删除',
+  storeAppShow: true,
-    1: '🕒待审核中',
+  powerAppShow: false
-    2: '✅正常',
-    9: '🙅🏻拒绝收录'
-  },
-  searchInput: '',
-  result: { version: '', versions: [], id: '' } // 搜索结果
 })

dist/views/home.js

@@ -0,0 +1,192 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/12/19 16:53:27
+ */
+
+import { html, css, Component } from 'wkit'
+import { watch } from 'wkitd'
+
+import '../components/titlebar.js'
+import '../components/slider.js'
+
+class Home extends Component {
+  static animation = { type: 'scale', immediate: true }
+
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        position: fixed;
+        left: calc(50vw - 512px);
+        top: calc(50vh - 380px);
+        z-index: 2;
+        width: 1024px;
+        height: 760px;
+        font-size: 14px;
+        color: var(--color-dark-1);
+        -webkit-user-select: none;
+        user-select: none;
+      }
+
+      .container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+        background: rgba(233, 233, 233, 0.9);
+        box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
+
+        --titlebar-background: linear-gradient(
+          90deg,
+          transparent 180px,
+          #fff 180px
+        );
+      }
+
+      li {
+        list-style: none;
+      }
+    `,
+    css`
+      .body {
+        flex: 1;
+        display: flex;
+        line-height: 1.5;
+      }
+      .sidebar {
+        flex-shrink: 0;
+        width: 180px;
+        height: 100%;
+        border-radius: 0 0 0 8px;
+        backdrop-filter: blur(5px);
+      }
+
+      .content {
+        flex: 1;
+        height: 100%;
+        padding: 0 32px 32px;
+        border-radius: 0 0 8px 0;
+        background: #fff;
+      }
+    `,
+
+    css`
+      .searchbar {
+        padding: 0 16px;
+
+        input {
+          width: 100%;
+          height: 30px;
+          padding: 0 16px;
+          line-height: 1;
+          border: 1px solid var(--color-grey-1);
+          border-radius: 16px;
+          background: rgba(255, 255, 255, 0.5);
+          font-size: 12px;
+          color: inherit;
+          outline: none;
+          transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
+
+          &:focus {
+            background: rgba(255, 255, 255, 1);
+            border-color: transparent;
+          }
+
+          &::placeholder {
+            color: var(--color-grey-2);
+          }
+        }
+      }
+
+      .category {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        margin-top: 16px;
+        padding-left: 16px;
+        --wc-icon-size: 16px;
+
+        .item {
+          position: relative;
+          display: flex;
+          align-items: center;
+          height: 36px;
+          padding: 0 16px;
+          gap: 4px;
+          border-radius: 8px 0 0 8px;
+          transition: background 0.2s ease-in-out;
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.5);
+          }
+
+          &.active {
+            background: rgba(255, 255, 255, 1);
+
+            &::before,
+            &::after {
+              position: absolute;
+              right: 0;
+              top: -12px;
+              width: 12px;
+              height: 12px;
+              background: url(/assets/img/round.webp);
+              content: '';
+            }
+            &::after {
+              top: unset;
+              bottom: -12px;
+              transform: rotate(-90deg);
+            }
+          }
+        }
+      }
+    `
+  ]
+
+  #hide() {
+    this.$store.storeAppShow = false
+  }
+
+  mounted() {
+    // this.$store.storeAppShow = true
+    watch('$store.storeAppShow', v => {
+      this.$animate(!v)
+    })
+  }
+
+  render() {
+    return html`
+      <main class="container">
+        <wc-titlebar
+          minimize
+          maximize
+          @close=${this.#hide}
+          @minimize=${this.#hide}
+        ></wc-titlebar>
+        <div class="body">
+          <aside class="sidebar">
+            <search class="searchbar">
+              <input placeholder="搜索应用" />
+            </search>
+
+            <menu class="category">
+              <li class="item active">
+                <wc-icon name="client"></wc-icon>装机必备
+              </li>
+              <li class="item"><wc-icon name="doc"></wc-icon>办公软件</li>
+              <li class="item"><wc-icon name="setting"></wc-icon>开发工具</li>
+            </menu>
+          </aside>
+          <div class="content">
+            <wc-slider></wc-slider>
+          </div>
+        </div>
+      </main>
+    `
+  }
+}
+
+Home.reg('home')

dist/views/login.js

@@ -0,0 +1,205 @@
+import { html, css, Component } from 'wkit'
+import fetch from '/lib/fetch.js'
+
+import '../components/titlebar.js'
+
+class Login extends Component {
+  static animation = { type: 'scale' }
+
+  static styles = css`
+    :host {
+      display: flex;
+      position: fixed;
+      left: calc(50vw - 320px);
+      top: calc(50vh - 220px);
+      z-index: 2;
+      width: 640px;
+      height: 440px;
+      font-size: 14px;
+      color: var(--color-dark-1);
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      border-radius: 8px;
+      background: rgba(255, 255, 255, 0.75);
+      box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
+
+      .login-form,
+      .user-card {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        padding: 0 32px 32px;
+      }
+
+      .login-form {
+        .title {
+          line-height: 2;
+          border-bottom: 1px solid var(--color-plain-2);
+          font: 52px/2 'Sol Thin';
+          text-align: center;
+          color: var(--color-grey-3);
+        }
+
+        .third-part {
+          display: flex;
+          justify-content: center;
+          margin-top: 64px;
+        }
+
+        & a {
+          display: inline-flex;
+          width: 48px;
+          height: 48px;
+          margin: 0 16px;
+        }
+      }
+
+      .user-card {
+        align-items: center;
+
+        .avatar {
+          width: 128px;
+          height: 128px;
+          border: 3px solid var(--color-plain-1);
+          border-radius: 50%;
+          box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
+        }
+
+        .name {
+          margin-top: 32px;
+          line-height: 2;
+        }
+        .homepage {
+          display: flex;
+          align-items: center;
+          margin-top: 16px;
+          line-height: 1;
+          font-style: normal;
+          --wc-icon-size: 14px;
+
+          & a {
+            margin-left: 6px;
+            text-decoration: underline;
+            color: var(--color-blue-1);
+          }
+        }
+
+        .logout {
+          margin-top: 32px;
+          --wc-button-background: transparent;
+        }
+      }
+    }
+  `
+
+  #jumpLogin(site = 'github') {
+    switch (site) {
+      case 'github':
+        location.replace(
+          'https://github.com/login/oauth/authorize?' +
+            `client_id=57d9d247bda6302fd9d1&redirect_uri=https://www.jscdn.ink/login`
+        )
+        break
+    }
+  }
+
+  #logout() {
+    this.$store.user = {}
+    localStorage.removeItem('user')
+    localStorage.removeItem('token')
+  }
+
+  #hide() {
+    let lastPath = localStorage.getItem('login_callback_path') || '/'
+
+    this.$animate(true).then(_ => this.$router.replace(lastPath))
+  }
+
+  mounted() {
+    let route = this.$route
+    this.$animate()
+    if (route.query.code) {
+      fetch('/login/github', {
+        method: 'post',
+        body: {
+          code: route.query.code
+        }
+      })
+        .then(r => {
+          let lastPath = localStorage.getItem('login_callback_path') || '/'
+          layer.toast('登录成功', 'success')
+          this.$store.user = r.data.user
+          localStorage.setItem('user', JSON.stringify(r.data.user))
+          localStorage.setItem('token', r.data.token)
+          if (lastPath) {
+            localStorage.removeItem('login_callback_path')
+            this.$router.replace(lastPath)
+          } else {
+            this.$router.replace('/login')
+          }
+        })
+        .catch(r => {
+          console.log(r)
+          layer.toast(r.msg, 'error')
+        })
+    }
+  }
+
+  render() {
+    return html`
+      <main class="container">
+        <wc-titlebar @close=${this.#hide}></wc-titlebar>
+        ${this.$store.user.id
+          ? html`
+              <div class="user-card">
+                <img class="avatar" :src=${this.$store.user.avatar} />
+                <h3 class="name">${this.$store.user.name}</h3>
+                <cite class="homepage">
+                  <span><wc-icon name="home"></wc-icon>HOME:</span>
+                  <a target="_blank" :href=${this.$store.user.homepage}
+                    >${this.$store.user.homepage}</a
+                  >
+                </cite>
+                <wc-button type="danger" class="logout" @click=${this.#logout}
+                  >Log out</wc-button
+                >
+              </div>
+            `
+          : html`
+              <div class="login-form">
+                <section class="title">SIGN IN</section>
+                <section class="third-part">
+                  <a
+                    class="github"
+                    title="github"
+                    @click=${_ => this.#jumpLogin('github')}
+                  >
+                    <svg
+                      class="ico"
+                      viewBox="0 0 16 16"
+                      width="48"
+                      height="48"
+                      fill="currentColor"
+                    >
+                      <path
+                        d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 01-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 010 8c0-4.42 3.58-8 8-8z"
+                      />
+                    </svg>
+                  </a>
+                </section>
+              </div>
+            `}
+      </main>
+    `
+  }
+}
+
+Login.reg('login')