feat: replace alerts with custom glass modals and add Terms/Privacy policy fields

server.ts

@@ -1235,7 +1235,9 @@ app.get('/api/settings', async (req: Request, res: Response) => {
     brandName: settings?.brandName || 'MICROTEC',
     brandSlogan: settings?.brandSlogan || 'Acelere seus estudos em informática e pacote Office no estilo Netflix.',
     cnpj: settings?.cnpj || '',
-    address: settings?.address || ''
+    address: settings?.address || '',
+    termsOfUse: settings?.termsOfUse || '',
+    privacyPolicy: settings?.privacyPolicy || ''
   });
 });
 
@@ -1263,7 +1265,9 @@ app.get('/api/admin/settings', authenticateToken, requireAdmin, async (req: Auth
     smtpUser: settings?.smtpUser || '',
     smtpPass: settings?.smtpPass || '',
     smtpFrom: settings?.smtpFrom || 'no-reply@microtecinformaticacurso.com.br',
-    smtpSecure: settings?.smtpSecure || false
+    smtpSecure: settings?.smtpSecure || false,
+    termsOfUse: settings?.termsOfUse || '',
+    privacyPolicy: settings?.privacyPolicy || ''
   });
 });
 

src/App.tsx

@@ -12,6 +12,7 @@ import CourseUnlockModal from './components/CourseUnlockModal';
 import CertificatesTab from './components/CertificatesTab';
 import ProfileView from './components/ProfileView';
 import HelpView from './components/HelpView';
