diff --git a/package-lock.json b/package-lock.json index c88dad4..9bdeeea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.3.0", "@testing-library/user-event": "^13.5.0", + "firebase": "^11.8.0", "react": "^19.1.0", "react-dom": "^19.1.0", "react-scripts": "5.0.1", @@ -2455,6 +2456,692 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@firebase/ai": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@firebase/ai/-/ai-1.3.0.tgz", + "integrity": "sha512-qBxJTtl9hpgZr050kVFTRADX6I0Ss6mEQyp/JEkBgKwwxixKnaRNqEDGFba4OKNL7K8E4Y7LlA/ZW6L8aCKH4A==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/app-check-interop-types": "0.3.3", + "@firebase/component": "0.6.17", + "@firebase/logger": "0.4.4", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "@firebase/app": "0.x", + "@firebase/app-types": "0.x" + } + }, + "node_modules/@firebase/analytics": { + "version": "0.10.16", + "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.10.16.tgz", + "integrity": "sha512-cMtp19He7Fd6uaj/nDEul+8JwvJsN8aRSJyuA1QN3QrKvfDDp+efjVurJO61sJpkVftw9O9nNMdhFbRcTmTfRQ==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/installations": "0.6.17", + "@firebase/logger": "0.4.4", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/analytics-compat": { + "version": "0.2.22", + "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.2.22.tgz", + "integrity": "sha512-VogWHgwkdYhjWKh8O1XU04uPrRaiDihkWvE/EMMmtWtaUtVALnpLnUurc3QtSKdPnvTz5uaIGKlW84DGtSPFbw==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/analytics": "0.10.16", + "@firebase/analytics-types": "0.8.3", + "@firebase/component": "0.6.17", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/analytics-types": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.8.3.tgz", + "integrity": "sha512-VrIp/d8iq2g501qO46uGz3hjbDb8xzYMrbu8Tp0ovzIzrvJZ2fvmj649gTjge/b7cCCcjT0H37g1gVtlNhnkbg==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/app": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.13.0.tgz", + "integrity": "sha512-Vj3MST245nq+V5UmmfEkB3isIgPouyUr8yGJlFeL9Trg/umG5ogAvrjAYvQ8gV7daKDoQSRnJKWI2JFpQqRsuQ==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/logger": "0.4.4", + "@firebase/util": "1.12.0", + "idb": "7.1.1", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/@firebase/app-check": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.10.0.tgz", + "integrity": "sha512-AZlRlVWKcu8BH4Yf8B5EI8sOi2UNGTS8oMuthV45tbt6OVUTSQwFPIEboZzhNJNKY+fPsg7hH8vixUWFZ3lrhw==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/logger": "0.4.4", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/app-check-compat": { + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.3.25.tgz", + "integrity": "sha512-3zrsPZWAKfV7DVC20T2dgfjzjtQnSJS65OfMOiddMUtJL1S5i0nAZKsdX0bOEvvrd0SBIL8jYnfpfDeQRnhV3w==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/app-check": "0.10.0", + "@firebase/app-check-types": "0.5.3", + "@firebase/component": "0.6.17", + "@firebase/logger": "0.4.4", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/app-check-interop-types": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@firebase/app-check-interop-types/-/app-check-interop-types-0.3.3.tgz", + "integrity": "sha512-gAlxfPLT2j8bTI/qfe3ahl2I2YcBQ8cFIBdhAQA4I2f3TndcO+22YizyGYuttLHPQEpWkhmpFW60VCFEPg4g5A==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/app-check-types": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@firebase/app-check-types/-/app-check-types-0.5.3.tgz", + "integrity": "sha512-hyl5rKSj0QmwPdsAxrI5x1otDlByQ7bvNvVt8G/XPO2CSwE++rmSVf3VEhaeOR4J8ZFaF0Z0NDSmLejPweZ3ng==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/app-compat": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.4.0.tgz", + "integrity": "sha512-LjLUrzbUgTa/sCtPoLKT2C7KShvLVHS3crnU1Du02YxnGVLE0CUBGY/NxgfR/Zg84mEbj1q08/dgesojxjn0dA==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/app": "0.13.0", + "@firebase/component": "0.6.17", + "@firebase/logger": "0.4.4", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/@firebase/app-types": { + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.3.tgz", + "integrity": "sha512-kRVpIl4vVGJ4baogMDINbyrIOtOxqhkZQg4jTq3l8Lw6WSk0xfpEYzezFu+Kl4ve4fbPl79dvwRtaFqAC/ucCw==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/auth": { + "version": "1.10.5", + "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.10.5.tgz", + "integrity": "sha512-6wF/NdMTwObL4RNQePunuzMr9O3gyftisvFZFFKf57D2HONXo87YymogRV8d+Z7SLA0rcNBN1gLJVk2D0y97gA==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/logger": "0.4.4", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "@firebase/app": "0.x", + "@react-native-async-storage/async-storage": "^1.18.1" + }, + "peerDependenciesMeta": { + "@react-native-async-storage/async-storage": { + "optional": true + } + } + }, + "node_modules/@firebase/auth-compat": { + "version": "0.5.25", + "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.5.25.tgz", + "integrity": "sha512-YKUYnvrxXBRhH/iYEwSOv85VPvc6P36GW1OCDRebTw/cvgoj7pwac2nZKYFs5FHlNYe7Bc9I4BoY2X0vlkJo+g==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/auth": "1.10.5", + "@firebase/auth-types": "0.13.0", + "@firebase/component": "0.6.17", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/auth-interop-types": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.2.4.tgz", + "integrity": "sha512-JPgcXKCuO+CWqGDnigBtvo09HeBs5u/Ktc2GaFj2m01hLarbxthLNm7Fk8iOP1aqAtXV+fnnGj7U28xmk7IwVA==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/auth-types": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.13.0.tgz", + "integrity": "sha512-S/PuIjni0AQRLF+l9ck0YpsMOdE8GO2KU6ubmBB7P+7TJUCQDa3R1dlgYm9UzGbbePMZsp0xzB93f2b/CgxMOg==", + "license": "Apache-2.0", + "peerDependencies": { + "@firebase/app-types": "0.x", + "@firebase/util": "1.x" + } + }, + "node_modules/@firebase/component": { + "version": "0.6.17", + "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.6.17.tgz", + "integrity": "sha512-M6DOg7OySrKEFS8kxA3MU5/xc37fiOpKPMz6cTsMUcsuKB6CiZxxNAvgFta8HGRgEpZbi8WjGIj6Uf+TpOhyzg==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/@firebase/data-connect": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/@firebase/data-connect/-/data-connect-0.3.8.tgz", + "integrity": "sha512-xC50SxurrP0j9ksltZ8O2SuPuWTu9KymNxtSE4bmcc/HMOnOHaURgLyrQpcC5Pc7HmtCBxh9Q/lNKyc37rj5/g==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/auth-interop-types": "0.2.4", + "@firebase/component": "0.6.17", + "@firebase/logger": "0.4.4", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/database": { + "version": "1.0.18", + "resolved": "https://registry.npmjs.org/@firebase/database/-/database-1.0.18.tgz", + "integrity": "sha512-uXtYQmK6JCmqSx7dTOQD/qZtSnbMqnwvklF9n7wOJbdti4wKHmeUzgGXhPwDhN/R/BDTq78zKAbXya7hrCQjHw==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/app-check-interop-types": "0.3.3", + "@firebase/auth-interop-types": "0.2.4", + "@firebase/component": "0.6.17", + "@firebase/logger": "0.4.4", + "@firebase/util": "1.12.0", + "faye-websocket": "0.11.4", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/@firebase/database-compat": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/@firebase/database-compat/-/database-compat-2.0.9.tgz", + "integrity": "sha512-9S6zK5+Tzslkt+lrYHDqbCbKBSQn3YYrNLIw8hTa/ALoqRLNTXF6acQIlxAxSeZj1hTttE6RRbuxxpMQJYt83w==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/database": "1.0.18", + "@firebase/database-types": "1.0.14", + "@firebase/logger": "0.4.4", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/@firebase/database-types": { + "version": "1.0.14", + "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-1.0.14.tgz", + "integrity": "sha512-8a0Q1GrxM0akgF0RiQHliinhmZd+UQPrxEmUv7MnQBYfVFiLtKOgs3g6ghRt/WEGJHyQNslZ+0PocIwNfoDwKw==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/app-types": "0.9.3", + "@firebase/util": "1.12.0" + } + }, + "node_modules/@firebase/firestore": { + "version": "4.7.15", + "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.7.15.tgz", + "integrity": "sha512-FgWTmkNBEXdKCoN2ngBNjrMaXuBx6QwjiZZVnOGg+VjUmiBq5gAqlDIW5bZY6i/NYvLUrWugdqIs7y9GHEqwww==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/logger": "0.4.4", + "@firebase/util": "1.12.0", + "@firebase/webchannel-wrapper": "1.0.3", + "@grpc/grpc-js": "~1.9.0", + "@grpc/proto-loader": "^0.7.8", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/firestore-compat": { + "version": "0.3.50", + "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.50.tgz", + "integrity": "sha512-1hAM+iaIqy2HHvSHQ56ccOOIigTeWAwjIpeQ+/O92uBoiajEITHdJofnGHglhhB5VV5qFl59Yz/AVDc+DssdYg==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/firestore": "4.7.15", + "@firebase/firestore-types": "3.0.3", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/firestore-types": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-3.0.3.tgz", + "integrity": "sha512-hD2jGdiWRxB/eZWF89xcK9gF8wvENDJkzpVFb4aGkzfEaKxVRD1kjz1t1Wj8VZEp2LCB53Yx1zD8mrhQu87R6Q==", + "license": "Apache-2.0", + "peerDependencies": { + "@firebase/app-types": "0.x", + "@firebase/util": "1.x" + } + }, + "node_modules/@firebase/functions": { + "version": "0.12.7", + "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.12.7.tgz", + "integrity": "sha512-gi8cw7yvaz19Erut+S0rHzNOWp4zPxAU/Kplb+XQoaE5gMV7MjHQoOGnYhSY8uOVj5f80S553s+2OBszG+14Ag==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/app-check-interop-types": "0.3.3", + "@firebase/auth-interop-types": "0.2.4", + "@firebase/component": "0.6.17", + "@firebase/messaging-interop-types": "0.2.3", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/functions-compat": { + "version": "0.3.24", + "resolved": "https://registry.npmjs.org/@firebase/functions-compat/-/functions-compat-0.3.24.tgz", + "integrity": "sha512-UjJabci+Bqci+A9WqfJ6sjZp+wGvi47llnQMjQRrF4coKfUyu9zBNTXhbx5W3rdVFQYwnWJm8VuluuNh2PCuyQ==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/functions": "0.12.7", + "@firebase/functions-types": "0.6.3", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/functions-types": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.6.3.tgz", + "integrity": "sha512-EZoDKQLUHFKNx6VLipQwrSMh01A1SaL3Wg6Hpi//x6/fJ6Ee4hrAeswK99I5Ht8roiniKHw4iO0B1Oxj5I4plg==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/installations": { + "version": "0.6.17", + "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.6.17.tgz", + "integrity": "sha512-zfhqCNJZRe12KyADtRrtOj+SeSbD1H/K8J24oQAJVv/u02eQajEGlhZtcx9Qk7vhGWF5z9dvIygVDYqLL4o1XQ==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/util": "1.12.0", + "idb": "7.1.1", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/installations-compat": { + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/@firebase/installations-compat/-/installations-compat-0.2.17.tgz", + "integrity": "sha512-J7afeCXB7yq25FrrJAgbx8mn1nG1lZEubOLvYgG7ZHvyoOCK00sis5rj7TgDrLYJgdj/SJiGaO1BD3BAp55TeA==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/installations": "0.6.17", + "@firebase/installations-types": "0.5.3", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/installations-types": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.5.3.tgz", + "integrity": "sha512-2FJI7gkLqIE0iYsNQ1P751lO3hER+Umykel+TkLwHj6plzWVxqvfclPUZhcKFVQObqloEBTmpi2Ozn7EkCABAA==", + "license": "Apache-2.0", + "peerDependencies": { + "@firebase/app-types": "0.x" + } + }, + "node_modules/@firebase/logger": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.4.4.tgz", + "integrity": "sha512-mH0PEh1zoXGnaR8gD1DeGeNZtWFKbnz9hDO91dIml3iou1gpOnLqXQ2dJfB71dj6dpmUjcQ6phY3ZZJbjErr9g==", + "license": "Apache-2.0", + "dependencies": { + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/@firebase/messaging": { + "version": "0.12.21", + "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.12.21.tgz", + "integrity": "sha512-bYJ2Evj167Z+lJ1ach6UglXz5dUKY1zrJZd15GagBUJSR7d9KfiM1W8dsyL0lDxcmhmA/sLaBYAAhF1uilwN0g==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/installations": "0.6.17", + "@firebase/messaging-interop-types": "0.2.3", + "@firebase/util": "1.12.0", + "idb": "7.1.1", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/messaging-compat": { + "version": "0.2.21", + "resolved": "https://registry.npmjs.org/@firebase/messaging-compat/-/messaging-compat-0.2.21.tgz", + "integrity": "sha512-1yMne+4BGLbHbtyu/VyXWcLiefUE1+K3ZGfVTyKM4BH4ZwDFRGoWUGhhx+tKRX4Tu9z7+8JN67SjnwacyNWK5g==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/messaging": "0.12.21", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/messaging-interop-types": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@firebase/messaging-interop-types/-/messaging-interop-types-0.2.3.tgz", + "integrity": "sha512-xfzFaJpzcmtDjycpDeCUj0Ge10ATFi/VHVIvEEjDNc3hodVBQADZ7BWQU7CuFpjSHE+eLuBI13z5F/9xOoGX8Q==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/performance": { + "version": "0.7.6", + "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.7.6.tgz", + "integrity": "sha512-AsOz74dSTlyQGlnnbLWXiHFAsrxhpssPOsFFi4HgOJ5DjzkK7ZdZ/E9uMPrwFoXJyMVoybGRuqsL/wkIbFITsA==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/installations": "0.6.17", + "@firebase/logger": "0.4.4", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0", + "web-vitals": "^4.2.4" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/performance-compat": { + "version": "0.2.19", + "resolved": "https://registry.npmjs.org/@firebase/performance-compat/-/performance-compat-0.2.19.tgz", + "integrity": "sha512-4cU0T0BJ+LZK/E/UwFcvpBCVdkStgBMQwBztM9fJPT6udrEUk3ugF5/HT+E2Z22FCXtIaXDukJbYkE/c3c6IHw==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/logger": "0.4.4", + "@firebase/performance": "0.7.6", + "@firebase/performance-types": "0.2.3", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/performance-types": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@firebase/performance-types/-/performance-types-0.2.3.tgz", + "integrity": "sha512-IgkyTz6QZVPAq8GSkLYJvwSLr3LS9+V6vNPQr0x4YozZJiLF5jYixj0amDtATf1X0EtYHqoPO48a9ija8GocxQ==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/performance/node_modules/web-vitals": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz", + "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/remote-config": { + "version": "0.6.4", + "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.6.4.tgz", + "integrity": "sha512-ZyLJRT46wtycyz2+opEkGaoFUOqRQjt/0NX1WfUISOMCI/PuVoyDjqGpq24uK+e8D5NknyTpiXCVq5dowhScmg==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/installations": "0.6.17", + "@firebase/logger": "0.4.4", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/remote-config-compat": { + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/@firebase/remote-config-compat/-/remote-config-compat-0.2.17.tgz", + "integrity": "sha512-KelsBD0sXSC0u3esr/r6sJYGRN6pzn3bYuI/6pTvvmZbjBlxQkRabHAVH6d+YhLcjUXKIAYIjZszczd1QJtOyA==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/logger": "0.4.4", + "@firebase/remote-config": "0.6.4", + "@firebase/remote-config-types": "0.4.0", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/remote-config-types": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@firebase/remote-config-types/-/remote-config-types-0.4.0.tgz", + "integrity": "sha512-7p3mRE/ldCNYt8fmWMQ/MSGRmXYlJ15Rvs9Rk17t8p0WwZDbeK7eRmoI1tvCPaDzn9Oqh+yD6Lw+sGLsLg4kKg==", + "license": "Apache-2.0" + }, + "node_modules/@firebase/storage": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.13.11.tgz", + "integrity": "sha512-nBtCGGpr39vuAeTQhG73nvMq3BjQBTgIg6fWufB6qglWYQCgky/XE4duSrOhTp2/QC+H3/SnaE/nKOQmjnPqjg==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "@firebase/app": "0.x" + } + }, + "node_modules/@firebase/storage-compat": { + "version": "0.3.21", + "resolved": "https://registry.npmjs.org/@firebase/storage-compat/-/storage-compat-0.3.21.tgz", + "integrity": "sha512-LG3978H2Vy1XGa0Jz9VNFwgMrhjy/G8CTV8GkWpArzu+AhI/SE9c0e06SiXcFsVaQW2rObcqFa0zp51LDaVzRA==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.6.17", + "@firebase/storage": "0.13.11", + "@firebase/storage-types": "0.8.3", + "@firebase/util": "1.12.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/storage-types": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.8.3.tgz", + "integrity": "sha512-+Muk7g9uwngTpd8xn9OdF/D48uiQ7I1Fae7ULsWPuKoCH3HU7bfFPhxtJYzyhjdniowhuDpQcfPmuNRAqZEfvg==", + "license": "Apache-2.0", + "peerDependencies": { + "@firebase/app-types": "0.x", + "@firebase/util": "1.x" + } + }, + "node_modules/@firebase/util": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.12.0.tgz", + "integrity": "sha512-Z4rK23xBCwgKDqmzGVMef+Vb4xso2j5Q8OG0vVL4m4fA5ZjPMYQazu8OJJC3vtQRC3SQ/Pgx/6TPNVsCd70QRw==", + "hasInstallScript": true, + "license": "Apache-2.0", + "dependencies": { + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/@firebase/webchannel-wrapper": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.3.tgz", + "integrity": "sha512-2xCRM9q9FlzGZCdgDMJwc0gyUkWFtkosy7Xxr6sFgQwn+wMNIWd7xIvYNauU1r64B5L5rsGKy/n9TKJ0aAFeqQ==", + "license": "Apache-2.0" + }, + "node_modules/@grpc/grpc-js": { + "version": "1.9.15", + "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.15.tgz", + "integrity": "sha512-nqE7Hc0AzI+euzUwDAy0aY5hCp10r734gMGRdU+qOPX0XSceI2ULrcXB5U2xSc5VkWwalCj4M7GzCAygZl2KoQ==", + "license": "Apache-2.0", + "dependencies": { + "@grpc/proto-loader": "^0.7.8", + "@types/node": ">=12.12.47" + }, + "engines": { + "node": "^8.13.0 || >=10.10.0" + } + }, + "node_modules/@grpc/proto-loader": { + "version": "0.7.15", + "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.15.tgz", + "integrity": "sha512-tMXdRCfYVixjuFK+Hk0Q1s38gV9zDiDJfWL3h1rv4Qc39oILCu1TRTDt7+fGUI8K4G1Fj125Hx/ru3azECWTyQ==", + "license": "Apache-2.0", + "dependencies": { + "lodash.camelcase": "^4.3.0", + "long": "^5.0.0", + "protobufjs": "^7.2.5", + "yargs": "^17.7.2" + }, + "bin": { + "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@grpc/proto-loader/node_modules/cliui": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "license": "ISC", + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@grpc/proto-loader/node_modules/yargs": { + "version": "17.7.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", + "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "license": "MIT", + "dependencies": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@grpc/proto-loader/node_modules/yargs-parser": { + "version": "21.1.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.13.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", @@ -3087,6 +3774,70 @@ } } }, + "node_modules/@protobufjs/aspromise": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz", + "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==", + "license": "BSD-3-Clause" + }, + "node_modules/@protobufjs/base64": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz", + "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==", + "license": "BSD-3-Clause" + }, + "node_modules/@protobufjs/codegen": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz", + "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==", + "license": "BSD-3-Clause" + }, + "node_modules/@protobufjs/eventemitter": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz", + "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==", + "license": "BSD-3-Clause" + }, + "node_modules/@protobufjs/fetch": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz", + "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==", + "license": "BSD-3-Clause", + "dependencies": { + "@protobufjs/aspromise": "^1.1.1", + "@protobufjs/inquire": "^1.1.0" + } + }, + "node_modules/@protobufjs/float": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz", + "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==", + "license": "BSD-3-Clause" + }, + "node_modules/@protobufjs/inquire": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz", + "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==", + "license": "BSD-3-Clause" + }, + "node_modules/@protobufjs/path": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz", + "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==", + "license": "BSD-3-Clause" + }, + "node_modules/@protobufjs/pool": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz", + "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==", + "license": "BSD-3-Clause" + }, + "node_modules/@protobufjs/utf8": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz", + "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==", + "license": "BSD-3-Clause" + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -8169,6 +8920,42 @@ "node": ">=8" } }, + "node_modules/firebase": { + "version": "11.8.0", + "resolved": "https://registry.npmjs.org/firebase/-/firebase-11.8.0.tgz", + "integrity": "sha512-zIv11czOqFayPllaJySKIKB2pS+xoWOnfI7j85SOiBKY1IW3NuZIaL+UgsZA+4PQZkPhFP8vmU2/oOun04ALbg==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/ai": "1.3.0", + "@firebase/analytics": "0.10.16", + "@firebase/analytics-compat": "0.2.22", + "@firebase/app": "0.13.0", + "@firebase/app-check": "0.10.0", + "@firebase/app-check-compat": "0.3.25", + "@firebase/app-compat": "0.4.0", + "@firebase/app-types": "0.9.3", + "@firebase/auth": "1.10.5", + "@firebase/auth-compat": "0.5.25", + "@firebase/data-connect": "0.3.8", + "@firebase/database": "1.0.18", + "@firebase/database-compat": "2.0.9", + "@firebase/firestore": "4.7.15", + "@firebase/firestore-compat": "0.3.50", + "@firebase/functions": "0.12.7", + "@firebase/functions-compat": "0.3.24", + "@firebase/installations": "0.6.17", + "@firebase/installations-compat": "0.2.17", + "@firebase/messaging": "0.12.21", + "@firebase/messaging-compat": "0.2.21", + "@firebase/performance": "0.7.6", + "@firebase/performance-compat": "0.2.19", + "@firebase/remote-config": "0.6.4", + "@firebase/remote-config-compat": "0.2.17", + "@firebase/storage": "0.13.11", + "@firebase/storage-compat": "0.3.21", + "@firebase/util": "1.12.0" + } + }, "node_modules/flat-cache": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz", @@ -11157,6 +11944,12 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "license": "MIT" }, + "node_modules/lodash.camelcase": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", + "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==", + "license": "MIT" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -11187,6 +11980,12 @@ "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==", "license": "MIT" }, + "node_modules/long": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz", + "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==", + "license": "Apache-2.0" + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -13604,6 +14403,30 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "license": "MIT" }, + "node_modules/protobufjs": { + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.4.0.tgz", + "integrity": "sha512-mRUWCc3KUU4w1jU8sGxICXH/gNS94DvI1gxqDvBzhj1JpcsimQkYiOJfwsPUykUI5ZaspFbSgmBLER8IrQ3tqw==", + "hasInstallScript": true, + "license": "BSD-3-Clause", + "dependencies": { + "@protobufjs/aspromise": "^1.1.2", + "@protobufjs/base64": "^1.1.2", + "@protobufjs/codegen": "^2.0.4", + "@protobufjs/eventemitter": "^1.1.0", + "@protobufjs/fetch": "^1.1.0", + "@protobufjs/float": "^1.0.2", + "@protobufjs/inquire": "^1.1.0", + "@protobufjs/path": "^1.1.2", + "@protobufjs/pool": "^1.1.0", + "@protobufjs/utf8": "^1.1.0", + "@types/node": ">=13.7.0", + "long": "^5.0.0" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", diff --git a/package.json b/package.json index dc90ef1..a59f16a 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.3.0", "@testing-library/user-event": "^13.5.0", + "firebase": "^11.8.0", "react": "^19.1.0", "react-dom": "^19.1.0", "react-scripts": "5.0.1", diff --git a/src/App.css b/src/App.css index 74b5e05..bd44812 100644 --- a/src/App.css +++ b/src/App.css @@ -13,8 +13,16 @@ } } +body { + background: url('./assets/image.png') no-repeat center center fixed; + background-size: cover; + margin: 0; + padding: 0; + font-family: Arial, sans-serif; +} + .App-header { - background-color: #282c34; + background: rgba(0, 0, 0, 0.6); /* Halbtransparenter schwarzer Hintergrund */ min-height: 100vh; display: flex; flex-direction: column; @@ -22,6 +30,31 @@ justify-content: center; font-size: calc(10px + 2vmin); color: white; + padding: 20px; + text-align: center; +} + +.App-header h1, .App-header p { + background: rgba(0, 0, 0, 0.5); /* Halbtransparenter schwarzer Hintergrund */ + padding: 10px 15px; + border-radius: 8px; + display: inline-block; +} + +.App-header h1 { + background: rgba(0, 0, 0, 0.7); /* Dunklerer halbtransparenter Hintergrund */ + font-size: 2.5em; /* Größere Schriftgröße */ + padding: 15px 20px; /* Mehr Padding für bessere Lesbarkeit */ + border-radius: 10px; + color: #ffffff; /* Weiß für besseren Kontrast */ +} + +.App-header p { + background: rgba(0, 0, 0, 0.6); /* Halbtransparenter Hintergrund */ + font-size: 1.2em; /* Etwas größere Schriftgröße */ + padding: 10px 15px; + border-radius: 8px; + color: #f0f0f0; /* Helles Grau für besseren Kontrast */ } .App-link { @@ -36,3 +69,296 @@ transform: rotate(360deg); } } + +form { + background: rgba(0, 0, 0, 0.6); /* Halbtransparenter schwarzer Hintergrund */ + backdrop-filter: blur(10px); /* Blur-Effekt */ + padding: 25px; + border-radius: 12px; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); + width: 70%; /* Noch breitere Box */ + margin: 25px auto; + margin-top: 200px; /* Abstand von der Oberseite */ + transition: transform 0.2s ease-in-out; + display: flex; + flex-direction: column; + align-items: center; /* Zentriere die Inhalte in der Box */ + gap: 15px; /* Gleichmäßiger Abstand zwischen den Elementen */ +} + +form:hover { + transform: scale(1.02); +} + +form label { + display: block; + margin-bottom: 12px; + font-size: 1.3em; + color: #ffffff; /* Weiß */ + width: 100%; /* Eingabefelder und Labels nehmen die gesamte Breite ein */ + text-align: center; /* Zentriere den Text der Labels */ +} + +form input { + width: 95%; /* Noch breitere Textfelder */ + padding: 12px; + margin: 0 auto; /* Zentriere die Textfelder innerhalb der Box */ + margin-top: 6px; + margin-bottom: 18px; + border: 1px solid #555; + border-radius: 6px; + font-size: 1.2em; /* Größere Schriftgröße */ + height: auto; /* Automatische Höhe */ + line-height: 1.5; /* Angemessene Zeilenhöhe */ + background-color: rgba(255, 255, 255, 0.8); /* Halbtransparenter weißer Hintergrund */ + color: #000000; /* Schwarz */ + text-align: center; /* Text zentriert in den Eingabefeldern */ +} + +form input:focus { + outline: none; + border-color: #61dafb; + box-shadow: 0 0 5px #61dafb; +} + +form select { + width: 95%; /* Gleiche Breite wie die Textfelder */ + padding: 12px; + margin: 0 auto 18px auto; /* Zentriere das Dropdown-Menü */ + border: 1px solid #555; + border-radius: 6px; + font-size: 1.2em; /* Gleiche Schriftgröße wie die Textfelder */ + background-color: rgba(255, 255, 255, 0.8); /* Halbtransparenter weißer Hintergrund */ + color: #000000; /* Schwarz */ + text-align: center; +} + +form select:focus { + outline: none; + border-color: #61dafb; + box-shadow: 0 0 5px #61dafb; +} + +form button { + background-color: #28a745; /* Grün */ + color: #ffffff; /* Weiß */ + border: none; + padding: 12px 24px; + border-radius: 6px; + font-size: 1.1em; + cursor: pointer; + transition: background-color 0.3s ease; +} + +form button:hover { + background-color: #218838; /* Dunkleres Grün beim Hover */ +} + +form button:active { + background-color: #1b8cd8; + transform: scale(0.98); +} + +.radio-group { + display: flex; + flex-wrap: wrap; /* Optionen umbrechen, falls nötig */ + gap: 15px; /* Abstand zwischen den Optionen */ + justify-content: center; /* Zentriere die Optionen */ + margin: 15px 0; /* Abstand zur Umgebung */ +} + +.radio-group label { + font-size: 1.2em; /* Gleiche Schriftgröße wie die Textfelder */ + color: #ffffff; /* Weiß */ + background: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */ + padding: 10px 15px; /* Polsterung für bessere Lesbarkeit */ + border-radius: 8px; /* Abgerundete Ecken */ + display: flex; + align-items: center; + gap: 10px; /* Abstand zwischen Radio-Button und Text */ + cursor: pointer; /* Zeige den Cursor als Hand */ + transition: background-color 0.3s ease; + border: 2px solid transparent; /* Standardrahmen transparent */ +} + +.radio-group label:hover { + background-color: rgba(0, 128, 0, 0.7); /* Dunklerer grüner Hintergrund beim Hover */ +} + +.radio-group input[type="radio"] { + display: none; /* Verstecke die Radio-Buttons */ +} + +.radio-group input[type="radio"]:checked + label { + border-color: #28a745; /* Grüner Rahmen bei Auswahl */ + background-color: rgba(0, 128, 0, 0.7); /* Grüner Hintergrund nur bei Auswahl */ +} + +form input[type="number"] { + width: 95%; /* Gleiche Breite wie die anderen Eingabefelder */ + padding: 12px; + margin: 10px auto; /* Abstand zur Umgebung */ + border: 1px solid #555; + border-radius: 6px; + font-size: 1.2em; /* Gleiche Schriftgröße wie die Textfelder */ + background-color: rgba(255, 255, 255, 0.8); /* Halbtransparenter weißer Hintergrund */ + color: #000000; /* Schwarz */ + text-align: center; +} + +form input[type="number"]:focus { + outline: none; + border-color: #61dafb; + box-shadow: 0 0 5px #61dafb; +} + +@media (max-width: 768px) { + form { + width: 80%; /* Schmalere Box im mobilen Layout */ + padding: 20px; /* Weniger Padding für kleinere Bildschirme */ + display: flex; /* Flexbox aktivieren */ + justify-content: center; /* Inhalte horizontal zentrieren */ + flex-direction: column; + align-items: center; /* Zentriere die Inhalte in der Box */ + margin: 0 auto; /* Zusätzliche Sicherheit für horizontale Zentrierung */ + } + + form input { + width: 90%; /* Textfelder nehmen die gesamte Breite der Box ein */ + margin: 0; /* Entferne zusätzliche Margins */ + } + + .App-header h1 { + font-size: 2em; /* Kleinere Schriftgröße für Titel */ + padding: 10px 15px; /* Weniger Padding für kleinere Bildschirme */ + } + + .App-header p { + font-size: 1em; /* Kleinere Schriftgröße für Untertitel */ + padding: 8px 12px; /* Weniger Padding für kleinere Bildschirme */ + } +} + +#intro { + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + background: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */ + color: white; + padding: 20px; +} + +#intro h1 { + font-size: 2.5em; + margin-bottom: 20px; +} + +#intro p { + font-size: 1.2em; + margin-bottom: 30px; +} + +#intro button { + background-color: #28a745; /* Grün */ + color: #282c34; + border: none; + padding: 12px 24px; + border-radius: 6px; + font-size: 1.1em; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#intro button:hover { + background-color: #218838; /* Dunkleres Grün beim Hover */ +} + +#form-section { + display: none; /* Formularbereich zunächst ausblenden */ + padding-top: 50px; + min-height: 100vh; /* Füllt den gesamten Bildschirm aus */ + background: transparent; /* Vollständig transparenter Hintergrund */ + transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out; /* Längere Übergangszeit für Transparenz */ + opacity: 0; + transform: translateY(20px) scale(0.9); /* Leicht nach unten verschoben und Start mit kleinerer Skalierung */ +} + +#form-section.visible { + display: block; /* Formularbereich sichtbar machen */ + opacity: 1; + transform: translateY(0) scale(1); /* Zurück in die ursprüngliche Position und zur vollen Größe skalieren */ + animation: bounceIn 0.8s ease-in-out; /* Bounce-Effekt hinzufügen */ +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes bounceIn { + 0% { + transform: translateY(-50px) scale(0.8); /* Start kleiner und weiter oben */ + opacity: 0; + } + 50% { + transform: translateY(10px) scale(1.1); /* Überschwingung nach unten */ + opacity: 1; + } + 100% { + transform: translateY(0) scale(1); /* Endposition */ + } +} + +footer { + background: rgba(0, 0, 0, 0.6); /* Halbtransparenter Hintergrund */ + color: white; + text-align: center; + padding: 5px 0; /* Weniger Padding */ + position: fixed; + bottom: 0; + width: 100%; + font-size: 0.8em; /* Kleinere Schriftgröße */ +} + +footer a { + color: #61dafb; + text-decoration: none; +} + +footer a:hover { + text-decoration: underline; +} + +.facts { + margin: 20px 0; + text-align: left; + display: inline-block; + background: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */ + padding: 15px; + border-radius: 8px; + color: white; +} + +.fact-row { + display: flex; + justify-content: space-between; + margin-bottom: 10px; +} + +.fact-label { + font-weight: bold; + margin-right: 10px; +} + +.fact-value { + text-align: right; +} diff --git a/src/App.js b/src/App.js index 3784575..398c977 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,134 @@ -import logo from './logo.svg'; +import { useRef, useState } from 'react'; import './App.css'; function App() { + const formSectionRef = useRef(null); + const [customNumber, setCustomNumber] = useState(); + const [email, setEmail] = useState(""); + + + const scrollToForm = () => { + const formSection = formSectionRef.current; + formSection.classList.add('visible', 'bounce'); // Füge Bounce-Klasse hinzu + setTimeout(() => { + formSection.scrollIntoView({ behavior: 'smooth' }); + formSection.classList.remove('bounce'); // Entferne Bounce-Klasse nach der Animation + }, 190); // Wartezeit für die Bounce-Animation + }; + + const handleCustomInputChange = (e) => { + setCustomNumber(e.target.value); + }; + + const handleRadioChange = (e) => { + setCustomNumber(e.target.value === 'custom' ? '' : e.target.value); + }; + + const submit = (e) => { + e.preventDefault(); // Verhindert das Standardverhalten des Formulars + if (email === ""){ + + } + } + return (