Bitflower/src/views/HomeView.vue

<script setup lang="ts">
import Nav from '@/components/Nav.vue'
import Footer from '@/components/Footer.vue'
import {useSunStore} from "@/stores/sun";

const sunStore = useSunStore()

const toPage = (url:string) => {
  window.open(url)
}

</script>

<template>
  <main class="main">
    <div class="mainBG">
      <img src="../assets/navBg.png" alt="BG">
    </div>
    <div class="BG1">
      <img src="../assets/home/BG1.png" alt="BG">
    </div>
    <div class="BG2">
      <img src="../assets/home/BG2.png" alt="BG">
    </div>
    <div class="BG3">
      <img src="../assets/home/BG3.png" alt="BG">
    </div>
    <Nav/>
    <div class="header">
      <div class="left" style="z-index: 2">
        <img class="left" v-show="!sunStore.sun" src="../assets/home/header-white.svg" alt="header">
        <img class="left" v-show="sunStore.sun" src="../assets/home/header.svg" alt="header">
      </div>
      <div class="right">
        <video v-show="!sunStore.sun" autoplay muted width="640" height="640" src="../media/0727(7).mp4">
        </video>
        <video v-show="sunStore.sun" autoplay muted width="640" height="640" src="../media/0727(12).mp4">
        </video>
      </div>
    </div>
    <div class="airdrop">
      <div class="title">
        <div class="left">
          <img v-show="!sunStore.sun" src="../assets/home/airdrop.svg" alt="airdrop">
          <img v-show="sunStore.sun" src="../assets/home/airdrop-black.svg" alt="airdrop">
        </div>
        <div class="right">
          <div class="text1">
            Airdrop
          </div>
          <div class="text2">
            Chain transaction data query platform
          </div>
        </div>
      </div>
      <div class="description">
        <div class="left">
          <img src="../assets/home/airdrop-1.svg" alt="airdrop-1">
          <div class="text1">
            Transaction data
          </div>
          <div class="text2">
            View the count of interactions on the public chain
          </div>
          <div class="shadow"/>
        </div>
        <div class="right">
          <div class="item1">
            <div class="item1Left">
              <div class="text1">
                View the count of Dapps
              </div>
              <div class="text1">
                you have interacted with historically.
              </div>
              <div class="text2">
                *Specific Dapp names are supported later
              </div>
            </div>
            <div class="item1Right">
              <img src="../assets/home/airdrop-2.svg" alt="airdrop-2">
            </div>
            <div class="shadow"/>
          </div>
          <div class="item1">
            <div class="item1Left">
              <div class="text1">
                Display the historical count of
              </div>
              <div class="text1">
                interactions in a histogram format.
              </div>
            </div>
            <div class="item1Right">
              <img src="../assets/home/airdrop-3.svg" alt="airdrop-2">
            </div>
            <div class="shadow"/>
          </div>
        </div>
      </div>
    </div>
    <div class="dividingLine"/>
    <div class="NFT" id="NFT">
      <div class="NFT-left">
        <div class="box1">
          <div class="text1">
            Bitflower NFT
          </div>
        </div>
        <div class="box2">
          <div class="frame">
            <div class="text4">
              zkSync
            </div>
          </div>
          <div class="frame">
            <div class="text4">
              ERC 721
            </div>
          </div>
        </div>
        <div class="box3">
        <span class="text2">
          Created by
        </span>
          <span class="text3">
          @Bitflower
        </span>
          <span class="text2">
          on zkSync Era
        </span>
        </div>
        <div class="box4">
          <div class="text2">
            Mint starts July 12 at 5:00 AM GMT+8
          </div>
        </div>
        <div class="box5">
          <div class="progress"/>
        </div>
        <div class="box6">
          <div class="text2">
            42.1% minted
          </div>
          <div class="text5">
            100/222
          </div>
        </div>
        <div class="button">
          <img src="../assets/home/button-1.svg" alt="button">
          <div class="text2" style="color: white">
            Go to mint
          </div>
          <img src="../assets/home/button-2.svg" alt="button">
        </div>
        <img v-show="!sunStore.sun" style="margin-top: 12px" src="../assets/home/zksync.svg" alt="zksync">
        <img v-show="sunStore.sun" style="margin-top: 12px" src="../assets/home/zksync-black.svg" alt="zksync">
      </div>
      <div class="NfT-right">
        <img v-show="!sunStore.sun" src="../assets/home/NFT-1-white.svg" alt="NFT">
        <img v-show="sunStore.sun" src="../assets/home/NFT-1.svg" alt="NFT">
        <img class="bitflower" src="../assets/home/NFT-2.svg" alt="NFT">
      </div>
    </div>
    <div class="dividingLine"/>
    <div class="roadMap">
      <div class="left">
        <img v-show="!sunStore.sun" style="width: 128px;height: 128px" src="../assets/home/roadmap-white.svg"
             alt="roadmap">
        <img v-show="sunStore.sun" style="width: 128px;height: 128px" src="../assets/home/roadmap.svg" alt="roadmap">
        <div class="text1">
          Road map
        </div>
        <div class="text2">
          Chain transaction data query platform
        </div>
      </div>
      <el-scrollbar>
        <div class="right">
          <div class="horizontalLine">
            <div class="greenHorizontalLine">

            </div>
          </div>
          <div class="greenCircle"/>
          <div class="year">
            2023
          </div>
          <div class="item" style="left: 145px">
            <div class="itemUp">
              Q1
              <div class="greenVerticalLine"/>
              <div class="greenCircle"/>
              <div class="info">
                <img class="img" v-show="!sunStore.sun" style="margin-top: 12px" src="../assets/home/zksync.svg" alt="zksync">
                <img class="img" v-show="sunStore.sun" style="margin-top: 12px" src="../assets/home/zksync-black.svg" alt="zksync">

                <div class="text">
                  Online zkS transaction data statistics
                </div>
                <div class="text">
                  Dapp quick entry
                </div>
                <div class="text">
                  .....
                </div>
              </div>
            </div>
          </div>

          <div class="item" style="left: 395px">
            <div class="itemDown">
              Q2
              <div class="greenVerticalLine"/>
              <div class="greenCircle"/>
              <div class="info">
                <div class="text">
                  Online Layer Zero transaction data statistics
                </div>
                <div class="text">
                  Cross-chain transaction statistics
                </div>
                <div class="text">
                  Dapp quick entry
                </div>
                <div class="text">
                  .....
                </div>
                <img class="img" v-show="!sunStore.sun" style="margin-top: 12px" src="../assets/home/layerZero-white.svg" alt="zksync">
                <img class="img" v-show="sunStore.sun" style="margin-top: 12px" src="../assets/home/layerZero.svg" alt="zksync">
              </div>
            </div>
          </div>

          <div class="item" style="left: 640px">
            <div class="itemUp">
              Q3
              <div class="greenVerticalLine"/>
              <div class="greenCircle"/>
              <div class="info">
                <img class="img" v-show="!sunStore.sun" style="margin-top: 12px" src="../assets/home/bitflower-white.svg" alt="zksync">
                <img class="img" v-show="sunStore.sun" style="margin-top: 12px" src="../assets/home/bitflower.svg" alt="zksync">

                <div class="text">
                  Deploy the NFT on the zkSync network
                </div>
                <div class="text">
                  Pin for the Weber 3.0
                </div>
              </div>
            </div>
          </div>

          <div class="item" style="left: 880px">
            <div class="itemDown" style="border: 1px solid #4C4C4C;">
              Q4
              <div class="greenVerticalLine" style="border-right: 1px solid #4c4c4c;"/>
              <div class="greenCircle" style="background: #4c4c4c"/>
              <div class="info">
                <div class="text">
                  Coming soon...
                </div>
                <img class="img" v-show="!sunStore.sun" style="margin-top: 12px" src="../assets/home/starknet-white.svg" alt="zksync">
                <img class="img" v-show="sunStore.sun" style="margin-top: 12px" src="../assets/home/starknet.svg" alt="zksync">
              </div>
            </div>
          </div>

        </div>
      </el-scrollbar>
    </div>
    <div class="dividingLine"/>
    <Footer/>
  </main>
