Set Your Username

\n \n

Your username will be visible in the chat room

\n );\n }\n\n function renderJobs() {\n return (\n

\n setJobSearch(e.target.value)}\n className=\"job-search-input\"\n />\n \n

\n setNewJobTitle(e.target.value)}\n required\n className=\"job-title-input\"\n />\n

setNewJobDescription(e.target.value)}\n            required\n            className=\"job-description-input\"\n          />\n          <button \n            type=\"submit\" \n            disabled={isLoading}\n            className=\"job-post-btn\"\n          >\n            {isLoading ? \"Posting...\" : \"Post Job\"}\n          </button>\n        </form>\n        {error && <div className=\"error-message\">{error}</div>}\n        <div className=\"job-listings\">\n          {filteredJobs.length === 0 ? (\n            <div className=\"no-jobs-message\">No jobs found</div>\n          ) : (\n            filteredJobs.map((job, index) => (\n              <div key={index} className=\"job-card\">\n                <h3 className=\"job-card-title\">{job.title}</h3>\n                <p className=\"job-card-description\">{job.description}</p>\n                <div className=\"job-card-footer\">\n                  <span className=\"job-card-date\">\n                    Posted: {new Date(job.created_at).toLocaleDateString()}\n                  </span>\n                </div>\n              </div>\n            ))\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  function renderChat() {\n    return (\n      <div className=\"chat-container\">\n        <div className=\"chat-header\">\n          <h2>Public Chat Room \n            {username && <span className=\"username-display\"> (Logged in as: {username})</span>}\n          </h2>\n        </div>\n        <div className=\"message-list\">\n          {messages.map((msg, index) => (\n            <div \n              key={index} \n              className={`message-bubble ${msg.username === username ? 'message-sent' : 'message-received'}`}\n            >\n              <div \n                className=\"message-avatar\" \n                style={generateAvatar(msg.username)}\n              >\n                {msg.username[0].toUpperCase()}\n              </div>\n              <div className=\"message-content\">\n                <div className=\"message-username\">{msg.username}</div>\n                <div className=\"message-text\">{msg.content}</div>\n              </div>\n            </div>\n          ))}\n        </div>\n        {error && <div className=\"error-message\">{error}</div>}\n        <form onSubmit={submitMessage} className=\"chat-input-form\">\n          <input \n            placeholder=\"Type a message\" \n            value={newMessage}\n            onChange={(e) => setNewMessage(e.target.value)}\n            disabled={!username || isLoading}\n            className=\"chat-input\"\n          />\n          <button \n            type=\"submit\" \n            disabled={!username || isLoading}\n            className=\"chat-send-btn\"\n            onClick={() => {\n              if (!username) setShowUsernameModal(true);\n            }}\n          >\n            {isLoading ? \"Sending...\" : \"Send\"}\n          </button>\n        </form>\n        {!username && (\n          <div className=\"username-prompt\">\n            <button \n              onClick={() => setShowUsernameModal(true)}\n              className=\"set-username-btn\"\n            >\n              Set Username to Chat\n            </button>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"app-container\">\n      {renderUsernameModal()}\n      <div className=\"app-tabs\">\n        <button \n          onClick={() => setActiveTab(\"jobs\")}\n          className={`tab-btn ${activeTab === 'jobs' ? 'active' : ''}`}\n        >\n          Job Opportunities\n        </button>\n        <button \n          onClick={() => setActiveTab(\"chat\")}\n          className={`tab-btn ${activeTab === 'chat' ? 'active' : ''}`}\n        >\n          Community Chat\n        </button>\n      </div>\n      {activeTab === \"jobs\" ? renderJobs() : renderChat()}\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        className=\"source-link\"\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n  const SCHEMA_VERSION = 6;\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      title TEXT NOT NULL,\n      description TEXT NOT NULL,\n      created_at 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      content TEXT NOT NULL,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  if (request.method === \"GET\") {\n    const url = new URL(request.url);\n    \n    if (url.pathname === \"/jobs\") {\n      const jobs = await sqlite.execute(`\n        SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} \n        ORDER BY created_at DESC \n        LIMIT 50\n      `);\n      return new Response(JSON.stringify(jobs.rows), {\n        headers: { \"Content-Type\": \"application/json\" }\n      });\n    }\n\n    if (url.pathname === \"/messages\") {\n      const messages = await sqlite.execute(`\n        SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} \n        ORDER BY created_at DESC \n        LIMIT 50\n      `);\n      return new Response(JSON.stringify(messages.rows), {\n        headers: { \"Content-Type\": \"application/json\" }\n      });\n    }\n  }\n\n  if (request.method === \"POST\") {\n    const body = await request.json();\n    const url = new URL(request.url);\n\n    if (url.pathname === \"/jobs\") {\n      await sqlite.execute(`\n        INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, description) \n        VALUES (?, ?)\n      `, [body.title, body.description]);\n      return new Response(\"Job posted\", { status: 200 });\n    }\n\n    if (url.pathname === \"/messages\") {\n      await sqlite.execute(`\n        INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (username, content) \n        VALUES (?, ?)\n      `, [body.username, body.content]);\n      return new Response(\"Message sent\", { status: 200 });\n    }\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>Data Science Job Board & Chat</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { \"Content-Type\": \"text/html\" }\n  });\n}\n\nconst css = `\n:root {\n  --primary-color: #3498db;\n  --secondary-color: #2ecc71;\n  --background-color: #f7f9fc;\n  --text-color: #2c3e50;\n  --card-background: white;\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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-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.app-tabs {\n  display: flex;\n  margin-bottom: 20px;\n  background-color: white;\n  border-radius: var(--border-radius);\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.tab-btn {\n  flex: 1;\n  padding: 12px 20px;\n  border: none;\n  background-color: transparent;\n  color: var(--text-color);\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.tab-btn.active {\n  background-color: var(--primary-color);\n  color: white;\n}\n\n.tab-btn:hover {\n  background-color: rgba(52, 152, 219, 0.1);\n}\n\n.job-post-form {\n  background-color: var(--card-background);\n  border-radius: var(--border-radius);\n  padding: 20px;\n  margin-bottom: 20px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.job-title-input, .job-description-input {\n  width: 100%;\n  padding: 12px;\n  margin-bottom: 15px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  font-size: 16px;\n}\n\n.job-post-btn {\n  width: 100%;\n  padding: 12px;\n  background-color: var(--secondary-color);\n  color: white;\n  border: none;\n  border-radius: 8px;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.job-post-btn:disabled {\n  background-color: #b0b0b0;\n  cursor: not-allowed;\n}\n\n.job-listings {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 15px;\n}\n\n.job-card {\n  background-color: var(--card-background);\n  border-radius: var(--border-radius);\n  padding: 20px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n  transition: transform 0.3s ease;\n}\n\n.job-card:hover {\n  transform: translateY(-5px);\n}\n\n.job-card-title {\n  color: var(--primary-color);\n  margin-bottom: 10px;\n}\n\n.job-card-description {\n  color: var(--text-color);\n  margin-bottom: 15px;\n}\n\n.job-card-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 0.8em;\n  color: #7f8c8d;\n}\n\n.message-list {\n  max-height: 400px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 15px;\n  background-color: white;\n  border-radius: var(--border-radius);\n}\n\n.message-bubble {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n}\n\n.message-avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  font-weight: bold;\n}\n\n.message-content {\n  background-color: #f1f2f6;\n  padding: 10px 15px;\n  border-radius: 12px;\n  max-width: 70%;\n}\n\n.message-username {\n  font-weight: 600;\n  margin-bottom: 5px;\n  font-size: 0.9em;\n}\n\n.message-text {\n  word-wrap: break-word;\n}\n\n.chat-input-form {\n  display: flex;\n  gap: 10px;\n  margin-top: 15px;\n}\n\n.chat-input {\n  flex-grow: 1;\n  padding: 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n}\n\n.chat-send-btn {\n  padding: 12px 20px;\n  background-color: var(--primary-color);\n  color: white;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.username-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0,0,0,0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n}\n\n.username-modal {\n  background: white;\n  padding: 30px;\n  border-radius: var(--border-radius);\n  width: 400px;\n  text-align: center;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n}\n\n.username-input {\n  width: 100%;\n  padding: 12px;\n  margin-bottom: 15px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n}\n\n.username-submit-btn {\n  background-color: var(--primary-color);\n  color: white;\n  border: none;\n  padding: 12px 20px;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.source-link {\n  display: block;\n  text-align: center;\n  margin-top: 20px;\n  color: #7f8c8d;\n  text-decoration: none;\n}\n\n@media (max-width: 600px) {\n  .app-container {\n    padding: 10px;\n  }\n\n  .job-listings {\n    grid-template-columns: 1fr;\n  }\n\n  .chat-input-form {\n    flex-direction: column;\n  }\n\n  .chat-send-btn {\n    width: 100%;\n  }\n}\n`;","createdAt",["D",1740589008773],"version",3,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","FortiBYOD","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydEN0VEh5R1RLU3VpU1hXV3Z1UXBGeGdPOFkifQ","forkedVal","interval","slug","FortiBYOD/SQL_Developer","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[141,144,147,150],{"_117":118,"_142":-5,"_115":143,"_112":110},"prId",["D",1740589008773],{"_117":90,"_142":-5,"_115":145,"_112":146},["D",1740588919676],"76172fb4-f462-11ef-8d8e-569c3dd06744",{"_117":124,"_142":-5,"_115":148,"_112":149},["D",1740588849812],"4c72855a-f462-11ef-85ef-569c3dd06744",{"_117":31,"_142":-5,"_115":151,"_112":152},["D",1740588500513],"7c40ac18-f461-11ef-8224-569c3dd06744","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":160,"_161":162,"_94":163},"single","redirect","/v/FortiBYOD/SQL_Developer/versions",{"_112":149,"_113":164,"_117":124,"_115":165,"_166":99,"_100":101,"_107":108,"_129":130,"_11":96,"_167":-5,"_168":-5,"_169":-5,"_157":26,"_135":136},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n  const [username, setUsername] = useState(\"\");\n  const [usernameInput, setUsernameInput] = useState(\"\");\n  const [activeTab, setActiveTab] = useState(\"jobs\");\n  const [jobs, setJobs] = useState([]);\n  const [messages, setMessages] = useState([]);\n  const [newJobTitle, setNewJobTitle] = useState(\"\");\n  const [newJobDescription, setNewJobDescription] = useState(\"\");\n  const [newMessage, setNewMessage] = useState(\"\");\n  const [showUsernameModal, setShowUsernameModal] = useState(false);\n\n  useEffect(() => {\n    // Check for existing username in localStorage\n    const savedUsername = localStorage.getItem('chatUsername');\n    if (savedUsername) {\n      setUsername(savedUsername);\n    } else {\n      // Show username modal if no username is set\n      setShowUsernameModal(true);\n    }\n    fetchJobs();\n    fetchMessages();\n  }, []);\n\n  async function fetchJobs() {\n    const response = await fetch(\"/jobs\");\n    const data = await response.json();\n    setJobs(data);\n  }\n\n  async function fetchMessages() {\n    const response = await fetch(\"/messages\");\n    const data = await response.json();\n    setMessages(data);\n  }\n\n  async function submitJob(e) {\n    e.preventDefault();\n    await fetch(\"/jobs\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ \n        title: newJobTitle, \n        description: newJobDescription \n      })\n    });\n    setNewJobTitle(\"\");\n    setNewJobDescription(\"\");\n    fetchJobs();\n  }\n\n  async function submitMessage(e) {\n    e.preventDefault();\n    if (!username) {\n      setShowUsernameModal(true);\n      return;\n    }\n    await fetch(\"/messages\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ \n        username, \n        content: newMessage \n      })\n    });\n    setNewMessage(\"\");\n    fetchMessages();\n  }\n\n  function handleUsernameSubmit(e) {\n    e.preventDefault();\n    const trimmedUsername = usernameInput.trim();\n    \n    // Validate username\n    if (!trimmedUsername) {\n      alert(\"Username cannot be empty\");\n      return;\n    }\n    \n    if (trimmedUsername.length < 3) {\n      alert(\"Username must be at least 3 characters long\");\n      return;\n    }\n    \n    if (trimmedUsername.length > 20) {\n      alert(\"Username must be less than 20 characters\");\n      return;\n    }\n\n    // Set and save username\n    setUsername(trimmedUsername);\n    localStorage.setItem('chatUsername', trimmedUsername);\n    setShowUsernameModal(false);\n    setUsernameInput(\"\");\n  }\n\n  function renderUsernameModal() {\n    if (!showUsernameModal) return null;\n\n    return (\n      <div className=\"username-modal-overlay\">\n        <div className=\"username-modal\">\n          <h2>Set Your Username</h2>\n          <form onSubmit={handleUsernameSubmit}>\n            <input \n              placeholder=\"Enter your username\" \n              value={usernameInput}\n              onChange={(e) => setUsernameInput(e.target.value)}\n              maxLength={20}\n              required\n            />\n            <div className=\"username-modal-buttons\">\n              <button type=\"submit\">Set Username</button>\n            </div>\n          </form>\n          <p>Your username will be visible in the chat room</p>\n        </div>\n      </div>\n    );\n  }\n\n  function renderJobs() {\n    return (\n      <div>\n        <h2>Data Science & SQL Job Opportunities</h2>\n        <form onSubmit={submitJob}>\n          <input \n            placeholder=\"Job Title\" \n            value={newJobTitle}\n            onChange={(e) => setNewJobTitle(e.target.value)}\n            required\n          />\n          <textarea \n            placeholder=\"Job Description\" \n            value={newJobDescription}\n            onChange={(e) => setNewJobDescription(e.target.value)}\n            required\n          />\n          <button type=\"submit\">Post Job</button>\n        </form>\n        <div>\n          {jobs.map((job, index) => (\n            <div key={index} className=\"job-post\">\n              <h3>{job.title}</h3>\n              <p>{job.description}</p>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  function renderChat() {\n    return (\n      <div>\n        <h2>Public Chat Room \n          {username && <span className=\"username-display\"> (Logged in as: {username})</span>}\n        </h2>\n        <div className=\"message-list\">\n          {messages.map((msg, index) => (\n            <div key={index} className=\"message\">\n              <strong>{msg.username}: </strong>{msg.content}\n            </div>\n          ))}\n        </div>\n        <form onSubmit={submitMessage}>\n          <input \n            placeholder=\"Type a message\" \n            value={newMessage}\n            onChange={(e) => setNewMessage(e.target.value)}\n            disabled={!username}\n          />\n          <button \n            type=\"submit\" \n            disabled={!username}\n            onClick={() => {\n              if (!username) setShowUsernameModal(true);\n            }}\n          >\n            Send\n          </button>\n        </form>\n        {!username && (\n          <div className=\"username-prompt\">\n            <button onClick={() => setShowUsernameModal(true)}>\n              Set Username to Chat\n            </button>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      {renderUsernameModal()}\n      <div className=\"tabs\">\n        <button onClick={() => setActiveTab(\"jobs\")}>Jobs</button>\n        <button onClick={() => setActiveTab(\"chat\")}>Chat</button>\n      </div>\n      {activeTab === \"jobs\" ? renderJobs() : renderChat()}\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        style={{ color: '#888', fontSize: '0.8em' }}\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n  const SCHEMA_VERSION = 4;\n\n  // Initialize tables\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      title TEXT NOT NULL,\n      description TEXT NOT NULL,\n      created_at 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      content TEXT NOT NULL,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Handle different routes\n  if (request.method === \"GET\") {\n    const url = new URL(request.url);\n    \n    if (url.pathname === \"/jobs\") {\n      const jobs = await sqlite.execute(`\n        SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} \n        ORDER BY created_at DESC \n        LIMIT 50\n      `);\n      return new Response(JSON.stringify(jobs.rows), {\n        headers: { \"Content-Type\": \"application/json\" }\n      });\n    }\n\n    if (url.pathname === \"/messages\") {\n      const messages = await sqlite.execute(`\n        SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} \n        ORDER BY created_at DESC \n        LIMIT 50\n      `);\n      return new Response(JSON.stringify(messages.rows), {\n        headers: { \"Content-Type\": \"application/json\" }\n      });\n    }\n  }\n\n  if (request.method === \"POST\") {\n    const body = await request.json();\n    const url = new URL(request.url);\n\n    if (url.pathname === \"/jobs\") {\n      await sqlite.execute(`\n        INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, description) \n        VALUES (?, ?)\n      `, [body.title, body.description]);\n      return new Response(\"Job posted\", { status: 200 });\n    }\n\n    if (url.pathname === \"/messages\") {\n      await sqlite.execute(`\n        INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (username, content) \n        VALUES (?, ?)\n      `, [body.username, body.content]);\n      return new Response(\"Message sent\", { status: 200 });\n    }\n  }\n\n  // Main page\n  return new Response(`\n    <html>\n      <head>\n        <title>Data Science Job Board & Chat</title>\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { \"Content-Type\": \"text/html\" }\n  });\n}\n\nconst css = `\nbody {\n  font-family: Arial, sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  background-color: #f4f4f4;\n}\n\n.tabs {\n  display: flex;\n  margin-bottom: 20px;\n}\n\n.tabs button {\n  flex: 1;\n  padding: 10px;\n  background-color: #e0e0e0;\n  border: none;\n  cursor: pointer;\n}\n\n.tabs button:hover {\n  background-color: #d0d0d0;\n}\n\nform {\n  background-color: white;\n  padding: 20px;\n  border-radius: 5px;\n  margin-bottom: 20px;\n}\n\ninput, textarea {\n  width: 100%;\n  margin-bottom: 10px;\n  padding: 10px;\n}\n\n.job-post, .message {\n  background-color: white;\n  padding: 10px;\n  margin-bottom: 10px;\n  border-radius: 5px;\n}\n\n.message-list {\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.username-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n}\n\n.username-modal {\n  background: white;\n  padding: 30px;\n  border-radius: 10px;\n  width: 300px;\n  text-align: center;\n}\n\n.username-modal-buttons {\n  display: flex;\n  justify-content: center;\n  margin-top: 15px;\n}\n\n.username-prompt {\n  text-align: center;\n  margin-top: 20px;\n}\n\n.username-display {\n  font-size: 0.8em;\n  color: #666;\n  margin-left: 10px;\n}\n`;",["D",1740588849812],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]
</article></body></html>

SQL_Developer

Version 1