Oak

Check-in [6d07321293]
Login

Check-in [6d07321293]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:feat(ui): Add dark mode
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: 6d07321293594dc56d762dd2589f99aeaeffee24c6346b272b33b3eb73a051bc
User & Date: carlos 2023-09-15 08:45:22
Context
2023-09-15
08:53
fix(ui): Remove flickering on reload check-in: 043b69a803 user: carlos tags: trunk
08:45
feat(ui): Add dark mode check-in: 6d07321293 user: carlos tags: trunk
07:31
chore: Bump bootstrap-icons version check-in: 58a073df4e user: carlos tags: trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to CHANGELOG.md. 

1
2
3
4




5
6
7
8
9
10
11

# Changelog

## [Unreleased](/timeline?p=trunk&bt=v0.3.7)





Changed

* Nostr: When using more relays, latency is used to determine best relay
* Nostr: Improve connection reliability and choice of default relay during NIP-47 Wallet Connect setup

---






>
>
>
>








1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Changelog

## [Unreleased](/timeline?p=trunk&bt=v0.3.7)

Added

* Dark mode

Changed

* Nostr: When using more relays, latency is used to determine best relay
* Nostr: Improve connection reliability and choice of default relay during NIP-47 Wallet Connect setup

---
︙︙

Changes to www/static/css/oak.css. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18




19
20
21
22
23
24
25
26
27
28
29
30
31
32
33




34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

52
53
54

abbr[title] {
    cursor: auto
}

.nav-link .dropdown-toggle {
    border-bottom: none;
}

.nav-scroller > .nav > .nav-link {
    border-bottom: 1px dashed var(--bs-gray-500);
}

.nav-scroller > .nav > a:hover {
    border-bottom: 1px solid gray;
}

.nav-scroller .nav-link.active {
    border-bottom: 1px solid gray;




}

.navbar {
    --bs-navbar-padding-y: 0;
    padding-top: 0.5rem;
}

.navbar-brand {
    --bs-navbar-brand-font-size: 1.5rem;
    padding: 0;
    padding-bottom: 5px;
    margin: 0;
    margin-right: 3rem;
    position: inherit;
}





.nav-scroller .nav-link {
  font-size: .875rem;
  color: #6c757d;
}

.nav-scroller .nav-link:hover {
  color: #007bff;
}


.field-info {
    margin-top: .25rem;
    font-size: .875em;
    color: gray;
}

.oak-page-container {

    padding: 3rem;
    box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.2);
}










|



|



|
>
>
>
>















>
>
>
>



|



|






|



>

|


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

abbr[title] {
    cursor: auto
}

.nav-link .dropdown-toggle {
    border-bottom: none;
}

.nav-scroller > .nav > .nav-link {
    border-bottom: 1px dashed var(--bs-emphasis-color);
}

.nav-scroller > .nav > a:hover {
    border-bottom: 1px solid var(--bs-emphasis-color);
}

.nav-scroller .nav-link.active {
    border-bottom: 1px solid var(--bs-emphasis-color);
}

.nav-tabs {
    --bs-nav-tabs-border-width: 0;
}

.navbar {
    --bs-navbar-padding-y: 0;
    padding-top: 0.5rem;
}

.navbar-brand {
    --bs-navbar-brand-font-size: 1.5rem;
    padding: 0;
    padding-bottom: 5px;
    margin: 0;
    margin-right: 3rem;
    position: inherit;
}

.navbar-nav .nav-link.active {
    color: inherit;
}

.nav-scroller .nav-link {
  font-size: .875rem;
  color: var(--bs-secondary-color);
}

.nav-scroller .nav-link:hover {
  color: var(--bs-text);
}


.field-info {
    margin-top: .25rem;
    font-size: .875em;
    color: var(--bs-secondary-color);
}

.oak-page-container {
    background-color: var(--bs-body-bg);
    padding: 3rem;
    box-shadow: 0px 2px 8px 0 rgb(var(--bs-tertiary-color-rgb), 0.4);
}

Added www/static/js/custom-color-modes.js. 















































































































































































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

/*!
 * Modified version of:
 *
 * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
 */

