2026-07-08 11:05:21 +02:00
<!doctype html>
< html lang = "fr" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Suggestions — Octane< / title >
2026-07-08 14:24:23 +02:00
< script src = "/js/theme-init.js" > < / script >
2026-07-08 11:05:21 +02:00
< link rel = "stylesheet" href = "/css/style.css" >
< / head >
< body >
< header class = "app-header" >
< nav id = "main-nav" > < / nav >
< / header >
< main >
< h1 > Suggestions de morceaux< / h1 >
2026-07-08 11:50:12 +02:00
< p class = "page-subtitle" > Proposez un morceau et votez sur les suggestions des autres — chaque vote est nominatif.< / p >
2026-07-08 11:05:21 +02:00
< div id = "error" > < / div >
2026-07-08 14:46:48 +02:00
< div class = "section-header" >
< h2 style = "margin:0" > Toutes les suggestions< / h2 >
2026-07-09 15:25:46 +02:00
< div class = "view-toggle" >
< button type = "button" class = "view-toggle-btn active" id = "view-toggle-list" > Liste< / button >
< button type = "button" class = "view-toggle-btn" id = "view-toggle-swipe" > Vote rapide< / button >
< / div >
2026-07-08 14:46:48 +02:00
< / div >
2026-07-09 15:25:46 +02:00
< div id = "add-suggestion-panel-wrap" >
< div class = "section-header" >
< div > < / div >
< button type = "button" class = "secondary" id = "toggle-add-suggestion" > + Proposer un morceau< / button >
< / div >
< div class = "panel" id = "add-suggestion-panel" style = "display:none" >
< form id = "add-suggestion-form" class = "stacked-form" >
< div class = "autocomplete-wrapper" >
< label > Titre
< input name = "title" id = "suggestion-title-input" autocomplete = "off" required >
< / label >
< div class = "autocomplete-dropdown" id = "suggestion-title-dropdown" style = "display:none" > < / div >
< / div >
< label > Artiste < input name = "artist" id = "suggestion-artist-input" > < / label >
< label > Lien YouTube < input name = "youtubeUrl" id = "suggestion-youtube-input" type = "url" required placeholder = "https://youtube.com/watch?v=..." > < / label >
< label > Lien Spotify < input name = "spotifyUrl" id = "suggestion-spotify-input" type = "url" placeholder = "https://open.spotify.com/track/..." > < / label >
< label > Note / détails < textarea name = "description" placeholder = "Pourquoi ce morceau, difficulté, arrangement envisagé..." > < / textarea > < / label >
< p class = "note" id = "suggestion-link-status" > < / p >
< button type = "submit" > Proposer< / button >
< / form >
< / div >
2026-07-08 11:50:12 +02:00
< / div >
2026-07-08 11:05:21 +02:00
2026-07-08 11:50:12 +02:00
< div id = "suggestions-list" class = "card-grid" > < / div >
2026-07-09 15:25:46 +02:00
< div id = "swipe-view" style = "display:none" >
< div class = "swipe-header" >
< span id = "swipe-counter" > < / span >
< button type = "button" class = "secondary icon-btn" id = "open-votes-modal" > Voir mes votes< / button >
< / div >
< div class = "swipe-stack" id = "swipe-stack" > < / div >
< div class = "swipe-controls" >
< button type = "button" class = "swipe-btn reject" id = "swipe-reject-btn" title = "Rejeter" > ✘ < / button >
< button type = "button" class = "swipe-btn approve" id = "swipe-approve-btn" title = "Approuver" > ✔ < / button >
< / div >
< p class = "empty" id = "swipe-empty" style = "display:none" > Tout est voté ! < button type = "button" class = "secondary icon-btn" id = "swipe-empty-review-btn" > Voir mes votes< / button > < / p >
< / div >
< div class = "modal-overlay hidden" id = "votes-modal-overlay" >
< div class = "modal card modal-wide" >
< button type = "button" class = "modal-close icon-btn secondary" id = "votes-modal-close" > × < / button >
< h2 style = "margin-top:0" > Mes votes< / h2 >
< div id = "votes-modal-list" > < / div >
< / div >
< / div >
2026-07-08 11:05:21 +02:00
< / main >
< script src = "/js/api.js" > < / script >
< script src = "/js/render.js" > < / script >
< script src = "/js/nav.js" > < / script >
2026-07-08 15:27:34 +02:00
< script src = "/js/autocomplete.js" > < / script >
2026-07-08 11:05:21 +02:00
< script src = "/js/suggestions.js" > < / script >
< / body >
< / html >
