BenLewis42.github.io/submit.html at main · BenLewis42/BenLewis42.github.io · 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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Submit a Post</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="https://www.google.com/recaptcha/api.js?render=6LcphiwsAAAAACGlnm1L-tmlPNRZQ3EEkINbAB1P"></script>
  <style>label{display:block;margin:.5rem 0;font-weight:bold}input[type=text],textarea,input[type=file]{width:100%;padding:.5rem;margin:.25rem 0;border:1px solid #ccc;border-radius:4px}button{padding:.5rem 1rem;background:#007bff;color:white;border:none;border-radius:4px;cursor:pointer}button:hover{background:#0056b3}#status{margin-top:1rem}</style>
</head>
<body>
  <main style="max-width:720px;margin:3rem auto;text-align:left;font-family:Arial,Helvetica,sans-serif;">
    <h1>Submit a Post</h1>
    <p>Fill out the form below. Your post will be published automatically after submission.</p>

    <form id="submitForm" action="/api/submit" method="POST" enctype="multipart/form-data">
      <label>Post Title: <input type="text" name="title" required></label>
      <label>Content (Markdown): <textarea name="content" rows="8" required></textarea></label>
      <button type="submit">Submit Post</button>
    </form>

    <div id="status"></div>
  </main>

  <script>
    document.getElementById('submitForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const token = await grecaptcha.execute('6LcphiwsAAAAACGlnm1L-tmlPNRZQ3EEkINbAB1P', { action: 'submit' });
      const formData = new FormData(e.target);
      const data = {
        title: formData.get('title'),
        content: formData.get('content'),
        'g-recaptcha-response': token
      };
      const response = await fetch('/api/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
      const result = await response.text();
      document.getElementById('status').innerText = result;
    });
  </script>
</body>
</html>