(() => {
  'use strict'

  const getStoredTheme = () => localStorage.getItem('theme')
  const setStoredTheme = theme => localStorage.setItem('theme', theme)

  const getPreferredTheme = () => {
    const storedTheme = getStoredTheme()
    if (storedTheme) {
      return storedTheme
    }

    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  }

  const setTheme = theme => {
    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      document.documentElement.setAttribute('data-bs-theme', 'dark')
    } else {
      document.documentElement.setAttribute('data-bs-theme', theme)
    }
  }

  setTheme(getPreferredTheme())

  const showActiveTheme = (theme, focus = false) => {
    const themeSwitcher = document.querySelector('#bd-theme')

    if (!themeSwitcher) {
      return
    }

    const themeSwitcherText = document.querySelector('#bd-theme-text')
    const activeThemeIcon = document.querySelector('.theme-icon-active use')
    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
    const svgOfActiveBtn = btnToActive.querySelector('i use').getAttribute('href')

    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
      element.classList.remove('active')
      element.setAttribute('aria-pressed', 'false')
    })

    let activeThemeClass = "bi-" + svgOfActiveBtn.substring(1);
    // console.log(activeThemeIcon);

    btnToActive.classList.add('active')
    btnToActive.setAttribute('aria-pressed', 'true')
    activeThemeIcon.className = 'bi my-1 theme-icon-active'
    activeThemeIcon.classList.add(activeThemeClass)
    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)

    if (focus) {
      themeSwitcher.focus()
    }
  }

  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
    const storedTheme = getStoredTheme()
    if (storedTheme !== 'light' && storedTheme !== 'dark') {
      setTheme(getPreferredTheme())
    }
  })

  window.addEventListener('DOMContentLoaded', () => {
    showActiveTheme(getPreferredTheme())

    document.querySelectorAll('[data-bs-theme-value]')
      .forEach(toggle => {
        toggle.addEventListener('click', () => {
          const theme = toggle.getAttribute('data-bs-theme-value')
          setStoredTheme(theme)
          setTheme(theme)
          showActiveTheme(theme, true)
        })
      })
  })
})()

Changes to www/templates/_base.html.tera. 

1
2
3
4
5
6
7
8
9

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">

    <meta name="lightning" content="lnurlp:carlos@oak-node.net"/>
    <meta property="og:image" content="/oak-logo.svg" />


|








1
2
3
4
5
6
7
8
9

<!doctype html>
<html lang="en" data-bs-theme="auto">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">

    <meta name="lightning" content="lnurlp:carlos@oak-node.net"/>
    <meta property="og:image" content="/oak-logo.svg" />
︙︙
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

    <link href="css/oak.css" rel="stylesheet">

    <!-- JQuery must be loaded early, because part of the templating in onetime is using $() -->
    <script src="js/jquery-3.6.0.min.js"></script>

    <link rel="icon" type="image/svg" href="oak-logo.svg">
  </head>
  <body class="d-flex flex-column min-vh-100">

    {% include "_nav-primary" %}

    <div class="nav-scroller bg-body py-3">

      <nav class="nav nav-links justify-content-center" aria-label="Secondary navigation">

      {% if nav_primary_active == 1 %}
        <a {% if nav_secondary_active == 1 %} class="nav-link active" aria-current="page" {% else %} class="nav-link" {% endif %} href="scheduled-payments-overview.html">Overview</a>
        <a {% if nav_secondary_active == 2 %} class="nav-link active" aria-current="page" {% else %} class="nav-link" {% endif %} href="scheduled-payments-history.html">History</a>
        <a {% if nav_secondary_active == 3 %} class="nav-link active" aria-current="page" {% else %} class="nav-link" {% endif %} href="scheduled-payments-editor.html">Interactive Editor</a>








|



|








17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

    <link href="css/oak.css" rel="stylesheet">

    <!-- JQuery must be loaded early, because part of the templating in onetime is using $() -->
    <script src="js/jquery-3.6.0.min.js"></script>

    <link rel="icon" type="image/svg" href="oak-logo.svg">
  </head>
  <body class="bg-body-secondary d-flex flex-column min-vh-100">

    {% include "_nav-primary" %}

    <div class="nav-scroller bg-body-secondary py-3">

      <nav class="nav nav-links justify-content-center" aria-label="Secondary navigation">

      {% if nav_primary_active == 1 %}
        <a {% if nav_secondary_active == 1 %} class="nav-link active" aria-current="page" {% else %} class="nav-link" {% endif %} href="scheduled-payments-overview.html">Overview</a>
        <a {% if nav_secondary_active == 2 %} class="nav-link active" aria-current="page" {% else %} class="nav-link" {% endif %} href="scheduled-payments-history.html">History</a>
        <a {% if nav_secondary_active == 3 %} class="nav-link active" aria-current="page" {% else %} class="nav-link" {% endif %} href="scheduled-payments-editor.html">Interactive Editor</a>
