Jeffrey Hardy
43 lines
2.4 KiB
Plaintext
43 lines
2.4 KiB
Plaintext
<% @page_title = "Sign in" %>
|
|
|
|
<div class="panel shadow center margin-block-double <%= "shake" if flash[:alert] %>" style="--panel-size: 55ch;">
|
|
<div class="bubble center" style="--bubble-color: var(--color-ink); --bubble-rotate: 90deg; --bubble-size: 12cqi;">
|
|
<svg class="bubble__svg" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg" style="stroke-width: 1.7em;">
|
|
<path d="m0 0h990v990h-990z" fill="none" stroke="none" />
|
|
<path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/>
|
|
</svg>
|
|
<span class="bubble__bubble bubble__meta bubble__date" style="border-width: 0.5em;"></span>
|
|
<span class="bubble__bubble bubble__meta bubble__tag" style="border-width: 0.5em;"> </span>
|
|
<span class="bubble__bubble bubble__meta bubble__tag" style="border-width: 0.5em;"> </span>
|
|
</div>
|
|
|
|
<h1 class="margin-block-start-half margin-block-end-double">Fizzy</h1>
|
|
|
|
<%= form_with url: session_path, class: "flex flex-column gap txt-large" do |form| %>
|
|
<div class="flex align-center gap">
|
|
<%= translation_button :email_address %>
|
|
<label class="flex align-center gap input input--actor">
|
|
<%= form.email_field :email_address, required: true, class: "input full-width", autofocus: true, autocomplete: "username", placeholder: "Enter your email address" %>
|
|
<%= image_tag "email.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex align-center gap">
|
|
<%= translation_button :password %>
|
|
<label class="flex align-center gap input input--actor">
|
|
<%= form.password_field :password, required: true, class: "input full-width", autocomplete: "current-password", placeholder: "Enter your password", maxlength: 72 %>
|
|
<%= image_tag "password.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" id="log_in" class="btn btn--reversed center">
|
|
<%= image_tag "arrow-right.svg", aria: { hidden: true }, size: 24 %>
|
|
<span class="for-screen-reader">Sign in</span>
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
|
|
<% content_for :footer do %>
|
|
<div class="txt-align-center center margin-block-double txt-subtle">Fizzy™ version 0</div>
|
|
<% end %>
|