mydomains/index.html at main · davorg/mydomains · GitHub

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!doctype html>
<html lang="en">
<head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-YJCYWQFHGB"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-YJCYWQFHGB');
  </script>
  <meta charset="utf-8" />
  <title>MyDomains</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <header>
    <h1>MyDomains</h1>
  </header>
  <main>
    <section class="card">
      <p>Maintain a useful list of domains. Everything is stored in your browser. We never see your data.</p>
      <button type="button" class="primary" id="add-domain-btn">Add Domain</button>
      <button type="button" class="secondary" id="import-export-btn">Import / Export Data</button>
      <span class="small" id="status-msg"></span>
    </section>

    <section class="card" id="domain-table-section">
      <h2>Domains</h2>
      <div id="keyword-filter-container" style="display: none; margin-bottom: 0.75rem;">
        <span class="small">Filtering by keyword: </span>
        <span class="pill pill-active" id="active-keyword-pill"></span>
        <button type="button" class="secondary btn-small" id="clear-keyword-filter">×</button>
      </div>
      <div class="search-container">
        <input type="text" id="domain-search" placeholder="Search by domain name..." />
        <button type="button" class="clear-btn" id="clear-search">×</button>
      </div>
      <div class="domain-controls">
        <p id="domain-count" class="small"></p>
        <div>
          <button type="button" class="primary" id="refresh-all-btn">Refresh All</button>
        </div>
      </div>
      <div id="refresh-all-progress" style="display: none; margin-bottom: 0.75rem;">
        <div class="progress-text small"></div>
        <div class="progress-bar-container">
          <div class="progress-bar"></div>
        </div>
      </div>
      <table id="domain-table">
        <thead>
          <tr>
            <th data-sort="name">Domain</th>
            <th data-sort="dnsProvider">DNS</th>
            <th data-sort="expiry">Expiry</th>
            <th data-sort="registrar">Registrar</th>
            <th data-sort="hostCount">Subdomains</th>
            <th>Keywords</th>
            <th data-sort="notes">Notes</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody id="domain-tbody">
          <!-- rows inserted by JS -->
        </tbody>
      </table>
      <p class="small">Click a row to see details.</p>
    </section>

    <section class="card" id="domain-detail">
      <div style="display:flex; align-items:center; justify-content:space-between; gap:1rem;">
        <div>
          <h2 id="detail-title">Domain details</h2>
          <p class="small" id="detail-notes"></p>
        </div>
        <div>
          <a href="#domain-table-section" class="back-to-top">↑ Back to domain list</a>
        </div>
      </div>
      <div style="display:flex; align-items:center; justify-content:space-between; gap:1rem;">
        <div></div>
        <div>
          <button class="secondary" id="refresh-domain-btn">Refresh DNS / RDAP</button>
          <p class="small" id="detail-last-checked"></p>
        </div>
      </div>

      <h3>Domain summary</h3>
      <div id="detail-summary" class="dns-section small">
        <!-- registrar, expiry, etc. -->
      </div>

      <h3>DNS summary</h3>
      <div id="detail-dns-summary" class="dns-section small">
        <!-- NS/MX/TXT -->
      </div>

      <h3>Subdomains</h3>
      <div id="detail-hosts"></div>
    </section>
  </main>

  <footer>
    Made by <a href="https://links.davecross.co.uk/">Dave Cross</a> / Code on <a href="https://github.com/davorg/mydomains">GitHub</a>.
  </footer>

  <!-- Modal for Add/Edit Domain -->
  <div id="domain-modal" class="modal">
    <div class="modal-content">
      <h2 id="form-title">Add Domain</h2>
      <form id="add-domain-form">
        <label for="domain-name">Domain name</label>
        <input type="text" id="domain-name" placeholder="example.com" required />

        <label for="domain-hosts">Subdomains (comma-separated, use @ for root)</label>
        <input type="text" id="domain-hosts" placeholder="@, www, mail" />

        <label for="domain-notes">Notes (optional)</label>
        <textarea id="domain-notes" rows="2" placeholder="Any extra info..."></textarea>

        <label for="domain-keywords">Keywords (comma-separated, optional)</label>
        <input type="text" id="domain-keywords" placeholder="production, personal, important" />

        <div class="modal-buttons">
          <button type="submit" class="primary" id="domain-submit-btn">Add Domain</button>
          <button type="button" class="secondary" id="cancel-edit-btn">Cancel</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Modal for Import/Export -->
  <div id="import-export-modal" class="modal">
    <div class="modal-content">
      <h2>Import / Export Data</h2>
      <p class="small">All data is stored in your browser's localStorage. Use export to back up your data, and import to restore from a backup.</p>

      <h3>Export</h3>
      <p class="small">Download your current domain inventory as a JSON file.</p>
      <button class="secondary" id="export-btn">Export JSON</button>

      <h3>Import</h3>
      <p class="small">Import a previously exported JSON file. This will replace all current data.</p>
      <p class="small"><strong>Minimum format:</strong> A JSON object with a <code>domains</code> array. Each domain must have a <code>name</code> and a <code>hosts</code> array.</p>
      <pre class="small code-block">{
  "domains": [
    {
      "name": "example.com",
      "hosts": [
        { "name": "@" },
        { "name": "www" }
      ]
    }
  ]
}</pre>
      <input type="file" id="import-file" accept="application/json" style="display: none;" />
      <button class="secondary" id="import-btn">Choose File to Import</button>

      <div class="modal-buttons">
        <button type="button" class="secondary" id="cancel-import-export-btn">Close</button>
      </div>
    </div>
  </div>

  <!-- Onboarding Modal -->
  <div id="onboarding-modal" class="modal">
    <div class="modal-content">
      <h2>Welcome to MyDomains</h2>
      <p>Get started by adding your first domain or importing an existing list.</p>

      <div class="modal-buttons">
        <button type="button" class="primary" id="onboarding-add-btn">Add your first domain</button>
        <button type="button" class="secondary" id="onboarding-import-btn">Import a list of domains</button>
        <button type="button" class="secondary" id="onboarding-cancel-btn">Cancel</button>
      </div>
    </div>
  </div>

  <script src="js/script.js"></script>
</body>
</html>