Merge branch 'master' of http://git.anacsoft.com/Lusho/mini-web

Luciano Barletta
Commit 4c298a5b authored 2019-11-25 16:03:07 +0000 by Luciano Barletta
Showing 2 changed files with 134 additions and 40 deletions
Geo/Borrador.html
Geo/Style/Templates.css
--- a/Geo/Borrador.html 0 → 100644
View file @4c298a5
+++ b/Geo/Borrador.html 0 → 100644
View file @4c298a5
+<html>
+
+
+
+<body>
+    <input type="number" id="CantBotones"> 
+    <button onclick="AgregarTabs()">Generar Tabs</button>
+    <section id="BotonesContainer" >
+   
+
+    </section>
+</body>
+
+<script>
+    function AgregarTabs() {
+        let m = document.getElementById("CantBotones").value;
+        let n;
+        for (n = 0; n < m; n++) {
+            let padre = document.getElementById("BotonesContainer");
+            let boton = document.createElement("Button");
+            padre.appendChild(boton);
+            
+            
+            boton.setAttribute("id", "Boton" + n);
+            boton.setAttribute("class", "Botones");
+            boton.addEventListener("click", HabilitarTab);
+            boton.style.width = ((100-(0.2*m))/ m) + "%";
+        }
+    }
+    function HabilitarTab(){
+
+    }
+</script>
+<style>
+        #BotonesContainer {
+            width: 100%;
+            height: 95%;
+        }
+    
+        .Botones {
+            border-radius: 5px 5px 0px 0px;
+            background-color: grey;
+            border:none;
+            height: 5%;
+            margin: 0.1%;
+        }
+        .Botones:active{
+            background-color: whitesmoke;
+            border-bottom: none;
+            height: 6%;
+            border: 1px solid rgb(189, 189, 189);
+            border-bottom: none;
+        }
+        .Botones:hover{
+            background-color: rgb(53,53,53), 0.5;
+        }
+    </style>
+
+</html>
\ No newline at end of file
--- a/Geo/Style/Templates.css
View file @4c298a5
+++ b/Geo/Style/Templates.css
View file @4c298a5
-html{
+html {

    font-family: 'Montserrat', sans-serif;
 }
-h1,h3{
+
+h1,
+h3 {
    text-align: center;
 }
-h1{
+
+h1 {
    font-size: 40px;
 }
-body{
+
+body {
    background-color: whitesmoke;
 }
-.TabCards{
+
+.TabCards {
    background-color: white;
    box-shadow: 2px 2px 5px #575757;
    margin: 2% auto;
    padding: 2%;
    border-radius: 2px;
 }
-.TabTitle, .TabNumber{
+
+.TabTitle,
+.TabNumber {
    color: grey;
    margin-bottom: 5%;
    font-size: 30px;
    width: 84%;
    text-align: left;
-    border:none;
+    border: none;
    border-bottom: 1px solid grey;
 }
-.TabNumber{
+
+.TabNumber {
    width: 10%;

 }
-.InputContainer{
+
+.InputContainer {
    width: 100%;
    text-align: center;
 }
-.InputNumber{
+
+.InputNumber {
    width: 5%;
 }
-.Input,.InputNumber{
+
+.Input,
+.InputNumber {
    color: grey;
-    border:none;
+    border: none;
    border-bottom: 1px solid grey;
    width: 25%;
    margin: 1%;
+    font-size: 15px;
 }
-.InputNumber{
+
+.InputNumber {
    width: 5%;
 }
-.NewTabButton, .NewInputButton, .RemoveInputButton, .RemoveTabButton{
+
+.NewTabButton,
+.NewInputButton,
+.RemoveInputButton,
+.RemoveTabButton {
    text-align: center;
    margin: auto;
    color: whitesmoke;
    border-radius: 50%;

 }
-.NewTabButton{
-    font-size:45px;
-    width: 90px;
-    height: 90px;
+
+.NewTabButton {
+    font-size: 45px;
+    width: 70px;
+    height: 70px;
    border: 3px solid rgb(0, 88, 170);
    background-color: rgb(0, 102, 255);
 }
+
 .NewInputButton {
    font-size: 25px;
    width: 40px;
@@ -70,7 +90,9 @@ body{
    border: 3px solid rgb(1, 194, 120);
    background-color: rgb(14, 211, 135);
 }
-.RemoveInputButton, .RemoveTabButton{
+
+.RemoveInputButton,
+.RemoveTabButton {
    width: 35px;
    height: 35px;
    margin: 1%;
@@ -78,15 +100,18 @@ body{
    border: 3px solid rgb(230, 25, 25);
    background-color: rgba(211, 14, 14, 0.788);
 }
-.RemoveTabButton{
+
+.RemoveTabButton {
    width: 40px;
    height: 40px;
 }
-#ContinuarText, #ContinuarButton{
+
+#ContinuarText,
+#ContinuarButton {
    display: none;
 }

-#ContinuarButton{
+#ContinuarButton {
    font-size: 20px;
    border: none;
    background-color: rgb(1, 194, 120);
@@ -98,53 +123,63 @@ body{
    border-radius: 5px;
 }

-@media  ( max-width: 1050px) {
-    .TabNumber{
+@media (max-width: 1050px) {
+    .TabNumber {
        width: 10%;
    }
-    .TabTitle{
+
+    .TabTitle {
        width: 80%;
    }

 }
+
 @media (max-width: 600px) {
-    .TabNumber{
+    .TabNumber {
        width: 10%;
    }
-    .TabTitle{
-        width:75%;
+
+    .TabTitle {
+        width: 75%;
    }
-    .RemoveInputButton{
+
+    .RemoveInputButton {
        width: 30px;
        height: 30px;
    }

-    .RemoveTabButton{
+    .RemoveTabButton {
        width: 30px;
        height: 30px;
    }
-    .Input{
+
+    .Input {
        width: 16%;
        margin: none;
    }
 }
-@media  ( max-width: 350px) {
-    .TabNumber{
+
+@media (max-width: 400px) {
+    .TabNumber {
        width: 10%;
    }
-    .TabTitle{
-        width:70%;
+
+    .TabTitle {
+        width: 70%;
    }
-    .RemoveInputButton{
-        width: 30px;
-        height: 30px;
+
+    .RemoveInputButton {
+        width: 25px;
+        height: 25px;
+        font-size: 15px;
    }

-    .RemoveTabButton{
+    .RemoveTabButton {
        width: 30px;
        height: 30px;
    }
-    .Input{
+
+    .Input {
        width: 15%;
        margin: 0%;
    }