︙︙
54
55
56
57
58
59
60

61
62
63
64
65
66
67
68
69
70
71
72
73
74






























75
76

    <script src="js/billboard.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/dayjs.min.js"></script>
    <script src="js/dayjs/plugin/duration.js"></script>
    <script src="js/dayjs/plugin/relativeTime.js"></script>
    <script src="js/oak.js"></script>

    {% block page_js %}{% endblock page_js %}


    <div class="container mt-auto">
      <footer class="py-3">
        <ul class="nav justify-content-center">
          <li class="nav-item"><a href="/feedback.html" class="nav-link px-3 text-muted">Send Feedback</a></li>
          <li class="nav-item"><a href="/swagger-ui/" target="_blank" class="nav-link px-3 text-muted">API</a></li>
          <li class="nav-item"><a href="https://oak-node.net/doc/ckout/doc/index.md" target="_blank" class="nav-link px-3 text-muted">Docs</a></li>
          <li class="nav-item"><a href="https://oak-node.net" target="_blank" class="nav-link px-3 text-muted">Code</a></li>
        </ul>
      </footer>
    </div>































  </body>
</html>








>














>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>



54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

    <script src="js/billboard.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/dayjs.min.js"></script>
    <script src="js/dayjs/plugin/duration.js"></script>
    <script src="js/dayjs/plugin/relativeTime.js"></script>
    <script src="js/oak.js"></script>
    <script src="js/custom-color-modes.js"></script>
    {% block page_js %}{% endblock page_js %}


    <div class="container mt-auto">
      <footer class="py-3">
        <ul class="nav justify-content-center">
          <li class="nav-item"><a href="/feedback.html" class="nav-link px-3 text-muted">Send Feedback</a></li>
          <li class="nav-item"><a href="/swagger-ui/" target="_blank" class="nav-link px-3 text-muted">API</a></li>
          <li class="nav-item"><a href="https://oak-node.net/doc/ckout/doc/index.md" target="_blank" class="nav-link px-3 text-muted">Docs</a></li>
          <li class="nav-item"><a href="https://oak-node.net" target="_blank" class="nav-link px-3 text-muted">Code</a></li>
        </ul>
      </footer>
    </div>

    <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
      <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="true" data-bs-toggle="dropdown" aria-label="Toggle theme (dark)">
        <i class="bi my-1 theme-icon-active"><use href="#moon-stars-fill"></use></i>
        <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
      </button>
      <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text" style="position: absolute; inset: auto 0px 0px auto; margin: 0px; transform: translate(0px, -44px);" data-popper-placement="top-end">
        <li>
          <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
            <i class="bi bi-sun-fill me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></i>
            Light
            <i class="bi ms-auto d-none"><use href="#check2"></use></i>
          </button>
        </li>
        <li>
          <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="dark" aria-pressed="true">
            <i class="bi bi-moon-stars-fill me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></i>
            Dark
            <i class="bi ms-auto d-none"><use href="#check2"></use></i>
          </button>
        </li>
        <li>
          <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto" aria-pressed="false">
            <i class="bi bi-circle-half me-2 opacity-50 theme-icon"><use href="#circle-half"></use></i>
            Auto
            <i class="bi ms-auto d-none"><use href="#check2"></use></i>
          </button>
        </li>
      </ul>
    </div>

  </body>
</html>

