/**
 * {}
 * @author yutent<yutent.io@gmail.com>
 * @date 2023/12/19 16:53:27
 */

import { html, css, Component } from 'wkit'

import './titlebar.js'

class About extends Component {
  static styles = [
    css`
      :host {
        display: flex;
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 2;
        width: 800px;
        height: 640px;
        font-size: 14px;
        color: var(--color-dark-1);
        transform: translate(-50%, -50%);
        -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);
      }
    `,
    css`
      .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 32px 64px;
      }

      .name {
        font: 64px/2 'Sol Thin';
      }
      a {
        text-decoration: none;
        color: var(--color-blue-1);
      }
    `
  ]

  #date = new Date().format('m月d日 H:i')

  mounted() {}

  render() {
    return html`
      <main class="container">
        <wc-titlebar></wc-titlebar>
        <div class="content">
          <header class="name">APP STORE</header>
          <cite>v1.0.0</cite>
          <mark>dd</mark>

          <footer>
            &copy; Powered By yutent, with
            <a href="https://git.wkit.fun/bytedo/wkitd" target="_blank"
              >wkitd</a
            >
          </footer>
        </div>
      </main>
    `
  }
}

About.reg('about')