MineConv - Conversor Avançado

MineConv

Selecione um Modo

Conteúdo Principal Aqui

Esta é a área onde o conversor e outras funcionalidades aparecerão.

/* --- Base & Reset --- */ :root { --primary-color: #00ffff; /* Cyan */ --secondary-color: #ff00ff; /* Magenta */ --background-color: #0d0d1a; /* Dark blue/purple */ --surface-color: #1a1a2e; --text-color: #e0e0e0; --text-darker: #a0a0a0; --success-color: #00ff7f; /* Spring Green */ --error-color: #ff4d4d; --warning-color: #ffcc00; /* Yellowish */ --glow-color-primary: rgba(0, 255, 255, 0.7); --glow-color-secondary: rgba(255, 0, 255, 0.7); --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --alt-font-family: 'Roboto', sans-serif; /* Alternative font */ --current-font-family: var(--font-family); /* Default font */ --border-radius: 12px; /* More rounded */ --transition-speed: 0.4s; /* Slightly slower for smoother feel */ --shadow-color-light: rgba(0, 255, 255, 0.3); --shadow-color-dark: rgba(255, 0, 255, 0.3); --input-padding: 14px 20px; /* Refined input padding */ } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--current-font-family); /* Use current font variable */ background: var(--background-color); /* Use background color */ /* background: url('https://i.imgur.com/YOUR_8K_ANIMATED_WALLPAPER_URL.gif'); /* Replace with your 8k animated wallpaper URL */ background-size: cover; background-attachment: fixed; /* Optional: for fixed background */ color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; /* Prevent scrollbars during transitions */ position: relative; /* For absolute positioning of elements */ cursor: none; /* Hide default cursor */ } /* Simulated Shader Effect */ body::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at top left, rgba(0, 255, 255, 0.08), transparent 50%), radial-gradient(circle at bottom right, rgba(255, 0, 255, 0.08), transparent 50%); pointer-events: none; z-index: 0; animation: subtle-glow 18s ease-in-out infinite alternate; /* Slower animation */ } @keyframes subtle-glow { from { opacity: 0.7; } to { opacity: 1; } } /* Custom Cursor Trail (Basic CSS) */ .cursor-trail { position: fixed; width: 20px; /* Size of the trail element */ height: 20px; background: radial-gradient(circle, var(--primary-color) 0%, var(--secondary-color) 100%); border-radius: 50%; pointer-events: none; /* Ignore mouse events */ z-index: 9999; /* Always on top */ transform: translate(-50%, -50%); /* Center the element */ transition: transform 0.05s ease-out, opacity 0.05s ease-out; /* Fast transition for trail effect */ opacity: 0.6; filter: blur(5px); /* Add blur for motion effect */ } /* --- Utility Classes --- */ .hidden { display: none !important; } .screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity var(--transition-speed) ease-in-out, visibility var(--transition-speed); background-color: transparent; /* Allow body gradient */ z-index: 1; } .screen.active { opacity: 1; visibility: visible; z-index: 10; /* Bring active screen to front */ } .popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); /* Slightly smaller initial scale */ background-color: rgba(26, 26, 46, 0.98); /* Less transparent surface */ backdrop-filter: blur(8px); /* More frosted glass effect */ border: 1px solid var(--primary-color); box-shadow: 0 0 30px var(--glow-color-primary), 0 0 15px rgba(0,0,0,0.6); /* Enhanced shadow */ padding: 35px 45px; /* Increased padding */ border-radius: var(--border-radius); z-index: 100; opacity: 0; visibility: hidden; transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease, visibility var(--transition-speed); min-width: 350px; /* Slightly wider min-width */ max-width: 95%; /* Allow wider on large screens */ text-align: center; } .popup.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .popup h2 { color: var(--primary-color); margin-bottom: 25px; /* Increased margin */ text-shadow: 0 0 10px var(--glow-color-primary); /* Enhanced glow */ font-weight: 700; /* Bolder */ letter-spacing: 1px; } .popup p { margin-bottom: 30px; /* Increased margin */ color: var(--text-darker); line-height: 1.7; /* More comfortable line height */ } .popup .button-group { display: flex; justify-content: center; gap: 20px; /* Increased gap */ flex-wrap: wrap; } .button { background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); color: var(--background-color); border: none; padding: 14px 30px; /* Slightly larger padding */ border-radius: var(--border-radius); font-size: 1.05rem; /* Slightly larger font */ font-weight: bold; cursor: pointer; transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background var(--transition-speed) ease; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 12px; /* Increased gap */ text-decoration: none; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); /* Enhanced shadow */ position: relative; /* For pseudo-elements */ overflow: hidden; /* Hide overflow for effects */ } /* Button Hover Effect */ .button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); /* Subtle white overlay */ transition: left var(--transition-speed) ease; } .button:hover::before { left: 0; } .button:hover { transform: translateY(-5px) scale(1.04); /* Enhanced hover effect */ box-shadow: 0 10px 25px var(--shadow-color-light), 0 10px 25px var(--shadow-color-dark); /* More prominent shadow */ } .button:active { transform: translateY(-2px) scale(0.99); /* More subtle active effect */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } .button.secondary { background: var(--surface-color); color: var(--primary-color); border: 1px solid var(--primary-color); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); } .button.secondary:hover { background: rgba(0, 255, 255, 0.15); /* More visible hover background */ box-shadow: 0 0 20px var(--glow-color-primary), 0 6px 15px rgba(0, 0, 0, 0.4); /* Enhanced shadow */ transform: translateY(-5px) scale(1.04); } .button.danger { background: linear-gradient(45deg, var(--error-color), #ff0055); color: white; } .button.danger:hover { box-shadow: 0 10px 25px rgba(255, 77, 77, 0.6); } .button i { font-size: 1.1em; line-height: 1; } .icon-button { background: none; border: none; color: var(--primary-color); font-size: 1.8rem; /* Larger */ cursor: pointer; transition: color var(--transition-speed) ease, text-shadow var(--transition-speed) ease, transform var(--transition-speed) ease; padding: 10px; /* More clickable area */ position: relative; line-height: 1; outline: none; /* Remove outline on focus */ } .icon-button:hover { color: var(--secondary-color); text-shadow: 0 0 15px var(--glow-color-secondary); /* Enhanced glow */ transform: scale(1.15); /* More prominent scale */ } .icon-button:active { transform: scale(1.05); } .icon-button .badge { position: absolute; top: 0; right: 0; background-color: var(--error-color); color: white; border-radius: 50%; padding: 3px 7px; /* Slightly larger badge */ font-size: 0.8rem; /* Slightly larger font */ font-weight: bold; line-height: 1; transform: translate(40%, -40%); pointer-events: none; box-shadow: 0 0 8px rgba(255, 77, 77, 0.5); /* Badge shadow */ } .input-field { background-color: rgba(26, 26, 46, 0.9); /* Less transparent surface */ border: 1px solid var(--primary-color); border-radius: var(--border-radius); padding: var(--input-padding); /* Use variable padding */ color: var(--text-color); font-size: 1rem; width: 100%; margin-bottom: 20px; /* Increased margin */ transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background-color var(--transition-speed) ease; outline: none; /* Remove default outline */ } .input-field:focus { border-color: var(--secondary-color); box-shadow: 0 0 15px var(--glow-color-secondary); /* Enhanced glow */ background-color: rgba(26, 26, 46, 1); /* Solid background on focus */ } .input-group { position: relative; margin-bottom: 20px; width: 100%; /* Ensure group takes full width */ max-width: 500px; /* Max width for input groups */ } .input-group .input-field { margin-bottom: 0; /* Remove margin from input inside group */ padding-right: 50px; /* Make space for icon */ } .input-group .icon-button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; /* Slightly larger icon */ padding: 6px; /* Smaller padding for inline icon */ z-index: 2; /* Ensure icon is above input */ } /* Typing Effect Particles (Placeholder - requires JS) */ .typing-effect-input { position: relative; } /* Add styles for particle elements here if using CSS animations */ /* --- Loading Screen --- */ #loading-screen { text-align: center; justify-content: center; /* Center content vertically */ } #loading-screen h1 { font-size: 4rem; /* Larger title */ color: var(--primary-color); text-shadow: 0 0 20px var(--glow-color-primary), 0 0 8px white; /* Enhanced glow */ margin-bottom: 50px; /* More space */ letter-spacing: 3px; font-weight: 800; } #loading-spinner { border: 8px solid var(--surface-color); /* Thicker spinner */ border-top: 8px solid var(--primary-color); border-radius: 50%; width: 60px; /* Larger spinner */ height: 60px; animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; /* Bouncier spin */ margin-bottom: 30px; /* Space below spinner */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-bar-container { width: 90%; /* Wider bar */ max-width: 600px; /* Wider max */ height: 10px; /* Thicker loading bar */ background-color: var(--surface-color); border-radius: 5px; /* Rounded corners */ overflow: hidden; margin-bottom: 30px; box-shadow: inset 0 0 5px rgba(0,0,0,0.3); /* Inner shadow */ position: relative; /* For particles */ } .loading-bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); border-radius: 5px; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother ease */ box-shadow: 0 0 15px var(--glow-color-primary); /* Enhanced glow */ position: relative; } /* Loading Bar Particles (Placeholder - requires JS) */ .loading-bar::after { /* content: ''; */ /* Add content in JS for particles */ position: absolute; top: 0; right: 0; /* Particles emanate from the right edge */ bottom: 0; width: 20px; /* Width of particle source area */ /* background: rgba(255,255,255,0.5); /* Visual aid */ pointer-events: none; z-index: 1; } .loading-time { font-size: 1.8rem; /* Larger clock */ color: var(--text-color); text-shadow: 0 0 8px rgba(255,255,255,0.2); font-variant-numeric: tabular-nums; /* Align numbers */ margin-top: 20px; transition: color 0.5s ease; /* Subtle color transition */ } /* --- Login Screen --- */ #login-screen h1 { font-size: 3rem; /* Larger title */ margin-bottom: 40px; /* More space */ color: var(--primary-color); text-shadow: 0 0 15px var(--glow-color-primary); font-weight: 700; } #login-screen .login-options { display: flex; gap: 50px; /* Increased gap */ margin-top: 60px; /* More space */ flex-wrap: wrap; justify-content: center; } .login-option { display: flex; flex-direction: column; align-items: center; gap: 25px; /* Increased gap */ } .login-option i { font-size: 4rem; /* Larger icons */ color: var(--primary-color); text-shadow: 0 0 15px var(--glow-color-primary); /* Enhanced glow */ margin-bottom: 20px; /* More space */ transition: transform 0.4s ease; /* Slower transition */ } .login-option:hover i { transform: scale(1.15); /* More prominent scale */ } #create-account-btn.button.secondary { margin-top: 30px; /* More space */ } /* --- Mode Select Screen --- */ #mode-select-screen h1 { font-size: 3rem; /* Larger title */ margin-bottom: 40px; /* More space */ color: var(--primary-color); text-shadow: 0 0 15px var(--glow-color-primary); font-weight: 700; } #mode-select-screen .mode-options { display: flex; gap: 50px; /* Increased gap */ margin-top: 60px; /* More space */ flex-wrap: wrap; justify-content: center; } .mode-option { display: flex; flex-direction: column; align-items: center; gap: 25px; /* Increased gap */ } .mode-option i { font-size: 4rem; /* Larger icons */ color: var(--primary-color); text-shadow: 0 0 15px var(--glow-color-primary); /* Enhanced glow */ margin-bottom: 20px; /* More space */ transition: transform 0.4s ease; /* Slower transition */ } .mode-option:hover i { transform: scale(1.15); /* More prominent scale */ } #mode-select-screen #logout-btn { margin-top: 40px; /* More space below options */ } /* --- Main App Screen --- */ #main-app-screen { justify-content: flex-start; /* Align items to the top */ padding-top: 40px; /* Add padding at the top */ overflow-y: auto; /* Allow scrolling if content overflows */ align-items: center; /* Center content horizontally */ } .app-header { width: 95%; max-width: 900px; /* Max width for header */ display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; /* Space below header */ gap: 20px; /* Gap between search and icons */ flex-wrap: wrap; /* Allow wrapping on small screens */ } .search-container { flex-grow: 1; /* Allow search bar to take available space */ position: relative; min-width: 250px; /* Minimum width for search */ } #main-search-input { width: 100%; padding-right: 40px; /* Space for potential icon */ } .search-results { position: absolute; top: 100%; /* Position below the input */ left: 0; right: 0; background-color: rgba(26, 26, 46, 0.95); border: 1px solid var(--primary-color); border-top: none; border-radius: 0 0 var(--border-radius) var(--border-radius); box-shadow: 0 10px 20px rgba(0,0,0,0.5); z-index: 20; /* Above other content */ padding: 10px 0; max-height: 200px; /* Limit height */ overflow-y: auto; /* Add scroll if needed */ } .search-results div { padding: 10px 20px; cursor: pointer; transition: background-color 0.2s ease; } .search-results div:hover { background-color: rgba(0, 255, 255, 0.1); } .header-icons { display: flex; gap: 15px; /* Gap between icons */ } .app-content { width: 95%; max-width: 900px; /* Max width for content */ background-color: rgba(26, 26, 46, 0.9); border: 1px solid var(--secondary-color); border-radius: var(--border-radius); padding: 30px; box-shadow: 0 0 20px var(--glow-color-secondary); margin-bottom: 40px; /* Space at the bottom */ } .app-content h2 { color: var(--secondary-color); margin-bottom: 20px; text-shadow: 0 0 8px var(--glow-color-secondary); } .app-content p { color: var(--text-darker); line-height: 1.6; } /* Chatbot Styles */ #chatbot-popup .chatbot-messages { max-height: 300px; /* Limit chat height */ overflow-y: auto; margin-bottom: 20px; padding-right: 10px; /* Space for scrollbar */ } .chatbot-messages .message { margin-bottom: 15px; padding: 10px 15px; border-radius: var(--border-radius); max-width: 80%; line-height: 1.5; } .chatbot-messages .message.bot { background-color: rgba(0, 255, 255, 0.15); border: 1px solid var(--primary-color); color: var(--text-color); margin-right: auto; /* Align left */ } .chatbot-messages .message.user { background-color: rgba(255, 0, 255, 0.15); border: 1px solid var(--secondary-color); color: var(--text-color); margin-left: auto; /* Align right */ } #chatbot-popup .input-group { margin-bottom: 15px; } #chatbot-popup .close-popup-btn { margin-top: 15px; } /* Ban Popup Styles */ #ban-popup.popup.danger { border-color: var(--error-color); box-shadow: 0 0 30px rgba(255, 77, 77, 0.7), 0 0 15px rgba(0,0,0,0.6); } #ban-popup h2 { color: var(--error-color); text-shadow: 0 0 10px rgba(255, 77, 77, 0.7); } #ban-popup p { color: var(--text-color); } #ban-popup #ban-reason { font-weight: bold; color: var(--warning-color); } /* --- Classic Mode --- */ body.classic-mode { font-family: sans-serif !important; background: white !important; color: black !important; cursor: auto !important; /* Restore default cursor */ } body.classic-mode::before { display: none !important; /* Hide shader */ } .classic-mode .cursor-trail { display: none !important; /* Hide custom cursor */ } .classic-mode .screen { background-color: white !important; color: black !important; padding: 10px !important; } .classic-mode .popup { background-color: white !important; border: 1px solid black !important; box-shadow: 2px 2px 5px rgba(0,0,0,0.5) !important; padding: 15px !important; border-radius: 0 !important; backdrop-filter: none !important; } .classic-mode .popup h2, .classic-mode h1, .classic-mode h2 { color: black !important; text-shadow: none !important; font-weight: bold !important; letter-spacing: normal !important; } .classic-mode .popup p, .classic-mode p { color: black !important; } .classic-mode .button { background: lightgray !important; color: black !important; border: 1px solid black !important; padding: 8px 15px !important; border-radius: 0 !important; font-size: 1rem !important; box-shadow: 1px 1px 3px rgba(0,0,0,0.3) !important; transition: none !important; transform: none !important; gap: 5px !important; overflow: visible !important; } .classic-mode .button::before { display: none !important; } .classic-mode .button:hover { background: gray !important; box-shadow: 1px 1px 3px rgba(0,0,0,0.3) !important; transform: none !important; } .classic-mode .button:active { transform: none !important; } .classic-mode .button.secondary { background: white !important; color: black !important; border: 1px solid black !important; box-shadow: 1px 1px 3px rgba(0,0,0,0.3) !important; } .classic-mode .button.secondary:hover { background: lightgray !important; box-shadow: 1px 1px 3px rgba(0,0,0,0.3) !important; transform: none !important; } .classic-mode .button.danger { background: red !important; color: white !important; border-color: red !important; } .classic-mode .button.danger:hover { background: darkred !important; box-shadow: 1px 1px 3px rgba(0,0,0,0.3) !important; } .classic-mode .icon-button { color: black !important; font-size: 1.5rem !important; padding: 5px !important; transition: none !important; text-shadow: none !important; transform: none !important; } .classic-mode .icon-button:hover { color: gray !important; text-shadow: none !important; transform: none !important; } .classic-mode .icon-button:active { transform: none !important; } .classic-mode .icon-button .badge { background-color: red !important; color: white !important; padding: 1px 4px !important; font-size: 0.7rem !important; transform: translate(30%, -30%) !important; box-shadow: none !important; } .classic-mode .input-field { background-color: white !important; border: 1px solid black !important; border-radius: 0 !important; padding: 8px 10px !important; color: black !important; font-size: 1rem !important; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3) !important; transition: none !important; } .classic-mode .input-field:focus { border-color: blue !important; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3), 0 0 5px rgba(0,0,255,0.5) !important; background-color: white !important; } .classic-mode .input-group .input-field { padding-right: 30px !important; } .classic-mode .input-group .icon-button { font-size: 1rem !important; padding: 3px !important; } .classic-mode #loading-spinner { border-color: lightgray !important; border-top-color: black !important; width: 40px !important; height: 40px !important; animation: spin 1.2s linear infinite !important; /* Simpler spin */ } .classic-mode .loading-bar-container { background-color: lightgray !important; height: 5px !important; border-radius: 0 !important; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3) !important; } .classic-mode .loading-bar { background: black !important; border-radius: 0 !important; box-shadow: none !important; transition: width 0.8s linear !important; /* Simpler transition */ } .classic-mode .loading-bar::after { display: none !important; /* Hide particles */ } .classic-mode .loading-time { color: black !important; text-shadow: none !important; font-size: 1.2rem !important; transition: none !important; } .classic-mode .search-results { background-color: white !important; border: 1px solid black !important; border-top: none !important; border-radius: 0 !important; box-shadow: 2px 2px 5px rgba(0,0,0,0.5) !important; padding: 5px 0 !important; } .classic-mode .search-results div { padding: 5px 10px !important; } .classic-mode .search-results div:hover { background-color: lightgray !important; } .classic-mode .app-content { background-color: white !important; border: 1px solid black !important; border-radius: 0 !important; box-shadow: 2px 2px 5px rgba(0,0,0,0.5) !important; padding: 20px !important; } .classic-mode .chatbot-messages .message.bot { background-color: #eee !important; border: 1px solid #ccc !important; color: black !important; border-radius: 5px !important; } .classic-mode .chatbot-messages .message.user { background-color: #ddd !important; border: 1px solid #bbb !important; color: black !important; border-radius: 5px !important; } .classic-mode #ban-popup.popup.danger { border-color: red !important; box-shadow: 2px 2px 5px rgba(255,0,0,0.5) !important; } .classic-mode #ban-popup h2 { color: red !important; text-shadow: none !important; } .classic-mode #ban-popup p { color: black !important; } .classic-mode #ban-popup #ban-reason { color: orange !important; } const screens = document.querySelectorAll('.screen'); const loadingScreen = document.getElementById('loading-screen'); const loginScreen = document.getElementById('login-screen'); const modeSelectScreen = document.getElementById('mode-select-screen'); const mainAppScreen = document.getElementById('main-app-screen'); const loadingBar = document.getElementById('loading-bar'); const loadingTime = document.getElementById('loading-time'); const cursorTrail = document.getElementById('cursor-trail'); const loginGuestBtn = document.getElementById('login-guest-btn'); const loginAccountBtn = document.getElementById('login-account-btn'); const createAccountBtn = document.getElementById('create-account-btn'); const modeAdvancedBtn = document.getElementById('mode-advanced-btn'); const modeClassicBtn = document.getElementById('mode-classic-btn'); const logoutBtn = document.getElementById('logout-btn'); const accountSettingsBtn = document.getElementById('account-settings-btn'); const chatbotToggleBtn = document.getElementById('chatbot-toggle-btn'); const accountSettingsPopup = document.getElementById('account-settings-popup'); const chatbotPopup = document.getElementById('chatbot-popup'); const banPopup = document.getElementById('ban-popup'); const closePopupBtns = document.querySelectorAll('.close-popup-btn'); const mainSearchInput = document.getElementById('main-search-input'); const searchResultsDiv = document.getElementById('search-results'); const typingEffectInputs = document.querySelectorAll('.typing-effect-input'); let currentScreen = 'loading'; // State variable for current screen let isLoggedIn = false; // State variable for login status let currentMode = 'advanced'; // State variable for mode ('advanced' or 'classic') // --- Screen Management --- function showScreen(screenId) { screens.forEach(screen => { screen.classList.remove('active'); }); const targetScreen = document.getElementById(screenId); if (targetScreen) { targetScreen.classList.add('active'); currentScreen = screenId; console.log(`Switched to screen: ${screenId}`); // Debugging } else { console.error(`Screen with ID "${screenId}" not found.`); } } // --- Popup Management --- function showPopup(popupElement) { popupElement.classList.add('active'); } function hidePopup(popupElement) { popupElement.classList.remove('active'); } closePopupBtns.forEach(button => { button.addEventListener('click', () => { // Find the parent popup and hide it let parentPopup = button.closest('.popup'); if (parentPopup) { hidePopup(parentPopup); } }); }); // --- Loading Screen Logic --- function updateLoadingTime() { const now = new Date(); const hours = String(now.getHours()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0'); loadingTime.textContent = `${hours}:${minutes}:${seconds}`; } function startLoadingSimulation() { let progress = 0; const interval = setInterval(() => { progress += Math.random() * 10; // Simulate uneven loading if (progress > 100) progress = 100; loadingBar.style.width = `${progress}%`; // Simulate particles (basic example - requires more complex JS for real particles) // You would typically use a library or canvas for this if (progress < 100) { // Example: Create a temporary element for a particle effect // This is highly simplified and not a true particle system const particle = document.createElement('div'); particle.classList.add('loading-particle'); // Add CSS for this class particle.style.left = `${loadingBar.offsetWidth}px`; // Position at the end of the bar particle.style.bottom = '0'; particle.style.width = '4px'; particle.style.height = '4px'; particle.style.backgroundColor = 'var(--primary-color)'; particle.style.position = 'absolute'; particle.style.borderRadius = '50%'; particle.style.opacity = '1'; particle.style.transform = 'translateY(0)'; particle.style.transition = 'transform 0.8s ease-out, opacity 0.8s ease-out'; loadingBar.parentElement.appendChild(particle); // Add to container // Animate and remove setTimeout(() => { particle.style.transform = `translateY(-${Math.random() * 20 + 10}px) translateX(${Math.random() * 20 - 10}px)`; particle.style.opacity = '0'; }, 10); // Small delay to apply initial style setTimeout(() => { particle.remove(); }, 800); // Remove after animation } if (progress === 100) { clearInterval(interval); setTimeout(() => { // Decide next screen based on login status (simulated) if (isLoggedIn) { showScreen('mode-select-screen'); } else { showScreen('login-screen'); } }, 500); // Small delay after bar fills } }, 100); // Update every 100ms // Start clock update updateLoadingTime(); setInterval(updateLoadingTime, 1000); // Update clock every second } // --- Cursor Trail Effect --- document.addEventListener('mousemove', (e) => { if (cursorTrail) { cursorTrail.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`; } }); // --- Login/Logout Logic (Simulated) --- loginGuestBtn.addEventListener('click', () => { isLoggedIn = false; // Guest is not logged in with an account showScreen('mode-select-screen'); // Guests can select mode }); loginAccountBtn.addEventListener('click', () => { // Simulate account login success isLoggedIn = true; showScreen('mode-select-screen'); // Logged-in users select mode }); createAccountBtn.addEventListener('click', () => { // Simulate navigating to a create account screen/popup alert('Simulando tela de criação de conta...'); // In a real app, you'd show a form here }); logoutBtn.addEventListener('click', () => { isLoggedIn = false; // Revert to default mode style on logout document.body.classList.remove('classic-mode'); currentMode = 'advanced'; // Reset mode state showScreen('login-screen'); // Go back to login }); // --- Mode Selection --- modeAdvancedBtn.addEventListener('click', () => { currentMode = 'advanced'; document.body.classList.remove('classic-mode'); showScreen('main-app-screen'); // Go to main app in advanced mode }); modeClassicBtn.addEventListener('click', () => { currentMode = 'classic'; document.body.classList.add('classic-mode'); showScreen('main-app-screen'); // Go to main app in classic mode }); // --- Main App Interactions --- accountSettingsBtn.addEventListener('click', () => { // Check if logged in before showing settings (basic check) if (isLoggedIn) { showPopup(accountSettingsPopup); } else { alert('Você precisa estar logado para acessar as configurações da conta.'); // Optionally show login/create account options } }); chatbotToggleBtn.addEventListener('click', () => { showPopup(chatbotPopup); }); // --- Search Bar Logic (Basic Placeholder) --- mainSearchInput.addEventListener('input', () => { const query = mainSearchInput.value.toLowerCase(); searchResultsDiv.innerHTML = ''; // Clear previous results if (query.length > 0) { // Simulate search results const simulatedResults = [ 'Conversor de Moedas', 'Conversor de Unidades', 'Calculadora Científica', 'Configurações', 'Ajuda do Chatbot', 'Modo Clássico', 'Modo Avançado' ].filter(item => item.toLowerCase().includes(query)); if (simulatedResults.length > 0) { simulatedResults.forEach(result => { const resultElement = document.createElement('div'); resultElement.textContent = result; resultElement.addEventListener('click', () => { alert(`Simulando navegação para: ${result}`); mainSearchInput.value = result; // Fill input with selected result hidePopup(searchResultsDiv); // Hide results }); searchResultsDiv.appendChild(resultElement); }); showPopup(searchResultsDiv); // Show results div } else { hidePopup(searchResultsDiv); // Hide if no results } } else { // Show recommendations when input is empty const simulatedRecommendations = [ 'Conversor de Moedas', 'Calculadora Científica', 'Configurações' ]; simulatedRecommendations.forEach(rec => { const recElement = document.createElement('div'); recElement.textContent = rec; recElement.addEventListener('click', () => { alert(`Simulando navegação para: ${rec}`); mainSearchInput.value = rec; // Fill input with selected recommendation hidePopup(searchResultsDiv); // Hide recommendations }); searchResultsDiv.appendChild(recElement); }); showPopup(searchResultsDiv); // Show recommendations div } }); // Hide search results when clicking outside document.addEventListener('click', (event) => { const isClickInsideSearch = mainSearchInput.parentElement.contains(event.target); const isClickInsideResults = searchResultsDiv.contains(event.target); if (!isClickInsideSearch && !isClickInsideResults) { hidePopup(searchResultsDiv); } }); // --- Typing Effect (Smooth Movement & Particles - Placeholder) --- typingEffectInputs.forEach(input => { input.addEventListener('input', (e) => { // Simulate smooth cursor movement (CSS handles this via transition on input:focus) // Simulate particles (Requires more complex JS/Canvas) // For a basic visual cue, you could add/remove a class or style console.log(`Typing in input: ${e.target.value}`); // Example: Add a temporary class for a particle effect trigger // e.target.classList.add('typing-particle-effect'); // setTimeout(() => e.target.classList.remove('typing-particle-effect'), 100); }); }); // --- Ban Simulation (Example) --- // You would call this function from your backend/monitoring logic function simulateBan(reason = 'Violação de Termos de Serviço') { document.getElementById('ban-reason').textContent = reason; showPopup(banPopup); // Optionally disable other interactions or redirect } // Example: Simulate a ban after 30 seconds (for testing) // setTimeout(() => { // simulateBan('Comportamento Inadequado'); // }, 30000); // --- Initial Load --- // Start the loading simulation when the script loads startLoadingSimulation();

MineConv

Bem-vindo ao MineConv

Selecione um Modo

Conteúdo Principal Aqui

Configurações da Conta

Chatbot Profissional

Você Foi Banido