forked from chocolatemintt1/MLBB-Draftpick-Simulator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (123 loc) · 8.62 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MLBB Draft Pick Simulator</title>
<link rel="stylesheet" href="/styles.css">
<script src="https://www.gstatic.com/firebasejs/9.16.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.16.0/firebase-firestore.js"></script>
<!-- feedback JS file -->
<script src="feedback.js" defer></script>
</head>
<body>
<div class="container">
<div class="phase-indicator">MLBB Draft Pick Simulator</div>
<div id="countdown" class="countdown"></div>
<select id="teamSelect">
<option value="player">Choose Enemy Team</option>
<option value="blacklist">Blacklist International</option>
<option value="echo">Team Liquid Echo Philippines</option>
<option value="onic">Fanatic ONIC Philippines</option>
<option value="ap">Falcons AP Bren</option>
<option value="tnc">TNC</option>
<option value="aurora">Aurora MLBB</option>
<option value="rsg">RSG Philippines</option>
<option value="omg">Smart Omega</option>
</select>
<button id="startGame">Start Draft</button>
<div class="draft-board">
<div class="team" id="playerTeam">
<div class="team-header">
<img class="team-logo" src="/assets/teams/mpl.png" alt="Your Logo">
<h2 class="team-name">Your Team</h2>
</div>
<div class="bans picks-bans" id="playerBans"></div>
<div class="picks picks-bans" id="playerPicks"></div>
</div>
<div class="team" id="enemyTeam">
<div class="team-header">
<img id="enemyTeamLogo" class="team-logo" src="/assets/teams/mpl.png" alt="Enemy Team Logo">
<h2 class="team-name" id="enemyTeamName">Enemy Team</h2>
</div>
<div class="bans picks-bans" id="enemyBans"></div>
<div class="picks picks-bans" id="enemyPicks"></div>
</div>
</div>
<div id="roleFilters" class="role-filters"></div>
<div id="heroPool" class="hero-pool"></div>
<footer class="site-footer">
<div class="footer-content">
<div class="footer-section">
<h3>MLBB Draft Simulator</h3>
<p>Experience the thrill of MLBB drafting with a interactive simulator. Perfect your strategies
and outmaneuver your opponent coach!</p>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" id="howToPlayLink">How to Play</a></li>
<li><a href="maintenance-page/404.html">Hero Gallery</a></li>
<li><a href="beta-page/index.html">Beta</a></li>
<li><a href="maintenance-page/404.html">About Us</a></li>
<li><a href="feedback-page/index.html">Write a Feedback</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Connect With Me</h3>
<div class="social-icons">
<a href="https://www.facebook.com/smurf.carloamparo22" target="_blank" class="social-icon"
aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="24" height="24">
<path fill="currentColor"
d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z" />
</svg>
</a>
<a href="https://x.com/chocolatemintt1" target="_blank" class="social-icon"
aria-label="Twitter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24">
<path fill="currentColor"
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
</svg>
</a>
<a href="https://www.instagram.com/chocolatemintt1/" target="_blank" class="social-icon"
aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="24" height="24">
<path fill="currentColor"
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" />
</svg>
</a>
<a href="https://www.youtube.com/@konose_1" target="_blank" class="social-icon"
aria-label="YouTube">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="24" height="24">
<path fill="currentColor"
d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z" />
</svg>
</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 MLBB Draft Simulator. All rights reserved.</p>
<p>Programmed by Carlo Amparo</p>
</div>
</footer>
<div id="overlay" class="overlay"></div>
<div id="howToPlayPopup" class="popup">
<span class="popup-close">×</span>
<h2>How to Play</h2>
<p>Here are the instructions on how to play the MLBB Draft Pick Simulator:</p>
<ol>
<li>Select the enemy team from the dropdown menu.</li>
<li>Click "Start Draft" to begin the drafting process.</li>
<li>Follow the on-screen prompts to ban and pick heroes.</li>
<li>Use the role filters to narrow down your hero choices.</li>
<li>Complete the draft by selecting all required heroes.</li>
</ol>
<p>Good luck and have fun strategizing!</p>
</div>
</div>
<script type="module" src="main.js"></script>
</body>
</html>