Compare commits
1 Commits
proposal-f
...
proposal-4
| Author | SHA1 | Date | |
|---|---|---|---|
| 7de7632101 |
13
README.md
13
README.md
@@ -1,14 +1 @@
|
||||
# P2P Poll App
|
||||
|
||||
P2P Poll - Minimal GUN-based Scaffolding
|
||||
|
||||
What this is
|
||||
- A tiny peer-to-peer polling app implemented with vanilla JS and GUN (a decentralized, CRDT-friendly database).
|
||||
- No central server for poll data. Peers connect and synchronize the poll in real-time.
|
||||
|
||||
Notes
|
||||
- This scaffold uses GUN’s browser-based peer-to-peer data replication.
|
||||
- You can extend with:
|
||||
- Persistent storage on each peer
|
||||
- Better conflict resolution UI
|
||||
- Optional signaling server for explicit peer discovery
|
||||
200
app.js
200
app.js
@@ -1,200 +0,0 @@
|
||||
// Minimal GUN-based P2P Poll scaffold (vanilla JS)
|
||||
|
||||
(function() {
|
||||
// Initialize GUN (no server needed; can optionally connect to a relay server)
|
||||
// If you want a local-only node for prototyping: Gun()
|
||||
// If you want to use a signaling server for discovery, pass a list of peers to Gun().opt({peers: [...]})
|
||||
const gun = Gun();
|
||||
|
||||
// DOM helpers
|
||||
const pollSection = document.getElementById('poll');
|
||||
const pollIdInput = document.getElementById('pollId');
|
||||
const loadPollBtn = document.getElementById('loadPollBtn');
|
||||
const createPollBtn = document.getElementById('createPollBtn');
|
||||
const pollTitleInput = document.getElementById('pollTitle');
|
||||
const setTitleBtn = document.getElementById('setTitleBtn');
|
||||
const optionsDiv = document.getElementById('options');
|
||||
const newOptionInput = document.getElementById('newOption');
|
||||
const addOptionBtn = document.getElementById('addOptionBtn');
|
||||
const totalVotesSpan = document.getElementById('totalVotes');
|
||||
const pollIdDisplay = document.getElementById('pollIdDisplay');
|
||||
|
||||
let currentPollId = null;
|
||||
let pollsRef = null; // Gun node for /polls/{pollId}
|
||||
let pollData = null; // local cache
|
||||
|
||||
// Helpers
|
||||
function renderOptionList(options) {
|
||||
optionsDiv.innerHTML = '';
|
||||
const keys = Object.keys(options || {});
|
||||
if (keys.length === 0) {
|
||||
optionsDiv.innerHTML = '<p>No options yet. Add one below.</p>';
|
||||
return;
|
||||
}
|
||||
keys.forEach((optId) => {
|
||||
const opt = options[optId];
|
||||
const el = document.createElement('div');
|
||||
el.className = 'option';
|
||||
el.innerHTML = `
|
||||
<span class="text">${opt.text}</span>
|
||||
<button data-optid="${optId}" class="voteBtn">Vote (${opt.votes || 0})</button>
|
||||
`;
|
||||
optionsDiv.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
function updateTotalVotes() {
|
||||
const opts = pollData && pollData.options ? pollData.options : {};
|
||||
const total = Object.values(opts).reduce((sum, o) => sum + (o.votes || 0), 0);
|
||||
totalVotesSpan.textContent = total;
|
||||
}
|
||||
|
||||
// Load existing poll and subscribe to changes
|
||||
function loadPoll(pollId) {
|
||||
if (!pollId) return;
|
||||
|
||||
currentPollId = pollId;
|
||||
pollIdDisplay.textContent = pollId;
|
||||
pollsRef = gun.get('polls').get(pollId);
|
||||
|
||||
// Initialize structure if new poll
|
||||
pollsRef.get('title').put('Untitled Poll');
|
||||
pollsRef.get('options').put({}); // ensure map exists
|
||||
|
||||
// Real-time updates: listen to changes
|
||||
pollsRef.get('title').on((title) => {
|
||||
pollTitleInput.value = title || '';
|
||||
});
|
||||
|
||||
pollsRef.on((data) => {
|
||||
// data is the entire poll node if subscribed; but we explore explicit fields
|
||||
});
|
||||
|
||||
// For options map
|
||||
pollsRef.get('options').on((opts) => {
|
||||
// opts is the entire options map; convert to plain object
|
||||
const optionsObj = toPlainObject(opts);
|
||||
pollData = {
|
||||
title: null,
|
||||
options: optionsObj
|
||||
};
|
||||
renderOptionList(optionsObj);
|
||||
updateTotalVotes();
|
||||
});
|
||||
|
||||
// Also listen for title changes separately (in case some clients push via title path)
|
||||
pollsRef.get('title').on((title) => {
|
||||
pollTitleInput.value = title || '';
|
||||
});
|
||||
|
||||
// Show UI
|
||||
document.getElementById('setup').style.display = 'none';
|
||||
pollSection.style.display = 'block';
|
||||
}
|
||||
|
||||
// Create a new poll
|
||||
function createPoll() {
|
||||
const pollId = pollIdInput.value.trim();
|
||||
if (!pollId) {
|
||||
alert('Please enter a poll ID to create.');
|
||||
return;
|
||||
}
|
||||
currentPollId = pollId;
|
||||
// Initialize poll
|
||||
pollsRef = gun.get('polls').get(pollId);
|
||||
pollsRef.put({
|
||||
title: 'New Poll',
|
||||
});
|
||||
pollsRef.get('options').put({}); // ensure map exists
|
||||
// reflect in UI
|
||||
pollIdDisplay.textContent = pollId;
|
||||
pollTitleInput.value = 'New Poll';
|
||||
pollSection.style.display = 'block';
|
||||
document.getElementById('setup').style.display = 'none';
|
||||
}
|
||||
|
||||
// Add option
|
||||
function addOption() {
|
||||
if (!pollsRef) {
|
||||
alert('Load or create a poll first.');
|
||||
return;
|
||||
}
|
||||
const text = newOptionInput.value.trim();
|
||||
if (!text) return;
|
||||
const optionId = 'opt_' + Date.now();
|
||||
pollsRef.get('options').get(optionId).put({ text, votes: 0 });
|
||||
newOptionInput.value = '';
|
||||
}
|
||||
|
||||
// Set title
|
||||
function setTitle() {
|
||||
if (!pollsRef) return;
|
||||
const title = pollTitleInput.value.trim() || 'Untitled';
|
||||
pollsRef.get('title').put(title);
|
||||
}
|
||||
|
||||
// Vote handler (delegated)
|
||||
function handleVoteClick(e) {
|
||||
if (e.target.classList.contains('voteBtn')) {
|
||||
const optId = e.target.getAttribute('data-optid');
|
||||
if (!optId || !pollsRef) return;
|
||||
const optRef = pollsRef.get('options').get(optId);
|
||||
// Increment votes locally
|
||||
optRef.get('votes').once((v) => {
|
||||
const current = v || 0;
|
||||
optRef.put({ votes: current + 1 });
|
||||
});
|
||||
// UI will update via the on() listener on options map
|
||||
}
|
||||
}
|
||||
|
||||
// Utilities
|
||||
function toPlainObject(obj) {
|
||||
// Gun emits special proxy-like objects; convert to plain object
|
||||
if (!obj) return {};
|
||||
// If it's already a plain object, return
|
||||
if (typeof obj !== 'object') return {};
|
||||
// Gun events deliver object-like; attempt shallow copy
|
||||
try {
|
||||
const copy = JSON.parse(JSON.stringify(obj));
|
||||
return copy;
|
||||
} catch (e) {
|
||||
// Fallback: return as-is if cannot stringify
|
||||
return obj;
|
||||
}
|
||||
}
|
||||
|
||||
// Event bindings
|
||||
loadPollBtn.addEventListener('click', () => {
|
||||
const id = pollIdInput.value.trim();
|
||||
if (!id) {
|
||||
alert('Enter a Poll ID to load.');
|
||||
return;
|
||||
}
|
||||
loadPoll(id);
|
||||
});
|
||||
|
||||
createPollBtn.addEventListener('click', () => {
|
||||
createPoll();
|
||||
});
|
||||
|
||||
addOptionBtn.addEventListener('click', addOption);
|
||||
newOptionInput.addEventListener('keydown', (ev) => {
|
||||
if (ev.key === 'Enter') addOption();
|
||||
});
|
||||
|
||||
setTitleBtn.addEventListener('click', setTitle);
|
||||
|
||||
// Delegate vote clicks
|
||||
optionsDiv.addEventListener('click', handleVoteClick);
|
||||
|
||||
// Initialize: optionally auto-create a poll if URL param present
|
||||
// Example: ?pollId=my-poll-123
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const autoPoll = urlParams.get('pollId');
|
||||
if (autoPoll) {
|
||||
pollIdInput.value = autoPoll;
|
||||
loadPoll(autoPoll);
|
||||
}
|
||||
|
||||
})();
|
||||
55
index.html
55
index.html
@@ -1,55 +0,0 @@
|
||||
<!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="styles.css" />
|
||||
<!-- Gun.js via CDN for quick start -->
|
||||
<script src="https://unpkg.com/gun/gun.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>P2P Poll</h1>
|
||||
|
||||
<section id="setup" class="card">
|
||||
<h2>Start or Join Poll</h2>
|
||||
<div class="field">
|
||||
<label for="pollId">Poll ID (share with peer):</label>
|
||||
<input id="pollId" type="text" placeholder="e.g. my-poll-123" />
|
||||
</div>
|
||||
<button id="loadPollBtn">Load Poll</button>
|
||||
<button id="createPollBtn">Create New Poll</button>
|
||||
<p class="note">Tip: You can run two instances and connect by using the same Poll ID.</p>
|
||||
</section>
|
||||
|
||||
<section id="poll" class="card" style="display:none;">
|
||||
<h2>Poll</h2>
|
||||
<div class="field">
|
||||
<label for="pollTitle">Poll Title</label>
|
||||
<input id="pollTitle" type="text" placeholder="Poll Title" />
|
||||
<button id="setTitleBtn">Set Title</button>
|
||||
</div>
|
||||
|
||||
<div id="options" class="options">
|
||||
<!-- dynamic options will render here -->
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<input id="newOption" type="text" placeholder="Add a new option" />
|
||||
<button id="addOptionBtn">Add Option</button>
|
||||
</div>
|
||||
|
||||
<div class="summary">
|
||||
<p>Total votes: <span id="totalVotes">0</span></p>
|
||||
</div>
|
||||
|
||||
<div class="share">
|
||||
<p>Share Poll ID with peer: <code id="pollIdDisplay"></code></p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
24
p2p-poll/.gitignore
vendored
Normal file
24
p2p-poll/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# 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
|
||||
75
p2p-poll/README.md
Normal file
75
p2p-poll/README.md
Normal file
@@ -0,0 +1,75 @@
|
||||
# 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.
|
||||
152
p2p-poll/app/app.vue
Normal file
152
p2p-poll/app/app.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
|
||||
|
||||
<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>
|
||||
81
p2p-poll/composables/usePoll.ts
Normal file
81
p2p-poll/composables/usePoll.ts
Normal file
@@ -0,0 +1,81 @@
|
||||
// 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
|
||||
};
|
||||
};
|
||||
11
p2p-poll/nuxt.config.ts
Normal file
11
p2p-poll/nuxt.config.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
// 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
Normal file
9912
p2p-poll/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
19
p2p-poll/package.json
Normal file
19
p2p-poll/package.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
BIN
p2p-poll/public/favicon.ico
Normal file
BIN
p2p-poll/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
2
p2p-poll/public/robots.txt
Normal file
2
p2p-poll/public/robots.txt
Normal file
@@ -0,0 +1,2 @@
|
||||
User-Agent: *
|
||||
Disallow:
|
||||
18
p2p-poll/tsconfig.json
Normal file
18
p2p-poll/tsconfig.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
// 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"
|
||||
}
|
||||
]
|
||||
}
|
||||
104
styles.css
104
styles.css
@@ -1,104 +0,0 @@
|
||||
:root {
|
||||
--bg: #0f1220;
|
||||
--card: #1a1740;
|
||||
--text: #e8e3ff;
|
||||
--muted: #b8a7d2;
|
||||
--accent: #6bd3ff;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
background: #0b0a14;
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 40px auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #1f1740;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 14px;
|
||||
border: 1px solid #2a1950;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
label {
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #5a2d8a;
|
||||
background: #2a174f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
background: #6bd3ff;
|
||||
color: #04152a;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.option {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
background: #2a174f;
|
||||
border: 1px solid #40217a;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.option .text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.share {
|
||||
font-size: 0.9em;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.note {
|
||||
color: #c8b5ff;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.total {
|
||||
font-weight: bold;
|
||||
}
|
||||
Reference in New Issue
Block a user