Scribd
Upload
5 views

Convers Or

The document is an HTML template for a Minecraft Account Converter application, featuring navigation buttons for home, settings, and user menu. It includes sections for loading screens, login/register forms, user profile, and settings, along with associated JavaScript for cursor effects and screen navigation. The design utilizes CSS for styling and includes SVG icons for buttons.

Uploaded by

karlioevanio666
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

Convers Or

The document is an HTML template for a Minecraft Account Converter application, featuring navigation buttons for home, settings, and user menu. It includes sections for loading screens, login/register forms, user profile, and settings, along with associated JavaScript for cursor effects and screen navigation. The design utilizes CSS for styling and includes SVG icons for buttons.

Uploaded by

karlioevanio666
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Minecraft Account Converter</title>
<style>
/* Seus estilos CSS aqui (mantidos como no código original) */
:root {
--primary: #48cae4;
--primary-dark: #0077b6;
--accent: #00f5d4;
--bg-dark: #0f172a;
--bg-light: #1e293b;
--text: #e0fbfc;
--text-dim: rgba(224, 251, 252, 0.6);
--danger: #ef4444;
--success: #10b981;
--warning: #f59e0b;
}
/* ... outros estilos ... */
</style>
</head>
<body>
<div class="cursor-dot"></div>
<div class="cursor-outline"></div>

<div id="app-container">
<button id="home-button" class="nav-button hidden" aria-label="Página
inicial">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round">
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
</button>

<button id="settings-button" class="nav-button hidden" aria-


label="Configurações">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round">
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2
2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1
1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0
2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0
0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0
2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-
1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2
0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</button>

<button id="user-menu-button" class="nav-button hidden" aria-label="Menu do


usuário">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round">
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</button>

<div id="loading-screen">
<div class="loading-container">
<div id="app-logo">
<div class="cube">
<div class="cube-face face-front"></div>
<div class="cube-face face-back"></div>
<div class="cube-face face-right"></div>
<div class="cube-face face-left"></div>
<div class="cube-face face-top"></div>
<div class="cube-face face-bottom"></div>
</div>
</div>
<h2>Inicializando</h2>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
</div>
</div>

<div id="login-register-screen" class="hidden">


<h2>Minecraft Account Converter</h2>
<div style="display:flex; justify-content:space-between; flex-
wrap:wrap; width:85%; margin:0 auto;">
<div class="btn-container" style="width:48%;">
<button class="btn active pulse" id="login-btn">
<div class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28"
height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-
4"></path>
<polyline points="10 17 15 12 10 7"></polyline>
<line x1="15" y1="12" x2="3" y2="12"></line>
</svg>
</div>
<div class="btn-text">Login</div>
</button>
</div>
<div class="btn-container" style="width:48%;">
<button class="btn active" id="register-btn">
<div class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28"
height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4
4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" y1="8" x2="19" y2="14"></line>
<line x1="22" y1="11" x2="16" y2="11"></line>
</svg>
</div>
<div class="btn-text">Registrar</div>
</button>
</div>
<div class="btn-container" style="width:100%;">
<button class="btn active" id="guest-btn">
<div class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28"
height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-
1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0
0 0 0-7.78z"></path>
</svg>
</div>
<div class="btn-text">Entrar como Convidado</div>
</button>
</div>
</div>
</div>

<div id="register-form" class="hidden">


<h2>Registro</h2>
<label for="username">Nome de Usuário</label>
<input type="text" class="form-input" placeholder="Nome de Usuário"
id="username">
<label for="email">Email</label>
<input type="email" class="form-input" placeholder="E-mail" id="email">
<label for="password">Senha</label>
<input type="password" class="form-input" placeholder="Senha"
id="password">
<label for="confirm-password">Confirmar Senha</label>
<input type="password" class="form-input" placeholder="Confirmar Senha"
id="confirm-password">

<div style="margin: 15px 0; display: flex; align-items: center;


justify-content: center;">
<input type="checkbox" id="captcha-checkbox" style="margin-right:
8px;">
<label for="captcha-checkbox">Confirmar Captcha</label>
</div>

<div class="btn-container">
<button class="btn" id="register-submit">
<div class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4
4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" y1="8" x2="19" y2="14"></line>
<line x1="22" y1="11" x2="16" y2="11"></line>
</svg>
</div>
<div class="btn-text">Registrar</div>
</button>
</div>

<button class="btn btn-sm" id="back-to-start" style="width:auto;


margin-top:10px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round">
<polyline points="11 17 6 12 11 7"></polyline>
<line x1="18" y1="12" x2="6" y2="12"></line>
</svg>
Voltar
</button>
</div>

<div id="user-menu" class="user-menu hidden">


