Heavily customized version of smokesignal - https://whtwnd.com/kayrozen.com/3lpwe4ymowg2t
kayrozen.com
1<div class="modal" id="create-list-modal">
2 <div class="modal-background"></div>
3 <div class="modal-card">
4 <header class="modal-card-head">
5 <p class="modal-card-title">{{ t("create-bookmark-list") }}</p>
6 <button class="delete" onclick="closeListModal()"></button>
7 </header>
8 <section class="modal-card-body">
9 <form id="create-list-form">
10 <div class="field">
11 <label class="label">{{ t("list-name") }}</label>
12 <div class="control">
13 <input class="input" type="text" name="name"
14 placeholder="{{ t('list-name-placeholder') }}" required>
15 </div>
16 <p class="help">{{ t("list-name-help") }}</p>
17 </div>
18
19 <div class="field">
20 <label class="label">{{ t("list-tags") }}</label>
21 <div class="control">
22 <div class="tags-input-container">
23 <div id="selected-list-tags" class="tags-display"></div>
24 <input class="input" type="text" id="new-list-tag-input"
25 placeholder="{{ t('add-tag-placeholder') }}"
26 onkeypress="handleListTagInput(event)">
27 </div>
28 </div>
29 <p class="help">{{ t("list-tags-help") }}</p>
30 </div>
31
32 <div class="field">
33 <label class="label">{{ t("list-description") }}</label>
34 <div class="control">
35 <textarea class="textarea" name="description"
36 placeholder="{{ t('list-description-placeholder') }}"></textarea>
37 </div>
38 </div>
39
40 <div class="field">
41 <div class="control">
42 <label class="checkbox">
43 <input type="checkbox" name="is_public">
44 {{ t("make-calendar-public") }}
45 </label>
46 </div>
47 <p class="help">{{ t("public-calendar-help") }}</p>
48 <div class="notification is-info is-light">
49 <p class="is-size-7">
50 <strong>{{ t("atproto-privacy-notice") }}</strong><br>
51 {{ t("atproto-privacy-explanation") }}
52 </p>
53 </div>
54 </div>
55 </form>
56 </section>
57 <footer class="modal-card-foot">
58 <button class="button is-primary" onclick="submitListForm()">
59 {{ t("create-list") }}
60 </button>
61 <button class="button" onclick="closeListModal()">
62 {{ t("cancel") }}
63 </button>
64 </footer>
65 </div>
66</div>