Teacher's Math Flashcards

\n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: 'Google Sans', 'Arial', sans-serif;\n background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n touch-action: manipulation;\n perspective: 1000px;\n overflow: hidden;\n}\n\n.math-flashcard-container {\n width: 99vw;\n max-width: 600px;\n height: 99vh;\n max-height: auto;\n position: relative;\n perspective: 1000px;\n transition: transform 0.6s;\n transform-style: preserve-3d;\n}\n\n.math-flashcard-container.flipped {\n transform: rotateY(180deg);\n}\n\n.flashcard-inner {\n position: relative;\n width: 100%;\n height: 100%;\n transition: transform 0.6s;\n transform-style: preserve-3d;\n}\n\n.flashcard-front, .flashcard-back {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n display: flex;\n flex-direction: column;\n background: linear-gradient(145deg, #ffffff, #e6e6e6);\n border-radius: 25px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n padding: 10px;\n box-sizing: border-box;\n}\n\n.flashcard-back {\n transform: rotateY(180deg);\n}\n\n.flashcard-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0px;\n}\n\nh1, h2 {\n color: #4a4a4a;\n font-size: 2rem;\n margin: 0;\n text-align: center;\n}\n\n.flashcard {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.problem {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n}\n\n.first-number, .second-number {\n font-size: clamp(3rem, 15vh, 10rem);\n font-weight: bold;\n color: #2c3e50;\n text-align: center;\n}\n\n.second-line {\n display: flex;\n align-items: center;\n gap: 20px;\n margin-bottom: 5px;\n position: relative;\n}\n\n.second-line::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 0;\n width: 100%;\n height: 5px;\n background-color: #2c3e50;\n}\n\n.operation {\n font-size: clamp(3rem, 15vw, 8rem);\n color: #2c3e50;\n}\n\n.result-display {\n height: 115px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.result {\n font-size: clamp(3rem, 15vw, 8rem);\n color: #27ae60;\n text-align: center;\n margin-top: 5px;\n margin-bottom: 5px;\n}\n\n.multiple-choice {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 15px;\n width: 100%;\n margin-top: 0px;\n}\n\n.choice-button {\n background-color: #3498db;\n color: white;\n border: none;\n padding: clamp(10px, 4vw, 15px);\n font-size: clamp(1rem, 4vw, 1.5rem);\n border-radius: 10px;\n cursor: pointer;\n transition: background-color 0.3s, transform 0.1s;\n}\n\n.choice-button:active {\n transform: scale(0.95);\n}\n\n.choice-button.correct {\n background-color: #2ecc71;\n}\n\n.choice-button.incorrect {\n background-color: #e74c3c;\n}\n\n.next-button {\n width: 100%;\n background-color: #2ecc71;\n color: white;\n border: none;\n padding: 15px;\n font-size: 1.2rem;\n border-radius: 10px;\n margin-top: 10px;\n cursor: pointer;\n}\n\n.settings-button {\n background-color: #f1c40f;\n color: white;\n border: none;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 1.5rem;\n cursor: pointer;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.2s;\n}\n\n.settings-button:active {\n transform: scale(0.9);\n}\n\n.settings-section {\n margin-bottom: 20px;\n}\n\n.toggle-group {\n display: flex;\n flex-direction: column;\n}\n\n.toggle-group label {\n display: flex;\n align-items: center;\n margin: 10px 0;\n background-color: #ecf0f1;\n padding: 10px;\n border-radius: 10px;\n}\n\n.toggle-group input {\n margin-right: 10px;\n transform: scale(1.5);\n}\n\n.back-button {\n background-color: #3498db;\n color: white;\n border: none;\n padding: 15px;\n font-size: 1.2rem;\n border-radius: 10px;\n cursor: pointer;\n margin-top: 20px;\n width: 100%;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/qkiii/mathFlashcardApp/code/main.tsx","extension","actionData","errors"]