practical-prompt-engineering-code-exercise/index.html at main · sgoldfarb2-fem/practical-prompt-engineering-code-exercise · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Prompt Library</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="app-header">
    <h1>Prompt Library</h1>
    <div class="header-tools" role="region" aria-label="Data tools">
      <button type="button" id="export-btn" class="tool-btn" aria-label="Export prompts">Export</button>
      <button type="button" id="import-btn" class="tool-btn" aria-label="Import prompts">Import</button>
      <input type="file" id="import-file" accept="application/json" hidden aria-hidden="true" />
    </div>
  </header>

  <main class="layout">
    <section class="panel" aria-labelledby="form-heading">
      <h2 id="form-heading" class="panel-title">Add Prompt</h2>
      <form id="prompt-form" novalidate>
        <div class="field-group">
          <label for="prompt-title">Title</label>
          <input type="text" id="prompt-title" name="title" placeholder="e.g. Blog Idea Generator" maxlength="120" required />
          <p class="field-hint" id="title-hint">Required. Max 120 characters.</p>
        </div>
        <div class="field-group">
          <label for="model-name">Model</label>
          <input type="text" id="model-name" name="model" placeholder="e.g. gpt-4o-mini" maxlength="100" required />
          <p class="field-hint" id="model-hint">Required. Model identifier (max 100 chars).</p>
        </div>
        <div class="field-group">
          <label for="prompt-content">Content</label>
          <textarea id="prompt-content" name="content" placeholder="Enter the full prompt here..." rows="6" required></textarea>
          <p class="field-hint" id="content-hint">Required.</p>
        </div>
        <div class="actions">
          <button type="submit" id="save-btn">Save Prompt</button>
        </div>
        <div id="form-error" class="form-error" role="alert" aria-live="polite"></div>
      </form>
    </section>

    <section class="panel" aria-labelledby="saved-prompts-heading">
      <div class="panel-header">
        <h2 id="saved-prompts-heading" class="panel-title">Saved Prompts</h2>
        <span id="prompt-count" class="count-badge" aria-live="polite"></span>
      </div>
      <div id="import-export-messages" class="iemessages" role="alert" aria-live="polite" hidden></div>
      <div id="prompts-empty" class="empty-state" hidden>
        <p>No prompts saved yet. Add your first one!</p>
      </div>
      <div id="prompts-list" class="cards" aria-live="polite"></div>
    </section>
  </main>

  <template id="prompt-card-template">
    <article class="card" data-id="">
      <div class="card-main">
        <h3 class="card-title"></h3>
        <p class="card-preview"></p>
        <div class="prompt-meta" data-role="metadata"></div>
      </div>
      <div class="card-actions">
        <button class="delete-btn" type="button" aria-label="Delete prompt">Delete</button>
      </div>
    </article>
  </template>

  <footer class="app-footer">Local-only storage. Clearing browser data will remove prompts.</footer>

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