ph-comment-generator/index.html at main · Gingiris/ph-comment-generator · 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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Hunt Launch Comment Generator - Free Templates | Gingiris</title>
    <meta name="description" content="Free Product Hunt launch comment generator. Create professional maker comments with templates from 30x daily #1 experience. Product launch template, startup launch guide, and Product Hunt marketing tips.">
    <meta name="keywords" content="product hunt launch, launch on product hunt, product launch template, startup launch, how to launch on product hunt, product hunt launch guide, product hunt launch strategy, product hunt upvotes, product hunt launch checklist, product hunt marketing, maker comment template, first comment generator">

    <!-- Open Graph -->
    <meta property="og:title" content="Product Hunt Comment Generator - Free Launch Templates">
    <meta property="og:description" content="Generate winning Product Hunt maker comments in seconds. Based on 30x daily #1 launch experience.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://gingiris.github.io/ph-comment-generator/">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Product Hunt Comment Generator">
    <meta name="twitter:description" content="Free maker comment templates based on real #1 launches.">

    <!-- Canonical -->
    <link rel="canonical" href="https://gingiris.github.io/ph-comment-generator/">

    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">

    <!-- Schema.org -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      "name": "Product Hunt Comment Generator",
      "description": "Generate professional Product Hunt maker comments for your launch",
      "url": "https://gingiris.github.io/ph-comment-generator/",
      "applicationCategory": "BusinessApplication",
      "operatingSystem": "Web",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD"
      },
      "author": {
        "@type": "Organization",
        "name": "Gingiris",
        "url": "https://github.com/Gingiris"
      }
    }
    </script>
