-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (130 loc) · 5.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
132
133
134
135
136
137
138
139
140
<!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" />
<title>World Football player</title>
<link
href="https://cdn.jsdelivr.net/npm/daisyui@2.24.0/dist/full.css"
rel="stylesheet"
type="text/css"
/>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<header class="bg-slate-900 h-auto relative">
<div class="grid grid-cols-4 gap-2">
<div class="mt-12"></div>
<div class="col-span-2 relative mt-12 mb-12">
<h1 class="text-5xl text-orange-700 text-center mt-12">
All Your Favourite Player Here
</h1>
<p class="text-white mt-10 text-center">
As we count down to the start of the global showpiece in Qatar on 20
November, FIFA+ is showcasing 100 of the greatest moments in FIFA
World Cup history.
</p>
</div>
<div class=""></div>
</div>
</header>
<main class="w-9/12 mx-auto">
<div class="grid gap-4 grid-cols-4 grid-rows-2">
<div class="bg-base-100 shadow-xl">
<figure class="pt-10">
<img src="images/pic1.png" alt="Shoes" class="" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title">Messi</h2>
<p>36 Goals . 120 Assist</p>
<div class="card-actions">
<button class="btn btn-primary px-6 py-2 text-1xl rounded-xl disabled:bg-gray-400" onclick="addToSelect(this)" >SELECT</button>
</div>
</div>
</div>
<div class="bg-base-100 shadow-xl">
<figure class="pt-10">
<img src="images/pic2.png" alt="Shoes" class="" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title">Neymar</h2>
<p>30 Goals . 110 Assist</p>
<div class="card-actions">
<button class="btn btn-primary px-6 py-2 text-1xl rounded-xl disabled:bg-gray-400" onclick="addToSelect(this)">SELECT</button>
</div>
</div>
</div>
<div class="bg-base-100 shadow-xl">
<figure class="pt-10">
<img src="images/pic5.png" alt="Shoes" class="" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title">Renato</h2>
<p>15 Goals . 89 Assist</p>
<div class="card-actions">
<button class="btn btn-primary px-6 py-2 text-1xl rounded-xl disabled:bg-gray-400" onclick="addToSelect(this)">SELECT</button>
</div>
</div>
</div>
<div class="bg-base-100 shadow-xl">
<h1 class="text-2xl text-center mt-7">Selected- <span id="total-added">0</span> </h1>
<table>
<tbody id="tb">
</tbody>
</table>
<tr>
</tr>
</div>
<div class="bg-base-100 shadow-xl">
<figure class="pt-10">
<img src="images/pic3.png" alt="Shoes" class="" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title">Mbappe</h2>
<p>28 Goals.105 Assist</p>
<div class="card-actions">
<button class="bbtn btn-primary px-6 py-2 text-1xl rounded-xl disabled:bg-gray-400" onclick="addToSelect(this)" >SELECT</button>
</div>
</div>
</div>
<div class="bg-base-100 shadow-xl">
<figure class="pt-10">
<img src="images/pic6.png" alt="Shoes" class="" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title">Machado</h2>
<p>25 Goals . 100 Assist</p>
<div class="card-actions">
<button class="btn btn-primary px-6 py-2 text-1xl rounded-xl disabled:bg-gray-400" onclick="addToSelect(this)">SELECT</button>
</div>
</div>
</div>
<div class="bg-base-100 shadow-xl">
<figure class="pt-10">
<img src="images/pic4.png" alt="Shoes" class="" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title">Ramos</h2>
<p>21 Goals . 90 Assist</p>
<div class="card-actions">
<button class="btn btn-primary px-6 py-2 text-1xl rounded-xl disabled:bg-gray-400" onclick="addToSelect(this)">SELECT</button>
</div>
</div>
</div>
<div class="bg-base-100 shadow-xl text-center">
<h1 class="mb-3 text-2xl">Club Budget</h1>
<p>Per Player: <input type="number" name="" id="per-player"> </p>
<button id="calculate" class=" text-gray-100 px-12 py-2 rounded-xl mt-4 bg-indigo-500 shadow-lg shadow-indigo-500/50 ml-12 ">Calculate</button>
<p class="m-2 text-2xl">Player Expense:$ <span id="player-expense">00</span></p>
<p class="m-2">Manager : <input type="number" name="" id="manager"></p>
<p class="m-2 mt-5">Coach : <input type="number" name="" id="coach" class="ml-4"> </p>
<button id="calculate-total" class="text-gray-100 px-12 py-2 mt-4 rounded-xl ml-12 bg-indigo-500 shadow-lg shadow-indigo-500/50">Calculate</button>
<p class="text-2xl mt-3">Total : $<span id="total-cost">00</span></p>
</div>
</div>
</div>
</main>
<script src="app.js"></script>
</body>
</html>