Estilos de BootStrap

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>