franpcode/Visit-counter
1
0
Fork 0
mirror of https://github.com/FranP-code/Visit-counter.git synced 2025-10-12 23:52:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

readme added

Browse Source
This commit is contained in:
Francisco Pessano
2021-11-24 00:58:07 -03:00
parent 47d352fa66
commit 70a3944b4f
9 changed files with 788 additions and 781 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
README.md Normal file
View File

@@ -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/)

38
definer.html
View File

@@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="es"> <html lang="es">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styleDefiner.css"> <link rel="stylesheet" href="styleDefiner.css">
<link rel="stylesheet" href="./normalize.css"> <link rel="stylesheet" href="./normalize.css">
<title>Generar visitas</title> <title>Generar visitas</title>
</head> </head>
<body> <body>
<header> <header>
<h1>Generación de visitas</h1> <h1>Generación de visitas</h1>
</header> </header>
<form method="POST" action="definer.php"> <form method="POST" action="definer.php">
<input name="visitas" type="number" class="input-visitas" required min="0" max="9999" > <input name="visitas" type="number" class="input-visitas" required min="0" max="9999" >
<input name="submit" type="submit" class="input-submit" value="Enviar"> <input name="submit" type="submit" class="input-submit" value="Enviar">
</form> </form>
</body> </body>
</html> </html>

38
definer.php
View File

@@ -1,20 +1,20 @@
<?php <?php
$visitas = htmlspecialchars($_POST['visitas']); $visitas = htmlspecialchars($_POST['visitas']);
function backToLife() { function backToLife() {
header('Location: ./definer.html'); header('Location: ./definer.html');
} }
if (!isset($visitas)) { if (!isset($visitas)) {
backToLife(); backToLife();
} }
if ($visitas >= 0 && $visitas <= 9999) { if ($visitas >= 0 && $visitas <= 9999) {
file_put_contents('./visits.txt', $visitas - 1); file_put_contents('./visits.txt', $visitas - 1);
header('Location: ./index.php'); header('Location: ./index.php');
} else { } else {
backToLife(); backToLife();
} }
?> ?>

68
index.php
View File

@@ -1,35 +1,35 @@
<?php require 'logic.php'; ?> <?php require 'logic.php'; ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="es"> <html lang="es">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contador de visitas</title> <title>Contador de visitas</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="normalize.css">
</head> </head>
<body> <body>
<div class="blue-circle"> <div class="blue-circle">
<div class="gray-rectangle"> <div class="gray-rectangle">
<h2 class="visits">VISITAS</h2> <h2 class="visits">VISITAS</h2>
<?php <?php
if(!$tooBig) { if(!$tooBig) {
echo $allRight; echo $allRight;
} else { } else {
echo $alert; echo $alert;
$c = 0; $c = 0;
} }
?> ?>
</div> </div>
</div> </div>
<a href="./definer.html"><button> <a href="./definer.html"><button>
Definir la cantidad de visitas Definir la cantidad de visitas
</button></a> </button></a>
</body> </body>
</html> </html>
<?php actualizeNumber($c); ?> <?php actualizeNumber($c); ?>

68
logic.php
View File

@@ -1,35 +1,35 @@
<?php <?php
if (file_exists('./visits.txt')) { if (file_exists('./visits.txt')) {
$c = file_get_contents('./visits.txt'); $c = file_get_contents('./visits.txt');
$c++; $c++;
} else { } else {
$c = 'Error, el archivo visits.txt no existe'; $c = 'Error, el archivo visits.txt no existe';
} }
$tooBig = false; $tooBig = false;
$allRight = '<h2 class="amount">' . $c . '</h2>'; $allRight = '<h2 class="amount">' . $c . '</h2>';
$alert = '<h2 class="alert">!!!</h2>'; $alert = '<h2 class="alert">!!!</h2>';
if ($c > 9999) { if ($c > 9999) {
$tooBig = true; $tooBig = true;
} }
function actualizeNumber($c) { function actualizeNumber($c) {
if (file_exists('./visits.txt')) { if (file_exists('./visits.txt')) {
file_put_contents('./visits.txt', $c); file_put_contents('./visits.txt', $c);
} }
} }
function checkNumber($c) { function checkNumber($c) {
require './messages_and_variables.php'; require './messages_and_variables.php';
} }
?> ?>

696
normalize.css vendored
View File

