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

HTML y CSS de la pagina para definir la cantidad de visitas listos

Browse Source
This commit is contained in:
Francisco P
2021-05-23 18:52:36 -03:00
parent d1cc880a25
commit 7601ad829e
6 changed files with 200 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
definer.html Normal file
View File

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

9
index.php
View File

@@ -14,7 +14,7 @@ if (file_exists('./visits.txt')) {
?>
<!DOCTYPE html>
<html lang="en">
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -28,8 +28,11 @@ if (file_exists('./visits.txt')) {
<div class="gray-rectangle">
<h2 class="visits">VISITAS</h2>
<h2 class="amount"><?php echo $c ?></h2>
</div>
</div>
</div>
</div>
<a href="./definer.html"><button>
Definir la cantidad de visitas
</button></a>
</body>
</html>

1
normalize.css vendored
View File

@@ -39,7 +39,6 @@ main {
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content

66
style.css
View File

@@ -62,4 +62,70 @@ h2 {
.amount {
padding-top: 20px;
font-size: 25pt;
}
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;
}

107
styleDefiner.css Normal file
View File

@@ -0,0 +1,107 @@
* {
margin: 0;
}
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;
}

2
visits.txt
View File

@@ -1 +1 @@
0
57