Compare commits
1 Commits
proposal-4
...
feat/p2p-p
| Author | SHA1 | Date | |
|---|---|---|---|
|
a621cc4483 |
33
index.html
Normal file
33
index.html
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>P2P Poll</title>
|
||||||
|
<link rel="stylesheet" href="/src/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
<header>
|
||||||
|
<h1>P2P Poll</h1>
|
||||||
|
<div id="status">
|
||||||
|
<span id="connection-status" class="connecting">Connecting...</span>
|
||||||
|
<span id="peer-count">1 peer</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div id="add-option">
|
||||||
|
<input type="text" id="option-input" placeholder="Add a poll option..." maxlength="100">
|
||||||
|
<button id="add-btn">Add</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="poll-options"></div>
|
||||||
|
|
||||||
|
<p id="empty-state">No options yet. Add one above!</p>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
24
p2p-poll/.gitignore
vendored
24
p2p-poll/.gitignore
vendored
@@ -1,24 +0,0 @@
|
|||||||
# Nuxt dev/build outputs
|
|
||||||
.output
|
|
||||||
.data
|
|
||||||
.nuxt
|
|
||||||
.nitro
|
|
||||||
.cache
|
|
||||||
dist
|
|
||||||
|
|
||||||
# Node dependencies
|
|
||||||
node_modules
|
|
||||||
|
|
||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
|
|
||||||
# Misc
|
|
||||||
.DS_Store
|
|
||||||
.fleet
|
|
||||||
.idea
|
|
||||||
|
|
||||||
# Local env files
|
|
||||||
.env
|
|
||||||
.env.*
|
|
||||||
!.env.example
|
|
||||||
@@ -1,75 +0,0 @@
|
|||||||
# Nuxt Minimal Starter
|
|
||||||
|
|
||||||
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
|
||||||
|
|
||||||
## Setup
|
|
||||||
|
|
||||||
Make sure to install dependencies:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# npm
|
|
||||||
npm install
|
|
||||||
|
|
||||||
# pnpm
|
|
||||||
pnpm install
|
|
||||||
|
|
||||||
# yarn
|
|
||||||
yarn install
|
|
||||||
|
|
||||||
# bun
|
|
||||||
bun install
|
|
||||||
```
|
|
||||||
|
|
||||||
## Development Server
|
|
||||||
|
|
||||||
Start the development server on `http://localhost:3000`:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# npm
|
|
||||||
npm run dev
|
|
||||||
|
|
||||||
# pnpm
|
|
||||||
pnpm dev
|
|
||||||
|
|
||||||
# yarn
|
|
||||||
yarn dev
|
|
||||||
|
|
||||||
# bun
|
|
||||||
bun run dev
|
|
||||||
```
|
|
||||||
|
|
||||||
## Production
|
|
||||||
|
|
||||||
Build the application for production:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# npm
|
|
||||||
npm run build
|
|
||||||
|
|
||||||
# pnpm
|
|
||||||
pnpm build
|
|
||||||
|
|
||||||
# yarn
|
|
||||||
yarn build
|
|
||||||
|
|
||||||
# bun
|
|
||||||
bun run build
|
|
||||||
```
|
|
||||||
|
|
||||||
Locally preview production build:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# npm
|
|
||||||
npm run preview
|
|
||||||
|
|
||||||
# pnpm
|
|
||||||
pnpm preview
|
|
||||||
|
|
||||||
# yarn
|
|
||||||
yarn preview
|
|
||||||
|
|
||||||
# bun
|
|
||||||
bun run preview
|
|
||||||
```
|
|
||||||
|
|
||||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
|
||||||
@@ -1,152 +0,0 @@
|
|||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* Basic styling to make it look clean */
|
|
||||||
body {
|
|
||||||
font-family: system-ui, -apple-system, sans-serif;
|
|
||||||
background-color: #f4f4f9;
|
|
||||||
color: #333;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-container {
|
|
||||||
background: white;
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
||||||
width: 100%;
|
|
||||||
max-width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 { margin: 0 0 0.5rem 0; }
|
|
||||||
|
|
||||||
.status {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
.status .connected { color: #10b981; font-weight: bold; }
|
|
||||||
|
|
||||||
.add-option-form {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
flex-grow: 1;
|
|
||||||
padding: 0.75rem;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
background: #3b82f6;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: bold;
|
|
||||||
transition: background 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover { background: #2563eb; }
|
|
||||||
|
|
||||||
.poll-list {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 1rem;
|
|
||||||
background: #f8fafc;
|
|
||||||
border: 1px solid #e2e8f0;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.option-name { font-weight: 500; }
|
|
||||||
.vote-section { display: flex; align-items: center; gap: 1rem; }
|
|
||||||
.vote-count { font-size: 0.9rem; color: #475569; }
|
|
||||||
.vote-btn { padding: 0.4rem 0.8rem; background: #10b981; }
|
|
||||||
.vote-btn:hover { background: #059669; }
|
|
||||||
.empty-state { text-align: center; color: #94a3b8; font-style: italic; }
|
|
||||||
</style>
|
|
||||||
<template>
|
|
||||||
<div class="poll-container">
|
|
||||||
<ClientOnly>
|
|
||||||
<header>
|
|
||||||
<h1>P2P Polling App 🗳️</h1>
|
|
||||||
<div class="status">
|
|
||||||
<span :class="{ 'connected': isConnected }">
|
|
||||||
● {{ isConnected ? 'Synced' : 'Connecting...' }}
|
|
||||||
</span>
|
|
||||||
<span> | Peers online: {{ connectedPeers }}</span>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<form @submit.prevent="handleAddNewOption" class="add-option-form">
|
|
||||||
<input
|
|
||||||
v-model="newOption"
|
|
||||||
type="text"
|
|
||||||
placeholder="Enter a new poll option..."
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<button type="submit">Add Option</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div v-if="Object.keys(pollData).length === 0" class="empty-state">
|
|
||||||
No options yet. Be the first to add one!
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul v-else class="poll-list">
|
|
||||||
<li v-for="(votes, optionName) in pollData" :key="optionName" class="poll-item">
|
|
||||||
<span class="option-name">{{ optionName }}</span>
|
|
||||||
<div class="vote-section">
|
|
||||||
<span class="vote-count">{{ votes }} {{ votes === 1 ? 'vote' : 'votes' }}</span>
|
|
||||||
<button @click="vote(String(optionName))" class="vote-btn">+1</button>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</main>
|
|
||||||
<template #fallback>
|
|
||||||
<div class="empty-state">Loading P2P Node...</div>
|
|
||||||
</template>
|
|
||||||
</ClientOnly>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue';
|
|
||||||
// Manually define 'global' for the browser
|
|
||||||
if (process.client) {
|
|
||||||
(window as any).global = window;
|
|
||||||
}
|
|
||||||
import { usePoll } from '../composables/usePoll';
|
|
||||||
|
|
||||||
// Because WebRTC requires the browser environment (window/navigator),
|
|
||||||
// we ensure our composable only runs on the client side in Nuxt.
|
|
||||||
const newOption = ref('');
|
|
||||||
|
|
||||||
// Destructure our P2P logic
|
|
||||||
const { pollData, isConnected, connectedPeers, addOption, vote } = usePoll();
|
|
||||||
|
|
||||||
const handleAddNewOption = () => {
|
|
||||||
addOption(newOption.value);
|
|
||||||
newOption.value = ''; // Reset input
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
// composables/usePoll.ts
|
|
||||||
import { ref, onMounted, onUnmounted } from 'vue';
|
|
||||||
import * as Y from 'yjs';
|
|
||||||
|
|
||||||
export const usePoll = () => {
|
|
||||||
// Reactive Vue state to drive the UI
|
|
||||||
const pollData = ref<Record<string, number>>({});
|
|
||||||
const isConnected = ref(false);
|
|
||||||
const connectedPeers = ref(1); // 1 = just you initially
|
|
||||||
|
|
||||||
let ydoc: Y.Doc;
|
|
||||||
let provider: any;
|
|
||||||
let yMap: Y.Map<number>;
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
// 1. Initialize the Yjs document
|
|
||||||
ydoc = new Y.Doc();
|
|
||||||
|
|
||||||
// 2. Connect via WebRTC.
|
|
||||||
// 'nuxt-p2p-poll-demo-room' is the shared room name.
|
|
||||||
// Anyone using this exact string will sync together.
|
|
||||||
const { WebrtcProvider } = await import('y-webrtc');
|
|
||||||
provider = new WebrtcProvider('nuxt-p2p-poll-demo-room', ydoc);
|
|
||||||
|
|
||||||
// Track connection status
|
|
||||||
provider.on('synced', (arg: {synced: boolean}) => {
|
|
||||||
isConnected.value = arg.synced;
|
|
||||||
});
|
|
||||||
|
|
||||||
provider.on('peers', (data: any) => {
|
|
||||||
// data.webrtcPeers contains the connected peer IDs
|
|
||||||
connectedPeers.value = data.webrtcPeers.length + 1; // +1 for self
|
|
||||||
});
|
|
||||||
|
|
||||||
// 3. Define our shared state structure. We'll use a Map
|
|
||||||
// where the Key is the Poll Option (string) and Value is the Vote Count (number)
|
|
||||||
yMap = ydoc.getMap<number>('shared-poll');
|
|
||||||
|
|
||||||
// 4. Listen for changes from other peers and update our Vue reactive state
|
|
||||||
yMap.observe(() => {
|
|
||||||
pollData.value = yMap.toJSON();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Initial load in case data already exists in the room
|
|
||||||
pollData.value = yMap.toJSON();
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
// Clean up when the component is destroyed
|
|
||||||
if (provider) {
|
|
||||||
provider.disconnect();
|
|
||||||
}
|
|
||||||
if (ydoc) {
|
|
||||||
ydoc.destroy();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Action: Add a new option to the poll
|
|
||||||
const addOption = (optionName: string) => {
|
|
||||||
const trimmedName = optionName.trim();
|
|
||||||
if (trimmedName && !yMap.has(trimmedName)) {
|
|
||||||
yMap.set(trimmedName, 0); // Initialize with 0 votes
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Action: Vote for an existing option
|
|
||||||
const vote = (optionName: string) => {
|
|
||||||
if (yMap.has(optionName)) {
|
|
||||||
const currentVotes = yMap.get(optionName) || 0;
|
|
||||||
yMap.set(optionName, currentVotes + 1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
pollData,
|
|
||||||
isConnected,
|
|
||||||
connectedPeers,
|
|
||||||
addOption,
|
|
||||||
vote
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
|
||||||
export default defineNuxtConfig({
|
|
||||||
compatibilityDate: '2025-07-15',
|
|
||||||
devtools: { enabled: true },
|
|
||||||
ssr: false,
|
|
||||||
vite: {
|
|
||||||
optimizeDeps: {
|
|
||||||
include: ['yjs', 'y-webrtc']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
9912
p2p-poll/package-lock.json
generated
9912
p2p-poll/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,19 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "p2p-poll",
|
|
||||||
"type": "module",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"build": "nuxt build",
|
|
||||||
"dev": "nuxt dev",
|
|
||||||
"generate": "nuxt generate",
|
|
||||||
"preview": "nuxt preview",
|
|
||||||
"postinstall": "nuxt prepare"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"nuxt": "^4.1.3",
|
|
||||||
"vue": "^3.5.30",
|
|
||||||
"vue-router": "^5.0.3",
|
|
||||||
"y-webrtc": "^10.3.0",
|
|
||||||
"yjs": "^13.6.30"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
@@ -1,2 +0,0 @@
|
|||||||
User-Agent: *
|
|
||||||
Disallow:
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
{
|
|
||||||
// https://nuxt.com/docs/guide/concepts/typescript
|
|
||||||
"files": [],
|
|
||||||
"references": [
|
|
||||||
{
|
|
||||||
"path": "./.nuxt/tsconfig.app.json"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "./.nuxt/tsconfig.server.json"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "./.nuxt/tsconfig.shared.json"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "./.nuxt/tsconfig.node.json"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
1437
package-lock.json
generated
Normal file
1437
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
18
package.json
Normal file
18
package.json
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"name": "p2p-poll",
|
||||||
|
"private": true,
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"yjs": "^13.6.0",
|
||||||
|
"y-webrtc": "^10.3.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"vite": "^6.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
136
src/main.js
Normal file
136
src/main.js
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
import * as Y from 'yjs';
|
||||||
|
import { WebrtcProvider } from 'y-webrtc';
|
||||||
|
|
||||||
|
// --- Peer ID (stable across reloads) ---
|
||||||
|
|
||||||
|
function getOrCreatePeerId() {
|
||||||
|
let id = localStorage.getItem('peer-id');
|
||||||
|
if (!id) {
|
||||||
|
id = crypto.randomUUID();
|
||||||
|
localStorage.setItem('peer-id', id);
|
||||||
|
}
|
||||||
|
return id;
|
||||||
|
}
|
||||||
|
|
||||||
|
const peerId = getOrCreatePeerId();
|
||||||
|
|
||||||
|
// --- Room name from URL ---
|
||||||
|
|
||||||
|
function getRoomName() {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
return params.get('room') || 'default-poll';
|
||||||
|
}
|
||||||
|
|
||||||
|
const roomName = getRoomName();
|
||||||
|
|
||||||
|
// --- Yjs setup ---
|
||||||
|
|
||||||
|
const ydoc = new Y.Doc();
|
||||||
|
const provider = new WebrtcProvider(roomName, ydoc);
|
||||||
|
const yOptions = ydoc.getMap('poll-options');
|
||||||
|
|
||||||
|
// --- Data operations ---
|
||||||
|
|
||||||
|
function addOption(name) {
|
||||||
|
const id = crypto.randomUUID();
|
||||||
|
const optionMap = new Y.Map();
|
||||||
|
optionMap.set('name', name);
|
||||||
|
optionMap.set('votes', new Y.Map());
|
||||||
|
yOptions.set(id, optionMap);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleVote(optionId) {
|
||||||
|
const optionMap = yOptions.get(optionId);
|
||||||
|
if (!optionMap) return;
|
||||||
|
const votes = optionMap.get('votes');
|
||||||
|
if (votes.has(peerId)) {
|
||||||
|
votes.delete(peerId);
|
||||||
|
} else {
|
||||||
|
votes.set(peerId, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- UI rendering ---
|
||||||
|
|
||||||
|
const container = document.getElementById('poll-options');
|
||||||
|
const emptyState = document.getElementById('empty-state');
|
||||||
|
|
||||||
|
function render() {
|
||||||
|
container.innerHTML = '';
|
||||||
|
|
||||||
|
const entries = [];
|
||||||
|
yOptions.forEach((optionMap, id) => {
|
||||||
|
entries.push({
|
||||||
|
id,
|
||||||
|
name: optionMap.get('name'),
|
||||||
|
votes: optionMap.get('votes').size,
|
||||||
|
voted: optionMap.get('votes').has(peerId),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
entries.sort((a, b) => b.votes - a.votes || a.name.localeCompare(b.name));
|
||||||
|
|
||||||
|
emptyState.className = entries.length > 0 ? 'hidden' : '';
|
||||||
|
|
||||||
|
for (const entry of entries) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.className = 'poll-option';
|
||||||
|
|
||||||
|
const nameSpan = document.createElement('span');
|
||||||
|
nameSpan.className = 'option-name';
|
||||||
|
nameSpan.textContent = entry.name;
|
||||||
|
|
||||||
|
const voteCount = document.createElement('span');
|
||||||
|
voteCount.className = 'vote-count';
|
||||||
|
voteCount.textContent = entry.votes;
|
||||||
|
|
||||||
|
const voteBtn = document.createElement('button');
|
||||||
|
voteBtn.className = entry.voted ? 'vote-btn voted' : 'vote-btn';
|
||||||
|
voteBtn.textContent = entry.voted ? 'Unvote' : 'Vote';
|
||||||
|
voteBtn.addEventListener('click', () => toggleVote(entry.id));
|
||||||
|
|
||||||
|
div.append(nameSpan, voteCount, voteBtn);
|
||||||
|
container.appendChild(div);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Re-render on any change in the shared state
|
||||||
|
yOptions.observeDeep(() => render());
|
||||||
|
|
||||||
|
// --- Add option handlers ---
|
||||||
|
|
||||||
|
const input = document.getElementById('option-input');
|
||||||
|
const addBtn = document.getElementById('add-btn');
|
||||||
|
|
||||||
|
addBtn.addEventListener('click', () => {
|
||||||
|
const name = input.value.trim();
|
||||||
|
if (name) {
|
||||||
|
addOption(name);
|
||||||
|
input.value = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
input.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Enter') addBtn.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- Connection status & peer count ---
|
||||||
|
|
||||||
|
const statusEl = document.getElementById('connection-status');
|
||||||
|
const peerCountEl = document.getElementById('peer-count');
|
||||||
|
|
||||||
|
provider.on('synced', ({ synced }) => {
|
||||||
|
statusEl.textContent = synced ? 'Connected' : 'Connecting...';
|
||||||
|
statusEl.className = synced ? 'connected' : 'connecting';
|
||||||
|
});
|
||||||
|
|
||||||
|
function updatePeerCount() {
|
||||||
|
const count = provider.awareness.getStates().size;
|
||||||
|
peerCountEl.textContent = `${count} peer${count !== 1 ? 's' : ''}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
provider.awareness.on('change', updatePeerCount);
|
||||||
|
updatePeerCount();
|
||||||
|
|
||||||
|
// --- Initial render ---
|
||||||
|
render();
|
||||||
144
src/style.css
Normal file
144
src/style.css
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #333;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#status {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
#connection-status::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 4px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#connection-status.connected::before {
|
||||||
|
background: #4caf50;
|
||||||
|
}
|
||||||
|
|
||||||
|
#connection-status.connecting::before {
|
||||||
|
background: #ff9800;
|
||||||
|
}
|
||||||
|
|
||||||
|
#add-option {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#option-input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.6rem 0.8rem;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1rem;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#option-input:focus {
|
||||||
|
border-color: #2196f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#add-btn {
|
||||||
|
padding: 0.6rem 1.2rem;
|
||||||
|
background: #2196f3;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#add-btn:hover {
|
||||||
|
background: #1976d2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll-option {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: white;
|
||||||
|
padding: 0.8rem 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-name {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-count {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #666;
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
min-width: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-btn {
|
||||||
|
padding: 0.4rem 1rem;
|
||||||
|
border: 2px solid #2196f3;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
cursor: pointer;
|
||||||
|
background: white;
|
||||||
|
color: #2196f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-btn:hover {
|
||||||
|
background: #e3f2fd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-btn.voted {
|
||||||
|
background: #2196f3;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-btn.voted:hover {
|
||||||
|
background: #1976d2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#empty-state {
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#empty-state.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user