@@ -1,348 +1,348 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document /* Document
========================================================================== */ ========================================================================== */
/** /**
* 1. Correct the line height in all browsers. * 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS. * 2. Prevent adjustments of font size after orientation changes in iOS.
*/ */
html { html {
line-height: 1.15; /* 1 */ line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */
} }
/* Sections /* Sections
========================================================================== */ ========================================================================== */
/** /**
* Remove the margin in all browsers. * Remove the margin in all browsers.
*/ */
body { body {
margin: 0; margin: 0;
} }
/** /**
* Render the `main` element consistently in IE. * Render the `main` element consistently in IE.
*/ */
main { main {
display: block; display: block;
} }
/** /**
* Correct the font size and margin on `h1` elements within `section` and * Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari. * `article` contexts in Chrome, Firefox, and Safari.
*/ */
h1 { h1 {
font-size: 2em; font-size: 2em;
} }
/* Grouping content /* Grouping content
========================================================================== */ ========================================================================== */
/** /**
* 1. Add the correct box sizing in Firefox. * 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE. * 2. Show the overflow in Edge and IE.
*/ */
hr { hr {
box-sizing: content-box; /* 1 */ box-sizing: content-box; /* 1 */
height: 0; /* 1 */ height: 0; /* 1 */
overflow: visible; /* 2 */ overflow: visible; /* 2 */
} }
/** /**
* 1. Correct the inheritance and scaling of font size in all browsers. * 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers. * 2. Correct the odd `em` font sizing in all browsers.
*/ */
pre { pre {
font-family: monospace, monospace; /* 1 */ font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */ font-size: 1em; /* 2 */
} }
/* Text-level semantics /* Text-level semantics
========================================================================== */ ========================================================================== */
/** /**
* Remove the gray background on active links in IE 10. * Remove the gray background on active links in IE 10.
*/ */
a { a {
background-color: transparent; background-color: transparent;
} }
/** /**
* 1. Remove the bottom border in Chrome 57- * 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/ */
abbr[title] { abbr[title] {
border-bottom: none; /* 1 */ border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */ text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */ text-decoration: underline dotted; /* 2 */
} }
/** /**
* Add the correct font weight in Chrome, Edge, and Safari. * Add the correct font weight in Chrome, Edge, and Safari.
*/ */
b, b,
strong { strong {
font-weight: bolder; font-weight: bolder;
} }
/** /**
* 1. Correct the inheritance and scaling of font size in all browsers. * 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers. * 2. Correct the odd `em` font sizing in all browsers.
*/ */
code, code,
kbd, kbd,
samp { samp {
font-family: monospace, monospace; /* 1 */ font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */ font-size: 1em; /* 2 */
} }
/** /**
* Add the correct font size in all browsers. * Add the correct font size in all browsers.
*/ */
small { small {
font-size: 80%; font-size: 80%;
} }
/** /**
* Prevent `sub` and `sup` elements from affecting the line height in * Prevent `sub` and `sup` elements from affecting the line height in
* all browsers. * all browsers.
*/ */
sub, sub,
sup { sup {
font-size: 75%; font-size: 75%;
line-height: 0; line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
sub { sub {
bottom: -0.25em; bottom: -0.25em;
} }
sup { sup {
top: -0.5em; top: -0.5em;
} }
/* Embedded content /* Embedded content
========================================================================== */ ========================================================================== */
/** /**
* Remove the border on images inside links in IE 10. * Remove the border on images inside links in IE 10.
*/ */
img { img {
border-style: none; border-style: none;
} }
/* Forms /* Forms
========================================================================== */ ========================================================================== */
/** /**
* 1. Change the font styles in all browsers. * 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari. * 2. Remove the margin in Firefox and Safari.
*/ */
button, button,
input, input,
optgroup, optgroup,
select, select,
textarea { textarea {
font-family: inherit; /* 1 */ font-family: inherit; /* 1 */
font-size: 100%; /* 1 */ font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */ line-height: 1.15; /* 1 */
margin: 0; /* 2 */ margin: 0; /* 2 */
} }
/** /**
* Show the overflow in IE. * Show the overflow in IE.
* 1. Show the overflow in Edge. * 1. Show the overflow in Edge.
*/ */
button, button,
input { /* 1 */ input { /* 1 */
overflow: visible; overflow: visible;
} }
/** /**
* Remove the inheritance of text transform in Edge, Firefox, and IE. * Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox. * 1. Remove the inheritance of text transform in Firefox.
*/ */
button, button,
select { /* 1 */ select { /* 1 */
text-transform: none; text-transform: none;
} }
/** /**
* Correct the inability to style clickable types in iOS and Safari. * Correct the inability to style clickable types in iOS and Safari.
*/ */
button, button,
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="submit"] { [type="submit"] {
-webkit-appearance: button; -webkit-appearance: button;
} }
/** /**
* Remove the inner border and padding in Firefox. * Remove the inner border and padding in Firefox.
*/ */
button::-moz-focus-inner, button::-moz-focus-inner,
[type="button"]::-moz-focus-inner, [type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { [type="submit"]::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
/** /**
* Restore the focus styles unset by the previous rule. * Restore the focus styles unset by the previous rule.
*/ */
button:-moz-focusring, button:-moz-focusring,
[type="button"]:-moz-focusring, [type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring, [type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring { [type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; outline: 1px dotted ButtonText;
} }
/** /**
* Correct the padding in Firefox. * Correct the padding in Firefox.
*/ */
fieldset { fieldset {
padding: 0.35em 0.75em 0.625em; padding: 0.35em 0.75em 0.625em;
} }
/** /**
* 1. Correct the text wrapping in Edge and IE. * 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in 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 * 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers. * `fieldset` elements in all browsers.
*/ */
legend { legend {
box-sizing: border-box; /* 1 */ box-sizing: border-box; /* 1 */
color: inherit; /* 2 */ color: inherit; /* 2 */
display: table; /* 1 */ display: table; /* 1 */
max-width: 100%; /* 1 */ max-width: 100%; /* 1 */
padding: 0; /* 3 */ padding: 0; /* 3 */
white-space: normal; /* 1 */ white-space: normal; /* 1 */
} }
/** /**
* Add the correct vertical alignment in Chrome, Firefox, and Opera. * Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/ */
progress { progress {
vertical-align: baseline; vertical-align: baseline;
} }
/** /**
* Remove the default vertical scrollbar in IE 10+. * Remove the default vertical scrollbar in IE 10+.
*/ */
textarea { textarea {
overflow: auto; overflow: auto;
} }
/** /**
* 1. Add the correct box sizing in IE 10. * 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10. * 2. Remove the padding in IE 10.
*/ */
[type="checkbox"], [type="checkbox"],
[type="radio"] { [type="radio"] {
box-sizing: border-box; /* 1 */ box-sizing: border-box; /* 1 */
padding: 0; /* 2 */ padding: 0; /* 2 */
} }
/** /**
* Correct the cursor style of increment and decrement buttons in Chrome. * Correct the cursor style of increment and decrement buttons in Chrome.
*/ */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { [type="number"]::-webkit-outer-spin-button {
height: auto; height: auto;
} }
/** /**
* 1. Correct the odd appearance in Chrome and Safari. * 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari. * 2. Correct the outline style in Safari.
*/ */
[type="search"] { [type="search"] {
-webkit-appearance: textfield; /* 1 */ -webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */ outline-offset: -2px; /* 2 */
} }
/** /**
* Remove the inner padding in Chrome and Safari on macOS. * Remove the inner padding in Chrome and Safari on macOS.
*/ */
[type="search"]::-webkit-search-decoration { [type="search"]::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
/** /**
* 1. Correct the inability to style clickable types in iOS and Safari. * 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari. * 2. Change font properties to `inherit` in Safari.
*/ */
::-webkit-file-upload-button { ::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */ -webkit-appearance: button; /* 1 */
font: inherit; /* 2 */ font: inherit; /* 2 */
} }
/* Interactive /* Interactive
========================================================================== */ ========================================================================== */
/* /*
* Add the correct display in Edge, IE 10+, and Firefox. * Add the correct display in Edge, IE 10+, and Firefox.
*/ */
details { details {
display: block; display: block;
} }
/* /*
* Add the correct display in all browsers. * Add the correct display in all browsers.
*/ */
summary { summary {
display: list-item; display: list-item;
} }
/* Misc /* Misc
========================================================================== */ ========================================================================== */
/** /**
* Add the correct display in IE 10+. * Add the correct display in IE 10+.
*/ */
template { template {
display: none; display: none;
} }
/** /**
* Add the correct display in IE 10. * Add the correct display in IE 10.
*/ */
[hidden] { [hidden] {
display: none; display: none;
} }

436
style.css
View File

@@ -1,219 +1,219 @@
* { * {
margin: 0; margin: 0;
user-select: none; user-select: none;
} }
html, body { html, body {
height: 100%; height: 100%;
} }
body { body {
background-color: #2C3338; background-color: #2C3338;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
position: relative; position: relative;
} }
.blue-circle { .blue-circle {
background-color: #578EB7; background-color: #578EB7;
/* */ /* */
position: relative; position: relative;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin: -250px 0 0 -250px; /* Half of the width*/ 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/ /* Credits: https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/
/* */ /* */
width: 500px; width: 500px;
height: 500px; height: 500px;
border-radius: 100%; border-radius: 100%;
-webkit-border-radius: 100%; -webkit-border-radius: 100%;
-moz-border-radius: 100%; -moz-border-radius: 100%;
-ms-border-radius: 100%; -ms-border-radius: 100%;
-o-border-radius: 100%; -o-border-radius: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.gray-rectangle { .gray-rectangle {
width: 40%; width: 40%;
height: 40%; height: 40%;
background-color: #C4C4C4; background-color: #C4C4C4;
border-radius: 10%; border-radius: 10%;
-webkit-border-radius: 10%; -webkit-border-radius: 10%;
-moz-border-radius: 10%; -moz-border-radius: 10%;
-ms-border-radius: 10%; -ms-border-radius: 10%;
-o-border-radius: 10%; -o-border-radius: 10%;
} }
h2 { h2 {
text-align: center; text-align: center;
/* padding-top: 40px;*/ /* padding-top: 40px;*/
color: #2C3338; color: #2C3338;
font-weight: bolder; font-weight: bolder;
} }
.visits { .visits {
padding-top: 40px; padding-top: 40px;
font-size: 18pt; font-size: 18pt;
} }
.amount { .amount {
padding-top: 20px; padding-top: 20px;
font-size: 25pt; font-size: 25pt;
} }
.alert { .alert {
padding-top: 20px; padding-top: 20px;
font-size: 35pt; font-size: 35pt;
color: #ff5555; color: #ff5555;
} }
@media (min-width: 0) and (max-width: 1758px) { @media (min-width: 0) and (max-width: 1758px) {
.blue-circle { .blue-circle {
/* */ /* */
position: relative; position: relative;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin: -125px 0 0 -125px; /* Half of the width*/ 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/ /* Credits: https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/
/* */ /* */
width: 250px; width: 250px;
height: 250px; height: 250px;
} }
.gray-rectangle { .gray-rectangle {
width: 40%; width: 40%;
height: 40%; height: 40%;
background-color: #C4C4C4; background-color: #C4C4C4;
} }
.visits { .visits {
padding-top: 20px; padding-top: 20px;
font-size: 9pt; font-size: 9pt;
} }
.amount { .amount {
padding-top: 10px; padding-top: 10px;
font-size: 12pt; font-size: 12pt;
} }
.alert { .alert {
padding-top: 10px; padding-top: 10px;
font-size: 17pt; font-size: 17pt;
color: #ff5555; color: #ff5555;
} }
} }
a { a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
/* */ /* */
button { button {
border: none; border: none;
} }
button:focus { button:focus {
border: none; border: none;
outline: none; outline: none;
} }
/* Credits: https://www.codegrepper.com/code-examples/css/how+to+remove+button+decoration /* Credits: https://www.codegrepper.com/code-examples/css/how+to+remove+button+decoration
/* */ /* */
button:active { button:active {
overflow: none; overflow: none;
} }
button { button {
background-color: #465158; background-color: #465158;
color: #2f3542; color: #2f3542;
box-shadow: 5px 5px 0px 0 #3c464d; box-shadow: 5px 5px 0px 0 #3c464d;
font-weight: bold; font-weight: bold;
width: 300px; width: 300px;
height: 75px; height: 75px;
position: fixed; position: fixed;
top: 20px; top: 20px;
left: 82%; left: 82%;
transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s; 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; -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; -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; -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; -o-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
} }
button:hover { button:hover {
background-color: white; background-color: white;
color: #286cff; color: #286cff;
box-shadow: 5px 5px 0px 0 #979797; 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; 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; -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; -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; -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; -o-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
} }
button:active { button:active {
box-shadow: 0px 0px 0px 0 #979797; box-shadow: 0px 0px 0px 0 #979797;
transition: none; transition: none;
transform: translate(5px, 5px); transform: translate(5px, 5px);
-webkit-transform: translate(5px, 5px); -webkit-transform: translate(5px, 5px);
-moz-transform: translate(5px, 5px); -moz-transform: translate(5px, 5px);
-ms-transform: translate(5px, 5px); -ms-transform: translate(5px, 5px);
-o-transform: translate(5px, 5px); -o-transform: translate(5px, 5px);
-webkit-transition: none; -webkit-transition: none;
-moz-transition: none; -moz-transition: none;
-ms-transition: none; -ms-transition: none;
-o-transition: none; -o-transition: none;
} }
@media (min-width: 0) and (max-width: 1758px) { @media (min-width: 0) and (max-width: 1758px) {
a { a {
display: flex; display: flex;
position: relative; position: relative;
top: -13%; top: -13%;
justify-content: center; justify-content: center;
} }
button { button {
position: initial; position: initial;
top: 0; top: 0;
left: 0; left: 0;
margin: 0; margin: 0;
box-shadow: none; box-shadow: none;
background-color: white; background-color: white;
color: #286cff; color: #286cff;
} }
button:hover { button:hover {
background-color: none; background-color: none;
color: none; color: none;
box-shadow: 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; 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; -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; -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; -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; -o-transition: color ease-in-out 0.4s, background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
} }
button:active { button:active {
transition: none; transition: none;
transform: translate(0px, 5px); transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px); -webkit-transform: translate(0px, 5px);
-moz-transform: translate(0px, 5px); -moz-transform: translate(0px, 5px);
-ms-transform: translate(0px, 5px); -ms-transform: translate(0px, 5px);
-o-transform: translate(0px, 5px); -o-transform: translate(0px, 5px);
-webkit-transition: none; -webkit-transition: none;
-moz-transition: none; -moz-transition: none;
-ms-transition: none; -ms-transition: none;
-o-transition: none; -o-transition: none;
} }
} }

216
styleDefiner.css
View File

@@ -1,108 +1,108 @@
* { * {
margin: 0; margin: 0;
user-select: none; user-select: none;
} }
body { body {
background-color: #2C3338; background-color: #2C3338;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
color: white; color: white;
} }
header { header {
background-color: rgba(255, 255, 255, 0.178); background-color: rgba(255, 255, 255, 0.178);
height: 90px; height: 90px;
padding: 30px; padding: 30px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
h1 { h1 {
font-size: 35pt !important; font-size: 35pt !important;
text-align: center; text-align: center;
} }
form { form {
margin-top: 40px; margin-top: 40px;
display: grid; display: grid;
justify-content: center; justify-content: center;
} }
/* */ /* */
.input-visitas { .input-visitas {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: textfield; -moz-appearance: textfield;
} }
/* Credits: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp /* Credits: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp
/* */ /* */
.input-visitas { .input-visitas {
width: 120px; width: 120px;
height: 100px; height: 100px;
padding: 0; padding: 0;
font-size: 35pt; font-size: 35pt;
background-color: #5781b7; background-color: #5781b7;
border: none; border: none;
border: solid 2px #2f475a; border: solid 2px #2f475a;
text-align: center; text-align: center;
margin: auto; margin: auto;
} }
.input-visitas:active, .input-visitas:focus { .input-visitas:active, .input-visitas:focus {
border: solid 2px #2f475a; border: solid 2px #2f475a;
outline: none; outline: none;
} }
/* */ /* */
.input-submit { .input-submit {
border: none; border: none;
} }
.input-submit:focus { .input-submit:focus {
border: none; border: none;
outline: none; outline: none;
} }
/* Credits: https://www.codegrepper.com/code-examples/css/how+to+remove+button+decoration /* Credits: https://www.codegrepper.com/code-examples/css/how+to+remove+button+decoration
/* */ /* */
.input-submit { .input-submit {
width: 170px; width: 170px;
height: 40px; height: 40px;
padding: 0; padding: 0;
font-size: 15pt; font-size: 15pt;
background-color: #b75774; background-color: #b75774;
border: solid 2px #5a2f3f; border: solid 2px #5a2f3f;
box-sizing: content-box; box-sizing: content-box;
margin-top: 20px; margin-top: 20px;
transition: ease-in-out 0.3s background-color; transition: ease-in-out 0.3s background-color;
-webkit-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; -moz-transition: ease-in-out 0.3s background-color;
-ms-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; -o-transition: ease-in-out 0.3s background-color;
} }
.input-submit:active, .input-submit:focus { .input-submit:active, .input-submit:focus {
border: solid 2px #5a2f3f; border: solid 2px #5a2f3f;
outline: none; outline: none;
box-sizing: content-box; box-sizing: content-box;
} }
.input-submit:hover { .input-submit:hover {
background-color: #b37084; background-color: #b37084;
transition: ease-in-out 0.3s background-color; transition: ease-in-out 0.3s background-color;
-webkit-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; -moz-transition: ease-in-out 0.3s background-color;
-ms-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; -o-transition: ease-in-out 0.3s background-color;
} }

2
visits.txt
View File

@@ -1 +1 @@
502 616