HMC_Host_Dashboard/templates/index.html

80 lines
3.1 KiB
HTML

{{ block "index" . }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>First page</title>
<script src="https://unpkg.com/htmx.org@latest"></script>
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="icon" type="image/x-icon" href="static/favicon.ico">
<link rel="stylesheet" type="text/css" href="static/css/site.css" />
</head>
<body>
<div class="main-container">
<div class="content">
<h1> This is an input </h1>
<div class="row">
<div class="column" stye="align-items: center">
<textarea name="email_input" id="email_input"
style="resize: none; width: 100%; height: 639px; padding: 6px 10px; border-radius: 4px; font-family: inter; font-size: 1em;"
hx-trigger="keyup changed delay:1000ms" hx-post="/mail-content" hx-target="#email-preview"
placeholder="Type out your email here..."></textarea>
<br>
<div class="row" style="justify-content: space-around;">
<button hx-post="/send_email" hx-include="[id='email_input']" hx-vals='{"destination": "test"}'
hx-swap="none">
Send Test Email
</button>
<button hx-post="/send_email" hx-include="[id='email_input']"
hx-vals='{"destination": "mailing_list"}'
hx-confirm="You are about to send an email to your entire mailing list. Are you sure?"
hx-swap="none">
Send Email
</button>
</div>
</div>
<div class="column">
<div id="email-preview" style="display: flex; flex-direction: column; align-items: center;"></div>
</div>
</div>
<div class="row" style="align-items: center; justify-content: space-between;">
<div class="column">
<h1>Current Mailing List Subscribers</h1>
</div>
<div class="column">
<button hx-get="/mailing_list" hx-target="#mailing_list">Refresh Mailing List</button>
</div>
</div>
<div class="card" hx-trigger="load" hx-get="/mailing_list" id="mailing_list"></div>
</div>
</div>
</body>
</html>
{{ end }}
{{ block "mailing_list" . }}
<ul style="columns: 2;">
{{ range . }}
<li><a href="mailto:{{ . }}"> {{ . }} </a></li>
{{end}}
</ul>
{{end}}
{{ block "mail_content" . }}
<div style="display: flex; flex-direction: row; width: 100%; padding-left: 4px;">
<div>Subject: </div>
<div style="padding-left: 5%;">{{ . }}</div>
</div>
<br>
<iframe src="/static/preview.html" style="width: 600px; height: 600px; border-radius: 4px;"
title="Email Preivew"></iframe>
{{ end }}