Upload LoadingScreen.js

web/src/components/LoadingScreen.js

@@ -0,0 +1,173 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const LoadingScreen = () => {
+  const { t, i18n } = useTranslation();
+
+  const handleLanguageChange = (e) => {
+    i18n.changeLanguage(e.target.value);
+  };
+
+  return (
+    <div style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      width: '100vw',
+      height: '100vh',
+      background: 'linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #4CAF50 100%)',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      zIndex: 9999,
+      padding: '20px'
+    }}>
+      {/* Language Selector */}
+      <div style={{
+        position: 'absolute',
+        top: '20px',
+        right: '20px',
+        background: 'rgba(255, 255, 255, 0.1)',
+        padding: '8px',
+        borderRadius: '8px'
+      }}>
+        <select 
+          id="language-select-loading"
+          onChange={handleLanguageChange} 
+          value={i18n.language} 
+          style={{
+            background: 'transparent',
+            color: 'white',
+            border: '1px solid white',
+            borderRadius: '5px',
+            padding: '5px 10px',
+            cursor: 'pointer',
+            fontSize: '1rem'
+          }}
+        >
+          <option value="vi" style={{color: 'black'}}>Tiếng Việt</option>
+          <option value="en" style={{color: 'black'}}>English</option>
+        </select>
+      </div>
+
+      {/* Logo */}
+      <div style={{
+        textAlign: 'center',
+        marginBottom: '40px'
+      }}>
+        <div style={{
+          fontSize: '6rem',
+          marginBottom: '20px',
+          animation: 'pulse 2s ease-in-out infinite'
+        }}>
+          🌱
+        </div>
+        <h1 style={{
+          fontSize: '4rem',
+          color: 'white',
+          margin: 0,
+          fontWeight: 'bold',
+          textShadow: '2px 2px 4px rgba(0,0,0,0.3)',
+          animation: 'fadeInUp 1s ease-out'
+        }}>
+            {t('loadingScreen.title')}
+        </h1>
+        <p style={{
+          fontSize: '1.5rem',
+          color: '#E8F5E9',
+          margin: '10px 0 0 0',
+          fontWeight: '300',
+          animation: 'fadeInUp 1s ease-out 0.3s both'
+        }}>
+          {t('loadingScreen.subtitle')}
+        </p>
+      </div>
+
+      {/* Loading Animation */}
+      <div style={{
+        display: 'flex',
+        gap: '8px',
+        marginTop: '20px'
+      }}>
+        <div style={{
+          width: '12px',
+          height: '12px',
+          borderRadius: '50%',
+          background: 'white',
+          animation: 'bounce 1.4s ease-in-out infinite both',
+          animationDelay: '0s'
+        }}></div>
+        <div style={{
+          width: '12px',
+          height: '12px',
+          borderRadius: '50%',
+          background: 'white',
+          animation: 'bounce 1.4s ease-in-out infinite both',
+          animationDelay: '0.16s'
+        }}></div>
+        <div style={{
+          width: '12px',
+          height: '12px',
+          borderRadius: '50%',
+          background: 'white',
+          animation: 'bounce 1.4s ease-in-out infinite both',
+          animationDelay: '0.32s'
+        }}></div>
+      </div>
+
+      {/* Loading Text */}
+      <p style={{
+        color: 'white',
+        fontSize: '1.1rem',
+        marginTop: '30px',
+        opacity: 0.9,
+        animation: 'fadeIn 2s ease-in-out'
+      }}>
+        {t('loadingScreen.loadingText')}
+      </p>
+
+      <style jsx>{`
+        @keyframes pulse {
+          0%, 100% {
+            transform: scale(1);
+          }
+          50% {
+            transform: scale(1.1);
+          }
+        }
+
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+
+        @keyframes bounce {
+          0%, 80%, 100% {
+            transform: scale(0);
+          }
+          40% {
+            transform: scale(1);
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default LoadingScreen;