Emoji Based English to French Vocabulary Learning

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

\n {filteredAndSortedItems.map((item, index) => (\n setSelectedItem(item)}\n >\n {item.icon}\n {showWords && {item.word} - {item.french}}\n

\n ))}\n

\n {selectedItem && (\n

{selectedItem.word} - {selectedItem.french}

\n {selectedItem.icon}\n \n

\n )}\n

\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n const randomColor = Math.floor(Math.random() * 16777215).toString(16);\n return new Response(\n `\n \n \n \n \n \n Emoji based English to French vocabulary learning\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n }\n .container {\n width: 100%;\n padding: 20px;\n box-sizing: border-box;\n background-color: rgba(255, 255, 255, 0.8);\n border-radius: 10px;\n }\n .header {\n text-align: center;\n margin-bottom: 30px;\n }\n h1 {\n color: #333;\n margin: 20px 0;\n }\n .header-line {\n border: 0;\n height: 3px;\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));\n margin: 20px 0;\n }\n .controls {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-bottom: 20px;\n gap: 10px;\n }\n .grid-container {\n position: relative;\n }\n .grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n gap: 20px;\n margin-top: 20px;\n }\n .icon-container {\n aspect-ratio: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition: transform 0.3s ease;\n position: relative;\n overflow: hidden;\n padding: 10px;\n background-color: white;\n border-radius: 10px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n }\n .icon-container:hover {\n transform: scale(1.05);\n }\n .icon {\n font-size: 3em;\n margin-bottom: 10px;\n }\n .word {\n font-size: 0.8em;\n text-align: center;\n word-break: break-word;\n }\n .selected-item-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.7);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n }\n .selected-item {\n text-align: center;\n padding: 20px;\n background-color: white;\n border-radius: 10px;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);\n }\n .large-icon {\n font-size: 6em;\n display: block;\n margin-bottom: 20px;\n }\n button {\n margin-top: 20px;\n padding: 10px 20px;\n font-size: 1em;\n cursor: pointer;\n }\n .toggle-words, .sort-button {\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n padding: 10px 20px;\n font-size: 1em;\n cursor: pointer;\n flex-shrink: 0;\n }\n .search-input {\n padding: 10px;\n font-size: 1em;\n border: 1px solid #ddd;\n border-radius: 5px;\n flex-grow: 1;\n max-width: 300px;\n }\n footer {\n text-align: center;\n margin-top: 20px;\n }\n footer a {\n color: #666;\n text-decoration: none;\n }\n footer a:hover {\n text-decoration: underline;\n }\n @media (max-width: 600px) {\n .grid {\n grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n }\n .icon {\n font-size: 2.5em;\n }\n .word {\n font-size: 0.7em;\n }\n .controls {\n flex-direction: column;\n align-items: stretch;\n }\n .toggle-words, .sort-button, .search-input {\n width: 100%;\n margin-bottom: 10px;\n }\n }\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Ttt/emojibasedenglishtofrenchvocabularylearning/code/main.tsx","extension","actionData","errors"]