Basic features done
This commit is contained in:
@@ -0,0 +1,274 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{{.Name}} — SprintPadawan</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="/static/styles/main.css" />
|
||||
<script src="/static/js/htmx.min.js" defer></script>
|
||||
</head>
|
||||
<body class="app-body">
|
||||
<div class="app-shell">
|
||||
<div id="sidebar-backdrop" class="sidebar-backdrop" onclick="document.getElementById('app-sidebar').classList.remove('open'); document.getElementById('sidebar-backdrop').classList.remove('open')"></div>
|
||||
<aside class="sidebar" id="app-sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon">⚡</div>
|
||||
<span class="logo-text"><span>Sprint</span>Padawan</span>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<a href="/" class="nav-item">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect x="3" y="3" width="7" height="7" />
|
||||
<rect x="14" y="3" width="7" height="7" />
|
||||
<rect x="3" y="14" width="7" height="7" />
|
||||
<rect x="14" y="14" width="7" height="7" />
|
||||
</svg>
|
||||
Rooms
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-row">
|
||||
<div class="user-avatar">{{slice .User.Username 0 1}}</div>
|
||||
<div class="user-info">
|
||||
<span class="user-name">{{.User.Username}}</span>
|
||||
<span class="user-role">Member</span>
|
||||
</div>
|
||||
</div>
|
||||
<form method="POST" action="/logout">
|
||||
<button class="sign-out-btn" type="submit">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
|
||||
/>
|
||||
<polyline points="16 17 21 12 16 7" />
|
||||
<line x1="21" y1="12" x2="9" y2="12" />
|
||||
</svg>
|
||||
Sign Out
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-content">
|
||||
<header class="topbar">
|
||||
<div style="display: flex; align-items: center; gap: 1rem;">
|
||||
<button class="mobile-menu-btn" onclick="document.getElementById('app-sidebar').classList.toggle('open'); document.getElementById('sidebar-backdrop').classList.toggle('open')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<a href="/" class="back-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="19" y1="12" x2="5" y2="12"></line>
|
||||
<polyline points="12 19 5 12 12 5"></polyline>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="topbar-title">{{.Name}}</span>
|
||||
<span class="room-code-badge">{{.Code}}</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<span class="scale-badge">{{.Scale}}</span>
|
||||
{{if .IsOwner}}
|
||||
<button hx-get="/rooms/{{.ID}}/stories/new" hx-target="#modal-container" hx-swap="innerHTML" class="btn-primary" style="width: auto; padding: 0.5rem 1rem;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
Add Story
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="page-content">
|
||||
<div class="room-layout">
|
||||
<!-- stories list -->
|
||||
<div class="stories-panel">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem;">
|
||||
<h3 class="panel-title" style="margin-bottom: 0;">Stories</h3>
|
||||
<div class="sse-indicator">
|
||||
<span class="sse-dot"></span>
|
||||
<span>Live</span>
|
||||
</div>
|
||||
</div>
|
||||
{{if .Stories}}
|
||||
<div class="stories-list">
|
||||
{{range .Stories}}
|
||||
{{$isActive := eq (derefInt $.ActiveStoryID) .ID}}
|
||||
{{if or $.IsOwner (eq $.ActiveStoryID nil) $isActive .Voted}}
|
||||
<div class="story-card {{if .Voted}}story-revealed{{end}} {{if $isActive}}story-active{{end}}" id="story-{{.ID}}">
|
||||
<div class="story-header">
|
||||
<span class="story-title">{{.Title}}</span>
|
||||
<div class="story-actions">
|
||||
{{if .Voted}}
|
||||
<span class="story-badge story-badge-revealed">Revealed</span>
|
||||
{{if $.IsOwner}}
|
||||
<form method="POST" action="/rooms/{{$.ID}}/stories/{{.ID}}/unreveal" style="margin:0;">
|
||||
<button type="submit" class="story-btn story-btn-secondary">Hide</button>
|
||||
</form>
|
||||
{{end}}
|
||||
{{else if $.IsOwner}}
|
||||
{{if $isActive}}
|
||||
<form method="POST" action="/rooms/{{$.ID}}/reveal" style="margin:0;">
|
||||
<input type="hidden" name="story_id" value="{{.ID}}" />
|
||||
<button type="submit" class="story-btn story-btn-primary">Reveal</button>
|
||||
</form>
|
||||
<span class="story-badge story-badge-active">Active</span>
|
||||
{{else}}
|
||||
<form method="POST" action="/rooms/{{$.ID}}/active" style="margin:0;">
|
||||
<input type="hidden" name="story_id" value="{{.ID}}" />
|
||||
<button type="submit" class="story-btn story-btn-secondary">Set Active</button>
|
||||
</form>
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{if $.IsOwner}}
|
||||
<button type="button" class="story-action-btn" hx-get="/rooms/{{$.ID}}/stories/{{.ID}}/edit" hx-target="#modal-container" hx-swap="innerHTML" title="Rename">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" class="story-action-btn story-action-delete" hx-post="/rooms/{{$.ID}}/stories/{{.ID}}/delete" hx-target="#story-{{.ID}}" hx-swap="outerHTML" hx-confirm="Delete this story?" title="Delete">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="3 6 5 6 21 6"/>
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
|
||||
</svg>
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{if $isActive}}
|
||||
{{$userVote := index $.UserVotes .ID}}
|
||||
<div class="vote-form" id="vote-form-{{.ID}}">
|
||||
{{$storyID := .ID}}
|
||||
{{range scaleToOptions $.Scale}}
|
||||
<button type="button"
|
||||
hx-post="/rooms/{{$.ID}}/vote"
|
||||
hx-target="#vote-form-{{$storyID}}"
|
||||
hx-swap="outerHTML"
|
||||
hx-vals='{"story_id":"{{$storyID}}","value":"{{.}}"}'
|
||||
class="vote-option {{if eq . $userVote}}vote-selected{{end}}">{{.}}</button>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="voting-progress" style="margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem;">
|
||||
<div style="font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.75rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em;">Voting Progress</div>
|
||||
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
||||
{{range $.Members}}
|
||||
<div class="scale-badge" style="{{if .HasVoted}}color: var(--success-text); border-color: var(--success-border); background: var(--success-bg);{{else}}color: var(--text-muted); opacity: 0.7;{{end}}">
|
||||
{{.Username}} {{if .HasVoted}}✓{{else}}...{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .Voted}}
|
||||
<div class="revealed-votes">
|
||||
{{range index $.StoryVotes .ID}}
|
||||
<div class="revealed-vote">
|
||||
<span class="revealed-vote-user">{{.Username}}</span>
|
||||
<span class="revealed-vote-value">{{.Value}}</span>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="empty-state">
|
||||
<p>No stories yet. Add one to start voting.</p>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<!-- members panel -->
|
||||
<div class="members-panel">
|
||||
<h3 class="panel-title">Members ({{len .Members}})</h3>
|
||||
<div class="members-list">
|
||||
{{range .Members}}
|
||||
<div class="member-row">
|
||||
<div class="user-avatar" style="width: 28px; height: 28px; font-size: 0.7rem;">{{slice .Username 0 1}}</div>
|
||||
<span class="member-name">{{.Username}}</span>
|
||||
{{if .HasVoted}}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--success-text)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: auto;">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modal container -->
|
||||
<div id="modal-container"></div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
var roomID = {{.ID}};
|
||||
var evtSource = new EventSource("/sse/" + roomID);
|
||||
evtSource.addEventListener("room-" + roomID, function(e) {
|
||||
if (e.data === "refresh") {
|
||||
window.location.reload();
|
||||
} else if (e.data === "members") {
|
||||
fetch(window.location.href)
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
var parser = new DOMParser();
|
||||
var doc = parser.parseFromString(html, "text/html");
|
||||
var newPanel = doc.querySelector('.members-panel');
|
||||
var oldPanel = document.querySelector('.members-panel');
|
||||
if (newPanel && oldPanel) {
|
||||
oldPanel.replaceWith(newPanel);
|
||||
}
|
||||
var newProgress = doc.querySelector('.voting-progress');
|
||||
var oldProgress = document.querySelector('.voting-progress');
|
||||
if (newProgress && oldProgress) {
|
||||
oldProgress.replaceWith(newProgress);
|
||||
}
|
||||
var newRevealed = doc.querySelector('.revealed-votes');
|
||||
var oldRevealed = document.querySelector('.revealed-votes');
|
||||
if (newRevealed && oldRevealed) {
|
||||
oldRevealed.replaceWith(newRevealed);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user