API tools faq
paste
TestingFrenzy

player.ejs

TestingFrenzy
May 28th, 2024
19
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
  7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  8. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  9. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.min.js"></script>
  12. <link rel="stylesheet" href="/stylesheets/player.css">
  13. <link rel="stylesheet" href="/stylesheets/competition.css"> <!-- Classifica -->
  14. <script src="/javascripts/player.js"></script>
  15.  
  16. <title><%= title %></title>
  17. <!-- Aggiungi qui i link ai fogli di stile e altri script necessari -->
  18. </head>
  19. <body>
  20. <!-- Navbar -->
  21. <nav class="navbar navbar-expand-sm sticky-top">
  22. <div class="container-fluid">
  23. <a class="navbar-brand" href="#">Football Miners</a>
  24. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
  25. aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  26. <span class="navbar-toggler-icon"></span>
  27. </button>
  28. <div class="collapse navbar-collapse" id="navbarNav">
  29. <ul class="navbar-nav ms-auto">
  30. <li class="nav-item">
  31. <a href="/home" class="nav-link" >Home</a> <!-- NB che in questo modo non ritorno in cima ogni volta che premo ma è da rifinire sicuramente più avanti-->
  32. </li>
  33.  
  34. <li class="nav-item">
  35. <a class="nav-link" href="/competitions">Competitions</a>
  36. </li>
  37. <li class="nav-item">
  38. <a class="nav-link" href="#">Chat</a>
  39. </li>
  40.  
  41.  
  42. </ul>
  43. </div>
  44. </div>
  45. </nav>
  46.  
  47.  
  48. <!-- Custom Divider 1-->
  49. <div class="custom-divider"></div>
  50.  
  51. <!-- Player Data -->
  52. <div class="team-container2">
  53. <div class="left-team-details-content2">
  54. <div class="club-img2">
  55. <img src="<%= imageUrl %>" alt="Immagine del giocatore">
  56. </div>
  57. <div class="team-name2">
  58. <strong><%= firstName %> <%= lastName %> </strong>
  59. </div>
  60. </div>
  61. <div class="right-team-details-content2">
  62. <div class="row-data2">
  63. <div class="key-stat2">
  64. <div class="stat-label2">Club</div>
  65. <div class="stat-value2"> <%= currentClubName %></div>
  66. </div>
  67. <div class="key-stat2">
  68. <div class="stat-label2">Country</div>
  69. <div class="stat-value2"><%= countryOfCitizenship %></div>
  70. </div>
  71. </div>
  72. <div class="row-data2">
  73. <div class="key-stat2">
  74. <div class="stat-label2">Age</div>
  75. <div class="stat-value2"> <%= dateOfBirth %> </div>
  76. </div>
  77. <div class="key-stat2">
  78. <div class="stat-label2">Height</div>
  79. <div class="stat-value2"><%= heightInCm %></div>
  80. </div>
  81. </div>
  82. <div class="row-data2">
  83. <div class="key-stat2">
  84. <div class="stat-label2">Role</div>
  85. <div class="stat-value2"><%= position %> (<%= subPosition %>)</div>
  86. </div>
  87. <!--<% if (lastSeason) { %>-->
  88. <div class="key-stat2">
  89. <div class="stat-label2">Last Season</div>
  90. <div class="stat-value2"><%= lastSeason %></div>
  91. </div>
  92. <% } %>
  93.  
  94. </div>
  95. </div>
  96.  
  97. </div>
  98.  
  99.  
  100.  
  101.  
  102.  
  103. <!-- Custom Divider 2-->
  104. <div class="custom-divider"></div>
  105.  
  106. <!-- Football Career Heading -->
  107. <div class="football-career-heading">
  108. <h2><strong>Football Career</strong></h2>
  109. </div>
  110.  
  111. <div class="button-container">
  112. <button id="btnCareerData" class="btn btn-primary active">Career Data</button>
  113. <button id="btnLastSeasonStats" class="btn btn-primary">Last Season</button>
  114. </div>
  115.  
  116.  
  117. <!-- Career data -->
  118. <div id="careerData" class="key-stats-container">
  119. <div class="key-stat">
  120. <div class="stat-value"><%= app.totalMinutesPlayed %></div>
  121. <div class="stat-label">Minutes Played</div>
  122. </div>
  123. <div class="key-stat">
  124. <div class="stat-value"><%= app.totalGoals %></div>
  125. <div class="stat-label">Goals Scored</div>
  126. </div>
  127. <div class="key-stat">
  128. <div class="stat-value"><%= app.totalAssists %></div>
  129. <div class="stat-label">Assists</div>
  130. </div>
  131. <div class="key-stat">
  132. <div class="stat-value"><%= app.totalYellowCards %></div>
  133. <div class="stat-label">Yellow Cards</div>
  134. </div>
  135. <div class="key-stat">
  136. <div class="stat-value"><%= app.totalRedCards %></div>
  137. <div class="stat-label">Red Cards</div>
  138. </div>
  139.  
  140. </div>
  141.  
  142. <!-- Last season data-->
  143. <div id="lastSeasonData" class="key-stats-container d-none">
  144. <div class="key-stat">
  145. <div class="stat-value"><%= lastYearData.totalMinutesPlayed %></div>
  146. <div class="stat-label">Minutes Played</div>
  147. </div>
  148. <div class="key-stat">
  149. <div class="stat-value"><%= lastYearData.totalGoals %></div>
  150. <div class="stat-label">Goals Scored</div>
  151. </div>
  152. <div class="key-stat">
  153. <div class="stat-value"><%= lastYearData.totalAssists %></div>
  154. <div class="stat-label">Assists</div>
  155. </div>
  156.  
  157. <div class="key-stat">
  158. <div class="stat-value"><%= lastYearData.totalYellowCards %></div>
  159. <div class="stat-label">Yellow Cards</div>
  160. </div>
  161. <div class="key-stat">
  162. <div class="stat-value"><%= lastYearData.totalRedCards %></div>
  163. <div class="stat-label">Red Cards</div>
  164. </div>
  165.  
  166. </div>
  167.  
  168.  
  169. <!-- Custom Divider 3-->
  170. <div class="custom-divider"></div>
  171.  
  172. <!-- Transfers heading -->
  173. <div class="football-career-heading">
  174. <h2><strong>Player Transfers</strong></h2>
  175. </div>
  176.  
  177. <div class="club-transfers">
  178. <div id="clubPlayedContainer">
  179. <% clubDetails.forEach(club => { %>
  180. <a href="/club/<%= club.id %>" class="clubInfo">
  181. <div class="club-image">
  182. <img src="https://tmssl.akamaized.net/images/wappen/head/<%= club.id %>.png" alt="<%= club.club_name %> Logo">
  183. </div>
  184. <p class="club-date">Data: <%= club.date %></p>
  185. <p class="club-name"><%= club.club_name %></p>
  186. </a>
  187. <% }); %>
  188. </div>
  189. </div>
  190.  
  191. <!-- If last season is not 2023 remove the Standings -->
  192. <% if (lastSeason >= 2023) { %>
  193. <!-- Custom Divider 1-->
  194. <div class="custom-divider"></div>
  195.  
  196. <!-- Standings -->
  197. <div class="football-career-heading">
  198. <h2><strong>Standings</strong></h2>
  199. </div>
  200.  
  201. <div class="standings-container">
  202. <table class="standings-table">
  203. <tr class="standings-header">
  204. <th class="standings-cell-header center">#</th>
  205. <th class="standings-cell-header">Team</th>
  206. <th class="standings-cell-header center">Points</th>
  207. <th class="standings-cell-header center gs">GS</th>
  208. <th class="standings-cell-header center gc">GC</th>
  209. <th class="standings-cell-header center">W</th>
  210. <th class="standings-cell-header center l">L</th>
  211. <th class="standings-cell-header center d">D</th>
  212. <th class="standings-cell-header center">G</th>
  213. </tr>
  214. <% gameMongo.forEach((team, index) => { %>
  215. <tr class="standings-row">
  216. <td class="standings-cell center"><%= index + 1 %></td>
  217. <td class="standings-cell"><%= team.name %></td>
  218. <td class="standings-cell center"><%= team.points %> Pts</td>
  219. <td class="standings-cell center gs"><%= team.goalsFor %></td>
  220. <td class="standings-cell center gc"><%= team.goalsAgainst %></td>
  221. <td class="standings-cell center"><%= team.wins %></td>
  222. <td class="standings-cell center l"><%= team.losses %></td>
  223. <td class="standings-cell center d"><%= team.draws %></td>
  224. <td class="standings-cell center"><%= team.played %></td>
  225. </tr>
  226. <% }); %>
  227. </table>
  228. </div>
  229. <% } %>
  230.  
  231.  
  232.  
  233.  
  234. <!-- Custom Divider 5-->
  235. <div class="custom-divider"></div>
  236. <div class="football-career-heading">
  237. <h2><strong>Market Value Chart</strong></h2>
  238. </div>
  239.  
  240.  
  241. <div class="padding-top-bottom">
  242. <div class="trend-div">
  243. <div>
  244. <h3>Trend of Market Value over Time</h3>
  245. <canvas id="marketChart" width="600" height="300"></canvas>
  246. </div>
  247.  
  248.  
  249. <% if (marketValue) { %>
  250. <script>
  251. const marketValues = '<%= encodeURIComponent(JSON.stringify(marketValue)) %>';
  252. const decodedMarketValues = decodeURIComponent(marketValues);
  253. const parsedMarketValues = JSON.parse(decodedMarketValues);
  254.  
  255. const dates = parsedMarketValues.map(item => item.date);
  256. const values = parsedMarketValues.map(item => item.market_value_in_eur);
  257.  
  258. var ctx = document.getElementById('marketChart').getContext('2d');
  259. var marketChart = new Chart(ctx, {
  260. type: 'line',
  261. data: {
  262. labels: dates,
  263. datasets: [{
  264. label: 'Market Value (EUR)',
  265. data: values,
  266. backgroundColor: '#DEFF34', // Neon yellow color for points and line
  267. borderColor: '#DEFF34',
  268. borderWidth: 1
  269. }]
  270. },
  271. options: {
  272. scales: {
  273. x: {
  274. ticks: {
  275. color: '#dddddd' // Blue color for x-axis labels
  276. },
  277. grid: {
  278. color: '#808080' // Dark grey color for x-axis grid lines
  279. }
  280. },
  281. y: {
  282. ticks: {
  283. color: '#dddddd' // Blue color for y-axis labels
  284. },
  285. grid: {
  286. color: '#808080' // Dark grey color for y-axis grid lines
  287. },
  288. beginAtZero: true
  289. }
  290. }
  291. }
  292. });
  293.  
  294.  
  295. </script>
  296. <% } %>
  297. </div>
  298. </div>
  299. <!-- Nel tuo file HTML -->
  300. <!-- Footer -->
  301. <footer class="footer mt-auto py-3 bg-deff34 text-black">
  302.  
  303. <span class="text-muted">Football Miners &copy; 2024</span>
  304.  
  305. </footer>
  306.  
  307. </body>
  308. </html>
  309.  
Tags: ejs
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!