Okay, let's set up the structure for this advanced web application. MineConv - Conversor de Contas

MineConv

Inicializando sistemas...

Selecione o Modo

Converter Minecraft Pirata para Original

Chatbot Assistente

Olá! Como posso ajudar?

Editar Perfil

(Funcionalidade de edição de perfil aqui - alterar foto, nome, etc.)

Configurações do Perfil

Alterar Foto:

Alterar Nome:

Configurações

(Funcionalidade de configurações aqui - idioma, tema, etc.)

Idioma:

Tema:

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap'); :root { --primary-color: #00ffff; /* Cyan */ --secondary-color: #ff00ff; /* Magenta */ --background-color: #0d0d1a; /* Very dark blue/purple */ --surface-color: #1a1a3a; --text-color: #e0e0ff; --accent-color: #00ff00; /* Bright Green */ --error-color: #ff4d4d; --success-color: #4dff4d; --font-primary: 'Orbitron', sans-serif; --font-secondary: 'Roboto', sans-serif; --glow-color: rgba(0, 255, 255, 0.7); --glow-color-secondary: rgba(255, 0, 255, 0.7); --glow-color-accent: rgba(0, 255, 0, 0.7); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-secondary); background-color: var(--background-color); color: var(--text-color); overflow: hidden; /* Prevent scrolling during transitions */ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0), radial-gradient(circle at 10px 10px, rgba(255,255,255,0.03) 1px, transparent 0); background-size: 20px 20px; } .screen { display: none; /* Hidden by default */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; align-items: center; flex-direction: column; padding: 20px; opacity: 0; transition: opacity 0.7s ease-in-out; z-index: 1; } .screen.active { display: flex; opacity: 1; z-index: 2; /* Ensure active screen is on top */ } /* Loading Screen */ #loading-screen { background-color: #000; /* Solid black for loading */ z-index: 100; /* Highest */ } .loading-container { text-align: center; width: 80%; max-width: 400px; } .loading-logo { font-family: var(--font-primary); font-size: 3em; color: var(--primary-color); text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color); margin-bottom: 30px; animation: pulse 2s infinite ease-in-out; } .loading-bar-container { width: 100%; height: 15px; background-color: var(--surface-color); border-radius: 10px; margin-bottom: 15px; overflow: hidden; border: 1px solid var(--primary-color); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); } .loading-bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--secondary-color), var(--primary-color)); border-radius: 10px; transition: width 0.2s linear; /* Smooth progress update */ box-shadow: 0 0 8px var(--glow-color); } .loading-percentage, .loading-text { font-family: var(--font-secondary); color: var(--text-color); margin-top: 10px; font-size: 1em; text-shadow: 0 0 3px var(--glow-color); } @keyframes pulse { 0% { text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color); } 50% { text-shadow: 0 0 15px var(--glow-color), 0 0 30px var(--glow-color); } 100% { text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color); } } /* Login Screen */ .login-container { background-color: rgba(26, 26, 58, 0.85); /* Slightly transparent surface */ padding: 40px 50px; border-radius: 15px; border: 1px solid var(--primary-color); box-shadow: 0 0 25px var(--glow-color); text-align: center; backdrop-filter: blur(5px); } .login-container h1 { font-family: var(--font-primary); color: var(--primary-color); margin-bottom: 30px; text-shadow: 0 0 8px var(--glow-color); } .login-options { display: flex; gap: 30px; } .login-btn { background: linear-gradient(145deg, var(--surface-color), #2a2a4a); color: var(--text-color); border: 1px solid var(--primary-color); padding: 20px; border-radius: 10px; cursor: pointer; font-size: 1em; font-family: var(--font-secondary); transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; min-width: 150px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 5px rgba(0, 255, 255, 0.1); } .login-btn:hover { background: linear-gradient(145deg, #2a2a4a, var(--surface-color)); color: var(--primary-color); border-color: var(--accent-color); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6), 0 0 15px var(--glow-color-accent), inset 0 0 8px rgba(0, 255, 0, 0.2); transform: translateY(-3px); } .login-icon { font-size: 2.5em; margin-bottom: 15px; color: var(--primary-color); transition: color 0.3s ease; } .login-btn:hover .login-icon { color: var(--accent-color); } /* Mode Selection Screen */ .mode-container { background-color: rgba(26, 26, 58, 0.85); padding: 40px 50px; border-radius: 15px; border: 1px solid var(--secondary-color); box-shadow: 0 0 25px var(--glow-color-secondary); text-align: center; backdrop-filter: blur(5px); position: relative; /* For logout button positioning */ } .mode-container h2 { font-family: var(--font-primary); color: var(--secondary-color); margin-bottom: 30px; text-shadow: 0 0 8px var(--glow-color-secondary); } .mode-options { display: flex; gap: 30px; margin-bottom: 25px; /* Space for logout button */ } .mode-btn { background: linear-gradient(145deg, var(--surface-color), #2a2a4a); color: var(--text-color); border: 1px solid var(--secondary-color); padding: 20px; border-radius: 10px; cursor: pointer; font-size: 1em; font-family: var(--font-secondary); transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; min-width: 150px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 5px rgba(255, 0, 255, 0.1); } .mode-btn:hover { background: linear-gradient(145deg, #2a2a4a, var(--surface-color)); color: var(--secondary-color); border-color: var(--accent-color); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6), 0 0 15px var(--glow-color-accent), inset 0 0 8px rgba(0, 255, 0, 0.2); transform: translateY(-3px); } .mode-icon { font-size: 2.5em; margin-bottom: 15px; color: var(--secondary-color); transition: color 0.3s ease; } .mode-btn:hover .mode-icon { color: var(--accent-color); } .logout-button-mode { position: absolute; bottom: 15px; right: 15px; background: none; border: 1px solid var(--error-color); color: var(--error-color); padding: 5px 10px; border-radius: 5px; cursor: pointer; font-size: 0.9em; transition: all 0.3s ease; } .logout-button-mode:hover { background-color: var(--error-color); color: var(--background-color); box-shadow: 0 0 10px rgba(255, 77, 77, 0.7); } /* Main Screen */ #main-screen { flex-direction: column; justify-content: flex-start; /* Align content to top */ align-items: center; width: 100%; height: 100%; padding: 0; /* Remove padding to use full screen */ } .main-header { width: 100%; padding: 15px 30px; background-color: rgba(13, 13, 26, 0.9); /* Darker header */ display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--primary-color); box-shadow: 0 2px 10px rgba(0, 255, 255, 0.2); position: relative; /* Needed for absolute positioning inside */ z-index: 10; } .main-header h1 { font-family: var(--font-primary); font-size: 1.8em; color: var(--primary-color); text-shadow: 0 0 5px var(--glow-color); margin: 0; /* Reset margin */ position: absolute; /* Center title */ left: 50%; transform: translateX(-50%); } .conversion-limit { display: flex; align-items: center; gap: 8px; font-size: 1.2em; color: var(--accent-color); background-color: rgba(0, 255, 0, 0.1); padding: 5px 10px; border-radius: 5px; border: 1px solid var(--accent-color); cursor: pointer; transition: all 0.3s ease; } .conversion-limit:hover { background-color: rgba(0, 255, 0, 0.2); box-shadow: 0 0 10px var(--glow-color-accent); } .conversion-limit i { text-shadow: 0 0 5px var(--glow-color-accent); } .account-menu { position: relative; /* For dropdown positioning */ } .icon-btn { background: none; border: none; color: var(--primary-color); font-size: 1.8em; cursor: pointer; transition: color 0.3s ease, text-shadow 0.3s ease; } .icon-btn:hover { color: var(--accent-color); text-shadow: 0 0 8px var(--glow-color-accent); } .dropdown-content { display: none; position: absolute; right: 0; top: 100%; /* Position below the button */ background-color: var(--surface-color); min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); z-index: 15; border: 1px solid var(--primary-color); border-radius: 5px; padding: 10px 0; margin-top: 5px; /* Small gap */ } .dropdown-content a { color: var(--text-color); padding: 12px 16px; text-decoration: none; display: block; font-size: 0.95em; transition: background-color 0.3s ease, color 0.3s ease; } .dropdown-content a i { margin-right: 10px; width: 15px; /* Align icons */ text-align: center; } .dropdown-content a:hover { background-color: rgba(0, 255, 255, 0.1); color: var(--primary-color); } .dropdown-content a#logout-btn:hover { background-color: rgba(255, 77, 77, 0.2); color: var(--error-color); } .account-menu:hover .dropdown-content { display: block; } .main-content { flex-grow: 1; display: flex; justify-content: center; align-items: center; gap: 40px; width: 100%; padding: 20px; position: relative; /* For draggable elements */ } .action-btn { background: linear-gradient(145deg, var(--surface-color), #2a2a4a); color: var(--text-color); border: 1px solid var(--primary-color); padding: 25px 35px; border-radius: 12px; cursor: pointer; font-size: 1.2em; font-family: var(--font-secondary); transition: all 0.3s ease; display: flex; align-items: center; gap: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), inset 0 0 8px rgba(0, 255, 255, 0.1); text-shadow: 0 0 3px rgba(0, 0, 0, 0.7); } .action-btn i { font-size: 1.5em; color: var(--primary-color); transition: color 0.3s ease; } .action-btn:hover { background: linear-gradient(145deg, #2a2a4a, var(--surface-color)); color: var(--primary-color); border-color: var(--accent-color); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7), 0 0 20px var(--glow-color-accent), inset 0 0 10px rgba(0, 255, 0, 0.2); transform: translateY(-5px); } .action-btn:hover i { color: var(--accent-color); } /* Edit Mode */ .draggable { cursor: grab; user-select: none; /* Prevent text selection while dragging */ position: relative; /* Needed for interact.js positioning */ } .draggable:active { cursor: grabbing; } .editing .draggable { border: 2px dashed var(--accent-color); padding: 5px; /* Add padding so border doesn't overlap content */ } #edit-mode-controls { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(13, 13, 26, 0.9); padding: 10px 20px; border-radius: 10px; border: 1px solid var(--accent-color); box-shadow: 0 0 15px var(--glow-color-accent); z-index: 50; display: flex; gap: 15px; } #edit-mode-controls button { padding: 8px 15px; border-radius: 5px; cursor: pointer; font-family: var(--font-secondary); font-size: 0.9em; transition: background-color 0.3s, color 0.3s; } #save-edit-btn { background-color: var(--accent-color); border: 1px solid var(--accent-color); color: var(--background-color); } #save-edit-btn:hover { background-color: #00cc00; } #cancel-edit-btn { background-color: var(--error-color); border: 1px solid var(--error-color); color: var(--background-color); } #cancel-edit-btn:hover { background-color: #cc3d3d; } /* Popups */ .popup-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; /* Hidden by default */ justify-content: center; align-items: center; z-index: 90; opacity: 0; transition: opacity 0.4s ease-in-out; } .popup-container.active { display: flex; opacity: 1; } .popup-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); } .popup-content { background: linear-gradient(145deg, var(--surface-color), #15152e); padding: 30px 40px; border-radius: 15px; border: 1px solid var(--primary-color); box-shadow: 0 0 30px var(--glow-color); z-index: 91; position: relative; max-width: 90%; width: 550px; /* Default width */ max-height: 90vh; overflow-y: auto; transform: scale(0.8); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Zoom effect */ } .popup-container.active .popup-content { transform: scale(1); } .popup-content h2 { font-family: var(--font-primary); color: var(--primary-color); margin-bottom: 20px; text-align: center; text-shadow: 0 0 5px var(--glow-color); display: flex; align-items: center; justify-content: center; gap: 10px; } .popup-content p { margin-bottom: 15px; line-height: 1.6; text-align: center; color: var(--text-color); font-size: 0.95em; } .close-popup-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; color: var(--text-color); font-size: 2em; cursor: pointer; transition: color 0.3s ease; } .close-popup-btn:hover { color: var(--error-color); } .back-home-btn { position: absolute; top: 15px; left: 15px; background: none; border: 1px solid var(--secondary-color); color: var(--secondary-color); font-size: 1.2em; cursor: pointer; transition: all 0.3s ease; padding: 5px 8px; border-radius: 50%; } .back-home-btn:hover { background-color: var(--secondary-color); color: var(--background-color); box-shadow: 0 0 10px var(--glow-color-secondary); } .popup-btn { background: linear-gradient(145deg, var(--primary-color), #00cccc); color: var(--background-color); border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 1em; font-family: var(--font-secondary); font-weight: bold; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0, 255, 255, 0.3); } .popup-btn:hover { background: linear-gradient(145deg, #00cccc, var(--primary-color)); box-shadow: 0 6px 15px rgba(0, 255, 255, 0.5); transform: translateY(-2px); } .popup-btn.cancel-btn { background: linear-gradient(145deg, #666, #444); color: var(--text-color); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } .popup-btn.cancel-btn:hover { background: linear-gradient(145deg, #444, #666); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); } #info-popup-buttons { text-align: center; margin-top: 20px; display: flex; justify-content: center; gap: 15px; } /* Conversion Flow Specifics */ #conversion-flow { width: 600px; /* Wider for content */ min-height: 400px; /* Ensure enough height */ display: flex; /* Use flex for step management */ overflow: hidden; /* Hide non-active steps */ } .conversion-step { min-width: 100%; /* Each step takes full width */ opacity: 0; visibility: hidden; position: absolute; /* Position steps on top of each other */ left: 0; top: 0; /* Adjust top padding if needed */ padding: 30px 40px; /* Match popup padding */ transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; transform: translateX(50px); /* Start slightly to the right */ display: flex; flex-direction: column; align-items: center; /* Center content within step */ } .conversion-step.active { opacity: 1; visibility: visible; position: relative; /* Take space in the flex container */ transform: translateX(0); } .conversion-step.exiting { transform: translateX(-50px); /* Move left when exiting */ } #conversion-flow input[type="email"], #conversion-flow input[type="password"], #conversion-flow input[type="text"] { width: 80%; padding: 12px 15px; margin-bottom: 20px; border: 1px solid var(--primary-color); border-radius: 8px; background-color: rgba(13, 13, 26, 0.8); color: var(--text-color); font-size: 1em; box-shadow: inset 0 0 8px rgba(0, 255, 255, 0.2); transition: border-color 0.3s, box-shadow 0.3s; } #conversion-flow input:focus { outline: none; border-color: var(--accent-color); box-shadow: inset 0 0 8px rgba(0, 255, 0, 0.4), 0 0 10px var(--glow-color-accent); } .step-navigation { display: flex; justify-content: space-between; /* Align buttons */ width: 80%; margin-top: 20px; } .step-navigation .popup-btn { display: flex; align-items: center; gap: 8px; } .step-navigation .prev-btn { background: linear-gradient(145deg, #666, #444); color: var(--text-color); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } .step-navigation .prev-btn:hover { background: linear-gradient(145deg, #444, #666); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); } .step-navigation .next-btn, .step-navigation .convert-final-btn { margin-left: auto; /* Push next/convert button to the right if no prev button */ } .step-navigation .convert-final-btn { background: linear-gradient(145deg, var(--accent-color), #00cc00); box-shadow: 0 4px 10px rgba(0, 255, 0, 0.3); } .step-navigation .convert-final-btn:hover { background: linear-gradient(145deg, #00cc00, var(--accent-color)); box-shadow: 0 6px 15px rgba(0, 255, 0, 0.5); } /* Skin Step */ .skin-preview-container { width: 250px; height: 300px; margin: 20px auto; border: 1px solid var(--primary-color); border-radius: 10px; background-color: rgba(13, 13, 26, 0.5); display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; /* For potential 3D viewer */ } .skin-viewer-placeholder { text-align: center; color: rgba(224, 224, 255, 0.5); } .placeholder-cube { width: 80px; height: 120px; border: 2px dashed rgba(224, 224, 255, 0.3); margin: 10px auto; position: relative; } /* Add pseudo-elements for 3D effect if needed */ .skin-search { display: flex; justify-content: center; align-items: center; gap: 10px; width: 80%; margin-top: 10px; } #skin-search-nick { flex-grow: 1; /* Take remaining space */ margin-bottom: 0; /* Override default margin */ } #search-skin-btn { font-size: 1.5em; /* Make icon button larger */ padding: 8px; line-height: 1; /* Adjust line height for better centering */ } /* Manage Accounts Popup */ #managed-accounts-list { margin-top: 20px; max-height: 300px; overflow-y: auto; padding-right: 10px; /* Space for scrollbar */ } #managed-accounts-list p { text-align: left; margin-bottom: 10px; padding: 10px; background-color: rgba(13, 13, 26, 0.7); border-radius: 5px; border-left: 3px solid var(--primary-color); } #managed-accounts-list p:last-child { margin-bottom: 0; } /* Ban Popup */ .ban-popup-content { border-color: var(--error-color); box-shadow: 0 0 30px rgba(255, 77, 77, 0.7); } .ban-popup-content h2 { color: var(--error-color); text-shadow: 0 0 5px rgba(255, 77, 77, 0.7); } .ban-popup-content p { color: var(--text-color); } #ban-reason, #ban-time { font-weight: bold; color: #ffdddd; } /* Notification Banners */ #notification-banner-container { position: fixed; top: 80px; /* Below header */ right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .notification-banner { padding: 15px 20px; border-radius: 8px; color: var(--background-color); font-size: 0.95em; font-weight: bold; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); opacity: 0; transform: translateX(100%); transition: opacity 0.5s ease, transform 0.5s ease; min-width: 250px; } .notification-banner.show { opacity: 1; transform: translateX(0); } .notification-banner.success { background-color: var(--success-color); border-left: 5px solid #00cc00; } .notification-banner.error { background-color: var(--error-color); border-left: 5px solid #cc3d3d; } .notification-banner i { font-size: 1.3em; } /* Chatbot */ #chatbot-container { position: fixed; bottom: 20px; right: 20px; z-index: 80; } .chatbot-icon { background-color: var(--primary-color); color: var(--background-color); border: none; width: 60px; height: 60px; border-radius: 50%; font-size: 1.8em; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 5px 15px rgba(0, 255, 255, 0.4); transition: all 0.3s ease; animation: bounce 2s infinite ease-in-out; } .chatbot-icon:hover { background-color: var(--accent-color); box-shadow: 0 8px 20px rgba(0, 255, 0, 0.5); animation-play-state: paused; /* Stop bouncing on hover */ } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .chatbot-window { display: none; position: absolute; bottom: 80px; /* Above the icon */ right: 0; width: 350px; height: 450px; background-color: var(--surface-color); border-radius: 15px; border: 1px solid var(--primary-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; } .chatbot-window.active { display: flex; opacity: 1; transform: translateY(0); } .chatbot-header { background-color: rgba(13, 13, 26, 0.9); padding: 10px 15px; border-bottom: 1px solid var(--primary-color); display: flex; justify-content: space-between; align-items: center; color: var(--primary-color); font-family: var(--font-primary); font-size: 1.1em; } .chatbot-header button { background: none; border: none; color: var(--text-color); font-size: 1.5em; cursor: pointer; } .chatbot-header button:hover { color: var(--error-color); } .chatbot-messages { flex-grow: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .user-message, .bot-message { padding: 10px 15px; border-radius: 10px; max-width: 80%; line-height: 1.4; } .user-message { background-color: var(--primary-color); color: var(--background-color); align-self: flex-end; border-bottom-right-radius: 0; } .bot-message { background-color: #2a2a4a; color: var(--text-color); align-self: flex-start; border-bottom-left-radius: 0; } .chatbot-input { display: flex; padding: 10px; border-top: 1px solid var(--primary-color); background-color: rgba(13, 13, 26, 0.9); } #chatbot-input-field { flex-grow: 1; padding: 10px; border: 1px solid var(--primary-color); border-radius: 8px 0 0 8px; background-color: rgba(13, 13, 26, 0.8); color: var(--text-color); font-size: 0.9em; outline: none; } #chatbot-input-field:focus { border-color: var(--accent-color); } #chatbot-send-btn { background-color: var(--primary-color); color: var(--background-color); border: none; padding: 0 15px; border-radius: 0 8px 8px 0; font-size: 1.2em; cursor: pointer; transition: background-color 0.3s; } #chatbot-send-btn:hover { background-color: var(--accent-color); } /* Profile & Settings Screens */ #profile-edit-screen, #settings-screen { background-color: rgba(26, 26, 58, 0.9); padding: 40px; border-radius: 15px; border: 1px solid var(--secondary-color); box-shadow: 0 0 25px var(--glow-color-secondary); width: 70%; max-width: 800px; align-items: flex-start; /* Align content left */ text-align: left; } #profile-edit-screen h1, #settings-screen h1 { font-family: var(--font-primary); color: var(--secondary-color); margin-bottom: 30px; text-shadow: 0 0 8px var(--glow-color-secondary); width: 100%; text-align: center; } #profile-edit-screen h2, #settings-screen h2 { font-family: var(--font-primary); color: var(--primary-color); margin-top: 20px; margin-bottom: 15px; border-bottom: 1px solid var(--primary-color); padding-bottom: 5px; } #profile-edit-screen label, #settings-screen label { display: block; margin-bottom: 8px; color: var(--text-color); font-weight: bold; } #profile-edit-screen input[type="text"], #profile-edit-screen input[type="file"], #settings-screen select { width: 100%; padding: 10px 12px; margin-bottom: 20px; border: 1px solid var(--primary-color); border-radius: 8px; background-color: rgba(13, 13, 26, 0.8); color: var(--text-color); font-size: 1em; box-shadow: inset 0 0 8px rgba(0, 255, 255, 0.2); } #profile-edit-screen input[type="file"] { color: var(--primary-color); /* Style file input text */ } #settings-screen select { appearance: none; /* Remove default arrow */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2300ffff'%3E%3Cpath d='M6 9l-6-6h12z'/%3E%3C/svg%3E"); /* Custom arrow */ background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; /* Space for arrow */ } #profile-edit-screen input:focus, #settings-screen select:focus { outline: none; border-color: var(--accent-color); box-shadow: inset 0 0 8px rgba(0, 255, 0, 0.4), 0 0 10px var(--glow-color-accent); } .back-button { background: linear-gradient(145deg, #666, #444); color: var(--text-color); border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 1em; font-family: var(--font-secondary); transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); margin-top: 30px; } .back-button:hover { background: linear-gradient(145deg, #444, #666); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); } /* Responsive Adjustments */ @media (max-width: 768px) { .login-options, .mode-options { flex-direction: column; gap: 20px; } .login-btn, .mode-btn { min-width: 200px; /* Adjust width */ } .main-header h1 { font-size: 1.4em; position: static; /* Let it flow naturally */ transform: none; text-align: center; flex-grow: 1; /* Allow title to take space */ margin: 0 10px; /* Add some margin */ } .main-header { padding: 10px 15px; flex-wrap: wrap; /* Allow wrapping if needed */ justify-content: space-between; } .conversion-limit { order: 1; /* Position elements */ font-size: 1em; } .account-menu { order: 2; } .main-header h1 { order: 3; width: 100%; /* Take full width on next line */ margin-top: 10px; } .main-content { flex-direction: column; gap: 25px; padding-top: 40px; } .action-btn { padding: 20px 30px; font-size: 1.1em; width: 80%; justify-content: center; } .popup-content { width: 90%; padding: 20px; } #conversion-flow { width: 100%; /* Use full popup width */ } .conversion-step { padding: 20px; } #conversion-flow input[type="email"], #conversion-flow input[type="password"], #conversion-flow input[type="text"], .step-navigation, .skin-search { width: 95%; /* Increase width on smaller screens */ } .chatbot-window { width: 90vw; height: 60vh; bottom: 70px; right: 5vw; } #profile-edit-screen, #settings-screen { width: 90%; padding: 20px; } } @media (max-width: 480px) { .loading-logo { font-size: 2.5em; } .login-container, .mode-container { padding: 30px 20px; } .main-header h1 { font-size: 1.2em; } .action-btn { font-size: 1em; padding: 15px 20px; } .popup-content h2 { font-size: 1.3em; } .popup-btn { font-size: 0.9em; padding: 8px 15px; } .step-navigation { flex-direction: column; gap: 10px; align-items: stretch; } .step-navigation .popup-btn { width: 100%; justify-content: center; } .step-navigation .next-btn, .step-navigation .convert-final-btn { margin-left: 0; } /* Reset margin */ .notification-banner { width: calc(100% - 40px); right: 10px; } /* Adjust banner width */ } document.addEventListener('DOMContentLoaded', () => { // --- DOM Elements --- const loadingScreen = document.getElementById('loading-screen'); const loadingBar = document.getElementById('loading-bar'); const loadingPercentage = document.getElementById('loading-percentage'); const loginScreen = document.getElementById('login-screen'); const modeSelectionScreen = document.getElementById('mode-selection-screen'); const mainScreen = document.getElementById('main-screen'); const profileEditScreen = document.getElementById('profile-edit-screen'); const settingsScreen = document.getElementById('settings-screen'); const googleLoginBtn = document.getElementById('google-login-btn'); const guestLoginBtn = document.getElementById('guest-login-btn'); const normalModeBtn = document.getElementById('normal-mode-btn'); const editModeBtn = document.getElementById('edit-mode-btn'); const modeLogoutBtn = document.getElementById('mode-logout-btn'); const convertBtn = document.getElementById('convert-btn'); const manageAccountsBtn = document.getElementById('manage-accounts-btn'); const accountSettingsBtn = document.getElementById('account-settings-btn'); const profileBtn = document.getElementById('profile-btn'); const settingsBtn = document.getElementById('settings-btn'); const logoutBtn = document.getElementById('logout-btn'); const conversionLimitIndicator = document.getElementById('conversion-limit-indicator'); const limitCountSpan = document.getElementById('limit-count'); const conversionPopupContainer = document.getElementById('conversion-popup-container'); const conversionFlow = document.getElementById('conversion-flow'); const closeConversionFlowBtn = document.getElementById('close-conversion-flow'); const backHomeConversionBtn = document.getElementById('back-home-conversion-btn'); const conversionSteps = conversionFlow.querySelectorAll('.conversion-step'); const nextToPasswordBtn = document.getElementById('next-to-password'); const nextToNickBtn = document.getElementById('next-to-nick'); const nextToSkinBtn = document.getElementById('next-to-skin'); const finalizeConversionBtn = document.getElementById('finalize-conversion-btn'); const closeSuccessBtn = document.getElementById('close-success-btn'); const prevBtns = conversionFlow.querySelectorAll('.prev-btn'); const conversionEmailInput = document.getElementById('conversion-email'); const conversionPasswordInput = document.getElementById('conversion-password'); const conversionNickInput = document.getElementById('conversion-nick'); const skinSearchNickInput = document.getElementById('skin-search-nick'); const searchSkinBtn = document.getElementById('search-skin-btn'); const skinViewer = document.getElementById('skin-viewer'); // Placeholder const manageAccountsPopup = document.getElementById('manage-accounts-popup'); const closeManageAccountsBtn = document.getElementById('close-manage-accounts'); const managedAccountsList = document.getElementById('managed-accounts-list'); const infoPopup = document.getElementById('info-popup'); const infoPopupTitle = document.getElementById('info-popup-title'); const infoPopupMessage = document.getElementById('info-popup-message'); const infoPopupOkBtn = document.getElementById('info-popup-ok'); const infoPopupCancelBtn = document.getElementById('info-popup-cancel'); const closeInfoPopupBtn = document.getElementById('close-info-popup'); const banPopup = document.getElementById('ban-popup'); const banReasonSpan = document.getElementById('ban-reason'); const banTimeSpan = document.getElementById('ban-time'); const notificationContainer = document.getElementById('notification-banner-container'); const chatbotToggleBtn = document.getElementById('chatbot-toggle-btn'); const chatbotWindow = document.getElementById('chatbot-window'); const closeChatbotBtn = document.getElementById('close-chatbot-btn'); const chatbotMessages = document.getElementById('chatbot-messages'); const chatbotInputField = document.getElementById('chatbot-input-field'); const chatbotSendBtn = document.getElementById('chatbot-send-btn'); const editModeControls = document.getElementById('edit-mode-controls'); const saveEditBtn = document.getElementById('save-edit-btn'); const cancelEditBtn = document.getElementById('cancel-edit-btn'); const backButtons = document.querySelectorAll('.back-button'); // --- State Variables --- let currentScreen = loadingScreen; let userState = { isLoggedIn: false, isGuest: false, username: null, conversionLimit: 3, lastLimitReset: null, // Store date string YYYY-MM-DD isBanned: false, banReason: null, banExpiry: null, // Store timestamp editModeActive: false, elementPositions: {} // Store {id: {x, y}} }; let conversionData = {}; // Temporary data during conversion flow let banIntervalId = null; // For updating ban timer // --- Constants --- const BAN_DURATION_VPN = 2 * 24 * 60 * 60 * 1000; // 2 days in ms const BAN_DURATION_CHATBOT = 1 * 24 * 60 * 60 * 1000; // 1 day in ms const BAN_DURATION_LIMIT_BYPASS = 5 * 24 * 60 * 60 * 1000; // 5 days in ms (example) const VALID_EMAIL_DOMAINS = ['@gmail.com', '@hotmail.com', '@outlook.com']; const MIN_PASSWORD_LENGTH = 8; const CHATBOT_API_ENDPOINT = 'https://api.openai.com/v1/chat/completions'; // Example - DO NOT USE CLIENT-SIDE IN PRODUCTION const CHATGPT_API_KEY = 'YOUR_API_KEY'; // DO NOT HARDCODE KEYS IN REAL APPS // --- Initialization --- loadState(); checkBanStatus(); // Check ban immediately on load if (!userState.isBanned) { startLoading(); } // --- Loading Screen --- function startLoading() { let progress = 0; const intervalTime = 100; // Update every 100ms const totalTime = 10000; // 10 seconds const increments = totalTime / intervalTime; const progressStep = 100 / increments; const loadingInterval = setInterval(() => { progress += progressStep; if (progress >= 100) { progress = 100; clearInterval(loadingInterval); loadingBar.style.width = `${progress}%`; loadingPercentage.textContent = `${Math.round(progress)}%`; // Check login status after loading if (userState.isLoggedIn || userState.isGuest) { // User was previously logged in (session persistence) checkDailyLimitReset(); // Check limit reset updateLimitDisplay(); if (userState.isGuest) { showScreen(modeSelectionScreen); // Guests go to mode selection } else { showScreen(mainScreen); // Logged-in users go to main screen setupMainScreen(); } } else { showScreen(loginScreen); // Default to login if no prior state } } loadingBar.style.width = `${progress}%`; loadingPercentage.textContent = `${Math.round(progress)}%`; }, intervalTime); } // --- Screen Management --- function showScreen(screenElement) { if (currentScreen) { currentScreen.classList.remove('active'); } // Small delay to allow fade-out before fade-in setTimeout(() => { screenElement.classList.add('active'); currentScreen = screenElement; // Apply saved positions if entering main screen in edit mode if (screenElement === mainScreen && userState.editModeActive) { applyElementPositions(); } }, 50); // Slightly longer than CSS transition? No, keep short. } // --- State Management (LocalStorage) --- function saveState() { try { localStorage.setItem('mineConvUserState', JSON.stringify(userState)); } catch (e) { console.error("Failed to save state:", e); showNotification('error', 'Erro ao salvar estado local.'); } } function loadState() { try { const savedState = localStorage.getItem('mineConvUserState'); if (savedState) { const parsedState = JSON.parse(savedState); // Merge saved state with defaults, ensuring all keys exist userState = { ...userState, ...parsedState }; // Ensure elementPositions is an object if (typeof userState.elementPositions !== 'object' || userState.elementPositions === null) { userState.elementPositions = {}; } } } catch (e) { console.error("Failed to load state:", e); localStorage.removeItem('mineConvUserState'); // Clear corrupted state } } function clearState() { userState = { isLoggedIn: false, isGuest: false, username: null, conversionLimit: 3, lastLimitReset: null, isBanned: false, // Keep ban status on logout? Debatable. Let's clear it for now. banReason: null, banExpiry: null, editModeActive: false, elementPositions: {} }; conversionData = {}; localStorage.removeItem('mineConvUserState'); localStorage.removeItem('mineConvManagedAccounts'); // Also clear managed accounts on logout localStorage.removeItem('mineConvElementPositions'); // Clear saved positions on logout } function saveElementPositions() { const positions = {}; document.querySelectorAll('.draggable').forEach(el => { if (el.id && (el.style.transform || (el.dataset.x && el.dataset.y))) { const x = parseFloat(el.dataset.x) || 0; const y = parseFloat(el.dataset.y) || 0; positions[el.id] = { x, y }; } else if (el.id) { // If no transform/data, store 0,0 or its natural position? Let's store 0,0 for reset. positions[el.id] = { x: 0, y: 0 }; } }); userState.elementPositions = positions; // Store in main state object saveState(); // Save the updated main state console.log("Positions saved:", userState.elementPositions); } function applyElementPositions() { console.log("Applying positions:", userState.elementPositions); Object.keys(userState.elementPositions).forEach(id => { const el = document.getElementById(id); const pos = userState.elementPositions[id]; if (el && pos) { el.style.transform = `translate(${pos.x}px, ${pos.y}px)`; el.dataset.x = pos.x; el.dataset.y = pos.y; } else if (el) { // Reset if no position saved for this element el.style.transform = 'translate(0px, 0px)'; el.dataset.x = 0; el.dataset.y = 0; } }); } function resetElementPositions() { document.querySelectorAll('.draggable').forEach(el => { el.style.transform = 'translate(0px, 0px)'; el.dataset.x = 0; el.dataset.y = 0; }); // Don't save the reset state immediately, only if user clicks "Save" later // Or clear from state if cancelling edit mode? Yes, clear on cancel. userState.elementPositions = {}; saveState(); // Save the cleared positions } // --- Login/Logout Logic --- googleLoginBtn.addEventListener('click', () => { // Simulate Google Login Success showNotification('success', 'Login com Google bem-sucedido (Simulado)!'); userState.isLoggedIn = true; userState.isGuest = false; userState.username = "Usuário Google"; // Placeholder checkDailyLimitReset(); updateLimitDisplay(); saveState(); showScreen(modeSelectionScreen); }); guestLoginBtn.addEventListener('click', () => { showInfoPopup( "Modo Convidado", "Este modo somente mostra um modo de como é o site, você não conseguirá fazer nenhuma ação significativa (como converter contas ou editar perfil).", () => { // OK Action userState.isLoggedIn = false; userState.isGuest = true; userState.username = "Convidado"; saveState(); showScreen(modeSelectionScreen); }, true // Show Cancel button ); }); function handleLogout() { clearState(); showScreen(loginScreen); // Hide elements specific to logged-in users if they were visible conversionLimitIndicator.style.display = 'none'; chatbotToggleBtn.style.display = 'none'; chatbotWindow.classList.remove('active'); // Close chatbot window if (userState.editModeActive) { toggleEditMode(false); // Ensure edit mode is off } } logoutBtn.addEventListener('click', handleLogout); modeLogoutBtn.addEventListener('click', handleLogout); // --- Mode Selection --- normalModeBtn.addEventListener('click', () => { showScreen(mainScreen); setupMainScreen(); }); editModeBtn.addEventListener('click', () => { if (userState.isGuest) { showInfoPopup("Acesso Negado", "O Modo Edição não está disponível para convidados."); return; } if (!userState.isLoggedIn) { showInfoPopup("Acesso Negado", "Faça login para usar o Modo Edição."); return; } showScreen(mainScreen); setupMainScreen(); // Ensure main screen elements are set up toggleEditMode(true); }); // --- Main Screen Setup --- function setupMainScreen() { if (userState.isLoggedIn) { conversionLimitIndicator.style.display = 'flex'; chatbotToggleBtn.style.display = 'flex'; updateLimitDisplay(); } else { conversionLimitIndicator.style.display = 'none'; chatbotToggleBtn.style.display = 'none'; } // Apply positions immediately if edit mode is already active from state if (userState.editModeActive) { applyElementPositions(); mainScreen.classList.add('editing'); editModeControls.style.display = 'flex'; } else { mainScreen.classList.remove('editing'); editModeControls.style.display = 'none'; // Optionally reset positions visually if not in edit mode, // but keep saved state unless explicitly reset/cancelled. // resetElementPositions(); // Maybe not here, apply only loads saved state. } } // --- Edit Mode --- function toggleEditMode(enable) { userState.editModeActive = enable; saveState(); // Save the edit mode status if (enable) { mainScreen.classList.add('editing'); editModeControls.style.display = 'flex'; initDraggable(); applyElementPositions(); // Apply saved positions when entering edit mode showNotification('success', 'Modo Edição Ativado. Arraste os elementos.'); } else { mainScreen.classList.remove('editing'); editModeControls.style.display = 'none'; destroyDraggable(); // Positions remain as they were visually unless cancelled/saved showNotification('info', 'Modo Edição Desativado.'); } } function initDraggable() { interact('.draggable') .draggable({ inertia: false, // No inertia for precise placement modifiers: [ interact.modifiers.restrictRect({ restriction: 'parent', // Keep within parent bounds endOnly: true }) ], autoScroll: true, // Scroll window if needed listeners: { move(event) { const target = event.target; // keep the dragged position in the data-x/data-y attributes const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx; const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; // translate the element target.style.transform = `translate(${x}px, ${y}px)`; // update the position attributes target.setAttribute('data-x', x); target.setAttribute('data-y', y); } } }) .on('dragstart', (event) => { event.target.style.zIndex = 100; // Bring to front while dragging }) .on('dragend', (event) => { event.target.style.zIndex = ''; // Reset z-index }); } function destroyDraggable() { // Check if interact is loaded and has the necessary methods if (typeof interact !== 'undefined' && interact.isSet && interact.isSet('.draggable')) { try { interact('.draggable').unset(); // Remove interact listeners } catch (e) { console.error("Error unsetting interact:", e); } } // Clean up styles and attributes manually just in case document.querySelectorAll('.draggable').forEach(el => { el.style.cursor = ''; // Reset cursor // Don't reset transform here, keep visual position until save/cancel }); } saveEditBtn.addEventListener('click', () => { saveElementPositions(); toggleEditMode(false); showNotification('success', 'Posições salvas com sucesso!'); }); cancelEditBtn.addEventListener('click', () => { resetElementPositions(); // Reset positions visually and in state toggleEditMode(false); showNotification('info', 'Alterações de posição canceladas.'); }); // --- Account Settings Menu --- accountSettingsBtn.addEventListener('click', (e) => { // Simple toggle (better implementation would handle clicks outside) const dropdown = document.getElementById('account-dropdown'); dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block'; e.stopPropagation(); // Prevent body click listener from closing it immediately }); // Close dropdown if clicking outside document.body.addEventListener('click', () => { const dropdown = document.getElementById('account-dropdown'); if (dropdown.style.display === 'block') { dropdown.style.display = 'none'; } }); profileBtn.addEventListener('click', (e) => { e.preventDefault(); if (userState.isGuest) { showInfoPopup("Acesso Negado", "Não é possível editar perfil no Modo Convidado."); return; } if (!userState.isLoggedIn) { showInfoPopup("Acesso Negado", "Faça login para editar o perfil."); return; } showScreen(profileEditScreen); document.getElementById('account-dropdown').style.display = 'none'; // Close dropdown }); settingsBtn.addEventListener('click', (e) => { e.preventDefault(); // Settings might be available for guests (like theme), check specific features inside // if (userState.isGuest) { // showInfoPopup("Acesso Negado", "Configurações limitadas no Modo Convidado."); // // return; // Or allow access to limited settings // } showScreen(settingsScreen); document.getElementById('account-dropdown').style.display = 'none'; // Close dropdown }); // Back buttons from Profile/Settings backButtons.forEach(button => { button.addEventListener('click', () => { const targetScreenId = button.dataset.target; const targetScreen = document.getElementById(targetScreenId); if (targetScreen) { showScreen(targetScreen); if(targetScreen === mainScreen) { setupMainScreen(); // Re-setup main screen when returning } } }); }); // --- Conversion Limit Logic --- function checkDailyLimitReset() { if (!userState.isLoggedIn) return; // Only for logged-in users const today = new Date().toLocaleDateString('en-CA'); // Get YYYY-MM-DD format // Use Brazil time - VERY HARD on client-side. Simulate with client's local date for now. // A server is needed for reliable timezone handling. // const nowInBrazil = new Date(new Date().toLocaleString("en-US", {timeZone: "America/Sao_Paulo"})); // const todayInBrazil = nowInBrazil.toLocaleDateString('en-CA'); if (userState.lastLimitReset !== today) { userState.conversionLimit = 3; userState.lastLimitReset = today; saveState(); showNotification('info', 'Seu limite de conversão diário foi resetado!'); updateLimitDisplay(); } } function updateLimitDisplay() { if (userState.isLoggedIn) { limitCountSpan.textContent = userState.conversionLimit; conversionLimitIndicator.style.display = 'flex'; // Ensure visible } else { conversionLimitIndicator.style.display = 'none'; } } function decrementLimit() { if (userState.isLoggedIn && userState.conversionLimit > 0) { userState.conversionLimit--; saveState(); updateLimitDisplay(); return true; } return false; } conversionLimitIndicator.addEventListener('click', () => { showInfoPopup("Limite de Conversão", `Você tem ${userState.conversionLimit} conversões restantes hoje. Assine o MineConv+ Plus para ter vidas ilimitadas (Simulado).`); }); // --- Conversion Flow --- convertBtn.addEventListener('click', () => { if (userState.isGuest) { showInfoPopup("Acesso Negado", "A conversão de contas não está disponível para convidados."); return; } if (!userState.isLoggedIn) { showInfoPopup("Acesso Negado", "Faça login para converter contas."); return; } if (userState.conversionLimit <= 0) { showInfoPopup("Limite Atingido", "Você usou todas as suas conversões gratuitas por hoje. Volte amanhã ou assine o MineConv+ Plus (Simulado)."); return; } // Reset previous data and show first step conversionData = {}; resetConversionForm(); showConversionStep('step-email'); conversionPopupContainer.classList.add('active'); }); closeConversionFlowBtn.addEventListener('click', () => { conversionPopupContainer.classList.remove('active'); }); backHomeConversionBtn.addEventListener('click', () => { conversionPopupContainer.classList.remove('active'); showScreen(mainScreen); // Go back to main screen setupMainScreen(); }); function showConversionStep(stepId) { const targetStep = document.getElementById(stepId); if (!targetStep) return; let currentActiveStep = conversionFlow.querySelector('.conversion-step.active'); if (currentActiveStep) { currentActiveStep.classList.add('exiting'); // Add class for exit animation // Wait for exit animation before switching setTimeout(() => { if (currentActiveStep) { // Check again in case of rapid clicks currentActiveStep.classList.remove('active', 'exiting'); } targetStep.classList.add('active'); // Focus first input in the new step if available const firstInput = targetStep.querySelector('input, select, button'); if (firstInput) { // Delay focus slightly to ensure element is fully visible after transition setTimeout(() => firstInput.focus(), 50); } }, 300); // Match CSS transition duration for exit } else { // If no step is active (initial show), just activate the target targetStep.classList.add('active'); const firstInput = targetStep.querySelector('input, select, button'); if (firstInput) { setTimeout(() => firstInput.focus(), 50); } } } function resetConversionForm() { conversionEmailInput.value = ''; conversionPasswordInput.value = ''; conversionNickInput.value = ''; skinSearchNickInput.value = ''; // Reset skin viewer appearance skinViewer.innerHTML = '

