Update index.html

index.html

@@ -5,47 +5,47 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Convertidor de Texto a Audio</title>
     <style>
-        body {
-            background-color: #222;
-            color: #eee;
-            font-family: Arial, sans-serif;
-            text-align: center;
-            margin: 0;
-            padding: 0;
-        }
-        h1 {
-            margin-top: 50px;
-        }
-        form {
-            margin-top: 20px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        label, select, textarea, button {
-            margin: 5px;
-            font-size: 16px;
-            color: #eee;
-        }
-        textarea {
-            background-color: #333;
-            color: #eee;
-            border: 1px solid #666;
-            border-radius: 5px;
-            padding: 10px;
-            width: 80%;
-            height: 100px;
-        }
-        select {
-            background-color: #333;
-            color: #eee;
-            border: 1px solid #666;
-            border-radius: 5px;
-            padding: 5px;
-            width: 80%;
-            height: 30px;
-        }
-        button {
+      body {
+          background-color: #222;
+          color: #eee;
+          font-family: Arial, sans-serif;
+          text-align: center;
+          margin: 0;
+          padding: 0;
+      }
+      h1 {
+          margin-top: 50px;
+      }
+      form {
+          margin-top: 20px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+      }
+      label, select, textarea {
+          margin: 5px;
+          font-size: 16px;
+          color: #eee;
+      }
+      textarea {
+          background-color: #333;
+          color: #eee;
+          border: 1px solid #666;
+          border-radius: 5px;
+          padding: 10px;
+          width: 90%;
+          height: 100px;
+      }
+      select {
+          background-color: #333;
+          color: #eee;
+          border: 1px solid #666;
+          border-radius: 5px;
+          padding: 5px;
+          width: 80%;
+          height: 30px;
+      }
+      button {
             background-color: #007bff;
             color: #eee;
             border: none;
@@ -60,12 +60,6 @@
         #audio-container {
             margin-top: 20px;
         }
-
-
-
-
-
-
 .animated-button {
   position: relative;
   display: flex;
@@ -84,7 +78,6 @@
   overflow: hidden;
   transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
 }
-
 .animated-button svg {
   position: absolute;
   width: 24px;
@@ -92,15 +85,12 @@
   z-index: 9;
   transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
 }
-
 .animated-button .arr-1 {
   right: 16px;
 }
-
 .animated-button .arr-2 {
   left: -25%;
 }
-
 .animated-button .circle {
   position: absolute;
   top: 50%;
@@ -113,124 +103,42 @@
   opacity: 0;
   transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
 }
-
 .animated-button .text {
   position: relative;
   z-index: 1;
   transform: translateX(-12px);
   transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
 }
-
 .animated-button:hover {
   box-shadow: 0 0 0 12px transparent;
   color: #212121;
   border-radius: 12px;
 }
-
 .animated-button:hover .arr-1 {
   right: -25%;
 }
-
 .animated-button:hover .arr-2 {
   left: 16px;
 }
-
 .animated-button:hover .text {
   transform: translateX(12px);
 }
-
 .animated-button:hover svg {
   fill: #212121;
 }
-
 .animated-button:active {
   scale: 0.95;
   box-shadow: 0 0 0 4px rgb(47, 196, 255);
 }
-
 .animated-button:hover .circle {
   width: 220px;
   height: 220px;
   opacity: 1;
 }
-* {
-  outline:none;
-  border:none;
-  margin:0px;
-  padding:0px;
-  font-family:Courier, monospace;
-}
-body {
-  background:#333 url(https://static.tumblr.com/maopbtg/a5emgtoju/inflicted.png) repeat;        
-}
-#paper {
-  color:#FFF;
-  font-size:20px;
-}
-#text {
-  width:500px;
-  overflow:hidden;
-  background-color:#FFF;
-  color:#222;
-  font-family:Courier, monospace;
-  font-weight:normal;
-  font-size:24px;
-  resize:none;
-  line-height:40px;
-  padding-left:100px;
-  padding-right:100px;
-  padding-top:45px;
-  padding-bottom:34px;
-  background-image:url(https://static.tumblr.com/maopbtg/E9Bmgtoht/lines.png), url(https://static.tumblr.com/maopbtg/nBUmgtogx/paper.png);
-  background-repeat:repeat-y, repeat;
-  -webkit-border-radius:12px;
-  border-radius:12px;
-  -webkit-box-shadow: 0px 2px 14px #000;
-  box-shadow: 0px 2px 14px #000;
-  border-top:1px solid #FFF;
-  border-bottom:1px solid #FFF;
-}
-#button {
-  cursor:pointer;
-  margin-top:20px;
-  float:right;
-  height:40px;
-  padding-left:24px;
-  padding-right:24px;
-  font-family:Arial, Helvetica, sans-serif;
-  font-weight:bold;
-  font-size:20px;
-  color:#FFF;
-  text-shadow: 0px -1px 0px #000000;
-  -webkit-border-radius:8px;
-  border-radius:8px;
-  border-top:1px solid #FFF;
-  -webkit-box-shadow: 0px 2px 14px #000;
-  box-shadow: 0px 2px 14px #000;
-  background-color: #62add6;
-  background-image:url(https://static.tumblr.com/maopbtg/ZHLmgtok7/button.png);
-  background-repeat:repeat-x;
-}
-#button:active {
-  zoom: 1;
-  filter: alpha(opacity=80);
-  opacity: 0.8;
-}
-#button:focus {
-  zoom: 1;
-  filter: alpha(opacity=80);
-  opacity: 0.8;
-}
-#wrapper {
-  width:700px;
-  height:auto;
-  margin-left:auto;
-  margin-right:auto;
-  margin-top:24px;
-  margin-bottom:100px;
-}
-
-    </style>
+      #audio-container {
+          margin-top: 20px;
+      }
+  </style>
 </head>
 <body>
     <h1>Convertidor de Texto a Audio</h1>
@@ -242,9 +150,7 @@ body {
             {% endfor %}
         </select><br>
         <label for="text">Texto:</label><br>
-        <div id="wrapper">
-              <textarea placeholder="Escribe tu texto aquí, solo se tomará los primeros 500 carácteres." id="text" name="text" rows="4"></textarea>  
-          </div>
+              <textarea placeholder="Escribe tu texto aquí, solo se tomará los primeros 500 carácteres." id="text" name="text" rows="4"></textarea>
         <button class="animated-button">
             <svg viewBox="0 0 24 24" class="arr-2" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -259,7 +165,7 @@ body {
               ></path>
             </svg>
           </button>
-          
+
     </form>
     <div id="audio-container"></div>
 
@@ -281,5 +187,4 @@ body {
             document.getElementById('audio-container').appendChild(audioElement);
         });
     </script>
-</body>
-</html>
+</body>