Changes to www/templates/_nav-primary.html.tera. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<nav class="navbar nav-tabs navbar-expand-md navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="/">Oak</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-center">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link {% if nav_primary_active == 0 %} text-dark active {% else %} text-light {% endif %}" href="/" aria-expanded="false">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if nav_primary_active == 1 %} text-dark active {% else %} text-light {% endif %}" href="scheduled-payments-overview.html" aria-expanded="false">Scheduled</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if nav_primary_active == 2 %} text-dark active {% else %} text-light {% endif %}" href="onetime-payments.html" aria-expanded="false">Onetime</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if nav_primary_active == 3 %} text-dark active {% else %} text-light {% endif %}" href="bot-nostr.html" aria-expanded="false">Bots</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if nav_primary_active == 4 %} text-dark active {% else %} text-light {% endif %}" href="nostr-powpub.html" aria-expanded="false">Nostr</a>
                </li>
            </ul>
        </div>

        <div class="mx-2" >
            <ul class="navbar-nav">
                <li class="nav-item ">
                    <a class="nav-link {% if nav_primary_active == 10 %} text-dark active {% else %} text-light {% endif %}" href="feedback.html" aria-expanded="false">Feedback</a>
                </li>
            </ul>
        </div>
    </div>
</nav>











|


|


|


|


|







|






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<nav class="navbar nav-tabs navbar-expand-md navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="/">Oak</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-center">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link {% if nav_primary_active == 0 %} bg-body-secondary active {% else %} text-bg-dark {% endif %}" href="/" aria-expanded="false">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if nav_primary_active == 1 %} bg-body-secondary active {% else %} text-bg-dark {% endif %}" href="scheduled-payments-overview.html" aria-expanded="false">Scheduled</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if nav_primary_active == 2 %} bg-body-secondary active {% else %} text-bg-dark {% endif %}" href="onetime-payments.html" aria-expanded="false">Onetime</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if nav_primary_active == 3 %} bg-body-secondary active {% else %} text-bg-dark {% endif %}" href="bot-nostr.html" aria-expanded="false">Bots</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if nav_primary_active == 4 %} bg-body-secondary active {% else %} text-bg-dark {% endif %}" href="nostr-powpub.html" aria-expanded="false">Nostr</a>
                </li>
            </ul>
        </div>

        <div class="mx-2" >
            <ul class="navbar-nav">
                <li class="nav-item ">
                    <a class="nav-link {% if nav_primary_active == 10 %} bg-body-secondary active {% else %} text-bg-dark {% endif %}" href="feedback.html" aria-expanded="false">Feedback</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Changes to www/templates/scheduled-payments-overview.html.tera.

︙︙
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

            </div>

            <div class="row mb-3">
              <label for="add-memo" class="col-sm-4 col-form-label">Description (memo):</label>
              <div class="col-sm-8">
                <textarea class="form-control" id="add-memo"></textarea>
                <div class="field-info">
                  This will be visible for the recipient, if their LN Address supports <a href="https://github.com/lnurl/luds/blob/luds/12.md" target="_blank" class="text-dark">LUD-12</a>.
                </div>
              </div>
            </div>

            <div class="row mb-3">
              <label for="add-bcron-expression" class="col-sm-4 col-form-label">Schedule (BCron expression):</label>
              <div class="col-sm-8">








|








144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

            </div>

            <div class="row mb-3">
              <label for="add-memo" class="col-sm-4 col-form-label">Description (memo):</label>
              <div class="col-sm-8">
                <textarea class="form-control" id="add-memo"></textarea>
                <div class="field-info">
                  This will be visible for the recipient, if their LN Address supports <a href="https://github.com/lnurl/luds/blob/luds/12.md" target="_blank" class="link-secondary">LUD-12</a>.
                </div>
              </div>
            </div>

            <div class="row mb-3">
              <label for="add-bcron-expression" class="col-sm-4 col-form-label">Schedule (BCron expression):</label>
              <div class="col-sm-8">
︙︙
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186

                    <li><a class="dropdown-item" href="#" onclick="fill_preset(true, 'every_1day_from_next_week_for_1month')">Every day from next week for one month</a></li>
                  </ul>
                </div>

                <div class="field-info">
                  Tip: <code>/144</code> is ~ every day, <code>/1000</code> is ~ every week, <code>/4000</code> is ~ every month.
                  <br/>
                  Try the <a href="scheduled-payments-editor.html" class="text-dark">interactive editor</a> to learn more.
                </div>
              </div>
            </div>
            <div class="row mb-3">
              <label for="add-bcron-details" class="col-form-label col-sm-4">Schedule details:</label>
              <div class="col-sm-8">
                <textarea class="form-control form-control-sm font-monospace" id="add-bcron-details" rows="9" disabled readonly></textarea>








|








