Public
HTTP
stevekrouse-date_me_form.web.val.run
July 31, 2024
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
/** @jsxImportSource npm:hono@3/jsx */
import { email } from "https://esm.town/v/std/email?v=11";
import { sqlite } from "https://esm.town/v/std/sqlite?v=5";
import date_me_doc_locations from "https://esm.town/v/stevekrouse/date_me_doc_locations";
import Layout from "https://esm.town/v/stevekrouse/dateme_layout";
import { reloadOnSaveFetchMiddleware } from "https://esm.town/v/stevekrouse/reloadOnSave";
import { Hono } from "npm:hono@3";
const Link = ({ href, children }) => {
return <a href={href} class="text-sky-600 hover:text-sky-500" target="_blank">{children}</a>;
};
export const Form = (c) =>
c.html(
<Layout activeTab={"/submit"}>
<form class="max-w-xl mx-auto bg-white p-6" method="post">
<h2 class="text-2xl mb-4 font-semibold text-gray-800">Submit Your Date Me Doc</h2>
<div class="mb-4">
<label for="Name" class="block text-gray-700 font-bold mb-2">
Name<span class="ml-1 text-red-500 ">*</span>
</label>
<input
type="text"
id="Name"
name="Name"
required
placeholder="William Thacker"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
/>
</div>
<div class="mb-4">
<label for="Profile" class="block text-gray-700 font-bold mb-1">
Profile URL<span class="ml-1 text-red-500 ">*</span>
</label>
<div class="text-sm mb-2">
If you don't have a Date Me Doc yet, create one in <Link href="https://notion.com">Notion</Link> or{" "}
<Link href="https://docs.google.com">Google Docs</Link>, and then copy its public link here.
</div>
<input
type="url"
id="Profile"
name="Profile"
required
placeholder="https://horse-and-hound.com/dating"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
/>
</div>
<div class="mb-4">
<label for="Age" class="block text-gray-700 font-bold mb-2">Age</label>
<input
type="number"
id="Age"
name="Age"
required
placeholder="35"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
/>
</div>
<div class="mb-4 flex items-center">
<label for="Gender" class="text-gray-700 font-bold mr-4">Your Gender</label>
{["F", "M", "NB"].map(gender => (
<>
<input
type="checkbox"
id={`Gender-${gender}`}
name="Gender[]"
value={gender}
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
/>
<label for={`Gender-${gender}`} class="ml-2 block text-sm text-gray-900 mr-4">
{gender}
</label>
</>
))}
</div>
<div class="mb-4 flex items-center">
<label for="InterestedIn" class="text-gray-700 font-bold mr-4">Interested In</label>
{["F", "M", "NB"].map(gender => (
<>
<input
type="checkbox"
id={`InterestedIn-${gender}`}
name="InterestedIn[]"
value={gender}
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
/>
<label for={`InterestedIn-${gender}`} class="ml-2 block text-sm text-gray-900 mr-4">
{gender}
</label>
</>
))}
</div>
<div class="mb-4">
<label for="Location" class="block text-gray-700 font-bold mb-1">Location</label>
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
July 31, 2024