forked from ddiu8081/oreooo
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
74 lines (74 loc) · 3.85 KB
/
index.html
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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Hamburgerburger</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="/favicon.png">
<link rel="stylesheet" href="assets/css/hamburger.css">
<link href="https://fonts.googleapis.com/css?family=Gamja+Flower|Kosugi+Maru|ZCOOL+KuaiLe&display=swap" rel="stylesheet">
</head>
<body>
<div id="app" tabindex="-1" @keyup="keyEvent($event)">
<transition name="bounce">
<div class="content-loading" v-show="loading">
<img class="loading-img" src="assets/image/hamburger.png" alt="">
</div>
</transition>
<div class="container" v-show="!loading && !output">
<div class="icon tooltip">
<span class="tooltiptext" v-html="$t('tooltip')"></span>
</div>
<div class="title">
<div class="meta" v-t="'input.meta'"></div>
<div v-show="hamburgerStr">
<div class="input str" v-show="hamburgerStr">
<span>{{ hamburgerStr }}</span>
</div>
</div>
<div v-show="!hamburgerStr">
<div class="input str placeholder">
<span v-t="'input.placeholder'"></span>
<img class="icon" @click="getRandom()" src="assets/image/random.png">
</div>
</div>
</div>
<div class="control">
<div @click="strAdd('h')" class="btn small" v-t="'input.btn.h'"></div>
<div @click="strAdd('b')" class="btn small" v-t="'input.btn.b'"></div>
<div @click="strAdd('g')" class="btn small" v-t="'input.btn.g'"></div>
<div @click="strAdd('-')" class="btn small" v-t="'input.btn.and'"></div>
<div @click="strAdd('-1')" class="btn small">-1</div>
</div>
<div @click="generateImage" class="index-btn" v-t="'input.generate'"></div>
</div>
<div class="container" v-show="!loading && output">
<div class="title">
<div class="meta" v-t="'output.meta'"></div>
<div class="output str">{{ hamburgerStr }}</div>
</div>
<div class="output-image">
<canvas width="240px" height="500px" ref="hamburger_canvas" id="hamburger_canvas"></canvas>
</div>
<div v-if="isIOS()" @click="showImage" class="btn" v-t="'output.show'"></div>
<div v-else @click="downloadImage" class="btn" v-t="'output.save'"></div>
<div @click="backToInput" class="btn" v-t="'output.back'"></div>
</div>
<footer class="footer" v-show="!loading && !output">
<ul class="lang">
<li @click="changeLang(value)" v-for="(value, key) in languages" :key="value">{{ key }}</li>
</ul>
<div class="meta">
Source code:
<a href="https://github.com/VigorousPro/hamburgerburger">Github</a>
Fork from:
<a href="https://github.com/ddiu8081/oreooo">Github</a>
</div>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-i18n.min.js"></script>
<script src="assets/js/hamburger.js"></script>
</body>
</html>