aiprompt/index.html at main · Aaron88915/aiprompt · 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
185
186
187
188
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Promptly - 精选、可复用的 AI Prompt 指令库">
  <meta name="theme-color" content="#f5f3ee">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://aiprompt.homes/">
  <link rel="alternate" hreflang="zh-CN" href="https://aiprompt.homes/">
  <link rel="alternate" hreflang="en" href="https://aiprompt.homes/en/">
  <link rel="alternate" hreflang="x-default" href="https://aiprompt.homes/en/">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Promptly">
  <meta property="og:title" content="Promptly - AI 指令灵感库">
  <meta property="og:description" content="40 条精选 AI Prompt，支持变量填写、实时预览、效果示例和来源追溯。">
  <meta property="og:url" content="https://aiprompt.homes/">
  <meta property="og:image" content="https://aiprompt.homes/assets/og-image.png">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Promptly - AI 指令灵感库">
  <meta name="twitter:description" content="40 条精选 AI Prompt，支持变量填写、实时预览与效果示例。">
  <meta name="twitter:image" content="https://aiprompt.homes/assets/og-image.png">
  <title>Promptly - AI 指令灵感库</title>
  <link rel="icon" href="assets/favicon-48.png?v=2" type="image/png" sizes="48x48">
  <link rel="apple-touch-icon" href="assets/apple-touch-icon.png?v=2" sizes="180x180">
  <link rel="icon" href="assets/promptly-mark.svg" type="image/svg+xml">
  <link rel="manifest" href="manifest.webmanifest">
  <link rel="stylesheet" href="styles.css">
  <script>
    (() => {
      const saved = localStorage.getItem("promptly-language");
      const preferred = saved || (navigator.language.toLowerCase().startsWith("zh") ? "zh" : "en");
      if (preferred === "en") location.replace(`/en/${location.search}${location.hash}`);
    })();
  </script>
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6473783239192829" crossorigin="anonymous"></script>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "Promptly",
    "url": "https://aiprompt.homes/",
    "description": "精选、可填写、可追溯的 AI Prompt 指令库",
    "inLanguage": "zh-CN"
  }
  </script>
