removed remainder of old personal dashboard code. fixed big lighthouse issues.

This commit is contained in:
jude
2022-04-07 21:41:24 +01:00
parent 85d27c5bba
commit 0f05018cab
12 changed files with 593 additions and 389 deletions

View File

@ -6,6 +6,7 @@
<meta charset="UTF-8">
<meta name="yandex-verification" content="bb77b8681eb64a90"/>
<meta name="google-site-verification" content="7h7UVTeEe0AOzHiH3cFtsqMULYGN-zCZdMT_YCkW1Ho"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *; font-src fonts.gstatic.com 'self'">
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180"
@ -27,10 +28,7 @@
<link rel="stylesheet" href="/static/css/style.css">
<link rel="stylesheet" href="/static/css/dtsel.css">
<script src="/static/js/iro.js"></script>
<script src="/static/js/dtsel.js"></script>
<script src="/static/js/luxon.min.js"></script>
</head>
<body>
<nav class="navbar is-spaced is-size-4 is-hidden-desktop dashboard-navbar" role="navigation"
@ -54,10 +52,10 @@
</div>
</nav>
<div id="loader" class="is-hidden hero is-fullheight" style="position: fixed; background-color: rgba(255, 255, 255, 0.8); width: 100vw; z-index: 999;">
<div id="loader" class="is-hidden hero is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<p class="title" style="font-size: 6rem; color: #8fb677">
<p class="title">
<i class="fas fa-cog fa-spin"></i>
</p>
<p class="subtitle">
@ -68,7 +66,7 @@
</div>
<!-- dead image used to check which other images are dead -->
<img style="display: none;" src="" id="dead">
<img src="" id="dead">
<div class="notification is-danger flash-message" id="errors">
<span class="icon"><i class="far fa-exclamation-circle"></i></span> <span class="error-message"></span>
@ -100,7 +98,7 @@
<button class="delete close-modal" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div style="display: flex; justify-content: center">
<div class="colorpicker-container">
<div id="colorpicker"></div>
</div>
<input class="input" id="colorInput">
@ -140,6 +138,33 @@
<button class="modal-close is-large close-modal" aria-label="close"></button>
</div>
<div class="modal" id="chooseTemplateModal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<label class="modal-card-title" for="urlInput">Load Template</label>
<button class="delete close-modal" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div class="control has-icons-left">
<div class="select is-fullwidth">
<select id="templateSelect">
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-file-spreadsheet"></i>
</div>
</div>
<br>
<div class="has-text-centered">
<button class="button is-success close-modal" id="load-template">Load Template</button>
<button class="button is-danger" id="delete-template">Delete</button>
</div>
</section>
</div>
<button class="modal-close is-large close-modal" aria-label="close"></button>
</div>
<div class="modal" id="dataManagerModal">
<div class="modal-background"></div>
<div class="modal-card">
@ -179,7 +204,7 @@
</div>
<div class="columns is-gapless dashboard-frame">
<div class="column is-2 is-sidebar-menu dashboard-sidebar is-hidden-touch" style="display: flex; flex-direction: column;">
<div class="column is-2 is-sidebar-menu dashboard-sidebar is-hidden-touch">
<a href="/">
<div class="brand">
<img src="/static/img/logo_flat.webp" alt="Reminder bot logo"
@ -192,14 +217,14 @@
d="M0,192L60,170.7C120,149,240,107,360,96C480,85,600,107,720,138.7C840,171,960,213,1080,197.3C1200,181,1320,107,1380,69.3L1440,32L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"></path>
</g>
</svg>
<aside class="menu" style="display: flex; flex-direction: column; flex-grow: 1;">
<aside class="menu">
<p class="menu-label">
Servers
</p>
<ul class="menu-list guildList">
</ul>
<div class="aside-footer" style="position: fixed; bottom: 0; width: 226px;">
<div class="aside-footer">
<p class="menu-label">
Settings
</p>
@ -230,14 +255,14 @@
d="M0,192L60,170.7C120,149,240,107,360,96C480,85,600,107,720,138.7C840,171,960,213,1080,197.3C1200,181,1320,107,1380,69.3L1440,32L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"></path>
</g>
</svg>
<aside class="menu" style="display: flex; flex-direction: column; flex-grow: 1;">
<aside class="menu">
<p class="menu-label">
Servers
</p>
<ul class="menu-list guildList">
</ul>
<div class="aside-footer" style="margin-top: auto;">
<div class="aside-footer">
<p class="menu-label">
Settings
</p>
@ -257,17 +282,14 @@
<!-- main content -->
<div class="column is-main-content">
<p class="title pageTitle" style="margin-left: 12px;"></p>
<p class="title pageTitle"></p>
<section id="welcome">
<div class="has-text-centered" style="height: 100%; padding-top: 30vh;">
<div class="has-text-centered">
<p class="title">Welcome!</p>
<p class="subtitle is-hidden-touch">Select an option from the side to get started</p>
<p class="subtitle is-hidden-desktop">Press the <span class="icon"><i class="fal fa-bars"></i></span> to get started</p>
</div>
</section>
<section id="personal" class="is-hidden">
{% include "reminder_dashboard/reminder_dashboard_personal" %}
</section>
<section id="guild" class="is-hidden">
{% include "reminder_dashboard/reminder_dashboard" %}
</section>
@ -294,20 +316,26 @@
<template id="embedFieldTemplate">
<div data-inlined="1" class="embed-field-box">
<label class="is-sr-only" for="embedFieldTitle">Field Title</label>
<div style="display: flex;">
<textarea class="discord-field-title field-input message-input autoresize"
placeholder="Field Title..." rows="1"
maxlength="256" id="embedFieldTitle" name="embed_field_title[]"></textarea>
<button class="button is-small inline-btn" style="height: 100%; padding: 5px;"><i class="fas fa-arrows-h"></i></button>
<div class="is-flex">
<label>
<span class="is-sr-only">Field Title</span>
<textarea class="discord-field-title field-input message-input autoresize"
placeholder="Field Title..." rows="1"
maxlength="256" name="embed_field_title[]"></textarea>
</label>
<button class="button is-small inline-btn">
<span class="is-sr-only">Toggle field inline</span><i class="fas fa-arrows-h"></i>
</button>
</div>
<label class="is-sr-only" for="embedFieldValue">Field Value</label>
<textarea
class="discord-field-value field-input message-input autoresize"
placeholder="Field Value..."
maxlength="1024" id="embedFieldValue" name="embed_field_value[]"
rows="1"></textarea>
<label>
<span class="is-sr-only">Field Value</span>
<textarea
class="discord-field-value field-input message-input autoresize"
placeholder="Field Value..."
maxlength="1024" name="embed_field_value[]"
rows="1"></textarea>
</label>
</div>
</template>
@ -323,13 +351,12 @@
{% include "reminder_dashboard/guild_reminder" %}
</template>
<template id="personalReminder">
{% include "reminder_dashboard/personal_reminder" %}
</template>
<script src="/static/js/iro.js"></script>
<script src="/static/js/dtsel.js"></script>
<script src="/static/js/interval.js"></script>
<script src="/static/js/timezone.js"></script>
<script src="/static/js/main.js"></script>
<script src="/static/js/timezone.js" defer></script>
<script src="/static/js/main.js" defer></script>
</body>
</html>