<button class="menu-item" id="view-profile">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round">
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
Perfil
</button>
<div class="divider"></div>
<button class="menu-item" id="logout">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
<polyline points="16 17 21 12 16 7"></polyline>
<line x1="21" y1="12" x2="9" y2="12"></line>
</svg>
Sair
</button>
</div>

<div id="user-profile-screen" class="hidden">


<div class="profile-header">
<div class="profile-avatar">
<img id="profile-picture" src="default-avatar.png" alt="Foto de
perfil">
<input type="file" id="avatar-select" class="avatar-select"
accept="image/*">
<div class="avatar-overlay">Trocar foto</div>
</div>
<div class="profile-name" id="profile-name">Nome de Usuário</div>
<div class="profile-email"
id="profile-email">[email protected]</div>
</div>
</div>

<div id="settings-screen" class="hidden">


<h2>Configurações</h2>
<div class="setting-row">
<div class="setting-label">
<div class="setting-name">Tema Escuro</div>
<div class="setting-description">Ativar/desativar modo
escuro.</div>
</div>
<label class="switch">
<input type="checkbox" id="dark-mode-toggle">
<span class="slider"></span>
</label>
</div>
</div>

<span id="version-tag">v4.00</span>
</div>

<div class="toast-container"></div>

<script>
// Seu JavaScript aqui (adicionado abaixo)
const cursorDot = document.querySelector('.cursor-dot');
const cursorOutline = document.querySelector('.cursor-outline');

window.addEventListener('mousemove', (e) => {


const posX = e.clientX;
const posY = e.clientY;

cursorDot.style.left = `${posX}px`;
cursorDot.style.top = `${posY}px`;

cursorOutline.style.left = `${posX}px`;
cursorOutline.style.top = `${posY}px`;

cursorOutline.style.transform = `translate(-50%, -50%) scale(1.5)`;


});

document.querySelectorAll('a, button').forEach(item => {


item.addEventListener('mouseover', () => {
cursorOutline.classList.add('cursor-hover');
});
item.addEventListener('mouseleave', () => {
cursorOutline.classList.remove('cursor-hover');
});
});

// Lógica de navegação entre telas


const loadingScreen = document.getElementById('loading-screen');
const loginRegisterScreen = document.getElementById('login-register-
screen');
const registerForm = document.getElementById('register-form');
const userMenu = document.getElementById('user-menu');
const userProfileScreen = document.getElementById('user-profile-screen');
const settingsScreen = document.getElementById('settings-screen');

const homeButton = document.getElementById('home-button');


const userMenuButton = document.getElementById('user-menu-button');
const settingsButton = document.getElementById('settings-button');

const loginBtn = document.getElementById('login-btn');


const registerBtn = document.getElementById('register-btn');
const guestBtn = document.getElementById('guest-btn');
const registerSubmit = document.getElementById('register-submit');
const backToStart = document.getElementById('back-to-start');
const viewProfile = document.getElementById('view-profile');
const logout = document.getElementById('logout');

// Simulação de carregamento (remova isso em produção)


setTimeout(() => {
loadingScreen.classList.add('hidden');
loginRegisterScreen.classList.remove('hidden');
homeButton.classList.remove('hidden');
userMenuButton.classList.remove('hidden');
settingsButton.classList.remove('hidden');
}, 3000);

// Funções de navegação
function showScreen(screenId) {
const screens = document.querySelectorAll('#app-container > div');
screens.forEach(screen => screen.classList.add('hidden'));
document.getElementById(screenId).classList.remove('hidden');
}

loginBtn.addEventListener('click', () => {
// Lógica de login aqui
});

registerBtn.addEventListener('click', () => {
showScreen('register-form');
});

guestBtn.addEventListener('click', () => {
// Lógica de entrada como convidado aqui
});

registerSubmit.addEventListener('click', () => {
// Lógica de registro aqui
});

backToStart.addEventListener('click', () => {
showScreen('login-register-screen');
});

userMenuButton.addEventListener('click', () => {
userMenu.classList.toggle('hidden');
});

viewProfile.addEventListener('click', () => {
userMenu.classList.add('hidden');
showScreen('user-profile-screen');
});

logout.addEventListener('click', () => {
// Lógica de logout aqui
showScreen('login-register-screen');
userMenu.classList.add('hidden');
});

settingsButton.addEventListener('click', () => {
showScreen('settings-screen');
});

homeButton.addEventListener('click', () => {
showScreen('login-register-screen');
});

// Lógica do perfil do usuário


const profilePicture = document.getElementById('profile-picture');
const avatarSelect = document.getElementById('avatar-select');
avatarSelect.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
profilePicture.src = e.target.result;
};
reader.readAsDataURL(file);
}
});

// Lógica das configurações


const darkModeToggle = document.getElementById('dark-mode-toggle');

darkModeToggle.addEventListener('change', () => {
document.body.classList.toggle('dark-mode');
});
</script>
</body>
</html>

You might also like