API tools faq
paste
Advertisement
giganciprogramowania

kzg www

giganciprogramowania
Aug 7th, 2023
151
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.85 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4. <!-- tutaj dodaj tytuł dla strony-->
  5.  
  6. <meta charset="utf-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1" />
  8. <!-- tutaj dodaj ikonę dla strony-->
  9.  
  10. <link rel="stylesheet" href="/style.css" />
  11.  
  12. <!-- *** skrypt odpowiedzialny za przewidywanie przyszłości ***-->
  13. <!--<script src="/script.js" defer></script>-->
  14. </head>
  15. <body>
  16. <div class="tresc" role="main">
  17. <!-- tutaj dodaj nagłówek h1 o treści: W krAInie przyszłości -->
  18.  
  19. <!-- tutaj dodaj nagłówek h2 o treści: Zadaj pytanie Kuli-zgaduli <br>i poznaj swoją przyszłość za 50 lat -->
  20. <div id="pytania">
  21. <label>
  22. <input type="radio" class="option-input radio" name="pytania" value="0" checked />
  23. Kim będę z zawodu?
  24. </label>
  25. <label>
  26. <input type="radio" class="option-input radio" name="pytania" value="1" />
  27. Jak będzie wyglądał mój kosmiczny dom?
  28. </label>
  29. <label>
  30. <input type="radio" class="option-input radio" name="pytania" value="2" />
  31. Czym będę pokonywać odległości?
  32. </label>
  33. </div>
  34.  
  35. <div id="kula-kontener">
  36. <div id="kula">
  37. <!-- tutaj dodaj obrazek kuli -->
  38.  
  39. <!-- tutaj dodaj przycisk o id="przycisk" i treści: Sprawdź -->
  40.  
  41. </div>
  42. <!-- tutaj dodaj domyślny obrazek na ekran kuli i ustaw id="ekran"-->
  43.  
  44. </div>
  45. </div>
  46. </body>
  47. </html>
  48.  
  49.  
  50.  
  51.  
  52.  
  53. @font-face {
  54. font-family: Tektur;
  55. src: url("https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/Czcionka_Tektur.ttf?v=1690043449282")
  56. format("opentype");
  57. }
  58.  
  59. @font-face {
  60. font-family: Bungee;
  61. src: url("https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/Czcionka_BungeeHairline.ttf?v=1690044154180")
  62. format("opentype");
  63. }
  64.  
  65.  
  66. body {
  67. background: #1d294e;
  68. font-family: 'Bungee', sans-serif;
  69. font-weight:bold;
  70. color:white;
  71. text-align: center;
  72. }
  73.  
  74.  
  75. #kula-kontener{
  76. background: #17254c no-repeat top;
  77. /* Tutaj ustaw grafikę tła (background-image: url('') ) wklejając link do grafiki */
  78.  
  79. z-index:-10;
  80. height: 650px;
  81. padding-top:35px;
  82. border: 2px outset #1d294e;
  83. border-top:0px;
  84.  
  85. }
  86.  
  87. #pytania{
  88. border: 0px outset #1d294e;
  89. /* Tutaj ustaw grubość ramki (border-width) na 2px*/
  90.  
  91. border-bottom:0px;
  92. padding-bottom:15px;
  93. background: #192c61;
  94. }
  95.  
  96.  
  97. h1{
  98. font-family: 'Tektur', sans-serif;
  99. font-size: 40pt;
  100. background: linear-gradient(to top, #28c4f3 17%, #033bbf 59%);
  101. -webkit-background-clip: text;
  102. -webkit-text-fill-color: transparent;
  103. -webkit-text-stroke-width: 1px;
  104. -webkit-text-stroke-color: white;
  105. }
  106.  
  107.  
  108.  
  109. #kula {
  110. width:600px;
  111. margin:0px auto;
  112. position:relative;
  113. z-index: 10;
  114. }
  115.  
  116.  
  117. #ekran {
  118. width: 280px;
  119. z-index: 0;
  120. position:relative;
  121. top:-560px;
  122. opacity:0.8;
  123. border-radius:100%;
  124.  
  125. }
  126.  
  127. #przycisk {
  128. padding: 20px;
  129. border: none;
  130. cursor: pointer;
  131. /* Tutaj ustaw kolor czcionki przycisku (color) na biały*/
  132.  
  133. background: rgb(40,196,243);
  134. background: radial-gradient(circle, rgba(40,196,243,1) 0%, rgba(3,59,191,1) 100%);
  135. border-radius:100%;
  136. box-shadow: 0px 10px 0px 0px grey;
  137. z-index:10;
  138. position:relative;
  139. top: -150px;
  140. font-family: 'Bungee', sans-serif;
  141. font-weight: bold;
  142. }
  143.  
  144.  
  145. #kula:hover {
  146. animation: shake 0.5s infinite;
  147.  
  148. }
  149.  
  150. button:active {
  151. animation: puf 4s 1;
  152.  
  153. }
  154.  
  155. @keyframes shake {
  156. 0% { transform: translate(1px, 1px) rotate(0deg); }
  157. 10% { transform: translate(-1px, -2px) rotate(-1deg); }
  158. 20% { transform: translate(-3px, 0px) rotate(1deg); }
  159. 30% { transform: translate(3px, 2px) rotate(0deg); }
  160. 40% { transform: translate(1px, -1px) rotate(1deg); }
  161. 50% { transform: translate(-1px, 2px) rotate(-1deg); }
  162. 60% { transform: translate(-3px, 1px) rotate(0deg); }
  163. 70% { transform: translate(3px, 1px) rotate(-1deg); }
  164. 80% { transform: translate(-1px, -1px) rotate(1deg); }
  165. 90% { transform: translate(1px, 2px) rotate(0deg); }
  166. 100% { transform: translate(1px, -2px) rotate(-1deg); }
  167. }
  168.  
  169.  
  170. @keyframes puf {
  171. 0% {filter: brightness(0%); }
  172. 5% {filter: brightness(120%); }
  173. 100% {filter: brightness(1000%); }
  174. }
  175.  
  176.  
  177. .tresc{
  178. width:900px;
  179. margin:0px auto;
  180. }
  181.  
  182.  
  183. label{
  184. display:block;
  185. line-height:40px;
  186. }
  187.  
  188. .option-input {
  189. -webkit-appearance: none;
  190. -moz-appearance: none;
  191. -ms-appearance: none;
  192. -o-appearance: none;
  193. appearance: none;
  194. position: relative;
  195. top: 13.33333px;
  196. right: 0;
  197. bottom: 0;
  198. left: 0;
  199. height: 40px;
  200. width: 40px;
  201. transition: all 0.15s ease-out 0s;
  202. background: #cbd1d8;
  203. border: none;
  204. color: #ffffff;
  205. cursor: pointer;
  206. display: inline-block;
  207. margin-right: 0.5rem;
  208. outline: none;
  209. position: relative;
  210. z-index: 1000;
  211. }
  212.  
  213. .option-input:hover {
  214. background: #9faab7;
  215. }
  216.  
  217. .option-input:checked {
  218. background: #1fa4e6;
  219. }
  220.  
  221. .option-input:checked::before {
  222. width: 40px;
  223. height: 40px;
  224. display:flex;
  225. content: '';
  226. font-size: 25px;
  227. font-weight:bold;
  228. position: absolute;
  229. align-items:center;
  230. justify-content:center;
  231. }
  232.  
  233. .option-input:checked::after {
  234. -webkit-animation: click-wave 0.65s;
  235. -moz-animation: click-wave 0.65s;
  236. animation: click-wave 0.65s;
  237. background: #1fa4e6;
  238. content: '';
  239. display: block;
  240. position: relative;
  241. z-index: 100;
  242. }
  243.  
  244. .option-input.radio {
  245. border-radius: 50%;
  246. }
  247.  
  248. .option-input.radio::after {
  249. border-radius: 50%;
  250. }
  251.  
  252. @keyframes click-wave {
  253. 0% {
  254. height: 40px;
  255. width: 40px;
  256. opacity: 0.35;
  257. position: relative;
  258. }
  259. 100% {
  260. height: 200px;
  261. width: 200px;
  262. margin-left: -80px;
  263. margin-top: -80px;
  264. opacity: 0;
  265. }
  266. }
  267.  
  268.  
  269.  
  270.  
  271.  
  272.  
  273.  
  274. /* Tutaj można wkleić linki do swoich grafik domów - podmieniając istniejące.
  275. Ważne - zawsze musi być 5 linków */
  276. const domy = [
  277. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/dom%20(1).png?v=1690059355819",
  278. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/dom%20(2).jpg?v=1690059356483",
  279. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/dom%20(3).jpg?v=1690059356948",
  280. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/dom%20(4).jpg?v=1690059357494",
  281. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/dom%20(5).jpg?v=1691263838668"
  282. ];
  283.  
  284. /* Tutaj można wkleić linki do swoich grafik zawodów - podmieniając istniejące.
  285. Ważne - zawsze musi być 5 linków */
  286. const zawody = [
  287. "https://cdn.glitch.global/de89cf25-4e3d-4dd7-a9e6-9a5a1fd2e5fb/praca%20(1).png?v=1691228542339",
  288. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/praca%20(2).png?v=1691057240824",
  289. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/praca%20(3).png?v=1691057241531",
  290. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/praca%20(4).png?v=1691057238814",
  291. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/praca%20(5).png?v=1691057239496"
  292. ];
  293.  
  294. /* Tutaj można wkleić linki do swoich grafik pojazdów - podmieniając istniejące.
  295. Ważne - zawsze musi być 5 linków */
  296. const pojazdy = [
  297. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/pojazd%20(1).jpg?v=1690059358456",
  298. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/pojazd%20(2).png?v=1691057288446",
  299. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/pojazd%20(3).png?v=1691057297634",
  300. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/pojazd%20(4).jpg?v=1690059359924",
  301. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/pojazd%20(5).jpg?v=1690059360429"
  302. ];
  303.  
  304.  
  305. const wyswietlaczAnim = [
  306. { transform: "rotate(0) scale(1)", filter: "brightness(0%)"},
  307. { transform: "rotate(360deg) scale(0)" , filter: "brightness(5000%)" },
  308. ];
  309.  
  310. const wyswietlaczTiming = {
  311. duration: 1000,
  312. iterations: 1,
  313. };
  314.  
  315.  
  316. const obrazek = document.querySelector("#ekran");
  317.  
  318. let licznikGrafik = Math.floor(Math.random() * 5);
  319. let aktualnyStan = 0;
  320.  
  321.  
  322. function nowaGra(){
  323. aktualnyStan=0;
  324.  
  325. var selectValue= Array.from(document.getElementsByName("pytania")).find(radio => radio.checked);
  326. var nrPytania = selectValue.value;
  327.  
  328. if(nrPytania == 0) obrazek.src=zawody[licznikGrafik];
  329. if(nrPytania == 1) obrazek.src=domy[licznikGrafik];
  330. if(nrPytania == 2) obrazek.src=pojazdy[licznikGrafik];
  331.  
  332. document.querySelector("#przycisk").disabled = false;
  333. }
  334.  
  335.  
  336. document.querySelector("#przycisk").addEventListener("click", function () {
  337.  
  338. /* Tutaj podmień losowanie grafik za poniższe dwie linijki*/
  339. licznikGrafik++;
  340. if (licznikGrafik >= 5) licznikGrafik=0;
  341.  
  342. document.querySelector("#przycisk").disabled = true;
  343. obrazek.animate(wyswietlaczAnim, wyswietlaczTiming)
  344. setTimeout(nowaGra, 850);
  345. });
  346.  
  347.  
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!