View File

@ -4,33 +4,33 @@
<figure class="media-left">
<p class="image is-32x32 customizable">
<a>
<img class="is-rounded discord-avatar" src="/static/img/bg.webp">
<img class="is-rounded discord-avatar" src="/static/img/bg.webp" alt="Image for discord avatar">
</a>
</p>
</figure>
<div class="media-content">
<div class="content">
<div class="discord-message-header">
<label class="is-sr-only" for="reminderUsername">Username Override</label>
<label class="is-sr-only">Username Override</label>
<input class="discord-username message-input" placeholder="Username Override"
maxlength="32" id="reminderUsername" name="username">
maxlength="32" name="username">
</div>
<label class="is-sr-only" for="messageContent">Message</label>
<label class="is-sr-only">Message</label>
<textarea class="message-input autoresize discord-content"
placeholder="Message Content..."
maxlength="2000" id="messageContent" name="content" rows="1"></textarea>
maxlength="2000" name="content" rows="1"></textarea>
<div class="discord-embed">
<div class="embed-body">
<button class="change-color button is-rounded is-small">
<i class="fas fa-eye-dropper"></i>
<span class="is-sr-only">Choose embed color</span><i class="fas fa-eye-dropper"></i>
</button>
<div class="a">
<div class="embed-author-box">
<div class="a">
<p class="image is-24x24 customizable">
<a>
<img class="is-rounded embed_author_url" src="/static/img/bg.webp">
<img class="is-rounded embed_author_url" src="/static/img/bg.webp" alt="Image for embed author">
</a>
</p>
</div>
@ -38,40 +38,42 @@
<div class="b">
<label class="is-sr-only" for="embedAuthor">Embed Author</label>
<textarea
class="discord-embed-author message-input autoresize"
class="discord-embed-author message-input autoresize"
placeholder="Embed Author..." rows="1" maxlength="256"
id="embedAuthor" name="embed_author"></textarea>
name="embed_author"></textarea>
</div>
</div>
<label class="is-sr-only" for="embedTitle">Embed Title</label>
<textarea class="discord-title message-input autoresize"
placeholder="Embed Title..."
maxlength="256" id="embedTitle" rows="1"
maxlength="256" rows="1"
name="embed_title"></textarea>
<br>
<label class="is-sr-only" for="embedDescription">Embed Description</label>
<textarea class="discord-description message-input autoresize "
placeholder="Embed Description..."
maxlength="4096" id="embedDescription" name="embed_description"
maxlength="4096" name="embed_description"
rows="1"></textarea>
<br>
<div class="embed-multifield-box">
<div data-inlined="1" class="embed-field-box">
<label class="is-sr-only" for="embedFieldTitle">Field Title</label>
<div style="display: flex;">
<div class="is-flex">
<textarea class="discord-field-title field-input message-input autoresize"
placeholder="Field Title..." rows="1"
maxlength="256" id="embedFieldTitle" name="embed_field_title[]"></textarea>
<button class="button is-small inline-btn" style="height: 100%; padding: 5px;"><i class="fas fa-arrows-h"></i></button>
maxlength="256" name="embed_field_title[]"></textarea>
<button class="button is-small inline-btn">
<span class="is-sr-only">Toggle field inline</span><i class="fas fa-arrows-h"></i>
</button>
</div>
<label class="is-sr-only" for="embedFieldValue">Field Value</label>
<textarea
class="discord-field-value field-input message-input autoresize "
placeholder="Field Value..."
maxlength="1024" id="embedFieldValue" name="embed_field_value[]"
maxlength="1024" name="embed_field_value[]"
rows="1"></textarea>
</div>
</div>
@ -102,7 +104,7 @@
<label class="is-sr-only" for="embedFooter">Embed Footer text</label>
<textarea class="discord-embed-footer message-input autoresize "
placeholder="Embed Footer..."
maxlength="2048" id="embedFooter" name="embed_footer" rows="1"></textarea>
maxlength="2048" name="embed_footer" rows="1"></textarea>
</div>
</div>
</div>
@ -121,7 +123,7 @@
</div>
<div class="column is-narrow">
<button class="button is-rounded hide-box">
<i class="fas fa-chevron-down"></i>
<span class="is-sr-only">Hide reminder</span><i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
@ -132,20 +134,21 @@
</div>
<div class="control has-icons-left">
<div class="select">
<select id="channelOption" name="channel" class="channel-selector">
<select name="channel" class="channel-selector">
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-hashtag"></i>
</div>
</div>
</div>
<div class="collapses">
<div class="field">
<label class="label">Time</label>
<div class="control">
<input class="input" type="datetime-local" step="1" name="time">
<label class="label">
Time
<input class="input" type="datetime-local" step="1" name="time">
</label>
</div>
</div>
@ -154,13 +157,28 @@
<div class="control intervalSelector">
<div class="input interval-group">
<div class="interval-group-left">
<input class="w2" type="text" pattern="\d*" name="interval_months" maxlength="2" placeholder=""> <span style="width: 0.5rem"></span> months, <span style="width: 0.5rem"></span>
<input class="w3" type="text" pattern="\d*" name="interval_days" maxlength="4" placeholder=""> <span style="width: 0.5rem"></span> days, <span style="width: 0.5rem"></span>
<input class="w2" type="text" pattern="\d*" name="interval_hours" maxlength="2" placeholder="HH">:
<input class="w2" type="text" pattern="\d*" name="interval_minutes" maxlength="2" placeholder="MM">:
<input class="w2" type="text" pattern="\d*" name="interval_seconds" maxlength="2" placeholder="SS">
<label>
<span class="is-sr-only">Interval months</span>
<input class="w2" type="text" pattern="\d*" name="interval_months" maxlength="2" placeholder=""> <span class="half-rem"></span> months, <span class="half-rem"></span>
</label>
<label>
<span class="is-sr-only">Interval days</span>
<input class="w3" type="text" pattern="\d*" name="interval_days" maxlength="4" placeholder=""> <span class="half-rem"></span> days, <span class="half-rem"></span>
</label>
<label>
<span class="is-sr-only">Interval hours</span>
<input class="w2" type="text" pattern="\d*" name="interval_hours" maxlength="2" placeholder="HH">:
</label>
<label>
<span class="is-sr-only">Interval minutes</span>
<input class="w2" type="text" pattern="\d*" name="interval_minutes" maxlength="2" placeholder="MM">:
</label>
<label>
<span class="is-sr-only">Interval seconds</span>
<input class="w2" type="text" pattern="\d*" name="interval_seconds" maxlength="2" placeholder="SS">
</label>
</div>
<button class="clear"><span class="icon"><i class="fas fa-trash"></i></span></button>
<button class="clear"><span class="is-sr-only">Clear interval</span><span class="icon"><i class="fas fa-trash"></i></span></button>
</div>
</div>
</div>
@ -193,13 +211,13 @@
</div>
</div>
<span style="width: 12px;"></span>
<span class="pad-left"></span>
{% if creating %}
<button class="button is-outlined">
<button class="button is-outlined show-modal" data-modal="chooseTemplateModal">
Load Template
</button>
<button class="button is-success is-outlined" id="createTemplate">
Create Template
<span>Create Template</span> <span class="icon"><i class="fas fa-file-spreadsheet"></i></span>
</button>
<button class="button is-success" id="createReminder">
<span>Create Reminder</span> <span class="icon"><i class="fas fa-sparkles"></i></span>
@ -209,6 +227,7 @@
<span>Save</span> <span class="icon"><i class="fas fa-save"></i></span>
</button>
<button class="button is-warning disable-enable">
<span class="is-sr-only">Text content filled by CSS</span>
</button>
<button class="button is-danger delete-reminder">
Delete

