Know Your Boundaries

\n \n See a sample\n \n | \n \n

\n {isLearnMoreExpanded && (\n

\n People, like bridges, have ranges of tolerance, which can be described by lists of symptoms. \n If I'm doing things in the green list, I'm flourishing - I'm in good shape. If I'm doing things \n in the yellow list, I'm hitting my boundaries - time to pay attention. If I'm doing things in \n the red list, it's intolerable - I'm at risk of collapsing, and something needs to change.\n

\n Revisit your lists often to check in, and get specific and clear about \"how you're doing.\"\n

\n \n Read full article\n \n

\n )}\n

\n Intolerable\n Pushing limits\n Flourishing\n

{renderItems(redItems, 'red')}\n e.key === \"Enter\" && addItem(\"red\", e.currentTarget.value)}\n />\n

{renderItems(yellowItems, 'yellow')}\n e.key === \"Enter\" && addItem(\"yellow\", e.currentTarget.value)}\n />\n

{renderItems(greenItems, 'green')}\n e.key === \"Enter\" && addItem(\"green\", e.currentTarget.value)}\n />\n

\n \n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nasync function server(request: Request): Promise {\n\n return new Response(`\n \n \n Know Your Boundaries\n \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 margin: 0;\n font-family: 'Inter', system-ui, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background-color: #f0f0f0;\n}\n\n.title {\n font-size: 2.5rem;\n font-weight: 700;\n margin-bottom: 1rem;\n color: #333;\n}\n\n.container {\n width: 100%;\n max-width: 1500px;\n text-align: center;\n padding: 0 20px;\n box-sizing: border-box;\n}\n\n.learn-more-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: 2rem;\n max-width: 500px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.learn-more-links {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.5rem;\n}\n\n.sample-link,\n.learn-more-button {\n background: none;\n border: none;\n color: #007bff;\n cursor: pointer;\n font-size: 1rem;\n padding: 0;\n text-decoration: none;\n}\n\n.sample-link:hover,\n.learn-more-button:hover {\n text-decoration: underline;\n}\n\n.link-separator {\n margin: 0 0.5rem;\n color: #007bff;\n}\n\n.learn-more-text {\n background-color: #f0f0f0;\n text-align: left;\n font-size: 0.9rem;\n line-height: 1.5;\n margin-top: 1rem;\n padding: 0;\n color: #333;\n}\n\n.read-more-link {\n display: inline-block;\n margin-top: 1rem;\n color: #007bff;\n text-decoration: none;\n}\n\n.read-more-link:hover {\n text-decoration: underline;\n}\n\n.gradient-container {\n width: 100%;\n margin-bottom: 2rem;\n}\n\n.gradient-labels {\n display: flex;\n justify-content: space-between;\n margin-bottom: 5px;\n}\n\n.label {\n font-weight: bold;\n font-size: 0.9em;\n}\n\n.label.red { color: #8B0000; }\n.label.yellow { color: #FFD700; }\n.label.green { color: #2E8B57; }\n\n.gradient-line {\n height: 40px;\n background: linear-gradient(to right, #8B0000, #FFD700, #90EE90);\n width: 100%;\n}\n\n.red-section { border-top: 2px solid #8B0000; }\n.yellow-section { border-top: 2px solid #FFD700; }\n.green-section { border-top: 2px solid #90EE90; }\n\n.sections {\n width: 100%;\n}\n\n.sections {\n display: flex;\n justify-content: space-between;\n}\n\n.section {\n flex: 1;\n margin: 0 12.5px;\n padding-top: 10px;\n width: 33.33%;\n box-sizing: border-box;\n}\n\nul {\n list-style-type: none;\n padding: 0;\n margin-bottom: 1rem;\n margin: 0;\n text-align: left;\n}\n\nli {\n margin: 5px 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n word-break: break-word;\n overflow-wrap: break-word;\n max-width: 100%;\n padding-bottom: 5px;\n border-bottom: 1px solid #e0e0e0;\n font-weight: 400;\n}\n\nli:last-child {\n border-bottom: none;\n}\n\nli button {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 0.8em;\n padding: 0;\n margin-left: 5px;\n flex-shrink: 0;\n opacity: 0.7;\n}\n\n.reorder-buttons {\n display: flex;\n gap: 5px;\n margin-left: 5px;\n}\n\n.input-field {\n width: 95%;\n padding: 5px;\n border: 1px solid #ccc;\n border-radius: 3px;\n box-sizing: border-box;\n margin-bottom: 1rem;\n max-width: 100%;\n}\n\n.button-container {\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n}\n\n.reorder-button {\n padding: 10px 20px;\n margin-top: 1rem;\n background-color: #f0f0f0;\n color: #333;\n border: 1px solid #ccc;\n border-radius: 5px;\n cursor: pointer;\n}\n\n.reorder-button:hover {\n background-color: #e0e0e0;\n}\n\n.export-button {\n padding: 10px 20px;\n margin-top: 1rem;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n\n.export-button:hover {\n background-color: #0056b3;\n}\n\n@media (max-width: 768px) {\n .sections {\n flex-direction: column;\n }\n .section {\n width: 100%;\n margin: 0;\n margin-bottom: 20px;\n }\n}\n`;\n\nexport default server;","deleted","label",[98],"permalink","https://www.val.town/x/kaz/concentricCirclesApp/code/main.tsx","extension","actionData","errors"]