{content.title}

\n {content.content_type}\n

\n {content.cover_image && (\n {content.title}

\n )}\n

ID: {content.id}

Order: {content.order}

Modified: {new Date(content.modified).toLocaleString()}

Start: {new Date(content.start).toLocaleString()}

\n {content.description && (\n

\n Description:\n

\n )}\n

\n {content.exam_url && (\n \n Take Exam\n \n )}\n {content.video_url && (\n \n Watch Video\n \n )}\n

\n );\n}\n\nfunction JSONCards({ data }) {\n if (!data || !data.results || !data.results.contents) {\n return

Invalid JSON data structure

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

Total Count: {data.count}

Per Page: {data.per_page}

\n {data.results.contents.map((item) => (\n \n ))}\n

\n );\n}\n\nfunction App() {\n const [jsonInput, setJsonInput] = useState('');\n const [jsonData, setJsonData] = useState(null);\n const [error, setError] = useState('');\n\n const handleInputChange = (e) => {\n setJsonInput(e.target.value);\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n try {\n const parsedData = JSON.parse(jsonInput);\n setJsonData(parsedData);\n setError('');\n } catch (err) {\n setError('Invalid JSON: ' + err.message);\n setJsonData(null);\n }\n };\n\n return (\n

📚 Course Content Viewer

\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 return new Response(`\n \n \n Course Content Viewer\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: 'Roboto', sans-serif;\n line-height: 1.6;\n color: #333;\n margin: 0;\n padding: 20px;\n background-color: #f0f4f8;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n background-color: #fff;\n padding: 30px;\n border-radius: 10px;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\n}\n\nh1 {\n text-align: center;\n color: #2c3e50;\n font-size: 2.5em;\n margin-bottom: 30px;\n}\n\nform {\n display: flex;\n flex-direction: column;\n margin-bottom: 30px;\n}\n\ntextarea {\n margin-bottom: 15px;\n padding: 15px;\n font-family: monospace;\n border: 1px solid #ddd;\n border-radius: 5px;\n resize: vertical;\n}\n\nbutton {\n padding: 12px;\n background-color: #3498db;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 1em;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: #2980b9;\n}\n\n.error {\n color: #e74c3c;\n font-weight: bold;\n padding: 10px;\n background-color: #fadbd8;\n border-radius: 5px;\n}\n\n.summary {\n background-color: #eaf2f8;\n padding: 15px;\n border-radius: 5px;\n margin-bottom: 20px;\n}\n\n.card-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 30px;\n}\n\n.card {\n background-color: #fff;\n border: 1px solid #ddd;\n border-radius: 10px;\n overflow: hidden;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.card:hover {\n transform: translateY(-5px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n}\n\n.card-header {\n background-color: #3498db;\n color: white;\n padding: 15px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.card-header h3 {\n margin: 0;\n font-size: 1.2em;\n}\n\n.badge {\n background-color: #2ecc71;\n color: white;\n padding: 5px 10px;\n border-radius: 20px;\n font-size: 0.8em;\n}\n\n.card-body {\n padding: 20px;\n}\n\n.cover-image {\n width: 100%;\n height: 200px;\n object-fit: cover;\n border-radius: 5px;\n margin-bottom: 15px;\n}\n\n.card p {\n margin: 10px 0;\n font-size: 0.9em;\n}\n\n.description {\n margin-top: 15px;\n font-size: 0.9em;\n}\n\n.card-footer {\n padding: 15px;\n background-color: #f8f9fa;\n display: flex;\n justify-content: space-around;\n}\n\n.button {\n display: inline-block;\n padding: 8px 15px;\n background-color: #3498db;\n color: white;\n text-decoration: none;\n border-radius: 5px;\n transition: background-color 0.3s ease;\n}\n\n.button:hover {\n background-color: #2980b9;\n}\n\n.footer {\n margin-top: 30px;\n text-align: center;\n font-size: 0.9em;\n color: #7f8c8d;\n}\n\n.footer a {\n color: #3498db;\n text-decoration: none;\n}\n\n.footer a:hover {\n text-decoration: underline;\n}\n\n@media (max-width: 768px) {\n .container {\n padding: 20px;\n }\n\n .card-container {\n grid-template-columns: 1fr;\n }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/temptemp/ezzzz/code/main.tsx","extension","actionData","errors"]