sakana-widget/index.html at main · dsrkafuu/sakana-widget · 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Sakana! Widget</title>
    <meta
      name="description"
      content="Add the Sakana! Widget to your own web page! | 把石蒜模拟器添加到你自己的网页内！"
    />
    <meta
      name="keywords"
      content="Lycoris Recoil,リコリス・リコイル,莉可丽丝,石蒜虚拟器,锦木千束,錦木千束,井之上泷奈,井ノ上たきな"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?display=swap&family=Inter:wght@400;500"
    />
    <link rel="icon shortcut" href="favicon.ico" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
    <link rel="stylesheet" href="sakana.min.css" />
    <style>
      html,
      body {
        font-family:
          Inter,
          -apple-system,
          BlinkMacSystemFont,
          'Noto Sans SC',
          'Noto Sans JP',
          sans-serif;
        margin: 0;
      }
      #sakana-widget-chisato {
        position: fixed;
        right: 24px;
        bottom: 24px;
      }
      #sakana-widget-takina {
        position: fixed;
        left: 24px;
        bottom: 24px;
      }
      main {
        text-align: center;
        margin: 24px;
        display: flex;
        align-items: center;
        flex-direction: column;
      }
      main div {
        margin-top: 16px;
        display: flex;
      }
      @media screen and (max-width: 768px) {
        main div {
          display: none;
        }
      }
      main a,
      main a:visited {
        margin-top: 32px;
        display: block;
        color: inherit;
        background-color: #eeeeee;
        font-size: 18px;
        width: 140px;
        height: 40px;
        line-height: 40px;
        border-radius: 2px;
        text-decoration: none;
      }
      main a:hover,
      main a:active {
        color: #ffffff;
        background-color: #7793cc;
        text-decoration: none;
      }
      h1 {
        font-size: 1.75em;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>🐟「Sakana! Widget」</h1>
      <p>
        Add the Sakana! Widget to your own web page! Support custom images, auto
        resizing and more runtime params!
      </p>
      <p>
        把石蒜模拟器添加到你自己的网页内！支持自定义图片、自动缩放和更多运行参数！
      </p>
      <div>
        <img
          src="https://raw.githubusercontent.com/dsrkafuu/sakana-widget/main/src/characters/chisato.png"
          height="160px"
          alt="Chisato"
          title="Chisato"
        />
        <img
          src="https://raw.githubusercontent.com/dsrkafuu/sakana-widget/main/src/characters/takina.png"
          height="160px"
          alt="Takina"
          title="Takina"
        />
      </div>
      <a href="https://github.com/dsrkafuu/sakana-widget" target="_blank">
        GitHub
      </a>
    </main>
    <div id="sakana-widget-chisato"></div>
    <div id="sakana-widget-takina"></div>
    <script src="sakana.min.js"></script>
    <script>
      new SakanaWidget().mount('#sakana-widget-chisato');
      new SakanaWidget({ character: 'takina' }).mount('#sakana-widget-takina');
    </script>
  </body>
</html>