Visualizador 3D da Skin

'; // Clear any validation error styles if they were added } // --- Conversion Step Navigation & Validation --- nextToPasswordBtn.addEventListener('click', () => { const email = conversionEmailInput.value.trim().toLowerCase(); if (!email) { showNotification('error', 'Por favor, insira um endereço de e-mail.'); return; } if (!VALID_EMAIL_DOMAINS.some(domain => email.endsWith(domain))) { showNotification('error', `Domínio de e-mail inválido. Use ${VALID_EMAIL_DOMAINS.join(', ')}.`); return; } // Basic regex check (not foolproof) const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { showNotification('error', 'Formato de e-mail inválido.'); return; } conversionData.email = email; showConversionStep('step-password'); }); nextToNickBtn.addEventListener('click', () => { const password = conversionPasswordInput.value; if (password.length < MIN_PASSWORD_LENGTH) { showNotification('error', `A senha deve ter pelo menos ${MIN_PASSWORD_LENGTH} caracteres.`); return; } conversionData.password = password; // Store password (INSECURE IN REAL APP) showConversionStep('step-nick'); }); nextToSkinBtn.addEventListener('click', () => { const nick = conversionNickInput.value.trim(); if (!nick) { showNotification('error', 'Por favor, insira um nick.'); return; } if (/\s/.test(nick)) { // Check for spaces showNotification('error', 'O nick não pode conter espaços.'); return; } conversionData.nick = nick; showConversionStep('step-skin'); }); prevBtns.forEach(btn => { btn.addEventListener('click', () => { const targetStepId = btn.dataset.target; showConversionStep(targetStepId); }); }); // --- Skin Search (Simulation) --- searchSkinBtn.addEventListener('click', () => { const nick = skinSearchNickInput.value.trim(); if (!nick) { showNotification('error', 'Digite um nick para pesquisar a skin.'); return; } // Simulate API call and display skinViewer.innerHTML = `

