Job Connect

Your Professional Networking Platform

\n );\n }\n\n return (\n

Job Connect

{username}

\n {userEmail &&

{userEmail}

}\n

\n\n

\n setActiveTab(\"chat\")}\n >\n Community Chat\n \n setActiveTab(\"jobs\")}\n >\n Job Postings\n \n

\n\n

\n {activeTab === \"chat\" && (\n

\n \n {messages.length === 0\n ? (\n

No messages yet. Start the conversation!

\n )\n : (\n messages.map((msg, index) => (\n \n {msg.username}:\n {msg.message}\n

\n ))\n )}\n

\n\n

\n )}\n\n {activeTab === \"jobs\" && (\n

\n setNewJob({ ...newJob, title: e.target.value })}\n required\n />\n setNewJob({ ...newJob, company: e.target.value })}\n required\n />\n setNewJob({ ...newJob, description: e.target.value })}\n required\n />\n \n \n\n

\n {jobs.length === 0\n ? (\n

No job postings yet. Be the first to post!

\n )\n : (\n jobs.map((job, index) => (\n

{job.title} at {job.company}

{job.description}

\n Posted by {job.username}\n

\n ))\n )}\n

\n )}\n \n\n \n View Source\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"first_app\";\n const SCHEMA_VERSION = 7;\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n title TEXT NOT NULL,\n company TEXT NOT NULL,\n description TEXT NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n message TEXT NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/jobs\") {\n const job = await request.json();\n await sqlite.execute(\n `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (username, title, company, description) VALUES (?, ?, ?, ?)`,\n [job.username, job.title, job.company, job.description],\n );\n return Response.json({ success: true });\n }\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const chatMessage = await request.json();\n await sqlite.execute(\n `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (username, message) VALUES (?, ?)`,\n [chatMessage.username, chatMessage.message],\n );\n return Response.json({ success: true });\n }\n\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/jobs\") {\n const jobsResult = await sqlite.execute(`\n SELECT username, title, company, description \n FROM ${KEY}_jobs_${SCHEMA_VERSION} \n ORDER BY timestamp DESC \n LIMIT 50\n `);\n return Response.json(jobsResult.rows);\n }\n\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/messages\") {\n const messagesResult = await sqlite.execute(`\n SELECT username, message \n FROM ${KEY}_messages_${SCHEMA_VERSION} \n ORDER BY timestamp DESC \n LIMIT 50\n `);\n return Response.json(messagesResult.rows.reverse());\n }\n\n return new Response(\n `\n \n \n Job Connect\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n --primary-color: #C66; /* Soft muted dark red */\n --secondary-color: #E6C229; /* Soft golden yellow */\n --accent-color: #9A4448; /* Soft burgundy */\n --background-color: #FFF9F0; /* Even softer cream */\n --card-background: #FFFBF5; /* Slightly warmer white */\n --text-color: #5D3754; /* Soft deep mauve */\n --light-text: #8B6E8C; /* Soft muted purple */\n --border-radius: 12px;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n transition: all 0.3s ease;\n}\n\nbody {\n font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\n.app-container {\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n}\n\n.username-modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n}\n\n.username-card {\n background-color: var(--card-background);\n padding: 40px;\n border-radius: var(--border-radius);\n box-shadow: 0 15px 30px rgba(139, 0, 0, 0.2);\n width: 100%;\n max-width: 450px;\n text-align: center;\n}\n\n.login-header {\n margin-bottom: 30px;\n color: var(--accent-color);\n}\n\n.login-header h1 {\n font-size: 2.5rem;\n margin-bottom: 10px;\n}\n\n.username-card input {\n width: 100%;\n padding: 15px;\n margin-bottom: 15px;\n border: 2px solid var(--secondary-color);\n border-radius: var(--border-radius);\n font-size: 16px;\n}\n\n.username-card button {\n width: 100%;\n padding: 15px;\n background-color: var(--primary-color);\n color: var(--background-color);\n border: none;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-weight: bold;\n letter-spacing: 1px;\n}\n\nheader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background-color: var(--card-background);\n padding: 15px 20px;\n border-radius: var(--border-radius);\n box-shadow: 0 4px 6px rgba(139, 0, 0, 0.1);\n margin-bottom: 20px;\n}\n\n.user-profile {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n}\n\n.username-badge {\n background-color: var(--secondary-color);\n color: var(--accent-color);\n padding: 8px 15px;\n border-radius: var(--border-radius);\n font-weight: 600;\n}\n\n.user-email {\n font-size: 0.8rem;\n color: var(--light-text);\n margin-top: 5px;\n}\n\n.tab-content {\n background-color: var(--card-background);\n border-radius: var(--border-radius);\n padding: 20px;\n box-shadow: 0 4px 6px rgba(139, 0, 0, 0.1);\n}\n\n.tab-navigation {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n gap: 10px;\n}\n\n.tab {\n background-color: transparent;\n border: 2px solid var(--primary-color);\n padding: 10px 20px;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-weight: 600;\n color: var(--primary-color);\n}\n\n.tab.active {\n background-color: var(--primary-color);\n color: var(--background-color);\n}\n\n.job-form, .chat-form {\n display: flex;\n flex-direction: column;\n gap: 15px;\n margin-bottom: 20px;\n}\n\ninput, textarea {\n padding: 12px;\n border: 2px solid var(--secondary-color);\n border-radius: var(--border-radius);\n font-size: 15px;\n}\n\ntextarea {\n min-height: 100px;\n resize: vertical;\n}\n\nbutton {\n padding: 12px;\n background-color: var(--primary-color);\n color: var(--background-color);\n border: none;\n border-radius: var(--border-radius);\n cursor: pointer;\n}\n\n.job-list, .message-list {\n max-height: 400px;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.job-card, .message {\n background-color: var(--background-color);\n padding: 15px;\n border-radius: var(--border-radius);\n border-left: 4px solid var(--secondary-color);\n}\n\n.message.own-message {\n background-color: var(--secondary-color);\n color: var(--accent-color);\n}\n\n.empty-state {\n text-align: center;\n color: var(--light-text);\n padding: 30px;\n}\n\n.source-link {\n display: block;\n text-align: center;\n margin-top: 20px;\n color: var(--primary-color);\n text-decoration: none;\n}\n\n@media (max-width: 768px) {\n .tab-navigation {\n flex-direction: column;\n }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/ysr_0/first_app/code/main.tsx","extension","actionData","errors"]