46 changed files with 59685 additions and 0 deletions
@ -0,0 +1,42 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>Chuck Norris Jokes</title> |
|||
<link rel="stylesheet" href="css/bootstrap.css"> |
|||
<style> |
|||
.card { |
|||
box-shadow: 0 20px 20px rgba(0,0,0,0.5); |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="container text-center"> |
|||
<h1 class="display-2">Random Chuck Norris Jokes</h1> |
|||
<div class="row justify-content-center"> |
|||
<div class="col-md-8"> |
|||
<div class="card mt-5"> |
|||
<div class="card-body"> |
|||
<p class="fs-4" id="joke"></p> |
|||
<button class="btn btn-danger" id="nextJoke">Next Joke</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<script> |
|||
const jokeText = document.getElementById("joke") |
|||
const nextJokeBtn = document.getElementById("nextJoke") |
|||
|
|||
function getJoke(){ |
|||
fetch("https://api.chucknorris.io/jokes/random") |
|||
.then(response => response.json()) |
|||
.then(data => {jokeText.textContent = data.value;}) |
|||
} |
|||
nextJokeBtn.addEventListener("click",getJoke); |
|||
getJoke(); |
|||
</script> |
|||
<script src="js/bootstrap.bundle.js"></script> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,601 @@ |
|||
/*! |
|||
* Bootstrap Reboot v5.3.8 (https://getbootstrap.com/) |
|||
* Copyright 2011-2025 The Bootstrap Authors |
|||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) |
|||
*/ |
|||
:root, |
|||
[data-bs-theme=light] { |
|||
--bs-blue: #0d6efd; |
|||
--bs-indigo: #6610f2; |
|||
--bs-purple: #6f42c1; |
|||
--bs-pink: #d63384; |
|||
--bs-red: #dc3545; |
|||
--bs-orange: #fd7e14; |
|||
--bs-yellow: #ffc107; |
|||
--bs-green: #198754; |
|||
--bs-teal: #20c997; |
|||
--bs-cyan: #0dcaf0; |
|||
--bs-black: #000; |
|||
--bs-white: #fff; |
|||
--bs-gray: #6c757d; |
|||
--bs-gray-dark: #343a40; |
|||
--bs-gray-100: #f8f9fa; |
|||
--bs-gray-200: #e9ecef; |
|||
--bs-gray-300: #dee2e6; |
|||
--bs-gray-400: #ced4da; |
|||
--bs-gray-500: #adb5bd; |
|||
--bs-gray-600: #6c757d; |
|||
--bs-gray-700: #495057; |
|||
--bs-gray-800: #343a40; |
|||
--bs-gray-900: #212529; |
|||
--bs-primary: #0d6efd; |
|||
--bs-secondary: #6c757d; |
|||
--bs-success: #198754; |
|||
--bs-info: #0dcaf0; |
|||
--bs-warning: #ffc107; |
|||
--bs-danger: #dc3545; |
|||
--bs-light: #f8f9fa; |
|||
--bs-dark: #212529; |
|||
--bs-primary-rgb: 13, 110, 253; |
|||
--bs-secondary-rgb: 108, 117, 125; |
|||
--bs-success-rgb: 25, 135, 84; |
|||
--bs-info-rgb: 13, 202, 240; |
|||
--bs-warning-rgb: 255, 193, 7; |
|||
--bs-danger-rgb: 220, 53, 69; |
|||
--bs-light-rgb: 248, 249, 250; |
|||
--bs-dark-rgb: 33, 37, 41; |
|||
--bs-primary-text-emphasis: #052c65; |
|||
--bs-secondary-text-emphasis: #2b2f32; |
|||
--bs-success-text-emphasis: #0a3622; |
|||
--bs-info-text-emphasis: #055160; |
|||
--bs-warning-text-emphasis: #664d03; |
|||
--bs-danger-text-emphasis: #58151c; |
|||
--bs-light-text-emphasis: #495057; |
|||
--bs-dark-text-emphasis: #495057; |
|||
--bs-primary-bg-subtle: #cfe2ff; |
|||
--bs-secondary-bg-subtle: #e2e3e5; |
|||
--bs-success-bg-subtle: #d1e7dd; |
|||
--bs-info-bg-subtle: #cff4fc; |
|||
--bs-warning-bg-subtle: #fff3cd; |
|||
--bs-danger-bg-subtle: #f8d7da; |
|||
--bs-light-bg-subtle: #fcfcfd; |
|||
--bs-dark-bg-subtle: #ced4da; |
|||
--bs-primary-border-subtle: #9ec5fe; |
|||
--bs-secondary-border-subtle: #c4c8cb; |
|||
--bs-success-border-subtle: #a3cfbb; |
|||
--bs-info-border-subtle: #9eeaf9; |
|||
--bs-warning-border-subtle: #ffe69c; |
|||
--bs-danger-border-subtle: #f1aeb5; |
|||
--bs-light-border-subtle: #e9ecef; |
|||
--bs-dark-border-subtle: #adb5bd; |
|||
--bs-white-rgb: 255, 255, 255; |
|||
--bs-black-rgb: 0, 0, 0; |
|||
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; |
|||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
|||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); |
|||
--bs-body-font-family: var(--bs-font-sans-serif); |
|||
--bs-body-font-size: 1rem; |
|||
--bs-body-font-weight: 400; |
|||
--bs-body-line-height: 1.5; |
|||
--bs-body-color: #212529; |
|||
--bs-body-color-rgb: 33, 37, 41; |
|||
--bs-body-bg: #fff; |
|||
--bs-body-bg-rgb: 255, 255, 255; |
|||
--bs-emphasis-color: #000; |
|||
--bs-emphasis-color-rgb: 0, 0, 0; |
|||
--bs-secondary-color: rgba(33, 37, 41, 0.75); |
|||
--bs-secondary-color-rgb: 33, 37, 41; |
|||
--bs-secondary-bg: #e9ecef; |
|||
--bs-secondary-bg-rgb: 233, 236, 239; |
|||
--bs-tertiary-color: rgba(33, 37, 41, 0.5); |
|||
--bs-tertiary-color-rgb: 33, 37, 41; |
|||
--bs-tertiary-bg: #f8f9fa; |
|||
--bs-tertiary-bg-rgb: 248, 249, 250; |
|||
--bs-heading-color: inherit; |
|||
--bs-link-color: #0d6efd; |
|||
--bs-link-color-rgb: 13, 110, 253; |
|||
--bs-link-decoration: underline; |
|||
--bs-link-hover-color: #0a58ca; |
|||
--bs-link-hover-color-rgb: 10, 88, 202; |
|||
--bs-code-color: #d63384; |
|||
--bs-highlight-color: #212529; |
|||
--bs-highlight-bg: #fff3cd; |
|||
--bs-border-width: 1px; |
|||
--bs-border-style: solid; |
|||
--bs-border-color: #dee2e6; |
|||
--bs-border-color-translucent: rgba(0, 0, 0, 0.175); |
|||
--bs-border-radius: 0.375rem; |
|||
--bs-border-radius-sm: 0.25rem; |
|||
--bs-border-radius-lg: 0.5rem; |
|||
--bs-border-radius-xl: 1rem; |
|||
--bs-border-radius-xxl: 2rem; |
|||
--bs-border-radius-2xl: var(--bs-border-radius-xxl); |
|||
--bs-border-radius-pill: 50rem; |
|||
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); |
|||
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); |
|||
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); |
|||
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); |
|||
--bs-focus-ring-width: 0.25rem; |
|||
--bs-focus-ring-opacity: 0.25; |
|||
--bs-focus-ring-color: rgba(13, 110, 253, 0.25); |
|||
--bs-form-valid-color: #198754; |
|||
--bs-form-valid-border-color: #198754; |
|||
--bs-form-invalid-color: #dc3545; |
|||
--bs-form-invalid-border-color: #dc3545; |
|||
} |
|||
|
|||
[data-bs-theme=dark] { |
|||
color-scheme: dark; |
|||
--bs-body-color: #dee2e6; |
|||
--bs-body-color-rgb: 222, 226, 230; |
|||
--bs-body-bg: #212529; |
|||
--bs-body-bg-rgb: 33, 37, 41; |
|||
--bs-emphasis-color: #fff; |
|||
--bs-emphasis-color-rgb: 255, 255, 255; |
|||
--bs-secondary-color: rgba(222, 226, 230, 0.75); |
|||
--bs-secondary-color-rgb: 222, 226, 230; |
|||
--bs-secondary-bg: #343a40; |
|||
--bs-secondary-bg-rgb: 52, 58, 64; |
|||
--bs-tertiary-color: rgba(222, 226, 230, 0.5); |
|||
--bs-tertiary-color-rgb: 222, 226, 230; |
|||
--bs-tertiary-bg: #2b3035; |
|||
--bs-tertiary-bg-rgb: 43, 48, 53; |
|||
--bs-primary-text-emphasis: #6ea8fe; |
|||
--bs-secondary-text-emphasis: #a7acb1; |
|||
--bs-success-text-emphasis: #75b798; |
|||
--bs-info-text-emphasis: #6edff6; |
|||
--bs-warning-text-emphasis: #ffda6a; |
|||
--bs-danger-text-emphasis: #ea868f; |
|||
--bs-light-text-emphasis: #f8f9fa; |
|||
--bs-dark-text-emphasis: #dee2e6; |
|||
--bs-primary-bg-subtle: #031633; |
|||
--bs-secondary-bg-subtle: #161719; |
|||
--bs-success-bg-subtle: #051b11; |
|||
--bs-info-bg-subtle: #032830; |
|||
--bs-warning-bg-subtle: #332701; |
|||
--bs-danger-bg-subtle: #2c0b0e; |
|||
--bs-light-bg-subtle: #343a40; |
|||
--bs-dark-bg-subtle: #1a1d20; |
|||
--bs-primary-border-subtle: #084298; |
|||
--bs-secondary-border-subtle: #41464b; |
|||
--bs-success-border-subtle: #0f5132; |
|||
--bs-info-border-subtle: #087990; |
|||
--bs-warning-border-subtle: #997404; |
|||
--bs-danger-border-subtle: #842029; |
|||
--bs-light-border-subtle: #495057; |
|||
--bs-dark-border-subtle: #343a40; |
|||
--bs-heading-color: inherit; |
|||
--bs-link-color: #6ea8fe; |
|||
--bs-link-hover-color: #8bb9fe; |
|||
--bs-link-color-rgb: 110, 168, 254; |
|||
--bs-link-hover-color-rgb: 139, 185, 254; |
|||
--bs-code-color: #e685b5; |
|||
--bs-highlight-color: #dee2e6; |
|||
--bs-highlight-bg: #664d03; |
|||
--bs-border-color: #495057; |
|||
--bs-border-color-translucent: rgba(255, 255, 255, 0.15); |
|||
--bs-form-valid-color: #75b798; |
|||
--bs-form-valid-border-color: #75b798; |
|||
--bs-form-invalid-color: #ea868f; |
|||
--bs-form-invalid-border-color: #ea868f; |
|||
} |
|||
|
|||
*, |
|||
*::before, |
|||
*::after { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
@media (prefers-reduced-motion: no-preference) { |
|||
:root { |
|||
scroll-behavior: smooth; |
|||
} |
|||
} |
|||
|
|||
body { |
|||
margin: 0; |
|||
font-family: var(--bs-body-font-family); |
|||
font-size: var(--bs-body-font-size); |
|||
font-weight: var(--bs-body-font-weight); |
|||
line-height: var(--bs-body-line-height); |
|||
color: var(--bs-body-color); |
|||
text-align: var(--bs-body-text-align); |
|||
background-color: var(--bs-body-bg); |
|||
-webkit-text-size-adjust: 100%; |
|||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
hr { |
|||
margin: 1rem 0; |
|||
color: inherit; |
|||
border: 0; |
|||
border-top: var(--bs-border-width) solid; |
|||
opacity: 0.25; |
|||
} |
|||
|
|||
h6, h5, h4, h3, h2, h1 { |
|||
margin-top: 0; |
|||
margin-bottom: 0.5rem; |
|||
font-weight: 500; |
|||
line-height: 1.2; |
|||
color: var(--bs-heading-color); |
|||
} |
|||
|
|||
h1 { |
|||
font-size: calc(1.375rem + 1.5vw); |
|||
} |
|||
@media (min-width: 1200px) { |
|||
h1 { |
|||
font-size: 2.5rem; |
|||
} |
|||
} |
|||
|
|||
h2 { |
|||
font-size: calc(1.325rem + 0.9vw); |
|||
} |
|||
@media (min-width: 1200px) { |
|||
h2 { |
|||
font-size: 2rem; |
|||
} |
|||
} |
|||
|
|||
h3 { |
|||
font-size: calc(1.3rem + 0.6vw); |
|||
} |
|||
@media (min-width: 1200px) { |
|||
h3 { |
|||
font-size: 1.75rem; |
|||
} |
|||
} |
|||
|
|||
h4 { |
|||
font-size: calc(1.275rem + 0.3vw); |
|||
} |
|||
@media (min-width: 1200px) { |
|||
h4 { |
|||
font-size: 1.5rem; |
|||
} |
|||
} |
|||
|
|||
h5 { |
|||
font-size: 1.25rem; |
|||
} |
|||
|
|||
h6 { |
|||
font-size: 1rem; |
|||
} |
|||
|
|||
p { |
|||
margin-top: 0; |
|||
margin-bottom: 1rem; |
|||
} |
|||
|
|||
abbr[title] { |
|||
-webkit-text-decoration: underline dotted; |
|||
text-decoration: underline dotted; |
|||
cursor: help; |
|||
-webkit-text-decoration-skip-ink: none; |
|||
text-decoration-skip-ink: none; |
|||
} |
|||
|
|||
address { |
|||
margin-bottom: 1rem; |
|||
font-style: normal; |
|||
line-height: inherit; |
|||
} |
|||
|
|||
ol, |
|||
ul { |
|||
padding-left: 2rem; |
|||
} |
|||
|
|||
ol, |
|||
ul, |
|||
dl { |
|||
margin-top: 0; |
|||
margin-bottom: 1rem; |
|||
} |
|||
|
|||
ol ol, |
|||
ul ul, |
|||
ol ul, |
|||
ul ol { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
dt { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
dd { |
|||
margin-bottom: 0.5rem; |
|||
margin-left: 0; |
|||
} |
|||
|
|||
blockquote { |
|||
margin: 0 0 1rem; |
|||
} |
|||
|
|||
b, |
|||
strong { |
|||
font-weight: bolder; |
|||
} |
|||
|
|||
small { |
|||
font-size: 0.875em; |
|||
} |
|||
|
|||
mark { |
|||
padding: 0.1875em; |
|||
color: var(--bs-highlight-color); |
|||
background-color: var(--bs-highlight-bg); |
|||
} |
|||
|
|||
sub, |
|||
sup { |
|||
position: relative; |
|||
font-size: 0.75em; |
|||
line-height: 0; |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
sub { |
|||
bottom: -0.25em; |
|||
} |
|||
|
|||
sup { |
|||
top: -0.5em; |
|||
} |
|||
|
|||
a { |
|||
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); |
|||
text-decoration: underline; |
|||
} |
|||
a:hover { |
|||
--bs-link-color-rgb: var(--bs-link-hover-color-rgb); |
|||
} |
|||
|
|||
a:not([href]):not([class]), a:not([href]):not([class]):hover { |
|||
color: inherit; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
pre, |
|||
code, |
|||
kbd, |
|||
samp { |
|||
font-family: var(--bs-font-monospace); |
|||
font-size: 1em; |
|||
} |
|||
|
|||
pre { |
|||
display: block; |
|||
margin-top: 0; |
|||
margin-bottom: 1rem; |
|||
overflow: auto; |
|||
font-size: 0.875em; |
|||
} |
|||
pre code { |
|||
font-size: inherit; |
|||
color: inherit; |
|||
word-break: normal; |
|||
} |
|||
|
|||
code { |
|||
font-size: 0.875em; |
|||
color: var(--bs-code-color); |
|||
word-wrap: break-word; |
|||
} |
|||
a > code { |
|||
color: inherit; |
|||
} |
|||
|
|||
kbd { |
|||
padding: 0.1875rem 0.375rem; |
|||
font-size: 0.875em; |
|||
color: var(--bs-body-bg); |
|||
background-color: var(--bs-body-color); |
|||
border-radius: 0.25rem; |
|||
} |
|||
kbd kbd { |
|||
padding: 0; |
|||
font-size: 1em; |
|||
} |
|||
|
|||
figure { |
|||
margin: 0 0 1rem; |
|||
} |
|||
|
|||
img, |
|||
svg { |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
table { |
|||
caption-side: bottom; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
caption { |
|||
padding-top: 0.5rem; |
|||
padding-bottom: 0.5rem; |
|||
color: var(--bs-secondary-color); |
|||
text-align: left; |
|||
} |
|||
|
|||
th { |
|||
text-align: inherit; |
|||
text-align: -webkit-match-parent; |
|||
} |
|||
|
|||
thead, |
|||
tbody, |
|||
tfoot, |
|||
tr, |
|||
td, |
|||
th { |
|||
border-color: inherit; |
|||
border-style: solid; |
|||
border-width: 0; |
|||
} |
|||
|
|||
label { |
|||
display: inline-block; |
|||
} |
|||
|
|||
button { |
|||
border-radius: 0; |
|||
} |
|||
|
|||
button:focus:not(:focus-visible) { |
|||
outline: 0; |
|||
} |
|||
|
|||
input, |
|||
button, |
|||
select, |
|||
optgroup, |
|||
textarea { |
|||
margin: 0; |
|||
font-family: inherit; |
|||
font-size: inherit; |
|||
line-height: inherit; |
|||
} |
|||
|
|||
button, |
|||
select { |
|||
text-transform: none; |
|||
} |
|||
|
|||
[role=button] { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
select { |
|||
word-wrap: normal; |
|||
} |
|||
select:disabled { |
|||
opacity: 1; |
|||
} |
|||
|
|||
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator { |
|||
display: none !important; |
|||
} |
|||
|
|||
button, |
|||
[type=button], |
|||
[type=reset], |
|||
[type=submit] { |
|||
-webkit-appearance: button; |
|||
} |
|||
button:not(:disabled), |
|||
[type=button]:not(:disabled), |
|||
[type=reset]:not(:disabled), |
|||
[type=submit]:not(:disabled) { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
::-moz-focus-inner { |
|||
padding: 0; |
|||
border-style: none; |
|||
} |
|||
|
|||
textarea { |
|||
resize: vertical; |
|||
} |
|||
|
|||
fieldset { |
|||
min-width: 0; |
|||
padding: 0; |
|||
margin: 0; |
|||
border: 0; |
|||
} |
|||
|
|||
legend { |
|||
float: left; |
|||
width: 100%; |
|||
padding: 0; |
|||
margin-bottom: 0.5rem; |
|||
line-height: inherit; |
|||
font-size: calc(1.275rem + 0.3vw); |
|||
} |
|||
@media (min-width: 1200px) { |
|||
legend { |
|||
font-size: 1.5rem; |
|||
} |
|||
} |
|||
legend + * { |
|||
clear: left; |
|||
} |
|||
|
|||
::-webkit-datetime-edit-fields-wrapper, |
|||
::-webkit-datetime-edit-text, |
|||
::-webkit-datetime-edit-minute, |
|||
::-webkit-datetime-edit-hour-field, |
|||
::-webkit-datetime-edit-day-field, |
|||
::-webkit-datetime-edit-month-field, |
|||
::-webkit-datetime-edit-year-field { |
|||
padding: 0; |
|||
} |
|||
|
|||
::-webkit-inner-spin-button { |
|||
height: auto; |
|||
} |
|||
|
|||
[type=search] { |
|||
-webkit-appearance: textfield; |
|||
outline-offset: -2px; |
|||
} |
|||
[type=search]::-webkit-search-cancel-button { |
|||
cursor: pointer; |
|||
filter: grayscale(1); |
|||
} |
|||
|
|||
/* rtl:raw: |
|||
[type="tel"], |
|||
[type="url"], |
|||
[type="email"], |
|||
[type="number"] { |
|||
direction: ltr; |
|||
} |
|||
*/ |
|||
::-webkit-search-decoration { |
|||
-webkit-appearance: none; |
|||
} |
|||
|
|||
::-webkit-color-swatch-wrapper { |
|||
padding: 0; |
|||
} |
|||
|
|||
::-webkit-file-upload-button { |
|||
font: inherit; |
|||
-webkit-appearance: button; |
|||
} |
|||
|
|||
::file-selector-button { |
|||
font: inherit; |
|||
-webkit-appearance: button; |
|||
} |
|||
|
|||
output { |
|||
display: inline-block; |
|||
} |
|||
|
|||
iframe { |
|||
border: 0; |
|||
} |
|||
|
|||
summary { |
|||
display: list-item; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
progress { |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
[hidden] { |
|||
display: none !important; |
|||
} |
|||
|
|||
/*# sourceMappingURL=bootstrap-reboot.css.map */ |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,598 @@ |
|||
/*! |
|||
* Bootstrap Reboot v5.3.8 (https://getbootstrap.com/) |
|||
* Copyright 2011-2025 The Bootstrap Authors |
|||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) |
|||
*/ |
|||
:root, |
|||
[data-bs-theme=light] { |
|||
--bs-blue: #0d6efd; |
|||
--bs-indigo: #6610f2; |
|||
--bs-purple: #6f42c1; |
|||
--bs-pink: #d63384; |
|||
--bs-red: #dc3545; |
|||
--bs-orange: #fd7e14; |
|||
--bs-yellow: #ffc107; |
|||
--bs-green: #198754; |
|||
--bs-teal: #20c997; |
|||
--bs-cyan: #0dcaf0; |
|||
--bs-black: #000; |
|||
--bs-white: #fff; |
|||
--bs-gray: #6c757d; |
|||
--bs-gray-dark: #343a40; |
|||
--bs-gray-100: #f8f9fa; |
|||
--bs-gray-200: #e9ecef; |
|||
--bs-gray-300: #dee2e6; |
|||
--bs-gray-400: #ced4da; |
|||
--bs-gray-500: #adb5bd; |
|||
--bs-gray-600: #6c757d; |
|||
--bs-gray-700: #495057; |
|||
--bs-gray-800: #343a40; |
|||
--bs-gray-900: #212529; |
|||
--bs-primary: #0d6efd; |
|||
--bs-secondary: #6c757d; |
|||
--bs-success: #198754; |
|||
--bs-info: #0dcaf0; |
|||
--bs-warning: #ffc107; |
|||
--bs-danger: #dc3545; |
|||
--bs-light: #f8f9fa; |
|||
--bs-dark: #212529; |
|||
--bs-primary-rgb: 13, 110, 253; |
|||
--bs-secondary-rgb: 108, 117, 125; |
|||
--bs-success-rgb: 25, 135, 84; |
|||
--bs-info-rgb: 13, 202, 240; |
|||
--bs-warning-rgb: 255, 193, 7; |
|||
--bs-danger-rgb: 220, 53, 69; |
|||
--bs-light-rgb: 248, 249, 250; |
|||
--bs-dark-rgb: 33, 37, 41; |
|||
--bs-primary-text-emphasis: #052c65; |
|||
--bs-secondary-text-emphasis: #2b2f32; |
|||
--bs-success-text-emphasis: #0a3622; |
|||
--bs-info-text-emphasis: #055160; |
|||
--bs-warning-text-emphasis: #664d03; |
|||
--bs-danger-text-emphasis: #58151c; |
|||
--bs-light-text-emphasis: #495057; |
|||
--bs-dark-text-emphasis: #495057; |
|||
--bs-primary-bg-subtle: #cfe2ff; |
|||
--bs-secondary-bg-subtle: #e2e3e5; |
|||
--bs-success-bg-subtle: #d1e7dd; |
|||
--bs-info-bg-subtle: #cff4fc; |
|||
--bs-warning-bg-subtle: #fff3cd; |
|||
--bs-danger-bg-subtle: #f8d7da; |
|||
--bs-light-bg-subtle: #fcfcfd; |
|||
--bs-dark-bg-subtle: #ced4da; |
|||
--bs-primary-border-subtle: #9ec5fe; |
|||
--bs-secondary-border-subtle: #c4c8cb; |
|||
--bs-success-border-subtle: #a3cfbb; |
|||
--bs-info-border-subtle: #9eeaf9; |
|||
--bs-warning-border-subtle: #ffe69c; |
|||
--bs-danger-border-subtle: #f1aeb5; |
|||
--bs-light-border-subtle: #e9ecef; |
|||
--bs-dark-border-subtle: #adb5bd; |
|||
--bs-white-rgb: 255, 255, 255; |
|||
--bs-black-rgb: 0, 0, 0; |
|||
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; |
|||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
|||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); |
|||
--bs-body-font-family: var(--bs-font-sans-serif); |
|||
--bs-body-font-size: 1rem; |
|||
--bs-body-font-weight: 400; |
|||
--bs-body-line-height: 1.5; |
|||
--bs-body-color: #212529; |
|||
--bs-body-color-rgb: 33, 37, 41; |
|||
--bs-body-bg: #fff; |
|||
--bs-body-bg-rgb: 255, 255, 255; |
|||
--bs-emphasis-color: #000; |
|||
--bs-emphasis-color-rgb: 0, 0, 0; |
|||
--bs-secondary-color: rgba(33, 37, 41, 0.75); |
|||
--bs-secondary-color-rgb: 33, 37, 41; |
|||
--bs-secondary-bg: #e9ecef; |
|||
--bs-secondary-bg-rgb: 233, 236, 239; |
|||
--bs-tertiary-color: rgba(33, 37, 41, 0.5); |
|||
--bs-tertiary-color-rgb: 33, 37, 41; |
|||
--bs-tertiary-bg: #f8f9fa; |
|||
--bs-tertiary-bg-rgb: 248, 249, 250; |
|||
--bs-heading-color: inherit; |
|||
--bs-link-color: #0d6efd; |
|||
--bs-link-color-rgb: 13, 110, 253; |
|||
--bs-link-decoration: underline; |
|||
--bs-link-hover-color: #0a58ca; |
|||
--bs-link-hover-color-rgb: 10, 88, 202; |
|||
--bs-code-color: #d63384; |
|||
--bs-highlight-color: #212529; |
|||
--bs-highlight-bg: #fff3cd; |
|||
--bs-border-width: 1px; |
|||
--bs-border-style: solid; |
|||
--bs-border-color: #dee2e6; |
|||
--bs-border-color-translucent: rgba(0, 0, 0, 0.175); |
|||
--bs-border-radius: 0.375rem; |
|||
--bs-border-radius-sm: 0.25rem; |
|||
--bs-border-radius-lg: 0.5rem; |
|||
--bs-border-radius-xl: 1rem; |
|||
--bs-border-radius-xxl: 2rem; |
|||
--bs-border-radius-2xl: var(--bs-border-radius-xxl); |
|||
--bs-border-radius-pill: 50rem; |
|||
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); |
|||
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); |
|||
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); |
|||
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); |
|||
--bs-focus-ring-width: 0.25rem; |
|||
--bs-focus-ring-opacity: 0.25; |
|||
--bs-focus-ring-color: rgba(13, 110, 253, 0.25); |
|||
--bs-form-valid-color: #198754; |
|||
--bs-form-valid-border-color: #198754; |
|||
--bs-form-invalid-color: #dc3545; |
|||
--bs-form-invalid-border-color: #dc3545; |
|||
} |
|||
|
|||
[data-bs-theme=dark] { |
|||
color-scheme: dark; |
|||
--bs-body-color: #dee2e6; |
|||
--bs-body-color-rgb: 222, 226, 230; |
|||
--bs-body-bg: #212529; |
|||
--bs-body-bg-rgb: 33, 37, 41; |
|||
--bs-emphasis-color: #fff; |
|||
--bs-emphasis-color-rgb: 255, 255, 255; |
|||
--bs-secondary-color: rgba(222, 226, 230, 0.75); |
|||
--bs-secondary-color-rgb: 222, 226, 230; |
|||
--bs-secondary-bg: #343a40; |
|||
--bs-secondary-bg-rgb: 52, 58, 64; |
|||
--bs-tertiary-color: rgba(222, 226, 230, 0.5); |
|||
--bs-tertiary-color-rgb: 222, 226, 230; |
|||
--bs-tertiary-bg: #2b3035; |
|||
--bs-tertiary-bg-rgb: 43, 48, 53; |
|||
--bs-primary-text-emphasis: #6ea8fe; |
|||
--bs-secondary-text-emphasis: #a7acb1; |
|||
--bs-success-text-emphasis: #75b798; |
|||
--bs-info-text-emphasis: #6edff6; |
|||
--bs-warning-text-emphasis: #ffda6a; |
|||
--bs-danger-text-emphasis: #ea868f; |
|||
--bs-light-text-emphasis: #f8f9fa; |
|||
--bs-dark-text-emphasis: #dee2e6; |
|||
--bs-primary-bg-subtle: #031633; |
|||
--bs-secondary-bg-subtle: #161719; |
|||
--bs-success-bg-subtle: #051b11; |
|||
--bs-info-bg-subtle: #032830; |
|||
--bs-warning-bg-subtle: #332701; |
|||
--bs-danger-bg-subtle: #2c0b0e; |
|||
--bs-light-bg-subtle: #343a40; |
|||
--bs-dark-bg-subtle: #1a1d20; |
|||
--bs-primary-border-subtle: #084298; |
|||
--bs-secondary-border-subtle: #41464b; |
|||
--bs-success-border-subtle: #0f5132; |
|||
--bs-info-border-subtle: #087990; |
|||
--bs-warning-border-subtle: #997404; |
|||
--bs-danger-border-subtle: #842029; |
|||
--bs-light-border-subtle: #495057; |
|||
--bs-dark-border-subtle: #343a40; |
|||
--bs-heading-color: inherit; |
|||
--bs-link-color: #6ea8fe; |
|||
--bs-link-hover-color: #8bb9fe; |
|||
--bs-link-color-rgb: 110, 168, 254; |
|||
--bs-link-hover-color-rgb: 139, 185, 254; |
|||
--bs-code-color: #e685b5; |
|||
--bs-highlight-color: #dee2e6; |
|||
--bs-highlight-bg: #664d03; |
|||
--bs-border-color: #495057; |
|||
--bs-border-color-translucent: rgba(255, 255, 255, 0.15); |
|||
--bs-form-valid-color: #75b798; |
|||
--bs-form-valid-border-color: #75b798; |
|||
--bs-form-invalid-color: #ea868f; |
|||
--bs-form-invalid-border-color: #ea868f; |
|||
} |
|||
|
|||
*, |
|||
*::before, |
|||
*::after { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
@media (prefers-reduced-motion: no-preference) { |
|||
:root { |
|||
scroll-behavior: smooth; |
|||
} |
|||
} |
|||
|
|||
body { |
|||
margin: 0; |
|||
font-family: var(--bs-body-font-family); |
|||
font-size: var(--bs-body-font-size); |
|||
font-weight: var(--bs-body-font-weight); |
|||
line-height: var(--bs-body-line-height); |
|||
color: var(--bs-body-color); |
|||
text-align: var(--bs-body-text-align); |
|||
background-color: var(--bs-body-bg); |
|||
-webkit-text-size-adjust: 100%; |
|||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
hr { |
|||
margin: 1rem 0; |
|||
color: inherit; |
|||
border: 0; |
|||
border-top: var(--bs-border-width) solid; |
|||
opacity: 0.25; |
|||
} |
|||
|
|||
h6, h5, h4, h3, h2, h1 { |
|||
margin-top: 0; |
|||
margin-bottom: 0.5rem; |
|||
font-weight: 500; |
|||
line-height: 1.2; |
|||
color: var(--bs-heading-color); |
|||
} |
|||
|
|||
h1 { |
|||
font-size: calc(1.375rem + 1.5vw); |
|||
} |
|||
@media (min-width: 1200px) { |
|||
h1 { |
|||
font-size: 2.5rem; |
|||
} |
|||
} |
|||
|
|||
h2 { |
|||
font-size: calc(1.325rem + 0.9vw); |
|||
} |
|||
@media (min-width: 1200px) { |
|||
h2 { |
|||
font-size: 2rem; |
|||
} |
|||
} |
|||
|
|||
h3 { |
|||
font-size: calc(1.3rem + 0.6vw); |
|||
} |
|||
@media (min-width: 1200px) { |
|||
h3 { |
|||
font-size: 1.75rem; |
|||
} |
|||
} |
|||
|
|||
h4 { |
|||
font-size: calc(1.275rem + 0.3vw); |
|||
} |
|||
@media (min-width: 1200px) { |
|||
h4 { |
|||
font-size: 1.5rem; |
|||
} |
|||
} |
|||
|
|||
h5 { |
|||
font-size: 1.25rem; |
|||
} |
|||
|
|||
h6 { |
|||
font-size: 1rem; |
|||
} |
|||
|
|||
p { |
|||
margin-top: 0; |
|||
margin-bottom: 1rem; |
|||
} |
|||
|
|||
abbr[title] { |
|||
-webkit-text-decoration: underline dotted; |
|||
text-decoration: underline dotted; |
|||
cursor: help; |
|||
-webkit-text-decoration-skip-ink: none; |
|||
text-decoration-skip-ink: none; |
|||
} |
|||
|
|||
address { |
|||
margin-bottom: 1rem; |
|||
font-style: normal; |
|||
line-height: inherit; |
|||
} |
|||
|
|||
ol, |
|||
ul { |
|||
padding-right: 2rem; |
|||
} |
|||
|
|||
ol, |
|||
ul, |
|||
dl { |
|||
margin-top: 0; |
|||
margin-bottom: 1rem; |
|||
} |
|||
|
|||
ol ol, |
|||
ul ul, |
|||
ol ul, |
|||
ul ol { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
dt { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
dd { |
|||
margin-bottom: 0.5rem; |
|||
margin-right: 0; |
|||
} |
|||
|
|||
blockquote { |
|||
margin: 0 0 1rem; |
|||
} |
|||
|
|||
b, |
|||
strong { |
|||
font-weight: bolder; |
|||
} |
|||
|
|||
small { |
|||
font-size: 0.875em; |
|||
} |
|||
|
|||
mark { |
|||
padding: 0.1875em; |
|||
color: var(--bs-highlight-color); |
|||
background-color: var(--bs-highlight-bg); |
|||
} |
|||
|
|||
sub, |
|||
sup { |
|||
position: relative; |
|||
font-size: 0.75em; |
|||
line-height: 0; |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
sub { |
|||
bottom: -0.25em; |
|||
} |
|||
|
|||
sup { |
|||
top: -0.5em; |
|||
} |
|||
|
|||
a { |
|||
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); |
|||
text-decoration: underline; |
|||
} |
|||
a:hover { |
|||
--bs-link-color-rgb: var(--bs-link-hover-color-rgb); |
|||
} |
|||
|
|||
a:not([href]):not([class]), a:not([href]):not([class]):hover { |
|||
color: inherit; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
pre, |
|||
code, |
|||
kbd, |
|||
samp { |
|||
font-family: var(--bs-font-monospace); |
|||
font-size: 1em; |
|||
} |
|||
|
|||
pre { |
|||
display: block; |
|||
margin-top: 0; |
|||
margin-bottom: 1rem; |
|||
overflow: auto; |
|||
font-size: 0.875em; |
|||
} |
|||
pre code { |
|||
font-size: inherit; |
|||
color: inherit; |
|||
word-break: normal; |
|||
} |
|||
|
|||
code { |
|||
font-size: 0.875em; |
|||
color: var(--bs-code-color); |
|||
word-wrap: break-word; |
|||
} |
|||
a > code { |
|||
color: inherit; |
|||
} |
|||
|
|||
kbd { |
|||
padding: 0.1875rem 0.375rem; |
|||
font-size: 0.875em; |
|||
color: var(--bs-body-bg); |
|||
background-color: var(--bs-body-color); |
|||
border-radius: 0.25rem; |
|||
} |
|||
kbd kbd { |
|||
padding: 0; |
|||
font-size: 1em; |
|||
} |
|||
|
|||
figure { |
|||
margin: 0 0 1rem; |
|||
} |
|||
|
|||
img, |
|||
svg { |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
table { |
|||
caption-side: bottom; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
caption { |
|||
padding-top: 0.5rem; |
|||
padding-bottom: 0.5rem; |
|||
color: var(--bs-secondary-color); |
|||
text-align: right; |
|||
} |
|||
|
|||
th { |
|||
text-align: inherit; |
|||
text-align: -webkit-match-parent; |
|||
} |
|||
|
|||
thead, |
|||
tbody, |
|||
tfoot, |
|||
tr, |
|||
td, |
|||
th { |
|||
border-color: inherit; |
|||
border-style: solid; |
|||
border-width: 0; |
|||
} |
|||
|
|||
label { |
|||
display: inline-block; |
|||
} |
|||
|
|||
button { |
|||
border-radius: 0; |
|||
} |
|||
|
|||
button:focus:not(:focus-visible) { |
|||
outline: 0; |
|||
} |
|||
|
|||
input, |
|||
button, |
|||
select, |
|||
optgroup, |
|||
textarea { |
|||
margin: 0; |
|||
font-family: inherit; |
|||
font-size: inherit; |
|||
line-height: inherit; |
|||
} |
|||
|
|||
button, |
|||
select { |
|||
text-transform: none; |
|||
} |
|||
|
|||
[role=button] { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
select { |
|||
word-wrap: normal; |
|||
} |
|||
select:disabled { |
|||
opacity: 1; |
|||
} |
|||
|
|||
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator { |
|||
display: none !important; |
|||
} |
|||
|
|||
button, |
|||
[type=button], |
|||
[type=reset], |
|||
[type=submit] { |
|||
-webkit-appearance: button; |
|||
} |
|||
button:not(:disabled), |
|||
[type=button]:not(:disabled), |
|||
[type=reset]:not(:disabled), |
|||
[type=submit]:not(:disabled) { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
::-moz-focus-inner { |
|||
padding: 0; |
|||
border-style: none; |
|||
} |
|||
|
|||
textarea { |
|||
resize: vertical; |
|||
} |
|||
|
|||
fieldset { |
|||
min-width: 0; |
|||
padding: 0; |
|||
margin: 0; |
|||
border: 0; |
|||
} |
|||
|
|||
legend { |
|||
float: right; |
|||
width: 100%; |
|||
padding: 0; |
|||
margin-bottom: 0.5rem; |
|||
line-height: inherit; |
|||
font-size: calc(1.275rem + 0.3vw); |
|||
} |
|||
@media (min-width: 1200px) { |
|||
legend { |
|||
font-size: 1.5rem; |
|||
} |
|||
} |
|||
legend + * { |
|||
clear: right; |
|||
} |
|||
|
|||
::-webkit-datetime-edit-fields-wrapper, |
|||
::-webkit-datetime-edit-text, |
|||
::-webkit-datetime-edit-minute, |
|||
::-webkit-datetime-edit-hour-field, |
|||
::-webkit-datetime-edit-day-field, |
|||
::-webkit-datetime-edit-month-field, |
|||
::-webkit-datetime-edit-year-field { |
|||
padding: 0; |
|||
} |
|||
|
|||
::-webkit-inner-spin-button { |
|||
height: auto; |
|||
} |
|||
|
|||
[type=search] { |
|||
-webkit-appearance: textfield; |
|||
outline-offset: -2px; |
|||
} |
|||
[type=search]::-webkit-search-cancel-button { |
|||
cursor: pointer; |
|||
filter: grayscale(1); |
|||
} |
|||
|
|||
[type="tel"], |
|||
[type="url"], |
|||
[type="email"], |
|||
[type="number"] { |
|||
direction: ltr; |
|||
} |
|||
::-webkit-search-decoration { |
|||
-webkit-appearance: none; |
|||
} |
|||
|
|||
::-webkit-color-swatch-wrapper { |
|||
padding: 0; |
|||
} |
|||
|
|||
::-webkit-file-upload-button { |
|||
font: inherit; |
|||
-webkit-appearance: button; |
|||
} |
|||
|
|||
::file-selector-button { |
|||
font: inherit; |
|||
-webkit-appearance: button; |
|||
} |
|||
|
|||
output { |
|||
display: inline-block; |
|||
} |
|||
|
|||
iframe { |
|||
border: 0; |
|||
} |
|||
|
|||
summary { |
|||
display: list-item; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
progress { |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
[hidden] { |
|||
display: none !important; |
|||
} |
|||
/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */ |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,59 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>Picsum photos</title> |
|||
<link rel="stylesheet" href="css/bootstrap.css"> |
|||
<style> |
|||
.card { |
|||
box-shadow: 0 20px 20px rgba(0,0,0,0.5); |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="container text-center"> |
|||
<h1 class="display-2">Random Picsum photos</h1> |
|||
<div class="row justify-content-center"> |
|||
<div class="col-md-8"> |
|||
<div class="card mt-5"> |
|||
<div class="card-body"> |
|||
<img src="" alt="Náhodný Obrázek" id="randomImg" class="img-fluid"> |
|||
<br> |
|||
<button id="nextImg" class="mt-2 btn btn-primary">Další obrázek</button> |
|||
<br> |
|||
<a id="downloadImg" class="mt-2 btn btn-outline-primary"download> Stáhnout náhodný obrázek</a> |
|||
<br> |
|||
<input type="number" name="widthIn" id="widthIn" |
|||
placeholder="Šířka" class="form-control" value="500"> |
|||
<input type="number" name="heightIn" id="heightIn" |
|||
placeholder="Výška" class="form-control" value="500"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<script> |
|||
const randomImg = document.getElementById("randomImg") |
|||
const nextImgBtn = document.getElementById("nextImg") |
|||
const widthIn = document.getElementById("widthIn") |
|||
const heightIn = document.getElementById("heightIn") |
|||
const downloadImg = document.getElementById("downloadImg") |
|||
|
|||
function getRandomImg(){ |
|||
// AltGR + ý = ` (na české klávesnici) |
|||
let width = widthIn.value; |
|||
let height = heightIn.value; |
|||
let newImgUrl = `https://picsum.photos/${width}/${height}?random=${Math.random()}` |
|||
randomImg.src = newImgUrl |
|||
randomImg.onload = function() { |
|||
downloadImg.href = randomImg.src; |
|||
} |
|||
console.log(newImgUrl) |
|||
} |
|||
nextImgBtn.addEventListener("click",getRandomImg) |
|||
getRandomImg() |
|||
</script> |
|||
<script src="js/bootstrap.bundle.js"></script> |
|||
</body> |
|||
</html> |
|||
Loading…
Reference in new issue