Carregando skin para ${nick}...

`; setTimeout(() => { // Simulate success - replace with actual skin viewer logic if library is used skinViewer.innerHTML = `

Skin de ${nick} (Simulada)

(Use o mouse para girar - Simulado)

`; conversionData.skinUrl = `https://minotar.net/skin/${nick}`; // Store skin info showNotification('success', `Skin para ${nick} encontrada!`); }, 1500); // Simulate network delay }); // --- Finalize Conversion --- finalizeConversionBtn.addEventListener('click', () => { if (!conversionData.skinUrl) { showNotification('error', 'Por favor, pesquise e selecione uma skin.'); return; } // Double-check limit before finalizing if (userState.conversionLimit <= 0) { showInfoPopup("Limite Atingido", "Você não tem mais conversões hoje."); conversionPopupContainer.classList.remove('active'); // Close popup return; } // Decrement limit if (!decrementLimit()) { showInfoPopup("Erro", "Não foi possível decrementar o limite de conversão."); return; } // Simulate successful conversion console.log("Converting account:", conversionData); // Save the "managed" account saveManagedAccount({ email: conversionData.email, nick: conversionData.nick, skinUrl: conversionData.skinUrl, date: new Date().toLocaleString('pt-BR') }); showConversionStep('step-success'); // Don't close popup automatically, let user close success message }); closeSuccessBtn.addEventListener('click', () => { conversionPopupContainer.classList.remove('active'); showScreen(mainScreen); // Go back to main screen setupMainScreen(); }); // --- Manage Accounts --- manageAccountsBtn.addEventListener('click', () => { if (userState.isGuest) { showInfoPopup("Acesso Negado", "Gerenciamento de contas não disponível para convidados."); return; } if (!userState.isLoggedIn) { showInfoPopup("Acesso Negado", "Faça login para gerenciar contas."); return; } loadAndDisplayManagedAccounts(); manageAccountsPopup.classList.add('active'); }); closeManageAccountsBtn.addEventListener('click', () => { manageAccountsPopup.classList.remove('active'); }); function getManagedAccounts() { try { const accountsJson = localStorage.getItem('mineConvManagedAccounts'); return accountsJson ? JSON.parse(accountsJson) : []; } catch (e) { console.error("Failed to load managed accounts:", e); localStorage.removeItem('mineConvManagedAccounts'); return []; } } function saveManagedAccount(newAccount) { const accounts = getManagedAccounts(); accounts.push(newAccount); try { localStorage.setItem('mineConvManagedAccounts', JSON.stringify(accounts)); } catch (e) { console.error("Failed to save managed account:", e); showNotification('error', 'Erro ao salvar conta gerenciada.'); } } function loadAndDisplayManagedAccounts() { const accounts = getManagedAccounts(); if (accounts.length === 0) { managedAccountsList.innerHTML = '

