ju_index/index.html at master · Zaaaaaa/ju_index · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
  <head>
    <title>橘橘如律令 事事美年达</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <audio id="ado" controls="controls" autoplay="autoplay" style="display:none" loop="loop">
      <source src="https://selfwork.oss-cn-shanghai.aliyuncs.com/bgm.mp3" type="audio/mp3">
    </audio>
    <div id="page1">
      <img class="bg-img" src="https://selfwork.oss-cn-shanghai.aliyuncs.com/first/btn-bg.jpg">
      <img class="gif" style="width:100vw;top:8vw" src="https://selfwork.oss-cn-shanghai.aliyuncs.com/first/title.gif" >
      <img class="gif" style="width:20vw;top:0;right:0" src="https://selfwork.oss-cn-shanghai.aliyuncs.com/first/up-right-orange.gif" >
      <img class="gif" style="width:35vw;top:56vw;left:0" src="https://selfwork.oss-cn-shanghai.aliyuncs.com/first/left-drinking.gif" >
      <img class="gif" style="width:32vw;bottom:12vw;left:0" src="https://selfwork.oss-cn-shanghai.aliyuncs.com/first/bottom-left-orange.gif" >
      <img class="button after" src="https://selfwork.oss-cn-shanghai.aliyuncs.com/first/btn-after.png" hidden>
      <img class="button btn-before" src="https://selfwork.oss-cn-shanghai.aliyuncs.com/first/btn-before.png" onclick="clickStart()" hidden>
    </div>
    <div id="page2" class="bg">
      <img class="gif" style="width:24vw;top:100vw;right:0" src="https://selfwork.oss-cn-shanghai.aliyuncs.com/pickone/bottom-right-orange.gif">
      <img class="gif" style="width:24vw;top:80vw;left:0" src="https://selfwork.oss-cn-shanghai.aliyuncs.com/pickone/left-orange.gif" >
      <img class="gif" style="width:22vw;top:12vw;right:0" src="https://selfwork.oss-cn-shanghai.aliyuncs.com/pickone/up-right-drinking.gif" >
      <img class="gif" style="width:30vw;top:0;left:0" src="https://selfwork.oss-cn-shanghai.aliyuncs.com/pickone/lip.gif" >
      <div class="container">
        <div class="bottle_block flipper" id="love" onclick="selectBottle('love')">
          <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/wipe/bottle-grow.png" hidden>
          <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/wipe/bottle-no-grow.png">
          <img src="img/love-cover.png" class="cover">
          <!-- <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/pickone/love.png" class="cover"> -->
        </div>
        <div class="bottle_block flipper" id="career" onclick="selectBottle('career')">
          <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/wipe/bottle-grow.png" hidden>
          <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/wipe/bottle-no-grow.png">
          <img src="img/career-cover.png" class="cover">
          <!-- <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/pickone/career.png" class="cover"> -->
        </div>
        <div class="bottle_block flipper" id="study" onclick="selectBottle('study')">
          <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/wipe/bottle-grow.png" hidden>
          <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/wipe/bottle-no-grow.png">
          <img src="img/study-cover.png" class="cover">
          <!-- <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/pickone/study.png" class="cover"> -->
        </div>
        <div class="bottle_block flipper" id="wealth" onclick="selectBottle('wealth')">
          <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/wipe/bottle-grow.png" hidden>
          <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/wipe/bottle-no-grow.png">
          <img src="img/wealth-cover.png" class="cover">
          <!-- <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/pickone/wealth.png" class="cover"> -->
        </div>
        <div class="bottle_block flipper" id="health" onclick="selectBottle('health')">
          <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/wipe/bottle-grow.png" hidden>
          <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/wipe/bottle-no-grow.png">
          <img src="img/health-cover.png" class="cover">
          <!-- <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/pickone/health.png" class="cover"> -->
        </div>
      </div>
    </div>
    <div id="page3" class="bg">
      <div>
        <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/wipe/bottle-no-grow.png" class="bottle">
        <div class="canvas_container">
          <img class="card" src="">
          <canvas id="back" height="420px" width="240px"></canvas>
        </div>
        <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/wipe/wipe-paw.png" class="tumo">
      </div>
      <div class="cover">
        <img src="https://selfwork.oss-cn-shanghai.aliyuncs.com/wipe/wipe-hand.png" class="hand">
      </div>
    </div>

    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>