polls on atproto
pollz.waow.tech
zzstoatzz.io
atproto
zig
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>pollz</title>
7 <meta name="description" content="polls on atproto">
8
9 <!-- Open Graph -->
10 <meta property="og:type" content="website">
11 <meta property="og:title" content="pollz">
12 <meta property="og:description" content="polls on atproto">
13 <meta property="og:url" content="https://pollz.waow.tech">
14 <meta property="og:site_name" content="pollz">
15
16 <!-- Twitter -->
17 <meta name="twitter:card" content="summary">
18 <meta name="twitter:title" content="pollz">
19 <meta name="twitter:description" content="polls on atproto">
20 <style>
21 * { box-sizing: border-box; margin: 0; padding: 0; }
22 body {
23 font-family: monospace;
24 max-width: 600px;
25 margin: 0 auto;
26 padding: 1rem;
27 background: #0a0a0a;
28 color: #ccc;
29 font-size: 14px;
30 line-height: 1.6;
31 }
32 a { color: #888; text-decoration: none; }
33 a:hover { color: #fff; }
34 header {
35 display: flex;
36 justify-content: space-between;
37 align-items: center;
38 padding: 1rem 0;
39 border-bottom: 1px solid #222;
40 margin-bottom: 1rem;
41 }
42 header h1 { font-size: 1rem; font-weight: normal; }
43 input, button, textarea {
44 font-family: monospace;
45 font-size: 14px;
46 padding: 0.5rem;
47 border: 1px solid #333;
48 background: #111;
49 color: #ccc;
50 }
51 input:focus, textarea:focus { outline: 1px solid #444; }
52 button { cursor: pointer; }
53 button:hover { background: #222; }
54 .poll {
55 border-bottom: 1px solid #222;
56 padding: 1rem 0;
57 }
58 .poll-question { color: #fff; margin-bottom: 0.5rem; }
59 .poll-meta { color: #555; font-size: 12px; margin-bottom: 0.5rem; }
60 .option {
61 display: flex;
62 justify-content: space-between;
63 align-items: center;
64 padding: 0.5rem 0;
65 cursor: pointer;
66 }
67 .option:hover { color: #fff; }
68 .option-text { flex: 1; }
69 .option-count { color: #888; font-size: 12px; margin-left: 1rem; }
70 .poll-detail .option {
71 position: relative;
72 padding: 0.75rem;
73 margin: 0.5rem 0;
74 background: #111;
75 border: 1px solid #222;
76 }
77 .poll-detail .option-bar {
78 position: absolute;
79 left: 0;
80 top: 0;
81 height: 100%;
82 background: #1a3a1a;
83 z-index: 0;
84 transition: width 0.3s;
85 }
86 .poll-detail .option-text,
87 .poll-detail .option-count {
88 position: relative;
89 z-index: 1;
90 }
91 .poll-detail .poll-meta {
92 margin-top: 1rem;
93 }
94 .create-form { margin-bottom: 2rem; }
95 .create-form input, .create-form textarea { width: 100%; margin-bottom: 0.5rem; }
96 .hidden { display: none; }
97 #status { color: #666; padding: 0.5rem 0; }
98 .vote-count { cursor: help; border-bottom: 1px dotted #555; }
99 .vote-count:hover { color: #fff; }
100 .voters-tooltip {
101 background: #1a1a1a;
102 border: 1px solid #333;
103 padding: 0.5rem;
104 font-size: 12px;
105 z-index: 1000;
106 max-width: 300px;
107 box-shadow: 0 2px 8px rgba(0,0,0,0.5);
108 }
109 .voter { padding: 0.25rem 0; color: #aaa; word-break: break-all; }
110 .voter-link { color: #6af; font-size: 11px; }
111 .voter-link:hover { color: #8cf; text-decoration: underline; }
112 .vote-time { color: #555; font-size: 10px; }
113 .share-btn {
114 background: none;
115 border: 1px solid #333;
116 color: #888;
117 padding: 0.4rem 0.8rem;
118 font-family: monospace;
119 font-size: 12px;
120 cursor: pointer;
121 border-radius: 4px;
122 transition: all 0.2s;
123 }
124 .share-btn:hover { border-color: #555; color: #ccc; }
125 .share-btn.copied { border-color: #4a4; color: #6c6; }
126 .poll-header {
127 display: flex;
128 justify-content: space-between;
129 align-items: flex-start;
130 gap: 1rem;
131 margin-bottom: 1rem;
132 }
133 .poll-header h2 { margin: 0; flex: 1; }
134 .toast {
135 position: fixed;
136 top: 1rem;
137 left: 50%;
138 transform: translateX(-50%);
139 background: #1a1a1a;
140 border: 1px solid #444;
141 padding: 0.75rem 1.5rem;
142 z-index: 1001;
143 animation: toast-fade 3s ease-in-out forwards;
144 }
145 @keyframes toast-fade {
146 0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
147 10% { opacity: 1; transform: translateX(-50%) translateY(0); }
148 80% { opacity: 1; }
149 100% { opacity: 0; }
150 }
151 </style>
152</head>
153<body>
154 <header>
155 <h1><a href="/">pollz</a> <a href="https://tangled.sh/@zzstoatzz.io/pollz" target="_blank" style="font-size:11px;color:#555">[src]</a></h1>
156 <nav id="nav"></nav>
157 </header>
158 <main id="app"></main>
159 <p id="status"></p>
160 <script type="module" src="/src/main.ts"></script>
161</body>
162</html>