-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
101 lines (85 loc) · 4.77 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
<!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">
<meta name="author" content="Nury Amanmadov">
<meta name="description" content="TeamBalancer is a Fair Team Distribution App developed using JavaScript that aims to create two equally balanced teams based on the skill levels of players. The app allows users to input player names and their corresponding skill levels, and then employs an algorithm to distribute the players into two teams.">
<title>Fair Play App</title>
<link rel="shortcut icon" href="https://cdn.freebiesupply.com/logos/large/2x/uefa-logo-svg-vector.svg"
type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div class="px-4 py-5 my-5 text-center">
<img class="d-block mx-auto mb-4"
src="https://cdn.shopify.com/s/files/1/1131/1046/products/ultra-football-badges-custom-printing-4_4cb5ee3e-c117-4a5c-9890-e00ad3c50940_1200x630_crop_center.jpg?v=1671427066"
alt="uefa respect" width="120" height="63">
<h1 class="display-5 fw-bold text-body-emphasis">TeamBalancer</h1>
<div class="col-lg-9 col-md-12 mx-auto">
<p class="lead mb-4">An innovative app designed to revolutionize the way teams are formed! <br>
<!-- With TeamBalancer, creating fair and balanced teams based on player skill levels
has never been easier. <br> -->
<!-- Whether you're organizing a friendly sports match, a gaming tournament, or
any team-based activity, this app ensures that the distribution of players is done efficiently and
equitably. <br> -->
Simply input the names and skill levels of the players, and TeamBalancer will employ
advanced algorithms to intelligently divide them into two teams of equal strength.
<!-- No more worries about unfair advantages or imbalanced matchups. -->
</p>
<br>
<h5>Start Adding Players...</h5> <br>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="button" id="btnAddPlayer" class="btn btn-primary btn-lg px-4 gap-3 pulsing-button">Add
Player</button>
</div>
<br>
<div id="playerList"></div>
<br>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="button" id="btnGetTeams" class="btn btn-success btn-lg px-4 gap-3 d-none">Get
Teams</button>
</div>
</div>
</div>
<div class="px-4 py-5 my-5 text-center" id="outputTables">
<div class="row justify-content-md-center">
<div class="col-md-4 col-sm-12 col-md-auto" id="table1">
</div>
<div class="col-md-4 col-sm-12 col-md-auto" id="table2">
</div>
</div>
</div>
<div class="modal" id="myModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Oops!</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="text-bg-danger p-3">Enter all player names and skill levels.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</main>
<!-- <div class="wrapper">
<footer class="footer py-3 my-4">
<p class="text-center text-body-secondary"><span class="text-body-secondary">GitHub Repo: <a
href="https://github.com/amanmadov/fair-play-app">Here</a> </span></p>
</footer>
</div> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous">
</script>
<script src="app.js"></script>
</body>
</html>