update readme

Responsive single-column layout (max 480px) with styles for:
- Option items with label/vote-button rows
- Voted state highlighting (green tint)
- Active/closed timer color states
- Disabled button opacity
- Full-width copy URL button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -1,37 +1,55 @@
 # P2P Poll App
-There are lots of trust-issues:
-The possiblity to generate lots of users that do a lot of things (at a rather low cost)
-The possibility to put out wrong data, maby not even contradicting but additional to existing data.
-The possibility to do all kinds of shenenigans like spam other users with some requests
 
-Due to low programming knowledge, the starting point of this proposal was to mirror how normal groups of people solve issues of trust to then automate and possibly improve the process. There are already some systems out there like Trust flow or random walk.As far as i understand it, the Flexible Trust Web also already does something like this, also maby RWOT and GNUweb but i didn't read into them too much yet since i discovered them rather late.
+A peer-to-peer polling app built with [Automerge](https://automerge.org/) and Vanilla JS. No backend required — polls sync in real time across browsers using CRDTs and a WebSocket relay.
 
-If random new people should be able to use the system as equals to previous users, but the system never has real identities as an input, then there is no way to fully prevent the creation of new users to manipulate or sabotage the poll. But it can be assumed, that your friends are rather trustworthy and most likely also their friends and so on. And if someone makes huge ammounts or just one second account, they will probably only have the creator or maby some other people as friends, and even they might already be less socially connected than a normal user. 
-So the social distance to another user should be evaluated to see, whether you should count their vote. 
-This is evaluated for and by every user individually, based on the information they were sent. The ammount of contacts you won't count are displayed to you, such that you get a hint at how many people you are missing but also how many people are not counting you. This encourages people to try to prove others/vise versa and make social connections to officially tie the network closer together such that the voting system works and confirms itself. It would be great, if there was some chat attached to the poll. If people want to prove their (or others) trustworhiness within this system, they are then also encouraged to have productive discussions, probably about the matter of the poll.
-Everyone in a poll with you is a "contact" of yours.
-"users" can have "friends".
-You can also manually mark users as suspicious or trustworthy or normal again.
-The system for evaluating the trustworthyness of users is somehow a mix between the concepts "weighted path score" and "trust flow" with 5 steps.
-That means for 5 steps starting with you, all friends and trusted people of people looked at in this step get some trust from the people we look at: 0.8 * The trust of the looked at person (if trusted) + 0.8 * The trust of the looked at person / friends the looked at person has (if friend). Then the trust of the person that received trust may maximally be 100. The Trust you have to yourself is 100.
-You can also mark someone as trustworthy or untrustworthy. That is then also sent around to everyone if you want(should be the standard, but maby a user wants to just see how the trustworthyness will look like after the change).
-If you receive such an information, you can make the following calculations immidiately and after every assesment of everyones trustworthyness:
-If the accused is less trustworthy then the accusing person, decrease the accused trustworthyness to 0 and the accused friends and trustees trustworthyness by the trustworthyness of the accusing person. 
-If the trustworhyness of the accusing person is less than the trustworthyness of the accused, then reduce the trustworthyness of the accusing person to 0 and the accusing persons friends and trustees by the trustworthyness of the accused.
-If you mark someone as trustworthy:
-The Trust flowing to the trusted person from you will also be 0.8 of your trust. 
-Maby this should also be the effect of beeing "friends" since "trust" might be something you could more intuitively casually deal out after a short chat. If that change were to occur, then the effect would have to be switched around.
-All contacts can maximally have the Trust 100.
+## Features
 
+- **Add options** — type an option and press Enter or click "Add Option". Duplicate options (case-insensitive) are rejected with an inline error message.
+- **Vote on options** — click the vote button next to any option. You can vote on multiple options, but only once per option.
+- **Toggle votes** — click your vote again to remove it (the button turns green with a checkmark when you've voted).
+- **Live vote counts** — options are sorted by vote count in descending order and update in real time as votes come in from other users.
+- **2-minute countdown timer** — click "Start 2-min Vote" to begin a shared countdown. Voting is open before and during the countdown. Once the timer expires, all vote buttons are disabled.
+- **Shared timer** — the deadline is stored in the Automerge document, so all peers see the same countdown and voting closes simultaneously for everyone.
+- **Copy URL** — click "Copy URL" to copy the poll link to your clipboard. Share it with others to join the same poll.
+- **P2P sync** — all state (options, votes, timer) syncs across browsers in real time with no central server handling your data.
 
-Future matters:
-If there can be any discrepancy of sent information, depending on what sender you trust most, you will mark one of the senders as untrustworthy and neglect all future information from this user. Since everything can be signed and such, that shouldnˋt be an issue tho, but if it was, the ammount of "useless" messages to already informed people might have to increase to validate received data.
-A system to showcase the social connections in a 2D - format would be neat.
-(most likely something like this exists already)
-Obviously the user would also have to see other context like the total of all votes (trusted or not)
+## How it works
 
-Anonymous polls:
-A system of individually assigned trust poses a challenge for a system where you can decide not to trust some voters. 
-If there is no other option some compromises might be makable, such as: 
--Your Friends can know what you voted for
--The Person initiating a poll just decides on the validity of participants according to an own judgement of trust at the moment of poll-creation
+### Tech stack
+
+- **[Automerge](https://automerge.org/)** via `@automerge/vanillajs` — a CRDT library that lets multiple clients concurrently edit shared documents and merge changes without conflicts.
+- **BroadcastChannelNetworkAdapter** — syncs between tabs in the same browser instantly via the browser's BroadcastChannel API.
+- **WebSocketClientAdapter** — syncs across different browsers/devices via a WebSocket relay (`wss://sync.automerge.org`). The relay only forwards CRDT messages; it does not store or interpret your data.
+- **IndexedDBStorageAdapter** — persists the document locally so it survives page refreshes.
+- **Vite** — bundles the app with WebAssembly support (required by Automerge).
+
+### Data model
+
+The poll is a single Automerge document with three fields:
+
+```js
+{
+  options: string[],       // list of poll options in insertion order
+  votes: { [option]: number }, // vote count per option
+  deadline: number | null  // Unix timestamp (ms) when voting closes, or null
+}
+```
+
+### URL-based sharing
+
+Each document gets a unique Automerge URL (e.g. `automerge:abc123...`) stored in the page's URL hash. Opening the same URL in any browser loads and syncs the same document. Creating a new poll generates a new document and updates the hash automatically.
+
+### Voting rules
+
+- Voted options are tracked in `localStorage` (keyed by document URL), so they persist across page refreshes but are isolated per browser.
+- One vote per option per user. Votes can be toggled off and back on until the timer expires.
+- The timer (`doc.deadline`) is set once by whoever clicks "Start 2-min Vote" and is shared via the Automerge document, so all peers use the same deadline.
+
+## Running locally
+
+```bash
+pnpm install
+pnpm dev
+```
+
+Open the printed localhost URL. To test cross-browser sync, copy the URL (including the `#automerge:...` hash) and open it in a different browser.

app.js

@@ -0,0 +1,214 @@
+import {
+  Repo,
+  BroadcastChannelNetworkAdapter,
+  WebSocketClientAdapter,
+  IndexedDBStorageAdapter,
+  isValidAutomergeUrl,
+} from "@automerge/vanillajs";
+
+const REPO = new Repo({
+  network: [
+    new BroadcastChannelNetworkAdapter(),
+    new WebSocketClientAdapter("wss://sync.automerge.org"),
+  ],
+  storage: new IndexedDBStorageAdapter(),
+});
+
+let HANDLE;
+
+function getVotedKey(docUrl) {
+  return `p2p-poll-voted:${docUrl}`;
+}
+
+function getVotedOptions() {
+  const key = getVotedKey(document.location.hash);
+  return new Set(JSON.parse(localStorage.getItem(key) || "[]"));
+}
+
+function markVoted(opt) {
+  const key = getVotedKey(document.location.hash);
+  const voted = getVotedOptions();
+  voted.add(opt);
+  localStorage.setItem(key, JSON.stringify([...voted]));
+}
+
+function unmarkVoted(opt) {
+  const key = getVotedKey(document.location.hash);
+  const voted = getVotedOptions();
+  voted.delete(opt);
+  localStorage.setItem(key, JSON.stringify([...voted]));
+}
+
+const locationHash = document.location.hash.substring(1);
+const statusEl = document.getElementById("status");
+const optionsList = document.getElementById("options-list");
+const optionInput = document.getElementById("option-input");
+const addBtn = document.getElementById("add-btn");
+const duplicateMsg = document.getElementById("duplicate-msg");
+const copyBtn = document.getElementById("copy-btn");
+const timerEl = document.getElementById("timer");
+const startVotingBtn = document.getElementById("start-voting-btn");
+
+if (isValidAutomergeUrl(locationHash)) {
+  statusEl.textContent = "Loading document…";
+  try {
+    HANDLE = await REPO.find(locationHash);
+    statusEl.textContent = "";
+  } catch (err) {
+    statusEl.textContent = "Could not load document. Starting a new one.";
+    HANDLE = REPO.create({ options: [], votes: {}, deadline: null });
+    document.location.hash = HANDLE.url;
+  }
+} else {
+  HANDLE = REPO.create({ options: [], votes: {}, deadline: null });
+  document.location.hash = HANDLE.url;
+}
+
+HANDLE.on("change", ({ doc }) => render(doc));
+
+const initialDoc = HANDLE.doc();
+if (initialDoc) render(initialDoc);
+
+let timerInterval = null;
+
+function render(doc) {
+  renderOptions(doc);
+  renderTimer(doc);
+}
+
+function renderOptions(doc) {
+  const votes = doc.votes || {};
+  const deadline = doc.deadline ?? null;
+  const now = Date.now();
+  const votingClosed = deadline !== null && now >= deadline;
+  const votedOptions = getVotedOptions();
+
+  const sorted = [...(doc.options || [])].sort(
+    (a, b) => (votes[b] || 0) - (votes[a] || 0),
+  );
+
+  optionsList.innerHTML = "";
+  sorted.forEach((opt) => {
+    const count = votes[opt] || 0;
+    const alreadyVoted = votedOptions.has(opt);
+
+    const item = document.createElement("div");
+    item.className = "option-item";
+
+    const label = document.createElement("span");
+    label.className = "option-label";
+    label.textContent = opt;
+
+    const voteBtn = document.createElement("button");
+    voteBtn.className = alreadyVoted ? "vote-btn voted" : "vote-btn";
+    voteBtn.textContent = alreadyVoted ? `✓ ${count}` : `▲ ${count}`;
+    voteBtn.disabled = votingClosed;
+    if (votingClosed) voteBtn.title = "Voting is closed";
+    else if (alreadyVoted) voteBtn.title = "Click to remove your vote";
+
+    voteBtn.addEventListener("click", () => {
+      if (alreadyVoted) {
+        unmarkVoted(opt);
+        HANDLE.change((d) => {
+          if (!d.votes) d.votes = {};
+          d.votes[opt] = Math.max(0, (d.votes[opt] || 0) - 1);
+        });
+      } else {
+        markVoted(opt);
+        HANDLE.change((d) => {
+          if (!d.votes) d.votes = {};
+          d.votes[opt] = (d.votes[opt] || 0) + 1;
+        });
+      }
+    });
+
+    item.appendChild(label);
+    item.appendChild(voteBtn);
+    optionsList.appendChild(item);
+  });
+}
+
+function renderTimer(doc) {
+  const deadline = doc?.deadline ?? null;
+  const now = Date.now();
+
+  if (deadline === null) {
+    timerEl.textContent = "";
+    startVotingBtn.hidden = false;
+    return;
+  }
+
+  startVotingBtn.hidden = true;
+
+  if (now >= deadline) {
+    timerEl.textContent = "Voting closed.";
+    timerEl.className = "timer closed";
+    clearInterval(timerInterval);
+    timerInterval = null;
+    return;
+  }
+
+  const remaining = Math.ceil((deadline - now) / 1000);
+  const mins = Math.floor(remaining / 60);
+  const secs = remaining % 60;
+  timerEl.textContent = `Voting closes in ${mins}:${secs.toString().padStart(2, "0")}`;
+  timerEl.className = "timer active";
+
+  if (!timerInterval) {
+    timerInterval = setInterval(() => {
+      const d = HANDLE.doc();
+      if (!d) return;
+      renderTimer(d);
+      renderOptions(d);
+      if (Date.now() >= d.deadline) {
+        clearInterval(timerInterval);
+        timerInterval = null;
+      }
+    }, 1000);
+  }
+}
+
+startVotingBtn.addEventListener("click", () => {
+  HANDLE.change((d) => {
+    d.deadline = Date.now() + 2 * 60 * 1000;
+  });
+});
+
+addBtn.addEventListener("click", () => {
+  const value = optionInput.value.trim();
+  if (!value) return;
+
+  const doc = HANDLE.doc();
+  const valueLower = value.toLowerCase();
+  const isDuplicate = (doc?.options || []).some(
+    (opt) => opt.toLowerCase() === valueLower,
+  );
+
+  if (isDuplicate) {
+    duplicateMsg.textContent = `"${value}" is already in the list.`;
+    duplicateMsg.hidden = false;
+    return;
+  }
+
+  duplicateMsg.hidden = true;
+  HANDLE.change((d) => {
+    if (!d.options) d.options = [];
+    d.options.push(value);
+  });
+  optionInput.value = "";
+});
+
+optionInput.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") addBtn.click();
+});
+
+optionInput.addEventListener("input", () => {
+  duplicateMsg.hidden = true;
+});
+
+copyBtn.addEventListener("click", () => {
+  navigator.clipboard.writeText(window.location.href).then(() => {
+    copyBtn.textContent = "Copied!";
+    setTimeout(() => (copyBtn.textContent = "Copy URL"), 1500);
+  });
+});

index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>P2P Polling App</title>
+        <link rel="stylesheet" href="./styles.css" />
+    </head>
+    <body>
+        <div id="app">
+            <h1>P2P Polling App</h1>
+            <div id="status"></div>
+            <div id="add-option">
+                <input
+                    type="text"
+                    id="option-input"
+                    placeholder="Enter an option..."
+                />
+                <button id="add-btn">Add Option</button>
+            </div>
+            <div id="duplicate-msg" hidden></div>
+            <div id="timer-section">
+                <div id="timer"></div>
+                <button id="start-voting-btn">Start 2-min Vote</button>
+            </div>
+            <div id="options-list"></div>
+            <button id="copy-btn">Copy URL</button>
+        </div>
+        <script type="module" src="./app.js"></script>
+    </body>
+</html>

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "p2p-poll-app",
+  "type": "module",
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@automerge/automerge-repo": "^2.0.0",
+    "@automerge/automerge-repo-network-websocket": "^2.0.0",
+    "@automerge/automerge-repo-storage-indexeddb": "^2.0.0",
+    "@automerge/vanillajs": "^2.5.3"
+  },
+  "devDependencies": {
+    "vite": "^6.0.0",
+    "vite-plugin-top-level-await": "^1.4.0",
+    "vite-plugin-wasm": "^3.3.0"
+  }
+}