View File

@ -1,186 +0,0 @@
<div class="discord-frame">
<article class="media">
<figure class="media-left">
<p class="image is-32x32">
<img class="is-rounded" src="/static/img/icon.png" alt="reminder bot icon">
</p>
</figure>
<div class="media-content">
<div class="content">
<div class="is-hidden-touch">
<div class="discord-message-header">
Reminder Bot -
<label class="is-sr-only" for="reminderDate">Reminder Date</label>
<input class="time-input date" placeholder="YYYY/MM/DD"
id="reminderDate" name="date">
<label class="is-sr-only" for="reminderTime">Reminder Time</label>
<input class="time-input time" placeholder="HH:MM:SS"
id="reminderTime" name="time">
</div>
</div>
<div class="is-hidden-desktop">
<label class="is-sr-only" for="reminderDate">Reminder Date</label>
<input class="time-input date" placeholder="YYYY/MM/DD"
id="reminderDate" name="date">
<label class="is-sr-only" for="reminderTime">Reminder Time</label>
<input class="time-input time" placeholder="HH:MM:SS"
id="reminderTime" name="time">
<div class="discord-message-header">
Reminder Bot
</div>
</div>
<label class="is-sr-only" for="messageContent">Message</label>
<textarea class="message-input autoresize discord-content preview-mode"
placeholder="Message Content..."
maxlength="2000" id="messageContent" name="content" rows="1"></textarea>
<div class="discord-embed">
<div class="embed-body">
<div class="a">
<div class="embed-author-box">
<div class="a">
<p class="image is-24x24 customizable">
<a>
<img class="is-rounded preview-mode" src="">
</a>
</p>
</div>
<div class="b">
<label class="is-sr-only" for="embedAuthor">Embed Author</label>
<textarea
class="discord-embed-author message-input preview-mode autoresize"
placeholder="Embed Author..." rows="1" maxlength="256"
id="embedAuthor" name="embed_author"></textarea>
</div>
</div>
<label class="is-sr-only" for="embedTitle">Embed Title</label>
<textarea class="discord-title message-input preview-mode autoresize"
placeholder="Embed Title..."
maxlength="256" id="embedTitle" rows="1"
name="embed_title"></textarea>
<br>
<label class="is-sr-only" for="embedDescription">Embed Description</label>
<textarea class="discord-description message-input autoresize preview-mode"
placeholder="Embed Description..."
maxlength="2048" id="embedDescription" name="embed_description"
rows="1"></textarea>
<br>
<div class="embed-multifield-box">
<div class="embed-field-box">
<label class="is-sr-only" for="embedFieldTitle">Field Title</label>
<textarea
class="discord-field-title field-input message-input autoresize preview-mode"
placeholder="Field Title..." rows="1"
maxlength="256" id="embedFieldTitle"
name="embed_field_title[]"></textarea>
<label class="is-sr-only" for="embedFieldValue">Field Value</label>
<textarea
class="discord-field-value field-input message-input autoresize preview-mode"
placeholder="Field Value..."
maxlength="1024" id="embedFieldValue" name="embed_field_value[]"
rows="1"></textarea>
</div>
</div>
</div>
<div class="b">
<p class="image thumbnail customizable">
<a>
<img class="preview-mode" src="">
</a>
</p>
</div>
</div>
<p class="image is-400x300 customizable">
<a>
<img class="preview-mode" src="">
</a>
</p>
<div class="embed-footer-box">
<p class="image is-20x20 customizable">
<a>
<img class="is-rounded preview-mode" src="">
</a>
</p>
<label class="is-sr-only" for="embedAuthor">Embed Author</label>
<textarea class="discord-embed-footer message-input autoresize preview-mode"
placeholder="Embed Footer..."
maxlength="2048" id="embedAuthor" name="embed_author" rows="1"></textarea>
</div>
</div>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item icon-toggle tts-toggle" title="Enable TTS">
<p>
TTS <span class="icon is-small"><i class="far fa-comment-lines"></i></span>
</p>
</a>
<a class="level-item icon-toggle autopin-toggle" title="Enable Autopin">
<p>
Pin <span class="icon is-small"><i class="far fa-thumbtack"></i></span>
</p>
</a>
<span style="width: 12px;"></span>
<a class="level-item set-color">
<p>
Set Embed Color <span class="icon is-small"><i
class="far fa-eye-dropper"></i></span>
</p>
</a>
<a class="level-item file-upload">
<div class="file">
<input class="file-input" type="file" name="attachment">
<p>
Attach File
<span class="icon is-small">
<i class="far fa-file-upload"></i>
</span>
</p>
</div>
</a>
<a class="level-item set-interval">
<p>
Set Interval <span class="icon is-small"><i class="far fa-repeat"></i></span>
</p>
</a>
<span style="width: 12px;"></span>
<a class="level-item preview-toggle" title="Preview Message">
<p>
Preview Mode <span class="icon is-small"><i class="far fa-eye"></i></span>
</p>
</a>
</div>
</nav>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item create-reminder" title="Create Reminder">
<p>
Create <span class="icon is-small"><i class="far fa-calendar-plus"></i></span>
</p>
</a>
<a class="level-item icon-toggle disable-reminder" title="Disable/enable Reminder">
<p>
Disable <span class="icon is-small"><i class="far fa-comment-slash"></i></span>
</p>
</a>
<a class="level-item delete-reminder" title="Delete Reminder">
<p>
Delete <span class="icon is-small"><i class="far fa-trash"></i></span>
</p>
</a>
</div>
</nav>
</div>
</article>
</div>

