Simulated App

Okay, let's start building the structure for this application simulation. We'll begin with the HTML structure, basic CSS for layout and the initial loading screen functionality. Simulated App

Loading Application...

Select Mode

Funcionalidade de alterar perfil (foto, nome, etc.) seria implementada aqui.

Foto de Perfil:

Nome:

Idioma:

Tema:

Outras configurações...

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap'); :root { /* Futuristic Light Theme (Default) */ --bg-primary: #e8f0f7; --bg-secondary: #ffffff; --text-primary: #1a2a3a; --text-secondary: #5a6a7a; --accent-primary: #00aaff; --accent-secondary: #0077cc; --border-color: #c0d0e0; --success-color: #28a745; --error-color: #dc3545; --shadow-color: rgba(0, 100, 150, 0.1); --progress-bar-bg: #d0e0f0; --progress-bar-fill: var(--accent-primary); --button-bg: linear-gradient(145deg, #f0f8ff, #d4e4f4); --button-hover-bg: linear-gradient(145deg, #ffffff, #e0f0ff); --button-text: var(--accent-secondary); --input-bg: #ffffff; --input-border: var(--border-color); --header-bg: linear-gradient(to right, #f8faff, #e8f0f7); /* Shared */ --font-primary: 'Roboto', sans-serif; --font-display: 'Orbitron', sans-serif; --border-radius: 8px; --transition-speed: 0.3s; } [data-theme="futuristic-dark"] { --bg-primary: #1a2a3a; --bg-secondary: #2a3a4a; --text-primary: #e8f0f7; --text-secondary: #a0b0c0; --accent-primary: #00ccff; --accent-secondary: #00aaff; --border-color: #4a5a6a; --success-color: #30c050; --error-color: #ff4050; --shadow-color: rgba(0, 150, 200, 0.1); --progress-bar-bg: #3a4a5a; --progress-bar-fill: var(--accent-primary); --button-bg: linear-gradient(145deg, #3a4a5a, #1a2a3a); --button-hover-bg: linear-gradient(145deg, #4a5a6a, #2a3a4a); --button-text: var(--accent-primary); --input-bg: #2a3a4a; --input-border: var(--border-color); --header-bg: linear-gradient(to right, #2a3a4a, #1a2a3a); } body { margin: 0; font-family: var(--font-primary); background-color: var(--bg-primary); color: var(--text-primary); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; transition: background-color var(--transition-speed), color var(--transition-speed); } #app-container { width: 95%; max-width: 1000px; /* Adjust as needed */ height: 80vh; max-height: 700px; /* Adjust as needed */ background-color: var(--bg-secondary); border-radius: var(--border-radius); box-shadow: 0 10px 30px var(--shadow-color); overflow: hidden; position: relative; display: flex; /* Use flexbox for page transitions */ transition: background-color var(--transition-speed); } .page { position: absolute; /* Position pages absolutely for transitions */ top: 0; left: 0; width: 100%; height: 100%; padding: 30px; box-sizing: border-box; opacity: 0; visibility: hidden; transition: opacity var(--transition-speed) ease-in-out, visibility 0s var(--transition-speed); display: flex; flex-direction: column; align-items: center; justify-content: center; /* Center content by default */ text-align: center; background-color: var(--bg-secondary); /* Ensure page bg matches container */ overflow-y: auto; /* Allow scrolling if content overflows */ } .page.active { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; /* Bring active page to the front */ } /* Specific Page Layouts */ #normal-mode-screen, #conversion-process-screen, #profile-screen, #settings-screen { justify-content: flex-start; /* Align content to top */ text-align: left; } /* Loading Screen Styles */ #loading-screen .loading-content { display: flex; flex-direction: column; align-items: center; } .spinner { border: 4px solid var(--border-color); border-top: 4px solid var(--accent-primary); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin-bottom: 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .progress-bar-container { width: 80%; max-width: 300px; height: 15px; background-color: var(--progress-bar-bg); border-radius: var(--border-radius); overflow: hidden; margin-top: 15px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); } .progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary)); border-radius: var(--border-radius); transition: width 0.5s ease-out; /* Smooth progress animation */ } .progress-text { margin-top: 10px; font-size: 0.9em; color: var(--text-secondary); } /* General Styles */ h1, h2 { font-family: var(--font-display); color: var(--accent-primary); margin-bottom: 30px; } h2 { margin-bottom: 20px; } p { color: var(--text-secondary); line-height: 1.6; } small { font-size: 0.7em; color: var(--text-secondary); } /* Button Styles */ button { padding: 12px 25px; font-size: 1em; font-family: var(--font-primary); font-weight: bold; color: var(--button-text); background: var(--button-bg); border: none; border-radius: var(--border-radius); cursor: pointer; transition: all var(--transition-speed) ease; box-shadow: 0 4px 10px var(--shadow-color); display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; margin: 5px; /* Add some margin around buttons */ } button:hover { background: var(--button-hover-bg); box-shadow: 0 6px 15px var(--shadow-color); transform: translateY(-2px); } button:active { transform: translateY(0px); box-shadow: 0 2px 5px var(--shadow-color); } button i { font-size: 1.1em; } .login-options, .mode-options { display: flex; gap: 20px; margin-top: 20px; } .logout-button { position: absolute; bottom: 20px; right: 20px; background: transparent; color: var(--text-secondary); box-shadow: none; padding: 8px 12px; } .logout-button:hover { color: var(--error-color); background: transparent; transform: none; box-shadow: none; } /* Header Styles */ .app-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; background: var(--header-bg); /* Subtle gradient */ padding: 15px 30px; /* Add padding */ margin: -30px -30px 20px -30px; /* Extend to edges */ box-sizing: border-box; } .app-header h2 { margin: 0; font-size: 1.4em; } /* Account Menu */ .account-menu { position: relative; } .account-menu > button { background: transparent; border: none; color: var(--text-primary); font-size: 1.5em; padding: 5px; box-shadow: none; } .account-menu > button:hover { color: var(--accent-primary); background: transparent; transform: none; box-shadow: none; } .dropdown-content { display: none; position: absolute; right: 0; top: 100%; background-color: var(--bg-secondary); min-width: 180px; box-shadow: 0 8px 16px var(--shadow-color); border-radius: var(--border-radius); z-index: 10; overflow: hidden; /* Ensure buttons fit border radius */ border: 1px solid var(--border-color); } .dropdown-content button { color: var(--text-primary); padding: 12px 16px; text-decoration: none; display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 0; box-shadow: none; margin: 0; /* Reset margin */ font-weight: normal; } .dropdown-content button:hover { background-color: var(--bg-primary); color: var(--accent-primary); transform: none; /* Disable hover transform */ } .account-menu:hover .dropdown-content, .account-menu > button:focus + .dropdown-content, /* Show on focus */ .dropdown-content:hover /* Keep open while hovering dropdown */ { display: block; } /* Main Content Area */ .app-content { width: 100%; flex-grow: 1; /* Take remaining space */ overflow-y: auto; /* Scroll content if needed */ padding: 0 10px; /* Add some padding */ } .main-action-btn { padding: 15px 30px; font-size: 1.1em; } /* Form Styles */ form { width: 100%; max-width: 600px; /* Limit form width */ margin: 0 auto; /* Center form */ } .form-group { margin-bottom: 20px; text-align: left; } .form-group label { display: block; margin-bottom: 8px; font-weight: bold; color: var(--text-secondary); font-size: 0.9em; } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"], .form-group select { width: 100%; padding: 12px; border: 1px solid var(--input-border); border-radius: var(--border-radius); background-color: var(--input-bg); color: var(--text-primary); font-size: 1em; box-sizing: border-box; transition: border-color var(--transition-speed), box-shadow var(--transition-speed); } .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.2); } .skin-group .skin-input-row { display: flex; gap: 10px; align-items: center; } .skin-group .skin-input-row input { flex-grow: 1; } .skin-group .skin-input-row button { flex-shrink: 0; /* Prevent button from shrinking */ padding: 10px 15px; /* Adjust button padding */ } .skin-preview-area { margin-top: 15px; display: flex; align-items: center; gap: 15px; min-height: 64px; /* Minecraft skin height */ } #skin-preview { display: none; /* Hidden initially */ width: 64px; /* Standard Minecraft skin preview size */ height: 64px; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--bg-primary); object-fit: contain; /* Or scale-down */ image-rendering: pixelated; /* Keep skin sharp */ } #confirm-skin-btn { display: none; /* Hidden initially */ padding: 8px 12px; } /* Back Button */ #back-to-normal-btn, #back-to-normal-from-profile-btn, #back-to-normal-from-settings-btn { background: transparent; border: none; color: var(--text-primary); font-size: 1.2em; padding: 5px 10px; box-shadow: none; } #back-to-normal-btn:hover, #back-to-normal-from-profile-btn:hover, #back-to-normal-from-settings-btn:hover { color: var(--accent-primary); background: transparent; transform: none; box-shadow: none; } /* Notification Area */ #notification-area { position: absolute; top: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .notification { padding: 12px 20px; border-radius: var(--border-radius); color: #fff; font-size: 0.9em; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); opacity: 0; transform: translateX(100%); animation: slideIn 0.5s forwards, fadeOut 0.5s 4.5s forwards; /* Slide in, wait 4.5s, fade out */ } .notification.success { background-color: var(--success-color); } .notification.error { background-color: var(--error-color); } @keyframes slideIn { to { opacity: 1; transform: translateX(0); } } @keyframes fadeOut { to { opacity: 0; transform: translateX(50%); /* Optional: slide out slightly while fading */ } } /* Edit Mode Styles */ .editable { cursor: grab; position: relative; /* Needed for absolute positioning during drag or for saving */ border: 1px dashed transparent; /* Show border on hover */ transition: border-color 0.2s; } .editable:hover { border-color: var(--accent-primary); } .editable.dragging { cursor: grabbing; opacity: 0.7; z-index: 100; /* Ensure dragged element is on top */ border-style: solid; } .edit-controls { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background-color: rgba(0,0,0,0.7); padding: 8px 15px; border-radius: var(--border-radius); z-index: 50; display: flex; gap: 10px; } .edit-controls button { background: var(--accent-primary); color: white; box-shadow: none; padding: 8px 15px; font-size: 0.9em; } .edit-controls button:hover { background: var(--accent-secondary); } .edit-controls button#cancel-edits-btn, .edit-controls button#cancel-edits-conv-btn, .edit-controls button#cancel-edits-prof-btn, .edit-controls button#cancel-edits-sett-btn { background: var(--error-color); } .edit-controls button#cancel-edits-btn:hover, .edit-controls button#cancel-edits-conv-btn:hover, .edit-controls button#cancel-edits-prof-btn:hover, .edit-controls button#cancel-edits-sett-btn:hover { background: darkred; } /* Profile Screen Specific */ #profile-preview { display: block; max-width: 150px; max-height: 150px; margin-top: 10px; border-radius: 50%; border: 2px solid var(--border-color); } import * as UI from './ui.js'; import * as Loader from './loader.js'; import * as Auth from './auth.js'; import * as Settings from './settings.js'; import * as Conversion from './conversion.js'; import * as EditMode from './editMode.js'; // --- Initialization --- document.addEventListener('DOMContentLoaded', () => { Settings.applyInitialSettings(); // Apply theme/language first Loader.startLoading(() => { // Check login state after loading if (Auth.isLoggedIn()) { UI.showPage('mode-selection-screen'); } else { UI.showPage('login-screen'); } setupEventListeners(); EditMode.loadElementPositions(); // Load saved positions if any }); }); // --- Event Listeners --- function setupEventListeners() { // Login Screen document.getElementById('google-login-btn')?.addEventListener('click', Auth.loginGoogle); document.getElementById('guest-login-btn')?.addEventListener('click', Auth.loginGuest); // Mode Selection Screen document.getElementById('normal-mode-btn')?.addEventListener('click', () => { UI.showPage('normal-mode-screen'); EditMode.disableEditMode(); // Ensure edit mode is off }); document.getElementById('edit-mode-btn')?.addEventListener('click', () => { EditMode.enableEditMode(); // Stay on the current relevant page or go to normal mode screen first? // Let's assume we edit the 'normal-mode-screen' by default when entering edit mode UI.showPage('normal-mode-screen'); }); document.getElementById('mode-logout-btn')?.addEventListener('click', Auth.logout); // Normal Mode Screen (Conversion Tool) document.getElementById('convert-start-btn')?.addEventListener('click', () => UI.showPage('conversion-process-screen')); document.getElementById('account-settings-btn')?.addEventListener('click', (e) => { // Basic toggle, more robust solution might be needed const dropdown = e.currentTarget.nextElementSibling; if (dropdown) { dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block'; } }); // Close dropdown if clicking outside document.addEventListener('click', (e) => { const accountMenu = document.querySelector('.account-menu'); if (accountMenu && !accountMenu.contains(e.target)) { const dropdown = accountMenu.querySelector('.dropdown-content'); if(dropdown) dropdown.style.display = 'none'; } }); document.getElementById('profile-btn')?.addEventListener('click', () => UI.showPage('profile-screen')); document.getElementById('settings-btn')?.addEventListener('click', () => UI.showPage('settings-screen')); document.getElementById('normal-logout-btn')?.addEventListener('click', Auth.logout); // Conversion Process Screen document.getElementById('back-to-normal-btn')?.addEventListener('click', () => UI.showPage('normal-mode-screen')); document.getElementById('search-skin-btn')?.addEventListener('click', Conversion.searchSkin); document.getElementById('confirm-skin-btn')?.addEventListener('click', Conversion.confirmSkin); document.getElementById('conversion-form')?.addEventListener('submit', Conversion.submitConversion); // Profile Screen document.getElementById('back-to-normal-from-profile-btn')?.addEventListener('click', () => UI.showPage('normal-mode-screen')); // Add event listener for profile picture change to show preview const profilePicInput = document.getElementById('profile-pic'); const profilePreview = document.getElementById('profile-preview'); if (profilePicInput && profilePreview) { profilePicInput.addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { profilePreview.src = e.target.result; profilePreview.style.display = 'block'; } reader.readAsDataURL(file); } else { profilePreview.style.display = 'none'; profilePreview.src = '#'; } }); } // Settings Screen document.getElementById('back-to-normal-from-settings-btn')?.addEventListener('click', () => UI.showPage('normal-mode-screen')); document.getElementById('language-select')?.addEventListener('change', Settings.handleLanguageChange); document.getElementById('theme-select')?.addEventListener('change', Settings.handleThemeChange); // Edit Mode Controls (Event listeners are added dynamically in editMode.js) } import * as EditMode from './editMode.js'; const pages = document.querySelectorAll('.page'); const notificationArea = document.getElementById('notification-area'); export function showPage(pageId) { console.log(`Showing page: ${pageId}`); pages.forEach(page => { if (page.id === pageId) { page.classList.add('active'); // If entering edit mode for a specific page, enable it here if (EditMode.isEditModeActive()) { EditMode.makePageEditable(page); } } else { page.classList.remove('active'); } }); // Close account dropdown when changing pages const dropdown = document.querySelector('.account-menu .dropdown-content'); if (dropdown) dropdown.style.display = 'none'; } export function getCurrentPageId() { const activePage = document.querySelector('.page.active'); return activePage ? activePage.id : null; } export function showNotification(message, type = 'success') { if (!notificationArea) return; const notification = document.createElement('div'); notification.classList.add('notification', type); // 'success' or 'error' const icon = document.createElement('i'); icon.classList.add('fas', type === 'success' ? 'fa-check-circle' : 'fa-times-circle'); const text = document.createElement('span'); text.textContent = message; notification.appendChild(icon); notification.appendChild(text); notificationArea.appendChild(notification); // Remove notification after animation finishes (5s total: 0.5s slideIn + 4.5s wait + 0.5s fadeOut) setTimeout(() => { notification.remove(); }, 5000); } const loadingScreen = document.getElementById('loading-screen'); const progressBar = loadingScreen?.querySelector('.progress-bar'); const progressText = loadingScreen?.querySelector('.progress-text'); const totalDuration = 10000; // 10 seconds const intervalTime = 100; // Update every 100ms let elapsedTime = 0; let intervalId = null; export function startLoading(onComplete) { if (!loadingScreen || !progressBar || !progressText) { console.error("Loading screen elements not found!"); if(onComplete) onComplete(); // Skip loading if elements are missing return; } elapsedTime = 0; progressBar.style.width = '0%'; progressText.textContent = '0%'; loadingScreen.classList.add('active'); // Ensure it's visible intervalId = setInterval(() => { elapsedTime += intervalTime; let progress = Math.min(100, Math.round((elapsedTime / totalDuration) * 100)); // Make progress slightly non-linear for realism let displayProgress = Math.pow(progress / 100, 0.7) * 100; // Example easing displayProgress = Math.min(100, Math.round(displayProgress)); progressBar.style.width = `${displayProgress}%`; progressText.textContent = `${displayProgress}%`; if (elapsedTime >= totalDuration) { clearInterval(intervalId); // Ensure it reaches 100% visually progressBar.style.width = '100%'; progressText.textContent = '100%'; // Wait a brief moment before hiding the screen setTimeout(() => { // loadingScreen.classList.remove('active'); // Handled by showPage now if (onComplete) { onComplete(); } }, 300); // Short delay after reaching 100% } }, intervalTime); } import * as UI from './ui.js'; import * as EditMode from './editMode.js'; const LOGIN_STATE_KEY = 'simulatedAppLoginState'; export function loginGoogle() { // Simulate Google Login UI.showNotification("Simulating Google Login...", "success"); setTimeout(() => { sessionStorage.setItem(LOGIN_STATE_KEY, JSON.stringify({ loggedIn: true, type: 'google' })); UI.showNotification("Login Successful!", "success"); UI.showPage('mode-selection-screen'); EditMode.loadElementPositions(); // Load positions on login }, 1500); // Simulate network delay } export function loginGuest() { sessionStorage.setItem(LOGIN_STATE_KEY, JSON.stringify({ loggedIn: true, type: 'guest' })); UI.showNotification("Entered as Guest", "success"); UI.showPage('mode-selection-screen'); EditMode.loadElementPositions(); // Load positions on login } export function logout() { sessionStorage.removeItem(LOGIN_STATE_KEY); // Optionally clear edit mode positions on logout? Or keep them? Let's keep them for now. // localStorage.removeItem(EditMode.POSITION_STORAGE_KEY); UI.showNotification("Logged out", "success"); UI.showPage('login-screen'); EditMode.disableEditMode(); // Ensure edit mode is off after logout } export function isLoggedIn() { const state = sessionStorage.getItem(LOGIN_STATE_KEY); if (!state) return false; try { return JSON.parse(state).loggedIn === true; } catch (e) { return false; } } export function getLoginType() { const state = sessionStorage.getItem(LOGIN_STATE_KEY); if (!state) return null; try { return JSON.parse(state).type; } catch (e) { return null; } } import * as UI from './ui.js'; // Add language strings later if needed // import { translations } from './config.js'; const THEME_KEY = 'simulatedAppTheme'; const LANGUAGE_KEY = 'simulatedAppLanguage'; export function applyInitialSettings() { // Apply Theme const savedTheme = localStorage.getItem(THEME_KEY) || 'futuristic-light'; // Default theme applyTheme(savedTheme); const themeSelect = document.getElementById('theme-select'); if (themeSelect) themeSelect.value = savedTheme; // Apply Language const savedLang = localStorage.getItem(LANGUAGE_KEY) || 'pt'; // Default language applyLanguage(savedLang); const langSelect = document.getElementById('language-select'); if (langSelect) langSelect.value = savedLang; } export function handleThemeChange(event) { const newTheme = event.target.value; applyTheme(newTheme); localStorage.setItem(THEME_KEY, newTheme); UI.showNotification(`Tema alterado para ${event.target.options[event.target.selectedIndex].text}`, 'success'); } export function handleLanguageChange(event) { const newLang = event.target.value; applyLanguage(newLang); localStorage.setItem(LANGUAGE_KEY, newLang); UI.showNotification(`Idioma alterado para ${event.target.options[event.target.selectedIndex].text}`, 'success'); } function applyTheme(themeName) { document.body.dataset.theme = themeName; console.log(`Applied theme: ${themeName}`); } function applyLanguage(langCode) { console.log(`Applied language: ${langCode}`); // TODO: Implement text updates based on language // Example: document.querySelector('h1').textContent = translations[langCode].welcomeMessage; // This requires defining translation strings in config.js or similar document.documentElement.lang = langCode; // Update html lang attribute } import * as UI from './ui.js'; const form = document.getElementById('conversion-form'); const emailInput = document.getElementById('email'); const passwordInput = document.getElementById('password'); const confirmPasswordInput = document.getElementById('confirm-password'); const nicknameInput = document.getElementById('nickname'); const skinSearchInput = document.getElementById('skin-search'); const skinPreview = document.getElementById('skin-preview'); const confirmSkinBtn = document.getElementById('confirm-skin-btn'); let selectedSkinUrl = null; // Store the URL of the confirmed skin export function searchSkin() { const username = skinSearchInput.value.trim(); if (!username) { UI.showNotification("Por favor, insira um nick para pesquisar a skin.", "error"); return; } // Use a simple public API (like Minotar) - check their terms of use! // This is just for visual simulation. const skinUrl = `https://minotar.net/skin/${username}`; const faceUrl = `https://minotar.net/avatar/${username}/64.png`; // Use avatar for preview // Basic check if image likely exists (doesn't guarantee valid skin) const imgTest = new Image(); imgTest.onload = () => { skinPreview.src = faceUrl; // Show face preview skinPreview.style.display = 'block'; confirmSkinBtn.style.display = 'inline-block'; selectedSkinUrl = skinUrl; // Store the full skin URL for potential use UI.showNotification(`Prévia da skin para ${username} carregada.`, 'success'); }; imgTest.onerror = () => { skinPreview.style.display = 'none'; confirmSkinBtn.style.display = 'none'; selectedSkinUrl = null; UI.showNotification(`Não foi possível encontrar a skin para ${username}.`, 'error'); }; imgTest.src = faceUrl; // Test load the image } export function confirmSkin() { if (selectedSkinUrl) { UI.showNotification("Skin selecionada!", "success"); // Maybe disable search input or show confirmation text skinSearchInput.disabled = true; confirmSkinBtn.textContent = 'Selecionada'; confirmSkinBtn.disabled = true; document.getElementById('search-skin-btn').disabled = true; } } export function submitConversion(event) { event.preventDefault(); // Prevent default form submission // --- Validation --- let isValid = true; const email = emailInput.value.trim(); const password = passwordInput.value; const confirmPassword = confirmPasswordInput.value; const nickname = nicknameInput.value.trim(); if (!email || !/\S+@\S+\.\S+/.test(email)) { UI.showNotification("Por favor, insira um e-mail válido.", "error"); isValid = false; } if (!password || password.length < 6) { // Example: minimum length UI.showNotification("A senha deve ter pelo menos 6 caracteres.", "error"); isValid = false; } if (password !== confirmPassword) { UI.showNotification("As senhas não coincidem.", "error"); isValid = false; } if (!nickname) { UI.showNotification("Por favor, insira um nick do jogo.", "error"); isValid = false; } if (!selectedSkinUrl || !confirmSkinBtn.disabled) { // Check if skin was confirmed UI.showNotification("Por favor, pesquise e confirme uma skin.", "error"); isValid = false; } if (!isValid) { return; // Stop submission if validation fails } // --- Simulate Conversion Process --- UI.showNotification("Iniciando conversão...", "success"); const finalizeButton = document.getElementById('finalize-conversion-btn'); finalizeButton.disabled = true; finalizeButton.innerHTML = ' Convertendo...'; setTimeout(() => { // Simulate success UI.showNotification("Conversão realizada com sucesso! (Simulação)", "success"); // Reset form or navigate back form.reset(); skinPreview.style.display = 'none'; confirmSkinBtn.style.display = 'none'; confirmSkinBtn.textContent = 'OK'; confirmSkinBtn.disabled = false; skinSearchInput.disabled = false; document.getElementById('search-skin-btn').disabled = false; selectedSkinUrl = null; finalizeButton.disabled = false; finalizeButton.innerHTML = ' Converter Agora'; // Optionally navigate back setTimeout(() => UI.showPage('normal-mode-screen'), 1500); }, 2500); // Simulate network delay/processing time } // Reset skin confirmation state when input changes skinSearchInput?.addEventListener('input', () => { if (skinSearchInput.disabled) return; // Don't reset if already confirmed skinPreview.style.display = 'none'; confirmSkinBtn.style.display = 'none'; confirmSkinBtn.textContent = 'OK'; confirmSkinBtn.disabled = false; selectedSkinUrl = null; document.getElementById('search-skin-btn').disabled = false; }); import * as UI from './ui.js'; export const POSITION_STORAGE_KEY = 'simulatedAppElementPositions'; let isEditing = false; let draggedElement = null; let offsetX, offsetY; let originalPositions = {}; // Store original positions before dragging starts on a page export function isEditModeActive() { return isEditing; } export function enableEditMode() { if (isEditing) return; isEditing = true; console.log("Edit Mode Enabled"); UI.showNotification("Modo Edição Ativado. Arraste os elementos.", "success"); const currentPage = document.querySelector('.page.active'); if (currentPage) { makePageEditable(currentPage); } // Show general edit controls if needed (though specific ones per page might be better) } export function disableEditMode() { if (!isEditing) return; isEditing = false; console.log("Edit Mode Disabled"); document.querySelectorAll('.editable').forEach(el => { el.classList.remove('editable'); el.removeEventListener('mousedown', handleMouseDown); // Remove absolute positioning if it wasn't there originally? Tricky. // Best to rely on saving/canceling to manage positions. }); hideEditControls(); // Clear dragging state just in case if (draggedElement) { draggedElement.classList.remove('dragging'); draggedElement = null; } document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); originalPositions = {}; // Clear temp original positions } export function makePageEditable(pageElement) { if (!isEditing) return; console.log(`Making page editable: ${pageElement.id}`); originalPositions = {}; // Reset original positions for the new page // Select elements that should be draggable (e.g., buttons, specific divs, headers) // Be careful not to make the entire page or essential layout containers draggable. const elementsToMakeEditable = pageElement.querySelectorAll('button, h2, p, .form-group, .app-header h2'); // Example selector elementsToMakeEditable.forEach(el => { // Avoid making controls inside other editable elements individually editable again if (el.closest('.editable') && el.closest('.editable') !== el) { return; } // Avoid making edit controls themselves editable if (el.closest('.edit-controls')) { return; } el.classList.add('editable'); el.style.position = 'relative'; // Ensure positioning context // Store original position *relative to its offsetParent* // Using computed style might be more reliable but complex. Start simple. originalPositions[el.dataset.editId || generateEditId(el)] = { top: el.style.top || '0px', left: el.style.left || '0px' }; el.addEventListener('mousedown', handleMouseDown); }); showEditControls(pageElement); // Show controls specific to this page } function generateEditId(element) { // Simple ID generator based on tag name and index within its parent const parent = element.parentElement; const siblings = parent ? Array.from(parent.children).filter(ch => ch.tagName === element.tagName) : []; const index = siblings.indexOf(element); const id = `${element.tagName.toLowerCase()}_${index}`; element.dataset.editId = id; // Store it for reuse return id; } function handleMouseDown(event) { if (!isEditing || event.button !== 0) return; // Only left click draggedElement = event.currentTarget; // Prevent dragging text selection event.preventDefault(); // Calculate offset from the element's top-left corner to the mouse pointer const rect = draggedElement.getBoundingClientRect(); offsetX = event.clientX - rect.left; offsetY = event.clientY - rect.top; draggedElement.classList.add('dragging'); draggedElement.style.zIndex = 1000; // Bring to front // Ensure the element has an ID for saving positions if (!draggedElement.dataset.editId) { generateEditId(draggedElement); } // Store original position if not already stored for this drag session const editId = draggedElement.dataset.editId; if (!originalPositions[editId]) { originalPositions[editId] = { top: draggedElement.style.top || '0px', left: draggedElement.style.left || '0px' }; } document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); } function handleMouseMove(event) { if (!draggedElement) return; // Calculate new position based on mouse movement and initial offset // We need the position relative to the PARENT container (#app-container or the .page) const container = draggedElement.offsetParent || document.body; // Usually the positioned ancestor const containerRect = container.getBoundingClientRect(); let newX = event.clientX - containerRect.left - offsetX; let newY = event.clientY - containerRect.top - offsetY; // Optional: Constrain movement within the parent bounds const elemRect = draggedElement.getBoundingClientRect(); const parentWidth = container.clientWidth; const parentHeight = container.clientHeight; newX = Math.max(0, Math.min(newX, parentWidth - elemRect.width)); newY = Math.max(0, Math.min(newY, parentHeight - elemRect.height)); // Apply the new position using style.left and style.top // Assumes the element's position is 'relative' or 'absolute' draggedElement.style.left = `${newX}px`; draggedElement.style.top = `${newY}px`; } function handleMouseUp() { if (!draggedElement) return; draggedElement.classList.remove('dragging'); draggedElement.style.zIndex = ''; // Reset z-index document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); draggedElement = null; } function showEditControls(pageElement) { // Find controls specific to the page or use generic ones const controls = pageElement.querySelector('.edit-controls'); if (controls) { const saveBtn = controls.querySelector('button[id^="save-edits"]'); const cancelBtn = controls.querySelector('button[id^="cancel-edits"]'); if (saveBtn && cancelBtn) { saveBtn.style.display = 'inline-flex'; cancelBtn.style.display = 'inline-flex'; // Remove previous listeners before adding new ones saveBtn.replaceWith(saveBtn.cloneNode(true)); // Clone to remove listeners cancelBtn.replaceWith(cancelBtn.cloneNode(true)); // Add new listeners to the cloned buttons pageElement.querySelector(`button[id="${saveBtn.id}"]`) .addEventListener('click', () => savePositions(pageElement)); pageElement.querySelector(`button[id="${cancelBtn.id}"]`) .addEventListener('click', () => cancelEdits(pageElement)); } } } function hideEditControls() { document.querySelectorAll('.edit-controls button').forEach(btn => { btn.style.display = 'none'; // No need to remove listeners explicitly if we hide the controls // and re-add them when enabling edit mode again. }); } function savePositions(pageElement) { console.log(`Saving positions for page: ${pageElement.id}`); const positions = loadAllPositions(); // Load existing positions for all pages if (!positions[pageElement.id]) { positions[pageElement.id] = {}; } pageElement.querySelectorAll('.editable').forEach(el => { const editId = el.dataset.editId; if (editId) { positions[pageElement.id][editId] = { top: el.style.top || '0px', left: el.style.left || '0px' }; } }); localStorage.setItem(POSITION_STORAGE_KEY, JSON.stringify(positions)); UI.showNotification("Posições salvas!", "success"); disableEditMode(); // Exit edit mode after saving // Optionally navigate back to mode selection? Or stay on the page? Stay for now. // UI.showPage('mode-selection-screen'); } function cancelEdits(pageElement) { console.log(`Canceling edits for page: ${pageElement.id}`); // Revert positions to the state when edit mode was enabled for this page pageElement.querySelectorAll('.editable').forEach(el => { const editId = el.dataset.editId; if (editId && originalPositions[editId]) { el.style.top = originalPositions[editId].top; el.style.left = originalPositions[editId].left; } else { // If no original position was stored (e.g., element added dynamically?), // reset to default or handle differently. Resetting might be okay. el.style.top = '0px'; el.style.left = '0px'; } }); UI.showNotification("Alterações canceladas.", "success"); disableEditMode(); // Exit edit mode // Optionally navigate back to mode selection? // UI.showPage('mode-selection-screen'); } export function loadElementPositions() { const positions = loadAllPositions(); const currentPageId = UI.getCurrentPageId(); // Need a way to know the current page if (currentPageId && positions[currentPageId]) { console.log(`Loading positions for page: ${currentPageId}`); const pageElement = document.getElementById(currentPageId); if (!pageElement) return; Object.keys(positions[currentPageId]).forEach(editId => { // Find element by data-edit-id. This requires IDs to be stable. const element = pageElement.querySelector(`[data-edit-id="${editId}"]`); if (element) { element.style.position = 'relative'; // Ensure it can be positioned element.style.top = positions[currentPageId][editId].top; element.style.left = positions[currentPageId][editId].left; } else { console.warn(`Element with editId "${editId}" not found on page ${currentPageId}.`); } }); } else if (currentPageId) { console.log(`No saved positions found for page: ${currentPageId}`); } } function loadAllPositions() { const storedPositions = localStorage.getItem(POSITION_STORAGE_KEY); try { return storedPositions ? JSON.parse(storedPositions) : {}; } catch (e) { console.error("Failed to parse stored positions:", e); return {}; } } // Ensure elements have IDs when the page loads if needed for initial loading // This might be better done server-side or during build if IDs aren't dynamic // document.addEventListener('DOMContentLoaded', () => { // document.querySelectorAll('.page').forEach(page => { // page.querySelectorAll('button, h2, p, .form-group').forEach(el => { // if (!el.dataset.editId && !el.closest('.edit-controls')) { // generateEditId(el); // } // }); // }); // }); // Currently empty, can be used for: // - API endpoints (if any were real) // - Translation strings // - Configuration constants export const translations = { en: { welcomeMessage: "Welcome", // ... other strings }, pt: { welcomeMessage: "Bem-vindo", // ... other strings }, es: { welcomeMessage: "Bienvenido", // ... other strings } }; // Add more config as needed

Select Mode

Converter Minecraft Pirata para Original (Simulação)

Detalhes da Conversão

Alterar Perfil

Configurações