API tools faq
paste
Advertisement
giganciprogramowania

kzg www

giganciprogramowania
Jan 19th, 2023 (edited)
245
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.02 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3.  
  4. <head>
  5. <meta charset="utf-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1" />
  7.  
  8. <!-- dodaj tytuł dla strony-->
  9.  
  10.  
  11. <!-- dodaj ikonkę dla naszej strony-->
  12.  
  13.  
  14.  
  15. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  16.  
  17.  
  18.  
  19.  
  20. <style>
  21. @import url('https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Lato&family=Press+Start+2P&display=swap');
  22.  
  23. body {
  24. background: #0F2027;
  25. background: -webkit-linear-gradient(bottom, #2C5364, #203A43, #0F2027);
  26. background: linear-gradient(to bottom, #2C5364, #203A43, #0F2027);
  27. font-family: 'Lato', sans-serif;
  28. color: white;
  29. text-align: center;
  30. overflow-x: hidden;
  31. height: 1000px;
  32. }
  33.  
  34. /* ustaw rodzaj czcionki dla nagłówka h1 na: 'Press Start 2P', cursive */
  35.  
  36.  
  37. /*zadanie opcjonalne*/
  38.  
  39.  
  40. #kontener {
  41. background-color: #1b2838;
  42. width: 1160px;
  43. /* ustaw okno gry na środku strony */
  44.  
  45. padding: 10px;
  46. /* ustaw obramowanie dla okna */
  47.  
  48. /* ustaw zaokrąglenie rogów obramowania */
  49.  
  50. }
  51.  
  52.  
  53.  
  54.  
  55.  
  56. #obrazek {
  57. object-fit: cover;
  58. }
  59.  
  60.  
  61. #panel-obrazka {
  62. position: relative;
  63. }
  64.  
  65.  
  66. #przycisk-obrot {
  67.  
  68. background: none;
  69. opacity: 0.9;
  70. padding: 0;
  71. margin: 0;
  72. font-size: 30px;
  73. position: absolute;
  74. top: 0px;
  75. left: 230px;
  76. /*usuń domyślne obramowanie przycisku*/
  77.  
  78. /*ustaw łapkę po najechaniu kursorem myszki*/
  79.  
  80. }
  81.  
  82.  
  83.  
  84.  
  85. #przycisk-dalej {
  86. /*dodaj margines od gónej krawędzi obramowania*/
  87.  
  88. /*dodaj odstęp od obramowania do tesktu ustawionym w przycisku*/
  89.  
  90. border: none;
  91. cursor: pointer;
  92. background-color: #4ca2cd;
  93. opacity: 0.8;
  94. font-size: 30px;
  95. color: #ffffff;
  96. }
  97.  
  98.  
  99. /*zadanie opcjonalne*/
  100. </style>
  101.  
  102. </head>
  103.  
  104. <body>
  105.  
  106.  
  107. <div id="kontener">
  108.  
  109. <!-- dodaj nagłówek h1 o treści: Ewolucja gamingu -->
  110.  
  111.  
  112.  
  113.  
  114. <!-- dodaj nagłówek h2 o treści: Nazwa gry ustaw: id="nazwa-gry" -->
  115.  
  116.  
  117. <div id="panel-obrazka">
  118.  
  119. <!-- dodaj obrazek, ustaw id="obrazek" -->
  120.  
  121.  
  122.  
  123.  
  124. <!-- dodaj przycisk obracający obrazek, ustaw id="przycisk-obrot" -->
  125.  
  126.  
  127. </div>
  128.  
  129. <!-- dodaj przycisk pokazujący następną grę, ustaw id="przycisk-dalej" -->
  130.  
  131.  
  132.  
  133. </div>
  134.  
  135.  
  136.  
  137. <script>
  138. const gry = [
  139.  
  140.  
  141.  
  142. // Gra: Tomb Raider - 1996r / Shadow of the Tomb Raider - 2018r
  143. {
  144. nazwa_gry_kiedys: "Tomb Raider - 1996r",
  145. obrazek_kiedys: "https://cdn.glitch.global/f19cf071-a94f-4ab7-913d-49ca6fbc4f1a/tombraider-kiedys.jpg?v=1674149315405",
  146. nazwa_gry_dzis: "Shadow of the Tomb Raider - 2018r",
  147. obrazek_dzis: "https://cdn.glitch.global/f19cf071-a94f-4ab7-913d-49ca6fbc4f1a/tombraider-dzis.jpeg?v=1674149314680",
  148.  
  149. },
  150.  
  151.  
  152.  
  153.  
  154.  
  155. // Gra: The sims - 2000r / The Sims 4: Licealne Lata - 2022r
  156.  
  157. {
  158. nazwa_gry_kiedys: "The sims - 2000r",
  159. obrazek_kiedys: "https://cdn.glitch.global/f19cf071-a94f-4ab7-913d-49ca6fbc4f1a/sims-kiedys.jpg?v=1671454043879",
  160. nazwa_gry_dzis: "The sims 4: Licealne Lata - 2022r",
  161. obrazek_dzis: "https://cdn.glitch.global/f19cf071-a94f-4ab7-913d-49ca6fbc4f1a/sims-dzis.png?v=1674823860342",
  162.  
  163. },
  164.  
  165.  
  166.  
  167.  
  168. // Gra: Grand theft auto 1 - 1997r / Grand theft auto 5 - 2013r
  169.  
  170. {
  171. nazwa_gry_kiedys: "Grand theft auto 1 - 1997r",
  172. obrazek_kiedys: "https://cdn.glitch.global/f19cf071-a94f-4ab7-913d-49ca6fbc4f1a/gta-kiedys.png?v=1674150061624",
  173. nazwa_gry_dzis: "Grand theft auto 5 - 2013r",
  174. obrazek_dzis: "https://cdn.glitch.global/f19cf071-a94f-4ab7-913d-49ca6fbc4f1a/gta-dzis.jpg?v=1674150060875",
  175.  
  176. },
  177.  
  178.  
  179.  
  180.  
  181. // Gra: The Need for speed - 1994r / Need for Speed Unbound - 2022r
  182.  
  183. {
  184. nazwa_gry_kiedys: "The Need for speed - 1994r",
  185. obrazek_kiedys: "https://cdn.glitch.global/f19cf071-a94f-4ab7-913d-49ca6fbc4f1a/nfs-kiedys.jpg?v=1674150553846",
  186. nazwa_gry_dzis: "Need for Speed Unbound - 2022r",
  187. obrazek_dzis: "https://cdn.glitch.global/f19cf071-a94f-4ab7-913d-49ca6fbc4f1a/nfs-dzis.jpg?v=1674150552313",
  188.  
  189. },
  190.  
  191.  
  192.  
  193.  
  194.  
  195. //TODO Gra: FIFA International Soccer - 1994r / Fifa23 - 2022r
  196.  
  197. {
  198. nazwa_gry_kiedys: "",
  199. obrazek_kiedys: "",
  200. nazwa_gry_dzis: "",
  201. obrazek_dzis: "",
  202.  
  203. },
  204.  
  205.  
  206.  
  207. ];
  208.  
  209.  
  210.  
  211.  
  212.  
  213.  
  214. let licznikGier = 0;
  215. let aktualnyStan=0;
  216. const obrazek = document.querySelector("#obrazek");
  217. const nazwaGry = document.querySelector("#nazwa-gry");
  218. const przyciskObrot=document.querySelector("#przycisk-obrot");
  219.  
  220.  
  221.  
  222. function nowaGra(){
  223. aktualnyStan=0
  224. obrazek.src=gry[licznikGier].obrazek_dzis;
  225. nazwaGry.textContent = gry[licznikGier].nazwa_gry_dzis;
  226.  
  227. }
  228.  
  229.  
  230. nowaGra();
  231.  
  232.  
  233.  
  234. document.querySelector("#przycisk-obrot").addEventListener("click", function () {
  235.  
  236. przyciskObrot.style.visibility="hidden";
  237.  
  238.  
  239. /*Edycja animacji obracania obrazka*/
  240. obrazek.classList.add("animate__animated", "animate__flipInX");
  241.  
  242. if (aktualnyStan==0){
  243. aktualnyStan++;
  244. nazwaGry.textContent = gry[licznikGier].nazwa_gry_kiedys;
  245. obrazek.src=gry[licznikGier].obrazek_kiedys;
  246.  
  247. }
  248. else{
  249. aktualnyStan--;
  250. nazwaGry.textContent = gry[licznikGier].nazwa_gry_dzis;
  251. obrazek.src=gry[licznikGier].obrazek_dzis;
  252. }
  253.  
  254.  
  255. });
  256.  
  257.  
  258.  
  259.  
  260. obrazek.addEventListener('animationend', () => {
  261. /*Edycja animacji obracania obrazka*/
  262. obrazek.classList.remove("animate__animated", "animate__flipInX");
  263. /*Edycja animacji przejścia do następnej gry*/
  264. obrazek.classList.remove("animate__animated", "animate__rubberBand");
  265. przyciskObrot.style.visibility="visible";
  266.  
  267. });
  268.  
  269.  
  270. document.querySelector("#przycisk-dalej").addEventListener("click", function () {
  271. licznikGier++
  272. if (licznikGier >= gry.length){
  273. licznikGier=0;
  274.  
  275. }
  276. przyciskObrot.style.visibility="hidden";
  277. /*Edycja animacji przejścia do następnej gry*/
  278. obrazek.classList.add("animate__animated", "animate__rubberBand");
  279. setTimeout(nowaGra,500);
  280.  
  281.  
  282. });
  283. </script>
  284.  
  285. </body>
  286.  
  287. </html>
  288.  
  289.  
  290.  
  291.  
  292.  
  293.  
  294.  
  295.  
  296.  
  297.  
  298.  
  299.  
  300.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!