</head>
<body>
    <div class="container">
        <header>
            <h1>🚀 PH Comment Generator</h1>
            <p class="subtitle">Paste your URL → Get professional maker comments</p>
            <p class="credit">Based on <a href="https://github.com/Gingiris/gingiris-launch" target="_blank">30x daily #1</a> launch experience</p>
        </header>

        <main>
            <!-- Step 1: URL Input -->
            <div id="step1" class="step">
                <div class="url-input-section">
                    <label for="urlInput">🔗 Paste your product URL or GitHub repo</label>
                    <div class="url-input-wrapper">
                        <input type="url" id="urlInput" placeholder="https://github.com/your/repo or https://yourproduct.com" required>
                        <button type="button" id="fetchBtn" class="btn-fetch">
                            <span class="btn-text">Fetch Info</span>
                            <span class="btn-loading hidden">⏳</span>
                        </button>
                    </div>
                    <p class="url-hint">Supports: GitHub repos, Product websites, Landing pages</p>
                </div>
            </div>

            <!-- Step 2: Review & Edit (auto-filled) -->
            <form id="commentForm" class="hidden">
                <div class="auto-filled-notice">
                    ✨ Auto-filled from your URL. Review and edit if needed:
                </div>

                <div class="form-group">
                    <label for="makerName">Your Name / Team Name</label>
                    <input type="text" id="makerName" placeholder="e.g., Alex, Team Clico">
                </div>

                <div class="form-group">
                    <label for="productName">Product Name *</label>
                    <input type="text" id="productName" placeholder="e.g., AFFiNE" required>
                </div>

                <div class="form-group">
                    <label for="tagline">One-line Description *</label>
                    <input type="text" id="tagline" placeholder="e.g., Open source Notion alternative" required>
                </div>

                <div class="form-group">
                    <label for="highlights">Key Highlights (comma separated) *</label>
                    <input type="text" id="highlights" placeholder="e.g., Local-first, AI native, Open source">
                </div>

                <div class="form-group">
                    <label for="audience">Target Audience</label>
                    <input type="text" id="audience" placeholder="e.g., Developers, Knowledge workers">
                </div>

                <div class="form-group">
                    <label for="story">Your Story (optional)</label>
                    <textarea id="story" rows="2" placeholder="e.g., We built this because we were frustrated with..."></textarea>
                </div>

                <div class="form-group">
                    <label for="tone">Tone</label>
                    <select id="tone">
                        <option value="friendly">Friendly & Warm</option>
                        <option value="professional">Professional</option>
                        <option value="excited">Excited & Energetic</option>
                        <option value="humble">Humble & Grateful</option>
                    </select>
                </div>

                <button type="submit" class="btn-generate">✨ Generate Comments</button>
            </form>

            <!-- Results -->
            <div id="results" class="results hidden">
                <h2>Generated Comments</h2>

                <div class="comment-card" id="comment1">
                    <div class="comment-header">
                        <span class="comment-label">👤 Founder Story</span>
                        <span class="char-count"></span>
                    </div>
                    <p class="template-desc">Like Clico, Vozo. Personal intro + frustration + features. Best for strong personal brand.</p>
                    <div class="comment-content"></div>
                    <button class="btn-copy" onclick="copyComment(1)">📋 Copy</button>
                </div>

                <div class="comment-card" id="comment2">
                    <div class="comment-header">
                        <span class="comment-label">🔥 The Provocateur</span>
                        <span class="char-count"></span>
                    </div>
                    <p class="template-desc">Like Tobira.ai. Bold opening + challenge status quo. Best for new categories.</p>
                    <div class="comment-content"></div>
                    <button class="btn-copy" onclick="copyComment(2)">📋 Copy</button>
                </div>

                <div class="comment-card" id="comment3">
                    <div class="comment-header">
                        <span class="comment-label">🎉 Public Builder</span>
                        <span class="char-count"></span>
                    </div>
                    <p class="template-desc">Like Chronicle. Gratitude + roadmap vote. Best for community-driven products.</p>
                    <div class="comment-content"></div>
                    <button class="btn-copy" onclick="copyComment(3)">📋 Copy</button>
                </div>

                <div class="tips-box">
                    <h3>💡 Pro Tips</h3>
                    <ul>
                        <li><strong>Optimal length:</strong> 300-500 characters performs best</li>
                        <li><strong>Post timing:</strong> Within 5 minutes of launch</li>
                        <li><strong>Engage:</strong> Reply to every comment in the first 2 hours</li>
                        <li><strong>Be authentic:</strong> Share real story, avoid marketing speak</li>
                    </ul>
                </div>

                <button class="btn-restart" onclick="restart()">🔄 Generate for another product</button>
            </div>
        </main>

        <section class="seo-content">
            <h2>How to Launch on Product Hunt Successfully</h2>
            <p>A successful <strong>Product Hunt launch</strong> starts with a great maker comment. This free <strong>product launch template</strong> generator helps you create professional comments based on 30x daily #1 experience.</p>

            <h3>Product Hunt Launch Checklist</h3>
            <ul>
                <li>✅ Prepare your <strong>startup launch</strong> assets (demo video, screenshots)</li>
                <li>✅ Write your maker comment using this <strong>Product Hunt launch guide</strong></li>
                <li>✅ Schedule your launch for 12:01 AM PST</li>
                <li>✅ Engage with comments in the first 2 hours</li>
            </ul>

            <h3>Product Hunt Launch Strategy Tips</h3>
            <p>Your <strong>Product Hunt marketing</strong> success depends on authentic engagement. Avoid asking for <strong>Product Hunt upvotes</strong> directly — focus on providing value and sharing your story.</p>
        </section>

        <footer>
            <div class="cta-box">
                <p>🚀 Want the complete launch playbook?</p>
                <a href="https://gingiris.gumroad.com/l/zxamur" target="_blank" class="btn btn-primary">Get PH Launch Guide $</a>
                <a href="https://github.com/Gingiris/gingiris-launch" target="_blank" class="btn btn-outline">⭐ Star on GitHub</a>
            </div>
            <p>
                Want the complete <strong>Product Hunt launch strategy</strong>?
                <a href="https://github.com/Gingiris/gingiris-launch" target="_blank">⭐ Star on GitHub</a> |
                <a href="https://gingiris.com" target="_blank">Gingiris</a>
            </p>
            <p class="footer-note">Free tool by Gingiris • No data collected • Works offline</p>
        </footer>
    </div>

    <div id="toast" class="toast hidden">Copied to clipboard!</div>

    <script src="script.js"></script>
</body>
</html>
<!-- Updated: Mon Mar 30 03:18:48 AM CST 2026 -->