diff --git a/index.php b/index.php
new file mode 100644
index 0000000..df3e4a5
--- /dev/null
+++ b/index.php
@@ -0,0 +1,188 @@
+<?php
+
+ 
+
+// Name of the message buffer file. You have to create it manually with read and write permissions for the webserver.
+$messages_buffer_file = "messages.json";
+// Number of most recent messages kept in the buffer.
+// Note that message list on clients only shows 1000 messages to avoid slowdown (see JavaScript code below).
+$messages_buffer_size = 50;
+// Disabled by default, set to true to enable. Appends each chat messages to a chatlog.txt text file.
+// This log file is uncapped, so you have to clean it form time to time or it can get very large.
+$enable_chatlog = false;
+
+if ( isset($_POST["content"]) and isset($_POST["name"]) ) {
+	// Create the message buffer file if it doesn't exist yet. That way we don't need a setup and it's writable since it
+	// was created by the process executing PHP (usually the webserver).
+	if ( ! file_exists($messages_buffer_file) )
+		touch($messages_buffer_file);
+	
+	// Open, lock and read the message buffer file
+	$buffer = fopen($messages_buffer_file, "r+b");
+	flock($buffer, LOCK_EX);
+	$buffer_data = stream_get_contents($buffer);
+	
+	// Append new message to the buffer data or start with a message id of 0 if the buffer is empty
+	$messages = $buffer_data ? json_decode($buffer_data, true) : [];
+	$next_id = (count($messages) > 0) ? $messages[count($messages) - 1]["id"] + 1 : 0;
+	$messages[] = [ "id" => $next_id, "time" => time(), "name" => $_POST["name"], "content" => $_POST["content"] ];
+	
+	// Remove old messages if necessary to keep the buffer size
+	if (count($messages) > $messages_buffer_size)
+		$messages = array_slice($messages, count($messages) - $messages_buffer_size);
+	
+	// Rewrite and unlock the message file
+	ftruncate($buffer, 0);
+	rewind($buffer);
+	fwrite($buffer, json_encode($messages));
+	flock($buffer, LOCK_UN);
+	fclose($buffer);
+	
+	// Optional: Append message to log file (file appends are atomic)
+	if ($enable_chatlog)
+		file_put_contents("chatlog.txt", date("Y-m-d H:i:s") . "\t" . strtr($_POST["name"], "\t", " ") . "\t" . strtr($_POST["content"], "\t", " ") . "\n", FILE_APPEND);
+	
+	exit();
+}
+
+?>
+<!DOCTYPE html>
+<meta charset=utf-8>
+<meta name=viewport content="initial-scale=1.0">
+<meta name=author content="Stephan Soller">
+<title>SimpleChat por Altomarketing.com</title>
+<script type=module>
+	// Remove the "loading…" list entry
+	document.querySelector("ul#messages > li").remove()
+	
+	document.querySelector("form").addEventListener("submit", async event => {
+		const form = event.target
+		const name =  form.name.value
+		const content =  form.content.value
+		
+		// Prevent the browsers default action (send form data and show the result page). We just want to send the message without reloading the page.
+		event.preventDefault()
+		
+		// Only send a new message if it's not empty (also it's ok for the server we don't need to send senseless messages)
+		if (name == "" || content == "")
+			return
+		
+		// Append a "pending" message (a message not yet confirmed from the server) as soon as the POST request is send. The
+		// textContent property automatically escapes HTML so no one can harm the client by injecting JavaSript code.
+		await fetch(form.action, { method: "POST", body: new URLSearchParams({name, content}) })
+		const messageList = document.querySelector("ul#messages")
+		const messageElement = messageList.querySelector("template").content.cloneNode(true)
+			messageElement.querySelector("small").textContent = name
+			messageElement.querySelector("span").textContent = content
+		messageList.append(messageElement)
+		
+		messageList.scrollTop = messageList.scrollHeight
+		form.content.value = ""
+		form.content.focus()
+	})
+	
+	// Poll-function that looks for new messages
+	async function poll_for_new_messages() {
+		// We want the browser to revalidate the cached messages.json file every time. That is it should send a
+		// conditional request with an If-Modified-Since header. This is the default behaviour in Firefox 115.
+		// In Chrome 114 it's not. It just uses the cached response without revalidation, thus missing new messages.
+		// Hence we explicitly tell fetch to revalidate via a conditional request. Because naming things is hard the
+		// option to do just that is { cache: "no-cache" }. See https://javascript.info/fetch-api#cache
+		// or https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching#force_revalidation
+		const response = await fetch("messages.json", { cache: "no-cache" })
+		
+		// Do nothing if messages.json wasn't found (doesn't exist yet probably)
+		if (!response.ok)
+			return
+		
+		const messages = await response.json()
+		const messageList = document.querySelector("ul#messages")
+		const messageTemplate = messageList.querySelector("template").content.querySelector("li")
+		
+		// Determine if we should scroll the message list down to the bottom once we inserted all new messages.
+		// Only do that if the user already is almost at the bottom (50px at max from it). Otherwise it gets really
+		// annoying when the list scrolls down every 2 seconds while you want to read old messages further up. Check the
+		// pixel distance before changing the message list. Otherwise the check gets thrown off by removed or new messages.
+		const pixelDistanceFromListeBottom = messageList.scrollHeight - messageList.scrollTop - messageList.clientHeight
+		const scrollToBottom = (pixelDistanceFromListeBottom < 50)
+		
+		// Remove the pending messages from the list (they are replaced by the ones from the server later)
+		for (const li of messageList.querySelectorAll("li.pending"))
+			li.remove()
+		
+		// Get the ID of the last inserted message or start with -1 (so the first message from the server with 0 will
+		// automatically be shown).
+		const lastMessageId = parseInt(messageList.dataset.lastMessageId ?? "-1")
+		
+		// Add a list entry for every incomming message, but only if we not already inserted it (hence the check for
+		// the newer ID than the last inserted message).
+		for (const msg of messages) {
+			if (msg.id > lastMessageId) {
+				const date = new Date(msg.time * 1000);
+				const messageElement = messageTemplate.cloneNode(true)
+					messageElement.classList.remove("pending")
+					messageElement.querySelector("small").textContent = Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(date) + ": " + msg.name
+					messageElement.querySelector("span").textContent = msg.content
+				messageList.append(messageElement)
+				messageList.dataset.lastMessageId = msg.id
+			}
+		}
+		
+		// Remove all but the last 1000 messages in the list to prevent browser slowdown with extremely large lists
+		for (const li of Array.from(messageList.querySelectorAll("li")).slice(0, -1000))
+			li.remove()
+		
+		// Finally scroll down to the newes messages
+		if (scrollToBottom)
+			messageList.scrollTop = messageList.scrollHeight - messageList.clientHeight
+	}
+	
+	// Kick of the poll function and repeat it every two seconds
+	poll_for_new_messages()
+	setInterval(poll_for_new_messages, 2000)
+</script>
+<style>
+	html { margin: 0em; padding: 0; }
+	body { height: 100vh; box-sizing: border-box; margin: 0; padding: 2em;
+		font-family: sans-serif; font-size: medium; color: #333;
+		display: flex; flex-direction: column; gap: 1em; }
+	body > h1 { flex: 0 0 auto; }
+	body > ul#messages { flex: 1 1 auto; }
+	body > form { flex: 0 0 auto; }
+	
+	h1 { margin: 0; padding: 0; font-size: 2em; }
+	
+	ul#messages { overflow: auto; margin: 0; padding: 0 3px; list-style: none; border: 1px solid gray; }
+	ul#messages li { margin: 0.35em 0; padding: 0; }
+	ul#messages li small { display: block; font-size: 0.59em; color: gray; }
+	ul#messages li.pending { color: #aaa; }
+	
+	form { font-size: 1em; margin: 0; padding: 0; }
+	form p { margin: 0; padding: 0; display: flex; gap: 0.5em; }
+	form p input { font-size: 1em; min-width: 0; }
+	form p input[name=name] { flex: 0 1 10em; }
+	form p input[name=content] { flex: 1 1 auto; }
+	form p button {}
+	
+	h1, ul#messages, form { width: 100%; max-width: 40rem; box-sizing: border-box; margin: 0 auto; }
+</style>
+
+<h1>Simple Chat</h1>
+
+<ul id=messages>
+	<li>loading…</li>
+	<template>
+		<li class=pending>
+			<small>…</small>
+			<span>…</span>
+		</li>
+	</template>
+</ul>
+
+<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>
+	</p>
+</form>
