-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
150 lines (146 loc) · 6.47 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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<title>Gashapon</title>
<link rel="stylesheet" href="./css/result.css">
<link rel="stylesheet" href="./css/index.css" />
<link rel="stylesheet" href="./css/purchase.css">
<link rel="stylesheet" href="./css/history.css">
<title>GACHA</title>
</head>
<body>
<div class="header_bar">
<button class="modal_btns history-open" id="history-open">HISTORY</button>
<div class="right_align_section">
<div class="gem_amount">
Gems: <span id="GEM_AMT"></span>
</div>
<button class="modal_btns open-button">PURCHASE</button>
</div>
</div>
<dialog class="modal" id="modal">
<h2 style="text-align: center; margin-bottom: 1rem;">Purchase Gems</h2>
<div class="purchase_counter">Total Gems Bought: <span id="buy_number">0</span>
<div class="status_level">
<div class="status_icon" id="goldfish" hidden>
<img src="./imgs/goldfish.png">
</div>
<div class="status_icon" id="dolphin" hidden>
<img src="./imgs/dolphin.png">
</div>
<div class="status_icon" id="whale" hidden>
<img src="./imgs/whale.png">
</div>
</div>
</div>
<div class="purchase_selection">
<button class="purchase_btn" value="100">ADD 100 <span class="costs_value">$1</span></button>
<button class="purchase_btn" value="550">ADD 550 <span class="costs_value">$5</span></button>
<button class="purchase_btn" value="1300">ADD 1300 <span class="costs_value">$10</span></button>
<button class="purchase_btn" value="2900">ADD 2900 <span class="costs_value">$25</span></button>
<button class="purchase_btn" value="6000">ADD 6000 <span class="costs_value">$50</span></button>
<button class="purchase_btn" value="12500">ADD 12500 <span class="costs_value">$100</span></button>
</div>
<button class="button close-button">Close</button>
</dialog>
<dialog class="modal" id="historyModal">
<button class="modalClose history-close">Close</button>
<button class="sort-star" value="5" id="sort5">Show 5⋆</button>
<button class="sort-star" value="4" id="sort4">Show 4⋆</button>
<button class="sort-star" value="3" id="sort3">Show 3⋆</button>
<span class="right_align">
<button class="reset-star active-star" id="resetter">Show All</button>
</span>
<div class="history-list" id="history-list">
<table>
<tbody id="history-table">
<tr>
<th></th>
<th>Name</th>
<th>Date</th>
<th>Rating</th>
</tr>
</tbody>
</table>
</div>
<div class="page-numbers" id="page-numbers">
<button class="btn-pagination" id="previous-btn" value="previous">
<svg width="253" height="332" viewBox="0 0 253 332" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M127.5 5L7 165L127.5 327M247.5 5L127 165L247.5 327M187.5 5L67 165L187.5 327"
stroke="black" stroke-width="10" stroke-linecap="round" />
</svg>
</button>
<div id="current-number">1</div>
<button class="btn-pagination" id="next-btn" value="next">
<svg width="252" height="332" viewBox="0 0 252 332" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M125 327L245.5 167L125 5M5 327L125.5 167L5 5M65 327L185.5 167L65 5"
stroke="black" stroke-width="10" stroke-linecap="round" />
</svg>
</button>
</div>
</dialog>
<div class="summon_banner">
<input class="banner_slider" type="radio" name="slider" id="item-1" checked>
<input class="banner_slider" type="radio" name="slider" id="item-2">
<input class="banner_slider" type="radio" name="slider" id="item-3">
<div class="cards">
<label class="cardzz" for="item-1" id="song-1">
<img src="./imgs/banner.png" alt="limited">
</label>
<label class="cardzz" for="item-2" id="song-2">
<img src="./imgs/equip2_banner.png" alt="notLimited">
</label>
<label class="cardzz" for="item-3" id="song-3">
<img src="./imgs/standard_banner.png" alt="standard">
</label>
</div>
</div>
<div class="video-container">
<video src="./imgs/5starwish-single.mp4" playsinline muted></video>
<button id="skip" class="skip">
<p>Skip</p>
<div><span>›</span><span>›</span><span>›</span></div>
</button>
</div>
<div tabindex="-1" id="rate_info">
ⓘ
<span class="tooltip">
5 star guaranteed at 135 summons with increases chances starting at 100.
4 star guaranteed every 10 summons
<ul>
<li>5 Star: 0.7%</li>
<li>4 Star: 5.3%</li>
<li>3 Star: 94%</li>
</ul>
<ul>
<li>Element attribute: Characters</li>
<li>Spell attribute: Anime</li>
<li>Trap attribute: Manga/Novel</li>
</ul>
</span>
</div>
<div class="container">
<div class="box" id="cards-summoned"></div>
<div class="summon_btns">
<button class="close">Return Home</button>
<button id="resingle" value="100" id="asdf">1X SUMMON</button>
<button id="remulti" id="asdf" value="1000">10X SUMMON</button>
</div>
</div>
<div class="summon_btns">
<button id="single" value="100" id="asdf" disabled>1X SUMMON</button>
<button id="multi" id="asdf" value="1000" disabled>10X SUMMON</button>
</div>
<div class="landscape">
<p>Switch to Landscape or increase viewport</p>
</div>
</body>
<script type="module" src="./js/index.js"></script>
<script>
</script>
</html>