diff options
Diffstat (limited to 'index.templ')
| -rw-r--r-- | index.templ | 66 |
1 files changed, 64 insertions, 2 deletions
diff --git a/index.templ b/index.templ index 5da5272..b0faf2d 100644 --- a/index.templ +++ b/index.templ @@ -18,7 +18,7 @@ templ index(ps []Post) { <body> <div id="container"> <div id="header"> - <h2>Tinygram</h2> + <a id="uploadlink" href="/upload"><h2>Tinygram</h2></a> </div> <div id="posts"> @posts(ps) @@ -28,10 +28,72 @@ templ index(ps []Post) { </html> } +templ loginPage(csrfToken string) { + <!DOCTYPE html> + <html> + <head> + <meta charset="utf-8"/> + <meta http-equiv="X-UA-Compatible" content="IE=edge"/> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> + <script src="/static/htmx.min.js"></script> + <link rel="preload" href="/static/style.css" as="style"/> + <link rel="stylesheet" href="/static/style.css"/> + </head> + <body> + <form + class="login" + hx-encoding="multipart/form-data" + hx-post="/login" + > + <input type="password" name="password"/> + <input type="hidden" name="_csrf" value={ csrfToken }/> + <button> + Login + </button> + </form> + </body> + </html> +} + +templ uploadPage(csrfToken string) { + <!DOCTYPE html> + <html> + <head> + <meta charset="utf-8"/> + <meta http-equiv="X-UA-Compatible" content="IE=edge"/> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> + <script src="/static/htmx.min.js"></script> + <link rel="preload" href="/static/style.css" as="style"/> + <link rel="stylesheet" href="/static/style.css"/> + </head> + <body> + <form + class="upload" + hx-encoding="multipart/form-data" + hx-post="/upload" + _="on htmx:xhr:progress(loaded, total) set #progress.value to (loaded/total)*100" + > + <input type="file" name="file" accept="image/png, image/jpeg"/> + <input type="hidden" name="_csrf" value={ csrfToken }/> + <div> + <span>Description:</span> + <input type="text" name="description"/> + </div> + <button> + Upload + </button> + <progress id="progress" value="0" max="100"></progress> + </form> + </body> + </html> +} + templ posts(posts []Post) { for _, post := range posts { <div class="post"> - <img src="/static/firstpost.png" alt={ post.ImageID }/> + <div class="imgcontainer"> + <img src={ post.ImageID } alt={ post.ImageID }/> + </div> <div class="summary"> <p class="description">{ post.Description }</p> <p class="date">{ post.CreatedAt.Format("2006-01-02 - 15:04") }</p> |