Nenhuma conta convertida ainda.

'; return; } managedAccountsList.innerHTML = accounts.map(acc => `

Nick: ${acc.nick}
Email: ${acc.email}
Data: ${acc.date}
Skin

`).join(''); } // --- Info/Error Popup --- function showInfoPopup(title, message, okCallback = null, showCancel = false) { infoPopupTitle.textContent = title; infoPopupMessage.innerHTML = message; // Use innerHTML to allow basic formatting if needed // Reset button states infoPopupOkBtn.onclick = null; infoPopupCancelBtn.style.display = 'none'; infoPopupCancelBtn.onclick = null; infoPopupOkBtn.onclick = () => { infoPopup.classList.remove('active'); if (okCallback) { okCallback(); } }; if (showCancel) { infoPopupCancelBtn.style.display = 'inline-block'; infoPopupCancelBtn.onclick = () => { infoPopup.classList.remove('active'); // Optional: Add a cancel callback if needed }; } infoPopup.classList.add('active'); } closeInfoPopupBtn.addEventListener('click', () => { infoPopup.classList.remove('active'); }); // --- Ban System --- function applyBan(reason, duration) { const expiryTimestamp = Date.now() + duration; userState.isBanned = true; userState.banReason = reason; userState.banExpiry = expiryTimestamp; saveState(); checkBanStatus(); // Immediately show ban screen } function checkBanStatus() { if (userState.isBanned && userState.banExpiry) { const now = Date.now(); if (now < userState.banExpiry) { // Still banned showBanScreen(); // Update timer periodically if (banIntervalId) clearInterval(banIntervalId); // Clear previous timer banIntervalId = setInterval(updateBanTimer, 1000); updateBanTimer(); // Initial update return true; // Indicate user is banned } else { // Ban expired clearBan(); } } // Ensure ban popup is hidden if not banned banPopup.classList.remove('active'); if (banIntervalId) clearInterval(banIntervalId); return false; // Indicate user is not banned } function showBanScreen() { // Hide all other screens and popups document.querySelectorAll('.screen, .popup-container').forEach(el => el.classList.remove('active')); // Show ban popup banReasonSpan.textContent = userState.banReason || "Não especificado"; banPopup.classList.add('active'); // Hide potentially interfering elements like chatbot icon chatbotToggleBtn.style.display = 'none'; } function updateBanTimer() { if (!userState.isBanned || !userState.banExpiry) { if (banIntervalId) clearInterval(banIntervalId); banPopup.classList.remove('active'); return; } const now = Date.now(); const timeLeft = userState.banExpiry - now; if (timeLeft <= 0) { clearBan(); showNotification('success', 'Seu banimento expirou!'); // Potentially reload or show login screen window.location.reload(); // Simple way to reset state after ban } else { const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); banTimeSpan.textContent = `${days}d ${hours}h ${minutes}m ${seconds}s`; } } function clearBan() { userState.isBanned = false; userState.banReason = null; userState.banExpiry = null; if (banIntervalId) clearInterval(banIntervalId); banIntervalId = null; saveState(); banPopup.classList.remove('active'); } // --- Notification Banners --- function showNotification(type, message) { const banner = document.createElement('div'); banner.className = `notification-banner ${type}`; // 'success' or 'error' banner.innerHTML = ` ${message} `; notificationContainer.appendChild(banner); // Trigger fade-in animation setTimeout(() => { banner.classList.add('show'); }, 10); // Small delay to allow element to be added to DOM first // Auto-remove after a few seconds setTimeout(() => { banner.classList.remove('show'); // Remove element after fade-out transition setTimeout(() => { banner.remove(); }, 500); // Match CSS transition duration }, 4000); // Display for 4 seconds } // --- Chatbot --- chatbotToggleBtn.addEventListener('click', () => { chatbotWindow.classList.toggle('active'); if (chatbotWindow.classList.contains('active')) { chatbotInputField.focus(); chatbotToggleBtn.style.animationPlayState = 'paused'; // Pause bounce when open } else { chatbotToggleBtn.style.animationPlayState = 'running'; // Resume bounce } }); closeChatbotBtn.addEventListener('click', () => { chatbotWindow.classList.remove('active'); chatbotToggleBtn.style.animationPlayState = 'running'; }); chatbotSendBtn.addEventListener('click', handleChatbotInput); chatbotInputField.addEventListener('keypress', (e) => { if (e.key === 'Enter') { handleChatbotInput(); } }); function handleChatbotInput() { const message = chatbotInputField.value.trim(); if (!message) return; appendChatMessage(message, 'user'); chatbotInputField.value = ''; // --- Chatbot Logic (Simulation / Basic Checks) --- const lowerCaseMessage = message.toLowerCase(); // Check for ban triggers first const abusiveWords = ['merda', 'puta', 'caralho', 'foder', 'lixo']; // Example list const conversionRequests = ['converter', 'converte', 'transformar conta', 'mudar conta']; if (abusiveWords.some(word => lowerCaseMessage.includes(word))) { appendChatMessage('Detectei linguagem imprópria. Isso pode levar a um banimento.', 'bot'); applyBan("Uso indevido do chatbot (linguagem imprópria)", BAN_DURATION_CHATBOT); return; } if (conversionRequests.some(phrase => lowerCaseMessage.includes(phrase))) { appendChatMessage('Não posso realizar conversões de conta diretamente pelo chat. Use o botão "Converter Conta". Tentar burlar o sistema pode levar a um banimento.', 'bot'); applyBan("Uso indevido do chatbot (tentativa de conversão)", BAN_DURATION_CHATBOT); return; } // Simulate API call / Generate response simulateChatbotResponse(message); } function appendChatMessage(message, sender) { // sender: 'user' or 'bot' const messageElement = document.createElement('div'); messageElement.classList.add(sender === 'user' ? 'user-message' : 'bot-message'); messageElement.textContent = message; chatbotMessages.appendChild(messageElement); // Scroll to bottom chatbotMessages.scrollTop = chatbotMessages.scrollHeight; } function simulateChatbotResponse(userMessage) { // Simulate thinking delay appendChatMessage("...", 'bot'); // Typing indicator const thinkingTime = 500 + Math.random() * 1000; // 0.5 - 1.5 seconds delay setTimeout(() => { // Remove typing indicator const indicators = chatbotMessages.querySelectorAll('.bot-message'); if (indicators.length > 0 && indicators[indicators.length - 1].textContent === '...') { indicators[indicators.length - 1].remove(); } let response = "Desculpe, não entendi. Pode reformular?"; // Default response // Simple keyword-based responses (Replace with actual API call) const lowerMsg = userMessage.toLowerCase(); if (lowerMsg.includes('olá') || lowerMsg.includes('oi')) { response = "Olá! Como posso te ajudar hoje?"; } else if (lowerMsg.includes('como funciona') || lowerMsg.includes('o que faz')) { response = "Eu sou um assistente virtual. O MineConv simula a conversão de contas Minecraft. Você pode usar o botão 'Converter Conta' após o login."; } else if (lowerMsg.includes('limite') || lowerMsg.includes('vidas')) { response = `Você tem um limite diário de ${userState.conversionLimit} conversões gratuitas. Esse limite reseta diariamente.`; } else if (lowerMsg.includes('editar perfil')) { response = "Para editar seu perfil, clique no ícone de engrenagem no canto superior direito e selecione 'Alterar Perfil'."; } else if (lowerMsg.includes('modo edição')) { response = "O Modo Edição permite arrastar alguns elementos da tela. Ele só está disponível para usuários logados com Google."; } else if (lowerMsg.includes('ajuda') || lowerMsg.includes('socorro')) { response = "Estou aqui para ajudar! Qual sua dúvida específica sobre o MineConv?"; } else if (lowerMsg.includes('vpn')) { response = "O uso de VPN para tentar burlar os limites do sistema não é permitido e pode resultar em banimento."; // Simulate VPN detection (for demo purposes) if (Math.random() < 0.1) { // 10% chance to trigger ban on mentioning VPN applyBan("Uso indevido de VPN (Detectado)", BAN_DURATION_VPN); } } appendChatMessage(response, 'bot'); }, thinkingTime); // --- !!! IMPORTANT: Real ChatGPT API Call (Conceptual) !!! --- // DO NOT use this directly on the client-side due to API key exposure. // This requires a backend server to handle the API call securely. /* fetch(CHATBOT_API_ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${CHATGPT_API_KEY}` }, body: JSON.stringify({ model: "gpt-4", // Or desired model messages: [ { role: "system", content": "You are a helpful assistant for the MineConv website, a Minecraft account conversion simulator. Answer questions about the site's functionality. Do not perform conversions. Warn users against trying to bypass limits or using abusive language." }, { role: "user", content": userMessage } ], max_tokens: 150 }) }) .then(response => response.json()) .then(data => { if (data.choices && data.choices.length > 0) { const botResponse = data.choices[0].message.content.trim(); appendChatMessage(botResponse, 'bot'); } else { appendChatMessage("Desculpe, ocorreu um erro ao processar sua solicitação.", 'bot'); console.error("Chatbot API Error:", data); } }) .catch(error => { console.error('Error calling Chatbot API:', error); appendChatMessage("Não foi possível conectar ao assistente no momento.", 'bot'); }); */ } // --- Initial Setup --- // Hide elements that require login initially conversionLimitIndicator.style.display = 'none'; chatbotToggleBtn.style.display = 'none'; editModeControls.style.display = 'none'; }); // End DOMContentLoaded

Bem-vindo ao MineConv

Selecione o Modo

E-mail da Microsoft

Senha

Nick do Jogo

Adicionar Skin

Conversão Concluída!

Contas Gerenciadas

Aviso

Você foi Banido!

Editar Perfil

Configurações do Perfil

Configurações