Mejoradas cosas de estilo

docker-compose.yml

@@ -41,7 +41,7 @@ services:
     container_name: laravel-nginx
     restart: unless-stopped
     ports:
-      - ${NGINX_PORT}:80
+      - 8000:80
     volumes:
       - ./:/var/www
       - ./nginx/conf.d/:/etc/nginx/conf.d/

public/css/app.css

@@ -0,0 +1,32 @@
+.grid {
+    background-color: darksalmon;
+}
+
+#logo {
+    width:80%;
+    margin: auto;
+}
+
+div.p-6 {
+    text-align: center;
+}
+
+button, input[type="submit"] {
+    background: darkred;
+    border-radius: 5px;
+    padding: 5px;
+    color:white;
+    margin: 15px;
+}
+
+input.formulario {
+    background-color: white;
+    border-radius: 5px;
+    padding: 5px;
+}
+
+p, label {
+    //color: white;
+    font-weight: bolder;
+}
+

public/css/edit.css

@@ -25,24 +25,44 @@ input.formulario.dia  {
     display: -webkit-inline-box;
     text-align: center;
     display: flex;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .columna1 {
-    width: -webkit-fill-available;
+    width: 75%;
 }
 
 .columna2 {
-    width: 20%;
     position: relative;
+    margin-left: auto;
+    margin-right: auto;
+    width: 25%;
+    margin-top: auto;
+    margin-bottom: auto;
 }
 
 button.cerrar {
     width: 40px;
     height: 40px;
-    margin: 0;
+    margin-left: auto;
-    position: absolute;
+    margin-right: auto;
-    top: 50%;
+    margin-bottom: auto;
-    -ms-transform: translateY(-50%);
+    /*! margin-top: auto; */
-    transform: translateY(-50%);
+}
-    right: 0%;
+@media screen and (min-width: 420px) {
+    .columna1 {
+        width: 85%;
+    }
+    .columna2 {
+        width: 15%;
+    }
+}
+
+#label-horario {
+    //width: 100%;
+}
+
+#fila-boton-enviar {
+    display: block;
 }

public/css/resultado.css

@@ -1,23 +0,0 @@
-#logo {
-    width:80%;
-    margin: auto;
-}
-
-div.p-6 {
-    text-align: center;
-}
-
-button, input[type="submit"] {
-    background: darkred;
-    border-radius: 5px;
-    padding: 5px;
-    color:white;
-    margin: 15px;
-}
-
-input.formulario {
-    background-color: white;
-    border-radius: 5px;
-    padding: 5px;
-}
-

public/css/welcome.css

@@ -1,23 +0,0 @@
-#logo {
-    width:80%;
-    margin: auto;
-}
-
-div.p-6 {
-    text-align: center;
-}
-
-button, input[type="submit"] {
-    background: darkred;
-    border-radius: 5px;
-    padding: 5px;
-    color:white;
-    margin: 15px;
-}
-
-input.formulario {
-    background-color: white;
-    border-radius: 5px;
-    padding: 5px;
-}
-

resources/views/edit.blade.php

@@ -8,7 +8,7 @@
 
         <!-- Fonts -->
         <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
-        <link href='/css/welcome.css' rel="stylesheet">
+        <link href='/css/app.css' rel="stylesheet">
         <link href='/css/edit.css' rel="stylesheet">
         <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
         <script src="/js/edit.js"></script>
@@ -72,11 +72,13 @@
                                 @csrf
                                 <div class="horario-container">
                                     <div class="columna1">
-                                        <input required name="dia[]" type="text" class="formulario dia">
+                                        <label for="dia">Día</label>
+                                        <input required id="dia" name="dia[]" type="text" class="formulario dia">
                                         <div class="horas">
                                             <div>
-                                                <input required name="llegada[]" type="time" class="formulario hora">
+                                                <label id="label-horario">Horario</label></br>
-                                                <input required name="salida[]" type="time" class="formulario hora">
+                                                <input required id="llegada" name="llegada[]" type="time" class="formulario hora">
+                                                <input required id="salida" name="salida[]" type="time" class="formulario hora">
                                             </div>
                                         </div>
                                     </div>
@@ -90,11 +92,20 @@
                     </div>
                 </div>
 
-                <div class="flex justify-center mt-4 sm:items-center sm:justify-between">
+                <div id="fila-boton-enviar" class="flex justify-center mt-4 sm:items-center sm:justify-between">
                     <div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
                         <input type="submit" value="Enviar horarios" form="horarios">
                     </div>
                 </div>
+
+
+
+                <div class="flex justify-center mt-4 sm:items-center sm:justify-between">
+                    <div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
+                        Mercado Popular de Subsistencia.
+                    </div>
+                </div>
+
             </div>
         </div>
     </body>

resources/views/resultado.blade.php

@@ -8,7 +8,7 @@
 
     <!-- Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
-    <link href='/css/resultado.css' rel="stylesheet">
+    <link href='/css/app.css' rel="stylesheet">
 
     <!-- Styles -->
     <style>
@@ -52,7 +52,7 @@
 
 
         <div class="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
-            <div class="grid grid-cols-1 md:grid-cols-2">
+            <div class="grid grid-cols-1">
                 <div class="p-6">
                     <p>
                         Hasta ahora estos son los mejores horarios para "{{ $evento->nombre }}":
@@ -64,7 +64,7 @@
 
         <div class="flex justify-center mt-4 sm:items-center sm:justify-between">
             <div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
-                Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }})
+                Mercado Popular de Subsistencia.
             </div>
         </div>
     </div>

resources/views/welcome.blade.php

@@ -8,7 +8,7 @@
 
         <!-- Fonts -->
         <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
-        <link href='css/welcome.css' rel="stylesheet">
+        <link href='css/app.css' rel="stylesheet">
 
         <!-- Styles -->
         <style>
@@ -67,7 +67,7 @@
 
                 <div class="flex justify-center mt-4 sm:items-center sm:justify-between">
                     <div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
-                        Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }})
+                        Mercado Popular de Subsistencia.
                     </div>
                 </div>
             </div>