172
173
174
175
176
177
178
179
180
181
182
183
184
185
186

                    <li><a class="dropdown-item" href="#" onclick="fill_preset(true, 'every_1day_from_next_week_for_1month')">Every day from next week for one month</a></li>
                  </ul>
                </div>

                <div class="field-info">
                  Tip: <code>/144</code> is ~ every day, <code>/1000</code> is ~ every week, <code>/4000</code> is ~ every month.
                  <br/>
                  Try the <a href="scheduled-payments-editor.html" class="link-secondary">interactive editor</a> to learn more.
                </div>
              </div>
            </div>
            <div class="row mb-3">
              <label for="add-bcron-details" class="col-form-label col-sm-4">Schedule details:</label>
              <div class="col-sm-8">
                <textarea class="form-control form-control-sm font-monospace" id="add-bcron-details" rows="9" disabled readonly></textarea>
︙︙
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238

            </div>

            <div class="row mb-3">
              <label for="edit-memo" class="col-sm-4 col-form-label">Description (memo):</label>
              <div class="col-sm-8">
                <textarea class="form-control" id="edit-memo"></textarea>
                <div class="field-info">
                  This will be visible for the recipient, if their LN Address supports <a href="https://github.com/lnurl/luds/blob/luds/12.md" target="_blank" class="text-dark">LUD-12</a>.
                </div>
              </div>
            </div>

            <div class="row mb-3">
              <label for="edit-bcron-expression" class="col-sm-4 col-form-label">Schedule (BCron expression):</label>
              <div class="col-sm-8">








|








224
225
226
227
228
229
230
231
232
233
234
235
236
237
238

            </div>

            <div class="row mb-3">
              <label for="edit-memo" class="col-sm-4 col-form-label">Description (memo):</label>
              <div class="col-sm-8">
                <textarea class="form-control" id="edit-memo"></textarea>
                <div class="field-info">
                  This will be visible for the recipient, if their LN Address supports <a href="https://github.com/lnurl/luds/blob/luds/12.md" target="_blank" class="link-secondary">LUD-12</a>.
                </div>
              </div>
            </div>

            <div class="row mb-3">
              <label for="edit-bcron-expression" class="col-sm-4 col-form-label">Schedule (BCron expression):</label>
              <div class="col-sm-8">
︙︙
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265

                    <li><a class="dropdown-item" href="#" onclick="fill_preset(false, 'every_1h_from_tomorrow_for_3day')">Every hour from tomorrow for three days</a></li>
                    <li><a class="dropdown-item" href="#" onclick="fill_preset(false, 'every_1day_from_next_week_for_1month')">Every day from next week for one month</a></li>
                  </ul>
                </div>
                <div class="field-info">
                  Tip: <code>/144</code> is ~ every day, <code>/1000</code> is ~ every week, <code>/4000</code> is ~ every month.
                  <br/>
                  For more details, try the <a href="scheduled-payments-editor.html" class="text-dark">interactive editor</a>.
                </div>
              </div>
            </div>
            <div class="row mb-3">
              <label for="edit-bcron-details" class="col-sm-4 col-form-label">Schedule details:</label>
              <div class="col-sm-8">
                <textarea class="form-control form-control-sm font-monospace" id="edit-bcron-details" rows="9" disabled readonly></textarea>








|








251
252
253
254
255
256
257
258
259
260
261
262
263
264
265

                    <li><a class="dropdown-item" href="#" onclick="fill_preset(false, 'every_1h_from_tomorrow_for_3day')">Every hour from tomorrow for three days</a></li>
                    <li><a class="dropdown-item" href="#" onclick="fill_preset(false, 'every_1day_from_next_week_for_1month')">Every day from next week for one month</a></li>
                  </ul>
                </div>
                <div class="field-info">
                  Tip: <code>/144</code> is ~ every day, <code>/1000</code> is ~ every week, <code>/4000</code> is ~ every month.
                  <br/>
                  For more details, try the <a href="scheduled-payments-editor.html" class="link-secondary">interactive editor</a>.
                </div>
              </div>
            </div>
            <div class="row mb-3">
              <label for="edit-bcron-details" class="col-sm-4 col-form-label">Schedule details:</label>
              <div class="col-sm-8">
                <textarea class="form-control form-control-sm font-monospace" id="edit-bcron-details" rows="9" disabled readonly></textarea>
︙︙