diff --git a/README.md b/README.md new file mode 100644 index 0000000..64e1004 --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +# Visit counter + +An page who count the visits maked. Works writing the cantities of visits in a text file using PHP. + +## Visit + +You can visit it [here](http://franp.xyz/pages/PY-6-ContadorDeVisitas/) \ No newline at end of file diff --git a/definer.html b/definer.html index b936d41..20847f6 100644 --- a/definer.html +++ b/definer.html @@ -1,20 +1,20 @@ - - - - - - - - - Generar visitas - - -
-

Generación de visitas

-
-
- - -
- + + + + + + + + + Generar visitas + + +
+

Generación de visitas

+
+
+ + +
+ \ No newline at end of file diff --git a/definer.php b/definer.php index 4c59e8d..9e66e23 100644 --- a/definer.php +++ b/definer.php @@ -1,20 +1,20 @@ -= 0 && $visitas <= 9999) { - file_put_contents('./visits.txt', $visitas - 1); - header('Location: ./index.php'); -} else { - backToLife(); -} - += 0 && $visitas <= 9999) { + file_put_contents('./visits.txt', $visitas - 1); + header('Location: ./index.php'); +} else { + backToLife(); +} + ?> \ No newline at end of file diff --git a/index.php b/index.php index 463343e..d151a4d 100644 --- a/index.php +++ b/index.php @@ -1,35 +1,35 @@ - - - - - - - - - Contador de visitas - - - - -
-
-

VISITAS

- -
-
- - - - + + + + + + + + + Contador de visitas + + + + +
+
+

VISITAS

+ +
+
+ + + + \ No newline at end of file diff --git a/logic.php b/logic.php index 837b23a..973cc1c 100644 --- a/logic.php +++ b/logic.php @@ -1,35 +1,35 @@ -' . $c . ''; -$alert = '

!!!

'; - -if ($c > 9999) { - $tooBig = true; -} - - - -function actualizeNumber($c) { - - if (file_exists('./visits.txt')) { - file_put_contents('./visits.txt', $c); - } -} - -function checkNumber($c) { - require './messages_and_variables.php'; - - -} - +' . $c . ''; +$alert = '

!!!