styles.css

@@ -0,0 +1,93 @@
+body {
+    font-family: sans-serif;
+    max-width: 480px;
+    margin: 40px auto;
+    padding: 0 16px;
+}
+
+#add-option {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+#option-input {
+    flex: 1;
+    padding: 8px;
+    font-size: 1rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+#duplicate-msg {
+    color: #c00;
+    font-size: 0.9rem;
+    margin-bottom: 12px;
+}
+
+button {
+    padding: 8px 16px;
+    font-size: 1rem;
+    cursor: pointer;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: #fff;
+}
+
+button:hover:not(:disabled) {
+    background: #f0f0f0;
+}
+
+button:disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+#timer-section {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.timer.active {
+    font-weight: bold;
+    color: #1a6e1a;
+}
+
+.timer.closed {
+    font-weight: bold;
+    color: #c00;
+}
+
+.option-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-bottom: 8px;
+}
+
+.option-label {
+    flex: 1;
+}
+
+.vote-btn {
+    padding: 4px 12px;
+    font-size: 0.9rem;
+    white-space: nowrap;
+}
+
+.vote-btn.voted {
+    background: #e6f4e6;
+    border-color: #4a9e4a;
+    color: #2a6e2a;
+}
+
+
+#copy-btn {
+    margin-top: 16px;
+    width: 100%;
+}

vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import wasm from 'vite-plugin-wasm'
+import topLevelAwait from 'vite-plugin-top-level-await'
+
+export default defineConfig({
+  plugins: [wasm(), topLevelAwait()]
+})