</template>

<style scoped lang="scss">
.main {
  width: 1440px;
  height: 100%;
  margin: auto;
  //border: 1px solid var(--vt-c-border);
  border-top: none;
  border-bottom: none;
  padding: 30px 60px 0;

  .dividingLine {
    width: 100vw;
    height: 1px;
    border-bottom: 1px solid var(--vt-c-border);
    position: absolute;
    left: 0;
  }

  .mainBG {
    position: absolute;
    top: 0;
    z-index: -1;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
  }
  .BG1 {
    position: absolute;
    top: -560px;
    left: 210px;
    display: flex;
    justify-content: center;
    animation: rotateAnimation 10s linear infinite;
  }
  .BG2 {
    position: absolute;
    top: -660px;
    left: -370px;
    display: flex;
    justify-content: center;
    animation: rotateAnimation 15s linear infinite;
  }
  .BG3 {
    position: absolute;
    top: 300px;
    left: 700px;
    display: flex;
    justify-content: center;
    animation: rotateAnimation 10s linear infinite;
  }
  @keyframes rotateAnimation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 100px 0;

    .left {
      user-select: none;
      -webkit-user-drag: none;
    }

    .right {
      //user-select: none;
      //-webkit-user-drag: none;
      //width: 320px;
      //height: 180px;
    }
  }

  .airdrop {
    display: flex;
    flex-direction: column;
    gap: 40px;

    .title {
      display: flex;
      align-items: center;
      gap: 16px;

      .right {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .text1 {
          font-family: HONOR Sans CN;
          font-size: 32px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }

        .text2 {
          font-family: HONOR Sans CN;
          font-size: 15px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          opacity: 0.5;
        }
      }
    }

    .description {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 110px;

      .left {
        width: 618px;
        height: 490px;
        border: 1px solid #4C4C4C;
        background: var(--vt-c-pure);
        box-shadow: 2px 2px 24px 0 rgba(255, 255, 255, 0.20);
        position: relative;
        padding: 60px;

        .text1 {
          font-family: HONOR Sans CN;
          font-size: 32px;
          font-style: normal;
          font-weight: 300;
          line-height: normal;
          margin-top: 46px;
          margin-bottom: 16px;
        }

        .text2 {
          font-family: HONOR Sans CN;
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          opacity: 0.5;
        }

        .shadow {
          width: 618px;
          height: 490px;
          border: 1px solid #4C4C4C;
          background: #000;
          position: absolute;
          top: 10px;
          left: 10px;
          z-index: -1;
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        gap: 50px;

        .item1 {
          width: 640px;
          height: 220px;
          border: 1px solid #4C4C4C;
          background: var(--vt-c-pure);
          position: relative;
          padding: 38px 60px;
          display: flex;
          align-items: center;
          gap: 54px;

          .item1Left {
            .text1 {
              font-family: HONOR Sans CN;
              font-size: 19px;
              font-style: normal;
              font-weight: 300;
              line-height: normal;
            }

            .text2 {
              font-family: HONOR Sans CN;
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
              opacity: 0.5;
              margin-top: 12px;
            }
          }

          .shadow {
            width: 640px;
            height: 220px;
            border: 1px solid #4C4C4C;
            background: #000;
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: -1;
          }
        }
      }
    }
  }

  .NFT {
    padding: 40px 140px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .NFT-left {
      .text1 {
        font-family: HONOR Sans CN;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }

      .text2 {
        font-family: HONOR Sans CN;
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }

      .text3 {
        font-family: HONOR Sans CN;
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        color: #0075FF;
      }

      .text4 {
        font-family: HONOR Sans CN;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        color: #FFF;
      }

      .text5 {
        font-family: HONOR Sans CN;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        opacity: 0.5;
      }

      .box1 {
        margin-bottom: 8px;
      }

      .box2 {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        gap: 12px;

        .frame {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 6px 12px;
          width: fit-content;
          border: 1px solid #4C4C4C;
          background: #010101;
        }
      }

      .box3 {
        margin-bottom: 28px;
      }

      .box4 {
        margin-bottom: 16px;
      }

      .box5 {
        width: 400px;
        height: 8px;
        background: #caccc8;
        position: relative;
        margin-bottom: 12px;

        .progress {
          position: absolute;
          width: 145px;
          height: 8px;
          background: #00FFC2;
        }
      }

      .box6 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
      }

      .button {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 240px;
        padding: 12px 24px;
        justify-content: center;
        border: 1px solid #4C4C4C;
        background: #010101;
      }
    }

    .NfT-right {
      position: relative;

      .bitflower {
        position: absolute;
        top: 40px;
        left: 40px;
      }
    }
  }

  .roadMap {
    height: 650px;
    display: flex;
    align-items: center;
    margin-right: -60px;

    .text1 {
      font-family: HONOR Sans CN;
      font-size: 32px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      margin-top: 16px;
      margin-bottom: 12px;
    }

    .text2 {
      font-family: HONOR Sans CN;
      font-size: 15px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      opacity: 0.5;
    }

    .left {
      width: 476px;
      padding: 0 60px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-right: 1px solid var(--vt-c-border);
    }

    .right {
      width: 1200px;
      height: 650px;
      display: flex;
      align-items: center;
      padding-left: 25px;
      position: relative;

      .greenCircle {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #00FFC2;
        position: absolute;
      }

      .horizontalLine {
        width: 1200px;
        height: 1px;
        border-bottom: 1px solid #4c4c4c;
        position: relative;

        .greenHorizontalLine {
          width: 630px;
          height: 1px;
          border-bottom: 1px solid #00FFC2;
          position: absolute;
        }
      }

      .year {
        font-family: HONOR Sans CN;
        font-size: 27px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        position: absolute;
        top: 260px
      }

      .item {
        position: absolute;

        .itemUp {
          display: inline-flex;
          padding: 12px 24px;
          align-items: center;
          gap: 6px;
          border: 1px solid #00FFC2;
          background: #010101;
          color: #FFF;
          font-family: HONOR Sans CN;
          font-size: 12px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          position: relative;
          .greenVerticalLine {
            width: 1px;
            height: 120px;
            border-right: 1px solid #00FFC2;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            top:-120px;
          }
          .greenCircle {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #00FFC2;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            top:-120px;
          }
          .info {
            display: flex;
            flex-direction: column;
            gap:12px;
            position: absolute;
            top:-140px;
            right: -250px;
            width: 250px;
            .img{
              width: 68px;
              height: 16px;
            }
            .text{
              font-family: HONOR Sans CN;
              font-size: 12px;
              font-style: normal;
              font-weight: 500;
              line-height: normal;
              opacity: 0.5;
              color: var(--color-text);
            }
            .text::before {
              content: "\00B7";
              margin-right: 5px;
            }
          }
        }
        .itemDown {
          display: inline-flex;
          padding: 12px 24px;
          align-items: center;
          gap: 6px;
          border: 1px solid #00FFC2;
          background: #010101;
          color: #FFF;
          font-family: HONOR Sans CN;
          font-size: 12px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          position: relative;

          .greenVerticalLine {
            width: 1px;
            height: 150px;
            border-right: 1px solid #00FFC2;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            bottom:-150px;
          }
          .greenCircle {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #00FFC2;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            bottom:-150px;
          }
          .info {
            display: flex;
            flex-direction: column;
            gap:12px;
            position: absolute;
            bottom:-155px;
            right: -300px;
            width: 300px;
            .img{
              width: 68px;
              height: 16px;
            }
            .text{
              font-family: HONOR Sans CN;
              font-size: 12px;
              font-style: normal;
              font-weight: 500;
              line-height: normal;
              opacity: 0.5;
              color: var(--color-text);
            }
            .text::before {
              content: "\00B7";
              margin-right: 5px;
            }
          }
        }
      }

    }

  }

  .footer {
    display: flex;

    .footer-left {
      width: 757px;
      height: 275px;
      border-right: 1px solid var(--vt-c-border);
      margin-left: -60px;

      .logoBox {
        padding: 40px 60px 66px 60px;
        border-bottom: 1px solid var(--vt-c-border);

        .logo {
          display: flex;
          flex-direction: column;
          gap:24px;
          width: 218px;
        }
      }

      .officeLink {
        display: flex;
        align-items: center;
        gap:28px;
        height: 100px;
        padding-left: 60px;
      }

    }

    .footer-right{
      width: 680px;
      padding: 40px 60px;
      .descriptive{
        font-family: HONOR Sans CN;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        opacity: 0.5;
        margin-top: 9px;
        margin-bottom: 24px;
      }
      .button{
        width: fit-content;
        display: flex;
        padding: 12px 24px;
        align-items: center;
        gap: 6px;
        border: 1px solid var(--vt-c-border);
        background: #010101;
        cursor: pointer;
        color: #FFF;
        font-family: HONOR Sans CN;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
      }
    }
  }
}
</style>