</head>
<body>
  <header class="topbar">
    <a class="brand" href="#" aria-label="Promptly 首页">
      <img src="assets/promptly-mark.svg" alt="" width="36" height="36">
      <span>Promptly</span>
    </a>
    <a class="language-switch header-language" href="en/" hreflang="en" onclick="localStorage.setItem('promptly-language','en')">EN</a>
    <div class="header-actions">
      <button class="icon-button" id="historyButton" type="button" title="最近使用" aria-label="最近使用">
        <span aria-hidden="true">↶</span>
      </button>
      <button class="icon-button" id="statsButton" type="button" title="查看使用数据" aria-label="查看使用数据">
        <span aria-hidden="true">▥</span>
      </button>
      <button class="icon-button" id="favoritesToggle" type="button" title="查看收藏" aria-label="查看收藏">
        <span aria-hidden="true">♡</span><span class="favorite-count" id="favoriteCount">0</span>
      </button>
      <button class="primary-button" id="submitButton" type="button"><span aria-hidden="true">＋</span> 提交 Prompt</button>
    </div>
  </header>

  <main class="app-shell">
    <aside class="sidebar" aria-label="Prompt 分类">
      <p class="sidebar-label">浏览分类</p>
      <nav class="category-list" id="categoryList"></nav>
      <div class="sidebar-note">
        <span class="note-mark">✦</span>
        <p>所有指令均可直接复制，并按你的需求替换 <strong>[变量]</strong>。</p>
      </div>
    </aside>

    <section class="content">
      <div class="intro-row">
        <div>
          <p class="eyebrow">AI PROMPT LIBRARY</p>
          <h1><span>把好想法，</span><span>变成好指令。</span></h1>
          <p class="intro-copy">精选实用 AI 指令，覆盖写作、工作、学习、产品、编程与数据分析。</p>
        </div>
        <div class="prompt-stat"><strong id="promptCount">0</strong><span>条精选指令</span></div>
      </div>

      <div class="search-wrap">
        <span class="search-icon" aria-hidden="true">⌕</span>
        <input id="searchInput" type="search" placeholder="搜索用途、关键词或工具，例如“小红书”" autocomplete="off">
        <kbd>Ctrl K</kbd>
      </div>

      <div class="mobile-categories" id="mobileCategories" aria-label="移动端分类筛选"></div>

      <aside class="ad-placeholder ad-placeholder-home" aria-label="广告位" data-ad-placement="home-top">
        <span>广告</span>
      </aside>

      <div class="section-heading">
        <div>
          <h2 id="resultTitle">全部 Prompt</h2>
          <p id="resultMeta">发现适合你当前任务的指令</p>
        </div>
        <select id="sortSelect" aria-label="排序方式">
          <option value="featured">精选优先</option>
          <option value="popular">社区热门</option>
          <option value="newest">最近更新</option>
        </select>
      </div>

      <div class="prompt-grid" id="promptGrid"></div>
      <aside class="ad-placeholder ad-placeholder-home" aria-label="广告位" data-ad-placement="home-bottom">
        <span>广告</span>
      </aside>
      <div class="empty-state" id="emptyState" hidden>
        <span>⌕</span>
        <h3>没有找到相关 Prompt</h3>
        <p>试试更短的关键词，或者切换到其他分类。</p>
        <button class="secondary-button" id="clearSearch" type="button">清除搜索</button>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div><strong>Promptly</strong><span>精选、可填写、可追溯的 AI 指令库</span></div>
    <nav aria-label="网站信息">
      <a href="about/">关于</a>
      <a href="contact/">联系</a>
      <a href="privacy/">隐私政策</a>
      <a href="terms/">使用条款</a>
    </nav>
  </footer>

  <nav class="mobile-bottom-nav" id="mobileBottomNav" aria-label="移动端主导航">
    <button class="active" data-mobile-action="home" type="button"><span aria-hidden="true">⌂</span><small>首页</small></button>
    <button data-mobile-action="history" type="button"><span aria-hidden="true">↶</span><small>最近</small></button>
    <button data-mobile-action="favorites" type="button"><span aria-hidden="true">♡</span><small>收藏</small></button>
    <button data-mobile-action="stats" type="button"><span aria-hidden="true">▥</span><small>数据</small></button>
    <button data-mobile-action="add" type="button"><span aria-hidden="true">＋</span><small>添加</small></button>
  </nav>

  <div class="toast" id="toast" role="status" aria-live="polite">已复制到剪贴板</div>

  <dialog id="promptDialog" class="prompt-dialog">
    <button class="dialog-close icon-button" type="button" aria-label="关闭" title="关闭">×</button>
    <div id="dialogContent"></div>
  </dialog>

  <dialog id="submitDialog" class="submit-dialog">
    <button class="dialog-close icon-button" type="button" aria-label="关闭" title="关闭">×</button>
    <p class="eyebrow">COMMUNITY</p>
    <h2>提交一个好 Prompt</h2>
    <p>保存到当前浏览器的个人草稿，可随本地数据一起导出备份。</p>
    <form id="submitForm">
      <label>标题<input name="title" required placeholder="这个 Prompt 能做什么？"></label>
      <label>Prompt 内容<textarea name="prompt" required rows="7" placeholder="写下完整指令，变量请使用 [方括号]"></textarea></label>
      <button class="primary-button full-width" type="submit">保存到本地草稿</button>
    </form>
  </dialog>

  <dialog id="historyDialog" class="history-dialog">
    <button class="dialog-close icon-button" type="button" aria-label="关闭" title="关闭">×</button>
    <p class="eyebrow">RECENTLY USED</p>
    <h2>最近使用</h2>
    <p class="stats-note">保留最近 20 次生成记录，点击即可恢复当时填写的内容。</p>
    <div id="historyContent"></div>
  </dialog>

  <dialog id="statsDialog" class="stats-dialog">
    <button class="dialog-close icon-button" type="button" aria-label="关闭" title="关闭">×</button>
    <p class="eyebrow">LOCAL DATA</p>
    <h2>使用数据</h2>
    <p class="stats-note">所有记录仅保存在当前浏览器。你可以导出备份，再在其他设备恢复。</p>
    <div id="statsContent"></div>
    <div class="data-actions">
      <button class="secondary-button" id="exportData" type="button">导出数据</button>
      <button class="secondary-button" id="importData" type="button">导入数据</button>
      <button class="text-button danger" id="resetData" type="button">清空本地数据</button>
      <input id="importFile" type="file" accept="application/json" hidden>
    </div>
  </dialog>

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