voidware/index.html at main · ohadpr/voidware · 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
<!DOCTYPE html>
<html>
<head>
  <title>Voidware</title>
  <style>
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }
    main { max-width: 500px; margin: 40px auto; padding: 20px; }
    textarea { width: 100%; height: 120px; padding: 12px; }
    button { background: #007aff; color: white; border: none; padding: 12px 24px; margin-top: 16px; }
    .subtitle { font-weight: 400; color: #86868b; }
    #loading { margin-top: 16px; color: #86868b; }
    .spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid #ddd; border-top: 2px solid #007aff; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 8px; }
    @keyframes spin { to { transform: rotate(360deg); } }
  </style>
</head>
<body>
  <main>
    <form id="form">
      <h1>This app does not exist <span class="subtitle">/ Voidware</span></h1>
      <input type="hidden" name="action" value="generate_app">
      <textarea name="prompt" placeholder="Describe an app you want to use..." required></textarea>
      <br>
      <button>Go</button>
    </form>
    <div id="loading" hidden><span class="spinner"></span>Creating...</div>
  </main>

  <script>
    form.onsubmit = e => {
      e.preventDefault();
      const prompt = new FormData(form).get('prompt');
      loading.hidden = false;
      setTimeout(() => {
        window.location.href = '/?prompt=' + encodeURIComponent(prompt);
      }, 500);
    };
  </script>
</body>
</html>