View File

@ -1,52 +1,50 @@
<div style="margin: 0 12px 12px 12px;">
<div class="create-reminder">
<strong>Create Reminder</strong>
<div id="reminderCreator">
{% set creating = true %}
{% include "reminder_dashboard/guild_reminder" %}
{% set creating = false %}
</div>
<br>
<div class="create-reminder">
<strong>Create Reminder</strong>
<div id="reminderCreator">
{% set creating = true %}
{% include "reminder_dashboard/guild_reminder" %}
{% set creating = false %}
</div>
<br>
<div class="field">
<div class="columns is-mobile">
<div class="column">
<strong>Reminders</strong>
</div>
<div class="column is-narrow">
<div class="control has-icons-left">
<div class="select is-small">
<select id="orderBy">
<option value="time" selected>Time</option>
<option value="name">Name</option>
<option value="channel">Channel</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-sort-amount-down"></i>
</div>
<div class="field">
<div class="columns is-mobile">
<div class="column">
<strong>Reminders</strong>
</div>
<div class="column is-narrow">
<div class="control has-icons-left">
<div class="select is-small">
<select id="orderBy">
<option value="time" selected>Time</option>
<option value="name">Name</option>
<option value="channel">Channel</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-sort-amount-down"></i>
</div>
</div>
<div class="column is-narrow">
<div class="control has-icons-left">
<div class="select is-small">
<select id="expandAll" style="width: 60px">
<option value="" selected></option>
<option value="expand">Expand All</option>
<option value="collapse">Collapse All</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-expand-arrows"></i>
</div>
</div>
<div class="column is-narrow">
<div class="control has-icons-left">
<div class="select is-small">
<select id="expandAll">
<option value="" selected></option>
<option value="expand">Expand All</option>
<option value="collapse">Collapse All</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-expand-arrows"></i>
</div>
</div>
</div>
</div>
</div>
<div id="guildReminders">
<div id="guildReminders">
</div>
</div>
</div>

View File

@ -1,23 +0,0 @@
<div style="margin: 0 12px 12px 12px;">
<div class="create-reminder">
<p>
<strong>Message Designer</strong>
</p>
{% include "reminder_dashboard/personal_reminder" %}
<p style="font-size: 0.8rem;">
Most fields are optional. Use 'Preview Mode' to see how the reminder will appear in Discord.
Scaling is not exact.
</p>
<div class="field">
<p class="control">
<a class="button is-success">
Create
</a>
</p>
</div>
</div>
<div id="personalReminders">
</div>
</div>