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 { reloadOnSaveFetchMiddleware } from "https://esm.town/v/stevekrouse/reloadOnSave";
import Layout from "https://esm.town/v/vawogbemi/dateme_layout";
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">I am a Man In Finance!</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">
<label for="Location" class="block text-gray-700 font-bold mb-1">Location</label>
<div class="text-sm mb-2">
If you don't see your location represented, request it to be added after you submit your doc.
</div>
<div
id="Location"
name="Location[]"
multiple
class="shadow border rounded w-full py-2 px-3 text-gray-700 h-32 overflow-y-scroll"
>
{date_me_doc_locations.map(location => (
<div class="flex">
<input
id={location}
type="checkbox"
name="location[]"
value={location}
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
/>
<label for={location} class="ml-2 block text-sm text-gray-900">
{location}
</label>
</div>
))}
</div>
</div>
<div class="mb-4">
<label for="Linkedin" class="block text-gray-700 font-bold mb-2">
Linkedin<span class="ml-1 text-red-500 ">*</span>
</label>
<input
type="text"
id="Linkedin"
name="Linkedin"
required
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"