From ab934f81abcba54f149e51eba80402e0caccf09b Mon Sep 17 00:00:00 2001
From: tokyo <tokyo@noreply.localhost>
Date: Thu, 30 Jan 2025 18:28:58 +0000
Subject: [PATCH] Estilos de BootStrap

---
 index.php | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/index.php b/index.php
index df3e4a5..5a5d66f 100644
--- a/index.php
+++ b/index.php
@@ -140,7 +140,9 @@ if ( isset($_POST["content"]) and isset($_POST["name"]) ) {
 	// Kick of the poll function and repeat it every two seconds
 	poll_for_new_messages()
 	setInterval(poll_for_new_messages, 2000)
-</script>
+    </script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap-grid.min.css"  />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" />
 <style>
 	html { margin: 0em; padding: 0; }
 	body { height: 100vh; box-sizing: border-box; margin: 0; padding: 2em;
@@ -165,13 +167,14 @@ if ( isset($_POST["content"]) and isset($_POST["name"]) ) {
 	form p button {}
 	
 	h1, ul#messages, form { width: 100%; max-width: 40rem; box-sizing: border-box; margin: 0 auto; }
+  body {  background: lightblue url("back2.jpg") repeat fixed center; }
 </style>
 
-<h1>Simple Chat</h1>
+<h1 class="lead"><mark>Simple Chat</mark></h1>
 
-<ul id=messages>
+<ul class="form-control" id=messages>
 	<li>loading…</li>
-	<template>
+	<template >
 		<li class=pending>
 			<small>…</small>
 			<span>…</span>
@@ -181,8 +184,8 @@ if ( isset($_POST["content"]) and isset($_POST["name"]) ) {
 
 <form method=post action="<?= htmlentities($_SERVER["PHP_SELF"], ENT_QUOTES | ENT_SUBSTITUTE | ENT_HTML5, "UTF-8") ?>">
 	<p>
-		<input type=text name=name placeholder="Name" value="Anonymous">
-		<input type=text name=content placeholder="Message" autofocus>
-		<button>Send</button>
+		<input class="form-control" type=text name=name placeholder="Nombre" value="José">
+		<input class="form-control" type=text name=content placeholder="Mensaje" autofocus>
+      <button class="btn btn-primary">Enviar</button>
 	</p>
 </form>