diff --git a/src/game.rs b/src/game.rs index 811f0e0..aaceeac 100644 --- a/src/game.rs +++ b/src/game.rs @@ -27,9 +27,18 @@ async fn index(State(backend): State>, cookies: CookieJar) -> Respo p { mark { "TODO: Show optional SUCC message" } } + + form { + fieldset role="group" { + input name="name" placeholder="Replace Name" aria-label="Name"; + input type="submit" value="Save"; + } + } + p { mark { "TODO: Show optional REGISTER-NAME message" } } + p { "You have found " (sightings.len()) "/" (amount_total_cameras) " cameras." } p { h2 { "Highscore" } @@ -37,8 +46,8 @@ async fn index(State(backend): State>, cookies: CookieJar) -> Respo @for rank in highscore { li.card { span { - span.font-headline.rank { - (rank.rank) + span.font-headline.rank.text-muted { + (rank.rank)"." } @if rank.uuid == client.uuid { (PreEscaped("")) } @if let Some(name) = rank.name { (name) } @else { @@ -46,8 +55,8 @@ async fn index(State(backend): State>, cookies: CookieJar) -> Respo (get_name_by_uuid(&rank.uuid))} @if rank.uuid == client.uuid { (PreEscaped("")) } } - span { - (rank.amount) + span.font-headline.cam { + (rank.amount)(PreEscaped(" "))"📸" } } } diff --git a/src/page.rs b/src/page.rs index bd81237..7b776a1 100644 --- a/src/page.rs +++ b/src/page.rs @@ -1,5 +1,7 @@ use maud::{html, Markup, DOCTYPE}; +// TODO: set dynamic meta lang attribute + pub fn new(content: Markup) -> Markup { html! { (DOCTYPE) @@ -8,6 +10,9 @@ pub fn new(content: Markup) -> Markup { meta name="viewport" content="width=device-width, initial-scale=1.0"; link rel="stylesheet" href="/static/pico.min.css"; link rel="stylesheet" href="/static/style.css"; + title { + "Digital Shadows" + } } body { header.container { @@ -30,7 +35,7 @@ pub fn new(content: Markup) -> Markup { } } } - li { span id="theme_switcher" style="width: 20px; height: 20px;" {} } + li { span id="theme_switcher" {} } } } } diff --git a/static/serve/style.css b/static/serve/style.css index 501c3b4..f583c49 100644 --- a/static/serve/style.css +++ b/static/serve/style.css @@ -24,10 +24,14 @@ h1 { } .rank { - font-size: clamp(2rem, 1.875rem + 2vw, 3rem); + font-size: clamp(2rem, 1.875rem + 2vw, 2.5rem); margin-right: 1rem; } +.cam { + font-size: 1.3rem; +} + ul.iterated { padding-left: unset; } @@ -40,10 +44,16 @@ ul.iterated > li { border-bottom: 3px solid white; } -ul.iterated > li:nth-of-type(even) { +:host(:not([data-theme=dark])), :root:not([data-theme=dark]), [data-theme=light] ul.iterated > li { + border-bottom: 3px solid black; } -ul.iterated > li:nth-of-type(odd) { + +/* Header */ +#theme_switcher { + width: 20px; + height: 20px; + display: inline-block; } header a {