Upload appStyles.ts

src/styles/appStyles.ts

@@ -0,0 +1,162 @@
+
+import { CSSProperties } from 'react';
+
+export const styles: { [key: string]: CSSProperties } = {
+    card: {
+        backgroundColor: '#ffffff',
+        borderRadius: '8px',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+        marginBottom: '2rem',
+        borderLeft: '5px solid #005a9c',
+        transition: 'all 0.3s ease-in-out',
+        minHeight: '550px',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        overflow: 'hidden',
+    },
+    title: {
+        marginTop: '0',
+        color: '#003366',
+        fontSize: '2rem',
+        textAlign: 'center' as const,
+    },
+    subtitle: {
+        color: '#005a9c',
+        fontSize: '1.2rem',
+        marginBottom: '2rem',
+        textAlign: 'center' as const,
+    },
+    author: {
+        fontStyle: 'italic',
+        color: '#5a6d7d',
+        textAlign: 'center' as const,
+        marginTop: '2rem',
+    },
+    paragraph: {
+        lineHeight: '1.7',
+        fontSize: '1.1rem',
+        color: '#34495e',
+    },
+    formula: {
+        padding: '1.5rem',
+        margin: '1rem 0',
+        fontSize: '1.2rem',
+        textAlign: 'center' as const,
+        backgroundColor: '#f8f9fa',
+        borderRadius: '4px',
+    },
+    buttonContainer: {
+        display: 'flex',
+        justifyContent: 'space-between',
+    },
+    button: {
+        fontFamily: 'Lato, sans-serif',
+        fontWeight: 'bold',
+        fontSize: '1rem',
+        padding: '0.75rem 1.5rem',
+        borderRadius: '5px',
+        border: 'none',
+        cursor: 'pointer',
+        backgroundColor: '#007acc',
+        color: 'white',
+        transition: 'background-color 0.2s',
+    },
+    buttonDisabled: {
+        backgroundColor: '#a0c4e4',
+        cursor: 'not-allowed',
+    },
+    progressContainer: {
+        width: '100%',
+        backgroundColor: '#e0e0e0',
+        overflow: 'hidden',
+    },
+    progressBar: {
+        height: '10px',
+        backgroundColor: '#007acc',
+        transition: 'width 0.5s ease-in-out',
+    },
+    quizOption: {
+        display: 'block',
+        padding: '1rem',
+        margin: '0.5rem 0',
+        borderRadius: '5px',
+        border: '1px solid #ccc',
+        cursor: 'pointer',
+        transition: 'all 0.2s',
+    },
+    worksheetContainer: {
+        marginTop: '1.5rem',
+        border: '1px solid #e0e0e0',
+        borderRadius: '8px',
+        padding: '1rem 1.5rem',
+        backgroundColor: '#fdfdfd',
+    },
+    worksheetHeader: {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: '1rem',
+        marginBottom: '1rem',
+        paddingBottom: '1rem',
+        borderBottom: '1px solid #e0e0e0',
+    },
+    worksheetDataItem: {
+        padding: '0.5rem',
+        backgroundColor: '#f0f4f8',
+        borderRadius: '4px',
+        textAlign: 'center' as const,
+        fontSize: '1rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '0.5rem',
+    },
+    worksheetRow: {
+        display: 'grid',
+        gridTemplateColumns: '2fr 1.2fr 1.2fr 50px',
+        gap: '1rem',
+        alignItems: 'center',
+        padding: '0.5rem 0',
+        borderBottom: '1px solid #f0f0f0',
+    },
+    worksheetRowHeader: {
+        fontWeight: 'bold',
+        color: '#003366',
+        fontSize: '0.9rem',
+    },
+    worksheetDescription: {
+        color: '#2c3e50',
+        fontWeight: 'bold',
+        fontSize: '1rem',
+    },
+    worksheetFormula: {
+        color: '#5a6d7d',
+        textAlign: 'center' as const,
+        fontSize: '1rem',
+    },
+    worksheetInput: {
+        padding: '0.5rem',
+        fontSize: '1rem',
+        borderRadius: '4px',
+        border: '1px solid #ccc',
+        textAlign: 'right' as const,
+        width: '100%',
+        boxSizing: 'border-box',
+    },
+    feedbackIcon: {
+        fontSize: '1.5rem',
+        textAlign: 'center' as const,
+    },
+    correctFeedback: {
+        color: '#28a745',
+    },
+    incorrectFeedback: {
+        color: '#dc3545',
+    },
+    correctAnswerText: {
+        fontSize: '0.85rem',
+        color: '#5a6d7d',
+        textAlign: 'right' as const,
+        paddingTop: '0.25rem'
+    }
+};