+import CustomModal from './components/CustomModal';
 import { User as UserType, Course as CourseType, SubscriptionStatus } from './types';
 
 export default function App() {
@@ -51,7 +52,8 @@ export default function App() {
   // Course catalogue
   const [courses, setCourses] = useState<(CourseType & { progress?: number; totalLessons?: number; completedLessons?: number })[]>([]);
   const [isLoadingCourses, setIsLoadingCourses] = useState(false);
-  const [settings, setSettings] = useState<{ brandName?: string; brandSlogan?: string; cnpj?: string; address?: string } | null>(null);
+  const [settings, setSettings] = useState<{ brandName?: string; brandSlogan?: string; cnpj?: string; address?: string; termsOfUse?: string; privacyPolicy?: string } | null>(null);
+  const [infoModal, setInfoModal] = useState<{isOpen: boolean, title: string, content: string}>({isOpen: false, title: '', content: ''});
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -461,8 +463,34 @@ export default function App() {
             {settings?.cnpj && (
               <p className="text-[11px] text-zinc-650">CNPJ: {settings.cnpj} • Endereço: {settings.address}</p>
             )}
-            <p className="text-zinc-600">© 2026 {(settings?.brandName || 'Plataforma')}FLIX Inc. Todos os direitos reservados. Integrado oficialmente com a API Asaas.</p>
+            <div className="flex items-center justify-center gap-4 mt-2">
+              <button 
+                onClick={() => setInfoModal({isOpen: true, title: 'Termos de Uso', content: settings?.termsOfUse || 'Termos de uso não definidos.'})}
+                className="text-[11px] hover:text-white transition-colors underline"
+              >
+                Termos de Uso
+              </button>
+              <button 
+                onClick={() => setInfoModal({isOpen: true, title: 'Política de Privacidade', content: settings?.privacyPolicy || 'Política de privacidade não definida.'})}
+                className="text-[11px] hover:text-white transition-colors underline"
+              >
+                Política de Privacidade
+              </button>
+            </div>
+            <p className="text-zinc-600 mt-2">© 2026 {(settings?.brandName || 'Plataforma')}FLIX Inc. Todos os direitos reservados. Integrado oficialmente com a API Asaas.</p>
           </footer>
+
+          {/* Info Modal for Terms and Privacy */}
+          <CustomModal
+            isOpen={infoModal.isOpen}
+            onClose={() => setInfoModal({...infoModal, isOpen: false})}
+            title={infoModal.title}
+            isGlass={true}
+          >
+            <div className="whitespace-pre-wrap text-sm text-zinc-300">
+              {infoModal.content}
+            </div>
+          </CustomModal>
         </>
       ) : (
         /* --- UNAUTHENTICATED PORTAL (LOGIN / REGISTER) --- */

src/components/AdminDashboard.tsx

@@ -1346,6 +1346,28 @@ export default function AdminDashboard({ token, adminUser, onLogout }: AdminDash
                         <p className="text-[10px] text-zinc-500">Exibido no rodapé do portal.</p>
                       </div>
 
+                      <div className="space-y-2 col-span-1 md:col-span-2">
+                        <label className="text-xs text-zinc-400 font-bold uppercase tracking-wider">Termos de Uso</label>
+                        <textarea
+                          value={settings.termsOfUse || ''}
+                          onChange={(e) => setSettings({...settings, termsOfUse: e.target.value})}
+                          className="w-full bg-black/40 border border-white/10 rounded-lg p-3 text-sm text-white focus:outline-none focus:border-[#E50914] transition-colors min-h-[150px]"
+                          placeholder="Cole aqui o texto dos Termos de Uso..."
+                        />
+                        <p className="text-[10px] text-zinc-500">Exibido em um modal ao clicar no rodapé do portal do aluno.</p>
+                      </div>
+
+                      <div className="space-y-2 col-span-1 md:col-span-2">
+                        <label className="text-xs text-zinc-400 font-bold uppercase tracking-wider">Política de Privacidade</label>
+                        <textarea
+                          value={settings.privacyPolicy || ''}
+                          onChange={(e) => setSettings({...settings, privacyPolicy: e.target.value})}
+                          className="w-full bg-black/40 border border-white/10 rounded-lg p-3 text-sm text-white focus:outline-none focus:border-[#E50914] transition-colors min-h-[150px]"
+                          placeholder="Cole aqui o texto da Política de Privacidade..."
+                        />
+                        <p className="text-[10px] text-zinc-500">Exibido em um modal ao clicar no rodapé do portal do aluno.</p>
+                      </div>
+
                     </div>
 
                     <div className="flex justify-end mt-6">

src/components/AdminMessagesView.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Mail, MessageSquare, BookOpen, Send, User, Reply } from 'lucide-react';
+import { Mail, MessageSquare, BookOpen, Send, User, Reply, CheckCircle2, AlertCircle } from 'lucide-react';
+import CustomModal from './CustomModal';
 
 interface SupportTicket {
   id: string;
@@ -44,6 +45,7 @@ export default function AdminMessagesView() {
   const [replyText, setReplyText] = useState('');
   const [replyingTo, setReplyingTo] = useState<string | null>(null);
   const [isSending, setIsSending] = useState(false);
+  const [alertModal, setAlertModal] = useState<{isOpen: boolean, title: string, message: string, isError?: boolean}>({isOpen: false, title: '', message: ''});
 
   useEffect(() => {
     fetchMessages();
@@ -85,13 +87,13 @@ export default function AdminMessagesView() {
         setReplyText('');
         setReplyingTo(null);
         fetchMessages();
-        alert('Resposta enviada com sucesso!');
+        setAlertModal({isOpen: true, title: 'Sucesso', message: 'Resposta enviada com sucesso!'});
       } else {
-        alert('Erro ao enviar resposta.');
+        setAlertModal({isOpen: true, title: 'Erro', message: 'Erro ao enviar resposta.', isError: true});
       }
     } catch (error) {
       console.error('Error replying:', error);
-      alert('Erro interno ao enviar resposta.');
+      setAlertModal({isOpen: true, title: 'Erro', message: 'Erro interno ao enviar resposta.', isError: true});
     } finally {
       setIsSending(false);
     }
@@ -286,6 +288,36 @@ export default function AdminMessagesView() {
           )}
         </div>
       )}
+
+      <CustomModal 
+        isOpen={alertModal.isOpen} 
+        onClose={() => setAlertModal({...alertModal, isOpen: false})} 
+        title={alertModal.title}
+        isGlass={true}
+      >
+        <div className="flex items-start gap-4">
+          {alertModal.isError ? (
+            <div className="bg-red-500/10 p-3 rounded-full shrink-0">
+              <AlertCircle className="w-6 h-6 text-red-500" />
+            </div>
+          ) : (
+            <div className="bg-green-500/10 p-3 rounded-full shrink-0">
+              <CheckCircle2 className="w-6 h-6 text-green-500" />
+            </div>
+          )}
+          <div className="flex-1">
+            <p className="text-zinc-300 text-base">{alertModal.message}</p>
+            <div className="mt-6 flex justify-end">
+              <button 
+                onClick={() => setAlertModal({...alertModal, isOpen: false})}
+                className="px-6 py-2 bg-zinc-800 hover:bg-zinc-700 text-white rounded-lg font-bold transition-colors"
+              >
+                OK
+              </button>
+            </div>
+          </div>
+        </div>
+      </CustomModal>
     </div>
   );
 }

src/components/CustomModal.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { X } from 'lucide-react';
+
+interface CustomModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  isGlass?: boolean;
+}
+
+export default function CustomModal({ isOpen, onClose, title, children, isGlass = false }: CustomModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
+      <div 
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity" 
+        onClick={onClose}
+      />
+      <div className={`relative w-full max-w-3xl max-h-[85vh] flex flex-col transform transition-all animate-in fade-in zoom-in-95 duration-200
+        ${isGlass 
+          ? 'bg-black/40 backdrop-blur-xl border border-white/10 rounded-2xl shadow-[0_0_50px_rgba(0,0,0,0.5)]' 
+          : 'bg-[#141414] border border-zinc-800 rounded-xl shadow-2xl'
+        }`}
+      >
+        <div className={`flex items-center justify-between p-5 border-b ${isGlass ? 'border-white/10' : 'border-zinc-800'}`}>
+          <h3 className="text-xl font-bold text-white font-display">{title}</h3>
+          <button
+            onClick={onClose}
+            className={`p-2 rounded-full transition-colors ${isGlass ? 'hover:bg-white/10 text-white/70 hover:text-white' : 'hover:bg-zinc-800 text-zinc-400 hover:text-white'}`}
+          >
+            <X size={20} />
+          </button>
+        </div>
+        
+        <div className="p-6 overflow-y-auto custom-scrollbar flex-1 text-zinc-300">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}