'; + +if ($c > 9999) { + $tooBig = true; +} + + + +function actualizeNumber($c) { + + if (file_exists('./visits.txt')) { + file_put_contents('./visits.txt', $c); + } +} + +function checkNumber($c) { + require './messages_and_variables.php'; + + +} + ?> \ No newline at end of file diff --git a/normalize.css b/normalize.css index b400bfd..7ea2302 100644 --- a/normalize.css +++ b/normalize.css @@ -1,348 +1,348 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/style.css b/style.css index 952d12f..e5d8d14 100644 --- a/style.css +++ b/style.css @@ -1,219 +1,219 @@ -* { - margin: 0; - user-select: none; -} -html, body { - height: 100%; -} - -body { - background-color: #2C3338; - font-family: Arial, Helvetica, sans-serif; - position: relative; -} - - -.blue-circle { - background-color: #578EB7; - - /* */ - position: relative; - top: 50%; - left: 50%; - margin: -250px 0 0 -250px; /* Half of the width*/ - /* Credits: https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/ - /* */ - - width: 500px; - height: 500px; - border-radius: 100%; - -webkit-border-radius: 100%; - -moz-border-radius: 100%; - -ms-border-radius: 100%; - -o-border-radius: 100%; - display: flex; - align-items: center; - justify-content: center; -} - -.gray-rectangle { - width: 40%; - height: 40%; - background-color: #C4C4C4; - - border-radius: 10%; - -webkit-border-radius: 10%; - -moz-border-radius: 10%; - -ms-border-radius: 10%; - -o-border-radius: 10%; -} - -h2 { - text-align: center; - /* padding-top: 40px;*/ - color: #2C3338; - font-weight: bolder; -} - -.visits { - padding-top: 40px; - font-size: 18pt; -} - -.amount { - padding-top: 20px; - font-size: 25pt; -} - -.alert { - padding-top: 20px; - font-size: 35pt; - color: #ff5555; -} - - -@media (min-width: 0) and (max-width: 1758px) { - .blue-circle { - /* */ - position: relative; - top: 50%; - left: 50%; - margin: -125px 0 0 -125px; /* Half of the width*/ - /* Credits: https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/ - /* */ - - width: 250px; - height: 250px; - } - - .gray-rectangle { - width: 40%; - height: 40%; - background-color: #C4C4C4; - } - - .visits { - padding-top: 20px; - font-size: 9pt; - } - - .amount { - padding-top: 10px; - font-size: 12pt; - } - - .alert { - padding-top: 10px; - font-size: 17pt; - color: #ff5555; - } -} - - -a { - text-decoration: none; - color: inherit; -} - -/* */ - -button { - border: none; -} - -button:focus { - border: none; - outline: none; -} - -/* Credits: https://www.codegrepper.com/code-examples/css/how+to+remove+button+decoration - -/* */ - -button:active { - overflow: none; -} - -button { - background-color: #465158; - color: #2f3542; - box-shadow: 5px 5px 0px 0 #3c464d; - font-weight: bold; - width: 300px; - height: 75px; - position: fixed; - top: 20px; - left: 82%; - transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; - -webkit-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; - -moz-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; - -ms-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; - -o-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; -} - -button:hover { - background-color: white; - color: #286cff; - box-shadow: 5px 5px 0px 0 #979797; - transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; - -webkit-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; - -moz-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; - -ms-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; - -o-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; -} - -button:active { - box-shadow: 0px 0px 0px 0 #979797; - transition: none; - transform: translate(5px, 5px); - -webkit-transform: translate(5px, 5px); - -moz-transform: translate(5px, 5px); - -ms-transform: translate(5px, 5px); - -o-transform: translate(5px, 5px); - -webkit-transition: none; - -moz-transition: none; - -ms-transition: none; - -o-transition: none; -} - -@media (min-width: 0) and (max-width: 1758px) { - a { - display: flex; - position: relative; - top: -13%; - justify-content: center; - } - - button { - position: initial; - top: 0; - left: 0; - margin: 0; - box-shadow: none; - background-color: white; - color: #286cff; - } - button:hover { - background-color: none; - color: none; - box-shadow: none; - transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; - -webkit-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; - -moz-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; - -ms-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; - -o-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; - } - - button:active { - transition: none; - transform: translate(0px, 5px); - -webkit-transform: translate(0px, 5px); - -moz-transform: translate(0px, 5px); - -ms-transform: translate(0px, 5px); - -o-transform: translate(0px, 5px); - -webkit-transition: none; - -moz-transition: none; - -ms-transition: none; - -o-transition: none; -} +* { + margin: 0; + user-select: none; +} +html, body { + height: 100%; +} + +body { + background-color: #2C3338; + font-family: Arial, Helvetica, sans-serif; + position: relative; +} + + +.blue-circle { + background-color: #578EB7; + + /* */ + position: relative; + top: 50%; + left: 50%; + margin: -250px 0 0 -250px; /* Half of the width*/ + /* Credits: https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/ + /* */ + + width: 500px; + height: 500px; + border-radius: 100%; + -webkit-border-radius: 100%; + -moz-border-radius: 100%; + -ms-border-radius: 100%; + -o-border-radius: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.gray-rectangle { + width: 40%; + height: 40%; + background-color: #C4C4C4; + + border-radius: 10%; + -webkit-border-radius: 10%; + -moz-border-radius: 10%; + -ms-border-radius: 10%; + -o-border-radius: 10%; +} + +h2 { + text-align: center; + /* padding-top: 40px;*/ + color: #2C3338; + font-weight: bolder; +} + +.visits { + padding-top: 40px; + font-size: 18pt; +} + +.amount { + padding-top: 20px; + font-size: 25pt; +} + +.alert { + padding-top: 20px; + font-size: 35pt; + color: #ff5555; +} + + +@media (min-width: 0) and (max-width: 1758px) { + .blue-circle { + /* */ + position: relative; + top: 50%; + left: 50%; + margin: -125px 0 0 -125px; /* Half of the width*/ + /* Credits: https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/ + /* */ + + width: 250px; + height: 250px; + } + + .gray-rectangle { + width: 40%; + height: 40%; + background-color: #C4C4C4; + } + + .visits { + padding-top: 20px; + font-size: 9pt; + } + + .amount { + padding-top: 10px; + font-size: 12pt; + } + + .alert { + padding-top: 10px; + font-size: 17pt; + color: #ff5555; + } +} + + +a { + text-decoration: none; + color: inherit; +} + +/* */ + +button { + border: none; +} + +button:focus { + border: none; + outline: none; +} + +/* Credits: https://www.codegrepper.com/code-examples/css/how+to+remove+button+decoration + +/* */ + +button:active { + overflow: none; +} + +button { + background-color: #465158; + color: #2f3542; + box-shadow: 5px 5px 0px 0 #3c464d; + font-weight: bold; + width: 300px; + height: 75px; + position: fixed; + top: 20px; + left: 82%; + transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; + -webkit-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; + -moz-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; + -ms-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; + -o-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; +} + +button:hover { + background-color: white; + color: #286cff; + box-shadow: 5px 5px 0px 0 #979797; + transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; + -webkit-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; + -moz-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; + -ms-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; + -o-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; +} + +button:active { + box-shadow: 0px 0px 0px 0 #979797; + transition: none; + transform: translate(5px, 5px); + -webkit-transform: translate(5px, 5px); + -moz-transform: translate(5px, 5px); + -ms-transform: translate(5px, 5px); + -o-transform: translate(5px, 5px); + -webkit-transition: none; + -moz-transition: none; + -ms-transition: none; + -o-transition: none; +} + +@media (min-width: 0) and (max-width: 1758px) { + a { + display: flex; + position: relative; + top: -13%; + justify-content: center; + } + + button { + position: initial; + top: 0; + left: 0; + margin: 0; + box-shadow: none; + background-color: white; + color: #286cff; + } + button:hover { + background-color: none; + color: none; + box-shadow: none; + transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; + -webkit-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; + -moz-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; + -ms-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; + -o-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; + } + + button:active { + transition: none; + transform: translate(0px, 5px); + -webkit-transform: translate(0px, 5px); + -moz-transform: translate(0px, 5px); + -ms-transform: translate(0px, 5px); + -o-transform: translate(0px, 5px); + -webkit-transition: none; + -moz-transition: none; + -ms-transition: none; + -o-transition: none; +} } \ No newline at end of file diff --git a/styleDefiner.css b/styleDefiner.css index 0f9390e..2b5cd7e 100644 --- a/styleDefiner.css +++ b/styleDefiner.css @@ -1,108 +1,108 @@ -* { - margin: 0; - user-select: none; -} - -body { - background-color: #2C3338; - font-family: Arial, Helvetica, sans-serif; - color: white; -} - -header { - background-color: rgba(255, 255, 255, 0.178); - height: 90px; - padding: 30px; - display: flex; - align-items: center; - justify-content: center; -} - -h1 { - font-size: 35pt !important; - text-align: center; -} - -form { - margin-top: 40px; - display: grid; - justify-content: center; -} - - -/* */ - -.input-visitas { - -webkit-appearance: none; - -moz-appearance: textfield; -} - -/* Credits: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp - -/* */ - -.input-visitas { - width: 120px; - height: 100px; - padding: 0; - font-size: 35pt; - background-color: #5781b7; - border: none; - border: solid 2px #2f475a; - text-align: center; - margin: auto; -} - -.input-visitas:active, .input-visitas:focus { - border: solid 2px #2f475a; - outline: none; -} - -/* */ - -.input-submit { - border: none; -} - -.input-submit:focus { - border: none; - outline: none; -} - -/* Credits: https://www.codegrepper.com/code-examples/css/how+to+remove+button+decoration - -/* */ - -.input-submit { - width: 170px; - height: 40px; - padding: 0; - font-size: 15pt; - background-color: #b75774; - border: solid 2px #5a2f3f; - box-sizing: content-box; - margin-top: 20px; - transition: ease-in-out 0.3s background-color; - -webkit-transition: ease-in-out 0.3s background-color; - -moz-transition: ease-in-out 0.3s background-color; - -ms-transition: ease-in-out 0.3s background-color; - -o-transition: ease-in-out 0.3s background-color; -} - -.input-submit:active, .input-submit:focus { - border: solid 2px #5a2f3f; - outline: none; - box-sizing: content-box; -} - -.input-submit:hover { - background-color: #b37084; - transition: ease-in-out 0.3s background-color; - -webkit-transition: ease-in-out 0.3s background-color; - -moz-transition: ease-in-out 0.3s background-color; - -ms-transition: ease-in-out 0.3s background-color; - -o-transition: ease-in-out 0.3s background-color; -} - - - +* { + margin: 0; + user-select: none; +} + +body { + background-color: #2C3338; + font-family: Arial, Helvetica, sans-serif; + color: white; +} + +header { + background-color: rgba(255, 255, 255, 0.178); + height: 90px; + padding: 30px; + display: flex; + align-items: center; + justify-content: center; +} + +h1 { + font-size: 35pt !important; + text-align: center; +} + +form { + margin-top: 40px; + display: grid; + justify-content: center; +} + + +/* */ + +.input-visitas { + -webkit-appearance: none; + -moz-appearance: textfield; +} + +/* Credits: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp + +/* */ + +.input-visitas { + width: 120px; + height: 100px; + padding: 0; + font-size: 35pt; + background-color: #5781b7; + border: none; + border: solid 2px #2f475a; + text-align: center; + margin: auto; +} + +.input-visitas:active, .input-visitas:focus { + border: solid 2px #2f475a; + outline: none; +} + +/* */ + +.input-submit { + border: none; +} + +.input-submit:focus { + border: none; + outline: none; +} + +/* Credits: https://www.codegrepper.com/code-examples/css/how+to+remove+button+decoration + +/* */ + +.input-submit { + width: 170px; + height: 40px; + padding: 0; + font-size: 15pt; + background-color: #b75774; + border: solid 2px #5a2f3f; + box-sizing: content-box; + margin-top: 20px; + transition: ease-in-out 0.3s background-color; + -webkit-transition: ease-in-out 0.3s background-color; + -moz-transition: ease-in-out 0.3s background-color; + -ms-transition: ease-in-out 0.3s background-color; + -o-transition: ease-in-out 0.3s background-color; +} + +.input-submit:active, .input-submit:focus { + border: solid 2px #5a2f3f; + outline: none; + box-sizing: content-box; +} + +.input-submit:hover { + background-color: #b37084; + transition: ease-in-out 0.3s background-color; + -webkit-transition: ease-in-out 0.3s background-color; + -moz-transition: ease-in-out 0.3s background-color; + -ms-transition: ease-in-out 0.3s background-color; + -o-transition: ease-in-out 0.3s background-color; +} + + + diff --git a/visits.txt b/visits.txt index 99f9f07..ca6d18c 100644 --- a/visits.txt +++ b/visits.txt @@ -1 +1 @@ -502 \ No newline at end of file +616 \ No newline at end of file