|
|
|
|
@@ -1,9 +1,9 @@
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="pt-BR">
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<title>Teste de Dispositivos Pro</title>
|
|
|
|
|
<title>Device Tester</title>
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
|
@@ -45,10 +45,65 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 15px;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Shared styles for header buttons */
|
|
|
|
|
.theme-toggle,
|
|
|
|
|
.icon-btn {
|
|
|
|
|
background: none;
|
|
|
|
|
border: 2px solid var(--border-color);
|
|
|
|
|
color: var(--text-color);
|
|
|
|
|
padding: 0 12px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-size: 1.2rem;
|
|
|
|
|
/* Larger emoji */
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
height: 40px;
|
|
|
|
|
/* Enforce consistent height */
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
min-width: 44px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.theme-toggle {
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
/* Restore font size for theme text */
|
|
|
|
|
gap: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.theme-toggle:hover,
|
|
|
|
|
.icon-btn:hover {
|
|
|
|
|
background-color: var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-btn.active {
|
|
|
|
|
background-color: var(--primary);
|
|
|
|
|
color: white;
|
|
|
|
|
border-color: var(--primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header-top {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header-controls {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
|
@@ -60,20 +115,7 @@
|
|
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.theme-toggle {
|
|
|
|
|
background: none;
|
|
|
|
|
border: 2px solid var(--border-color);
|
|
|
|
|
color: var(--text-color);
|
|
|
|
|
padding: 8px 12px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.theme-toggle:hover {
|
|
|
|
|
background-color: var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.test-card {
|
|
|
|
|
background-color: var(--card-bg);
|
|
|
|
|
@@ -82,11 +124,6 @@
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
|
|
|
border: 1px solid var(--border-color);
|
|
|
|
|
transition: transform 0.2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.test-card:hover {
|
|
|
|
|
transform: translateY(-2px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
@@ -104,7 +141,7 @@
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
select,
|
|
|
|
|
select.device-select,
|
|
|
|
|
textarea {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
@@ -202,6 +239,27 @@
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer {
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
border-top: 1px solid var(--border-color);
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
color: var(--text-color);
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer a {
|
|
|
|
|
color: var(--text-color);
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
transition: color 0.2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer a:hover {
|
|
|
|
|
color: var(--primary);
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
@@ -209,94 +267,277 @@
|
|
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
<header>
|
|
|
|
|
<h1>Teste de Dispositivos</h1>
|
|
|
|
|
<button class="theme-toggle" onclick="toggleTheme()">🌓 Tema</button>
|
|
|
|
|
<div class="header-top">
|
|
|
|
|
<h1 data-i18n="app_title">Device Tester</h1>
|
|
|
|
|
<div class="header-controls">
|
|
|
|
|
<button class="icon-btn" onclick="changeLanguage('en')" id="btn-en" aria-label="English"><img
|
|
|
|
|
src="https://flagcdn.com/24x18/us.png" alt="US" width="24" height="18"></button>
|
|
|
|
|
<button class="icon-btn" onclick="changeLanguage('pt')" id="btn-pt" aria-label="Português"><img
|
|
|
|
|
src="https://flagcdn.com/24x18/br.png" alt="BR" width="24" height="18"></button>
|
|
|
|
|
<button class="icon-btn" onclick="changeLanguage('es')" id="btn-es" aria-label="Español"><img
|
|
|
|
|
src="https://flagcdn.com/24x18/mx.png" alt="MX" width="24" height="18"></button>
|
|
|
|
|
<div style="width: 1px; height: 24px; background: var(--border-color); margin: 0 4px;"></div>
|
|
|
|
|
<button class="theme-toggle" onclick="toggleTheme()" data-i18n="theme_toggle">🌓 Theme</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<!-- Rede -->
|
|
|
|
|
<!-- Network -->
|
|
|
|
|
<div class="test-card">
|
|
|
|
|
<h2>📡 Rede e Navegador</h2>
|
|
|
|
|
<h2 data-i18n="network_title">📡 Network & Browser</h2>
|
|
|
|
|
<p>IPv4: <strong id="ipv4">...</strong> <span class="status-text" id="geo-ipv4"></span></p>
|
|
|
|
|
<p class="status-text" id="isp-label-ipv4"></p>
|
|
|
|
|
<p>IPv6: <strong id="ipv6">...</strong> <span class="status-text" id="geo-ipv6"></span></p>
|
|
|
|
|
<p class="status-text" id="isp-label-ipv6"></p>
|
|
|
|
|
<label>User Agent:</label>
|
|
|
|
|
<label data-i18n="user_agent_label">User Agent:</label>
|
|
|
|
|
<textarea id="user-agent" rows="2" readonly></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Bateria -->
|
|
|
|
|
<!-- Battery -->
|
|
|
|
|
<div class="test-card">
|
|
|
|
|
<h2>🔋 Bateria</h2>
|
|
|
|
|
<p id="battery-status">Detectando...</p>
|
|
|
|
|
<h2 data-i18n="battery_title">🔋 Battery</h2>
|
|
|
|
|
<p id="battery-status">Detecting...</p>
|
|
|
|
|
<div class="bar-container">
|
|
|
|
|
<div id="battery-bar" class="bar-fill" style="background-color: var(--primary);"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Tela -->
|
|
|
|
|
<!-- Screen -->
|
|
|
|
|
<div class="test-card">
|
|
|
|
|
<h2>🖥️ Tela & Dead Pixel</h2>
|
|
|
|
|
<p class="status-text">Cicla entre cores primárias para identificar pixels mortos.</p>
|
|
|
|
|
<button onclick="startScreenTest()">Iniciar Teste de Tela</button>
|
|
|
|
|
<h2 data-i18n="screen_title">🖥️ Screen & Dead Pixel</h2>
|
|
|
|
|
<p class="status-text" data-i18n="screen_desc">Cycles through primary colors to identify dead pixels.</p>
|
|
|
|
|
<button onclick="startScreenTest()" data-i18n="start_screen_test">Start Screen Test</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Vibração -->
|
|
|
|
|
<!-- Vibration -->
|
|
|
|
|
<div class="test-card">
|
|
|
|
|
<h2>📳 Vibração</h2>
|
|
|
|
|
<p class="status-text">Funciona apenas em dispositivos móveis compatíveis.</p>
|
|
|
|
|
<button onclick="testVibration()">Vibrar Dispositivo</button>
|
|
|
|
|
<h2 data-i18n="vibration_title">📳 Vibration</h2>
|
|
|
|
|
<p class="status-text" data-i18n="vibration_desc">Works only on compatible mobile devices.</p>
|
|
|
|
|
<button onclick="testVibration()" data-i18n="vibrate_device">Vibrate Device</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Webcam -->
|
|
|
|
|
<div class="test-card">
|
|
|
|
|
<h2>📷 Webcam</h2>
|
|
|
|
|
<select id="webcam-select"></select>
|
|
|
|
|
<h2 data-i18n="webcam_title">📷 Webcam</h2>
|
|
|
|
|
<select id="webcam-select" class="device-select"></select>
|
|
|
|
|
<div>
|
|
|
|
|
<button onclick="startWebcam()">Ligar</button>
|
|
|
|
|
<button onclick="stopWebcam()" class="stop">Desligar</button>
|
|
|
|
|
<button onclick="startWebcam()" data-i18n="turn_on">Turn On</button>
|
|
|
|
|
<button onclick="stopWebcam()" class="stop" data-i18n="turn_off">Turn Off</button>
|
|
|
|
|
</div>
|
|
|
|
|
<video id="webcam" autoplay playsinline></video>
|
|
|
|
|
<p id="webcam-status" class="status-text">Status: Aguardando...</p>
|
|
|
|
|
<p id="webcam-status" class="status-text" data-i18n="status_waiting">Status: Waiting...</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Microfone -->
|
|
|
|
|
<!-- Microphone -->
|
|
|
|
|
<div class="test-card">
|
|
|
|
|
<h2>🎤 Microfone</h2>
|
|
|
|
|
<select id="mic-select"></select>
|
|
|
|
|
<h2 data-i18n="mic_title">🎤 Microphone</h2>
|
|
|
|
|
<select id="mic-select" class="device-select"></select>
|
|
|
|
|
<div>
|
|
|
|
|
<button onclick="startMic()">Monitorar Ao Vivo</button>
|
|
|
|
|
<button onclick="stopMic()" class="stop">Parar</button>
|
|
|
|
|
<button onclick="recordMicFor10s()">Gravar 10s</button>
|
|
|
|
|
<button onclick="startMic()" data-i18n="monitor_live">Monitor Live</button>
|
|
|
|
|
<button onclick="stopMic()" class="stop" data-i18n="stop">Stop</button>
|
|
|
|
|
<button onclick="recordMicFor10s()" data-i18n="record_10s">Record 10s</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bar-container">
|
|
|
|
|
<div id="mic-bar" class="bar-fill"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<p id="mic-status" class="status-text">Status: Aguardando...</p>
|
|
|
|
|
<p id="mic-status" class="status-text" data-i18n="status_waiting">Status: Waiting...</p>
|
|
|
|
|
<audio id="mic-playback" controls style="width: 100%; margin-top: 10px; display: none;"></audio>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Som -->
|
|
|
|
|
<!-- Sound -->
|
|
|
|
|
<div class="test-card">
|
|
|
|
|
<h2>🔊 Saída de Som</h2>
|
|
|
|
|
<select id="spk-select"></select>
|
|
|
|
|
<h2 data-i18n="sound_title">🔊 Sound Output</h2>
|
|
|
|
|
<select id="spk-select" class="device-select"></select>
|
|
|
|
|
<audio id="audio-test" src="test-sound.mp3" preload="auto"></audio>
|
|
|
|
|
<div>
|
|
|
|
|
<button id="playBtn" onclick="playSound()">Tocar Música</button>
|
|
|
|
|
<button onclick="stopSound()" class="stop">Parar</button>
|
|
|
|
|
<button id="playBtn" onclick="playSound()" data-i18n="play_music">Play Music</button>
|
|
|
|
|
<button onclick="stopSound()" class="stop" data-i18n="stop">Stop</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bar-container">
|
|
|
|
|
<div id="speaker-bar" class="bar-fill" style="background-color: #f59e0b;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<footer>
|
|
|
|
|
<p>
|
|
|
|
|
<a href="https://icc.gg/privacidade" target="_blank" data-i18n="privacy_policy">Privacy Policy</a> •
|
|
|
|
|
<a href="https://icc.gg/termos" target="_blank" data-i18n="terms_conditions">Terms and Conditions</a>
|
|
|
|
|
</p>
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Overlay para teste de tela -->
|
|
|
|
|
<div id="screen-overlay" onclick="nextScreenColor()">
|
|
|
|
|
<div id="screen-instruction">Clique para trocar a cor. Escura para sair.</div>
|
|
|
|
|
<div id="screen-instruction" data-i18n="screen_instruction">Click to change color. Esc to exit.</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// i18n Dictionary
|
|
|
|
|
const dictionary = {
|
|
|
|
|
en: {
|
|
|
|
|
app_title: "Device Tester",
|
|
|
|
|
theme_toggle: "🌓 Theme",
|
|
|
|
|
network_title: "📡 Network & Browser",
|
|
|
|
|
user_agent_label: "User Agent:",
|
|
|
|
|
battery_title: "🔋 Battery",
|
|
|
|
|
detecting: "Detecting...",
|
|
|
|
|
charging: "⚡ Charging",
|
|
|
|
|
disconnected: "Disconnected",
|
|
|
|
|
battery_unsupported: "Battery API not supported in this browser.",
|
|
|
|
|
screen_title: "🖥️ Screen & Dead Pixel",
|
|
|
|
|
screen_desc: "Cycles through primary colors to identify dead pixels.",
|
|
|
|
|
start_screen_test: "Start Screen Test",
|
|
|
|
|
screen_instruction: "Click to change color. Dark to exit.",
|
|
|
|
|
vibration_title: "📳 Vibration",
|
|
|
|
|
vibration_desc: "Works only on compatible mobile devices.",
|
|
|
|
|
vibrate_device: "Vibrate Device",
|
|
|
|
|
vibration_unsupported: "Your device does not support vibration via web API.",
|
|
|
|
|
webcam_title: "📷 Webcam",
|
|
|
|
|
turn_on: "Turn On",
|
|
|
|
|
turn_off: "Turn Off",
|
|
|
|
|
status_waiting: "Status: Waiting...",
|
|
|
|
|
webcam_ok: "Webcam: Working (OK)",
|
|
|
|
|
status_stopped: "Status: Stopped",
|
|
|
|
|
mic_title: "🎤 Microphone",
|
|
|
|
|
monitor_live: "Monitor Live",
|
|
|
|
|
stop: "Stop",
|
|
|
|
|
record_10s: "Record 10s",
|
|
|
|
|
capturing_audio: "Capturing audio...",
|
|
|
|
|
starting_capture: "Starting capture...",
|
|
|
|
|
recording: "Recording...",
|
|
|
|
|
playing_recording: "Playing recording...",
|
|
|
|
|
sound_title: "🔊 Sound Output",
|
|
|
|
|
play_music: "Play Music",
|
|
|
|
|
device_unknown: "Unknown Device",
|
|
|
|
|
default_output: "Default Output",
|
|
|
|
|
ipv4_unavailable: "Unavailable",
|
|
|
|
|
ipv6_not_detected: "Not detected",
|
|
|
|
|
privacy_policy: "Privacy Policy",
|
|
|
|
|
terms_conditions: "Terms and Conditions"
|
|
|
|
|
},
|
|
|
|
|
pt: {
|
|
|
|
|
app_title: "Teste de Dispositivos",
|
|
|
|
|
theme_toggle: "🌓 Tema",
|
|
|
|
|
network_title: "📡 Rede e Navegador",
|
|
|
|
|
user_agent_label: "Agente de Usuário:",
|
|
|
|
|
battery_title: "🔋 Bateria",
|
|
|
|
|
detecting: "Detectando...",
|
|
|
|
|
charging: "⚡ Carregando",
|
|
|
|
|
disconnected: "Desconectado",
|
|
|
|
|
battery_unsupported: "API de Bateria não suportada neste navegador.",
|
|
|
|
|
screen_title: "🖥️ Tela & Dead Pixel",
|
|
|
|
|
screen_desc: "Cicla entre cores primárias para identificar pixels mortos.",
|
|
|
|
|
start_screen_test: "Iniciar Teste de Tela",
|
|
|
|
|
screen_instruction: "Clique para trocar a cor. Escura para sair.",
|
|
|
|
|
vibration_title: "📳 Vibração",
|
|
|
|
|
vibration_desc: "Funciona apenas em dispositivos móveis compatíveis.",
|
|
|
|
|
vibrate_device: "Vibrar Dispositivo",
|
|
|
|
|
vibration_unsupported: "Seu dispositivo não suporta vibração via API web.",
|
|
|
|
|
webcam_title: "📷 Webcam",
|
|
|
|
|
turn_on: "Ligar",
|
|
|
|
|
turn_off: "Desligar",
|
|
|
|
|
status_waiting: "Status: Aguardando...",
|
|
|
|
|
webcam_ok: "Webcam: Funcionando (OK)",
|
|
|
|
|
status_stopped: "Status: Parado",
|
|
|
|
|
mic_title: "🎤 Microfone",
|
|
|
|
|
monitor_live: "Monitorar Ao Vivo",
|
|
|
|
|
stop: "Parar",
|
|
|
|
|
record_10s: "Gravar 10s",
|
|
|
|
|
capturing_audio: "Capturando áudio...",
|
|
|
|
|
starting_capture: "Iniciando captura...",
|
|
|
|
|
recording: "Gravando...",
|
|
|
|
|
playing_recording: "Reproduzindo gravação...",
|
|
|
|
|
sound_title: "🔊 Saída de Som",
|
|
|
|
|
play_music: "Tocar Música",
|
|
|
|
|
device_unknown: "Dispositivo não identificado",
|
|
|
|
|
default_output: "Saída Padrão",
|
|
|
|
|
ipv4_unavailable: "Indisponível",
|
|
|
|
|
ipv6_not_detected: "Não detectado",
|
|
|
|
|
privacy_policy: "Política de Privacidade",
|
|
|
|
|
terms_conditions: "Termos e Condições"
|
|
|
|
|
},
|
|
|
|
|
es: {
|
|
|
|
|
app_title: "Prueba de Dispositivos",
|
|
|
|
|
theme_toggle: "🌓 Tema",
|
|
|
|
|
network_title: "📡 Red y Navegador",
|
|
|
|
|
user_agent_label: "Agente de Usuario:",
|
|
|
|
|
battery_title: "🔋 Batería",
|
|
|
|
|
detecting: "Detectando...",
|
|
|
|
|
charging: "⚡ Cargando",
|
|
|
|
|
disconnected: "Desconectado",
|
|
|
|
|
battery_unsupported: "API de batería no soportada en este navegador.",
|
|
|
|
|
screen_title: "🖥️ Pantalla y Píxeles Muertos",
|
|
|
|
|
screen_desc: "Alterna entre colores primarios para identificar píxeles muertos.",
|
|
|
|
|
start_screen_test: "Iniciar Prueba de Pantalla",
|
|
|
|
|
screen_instruction: "Haga clic para cambiar de color. Oscuro para salir.",
|
|
|
|
|
vibration_title: "📳 Vibración",
|
|
|
|
|
vibration_desc: "Funciona solo en dispositivos móviles compatibles.",
|
|
|
|
|
vibrate_device: "Vibrar Dispositivo",
|
|
|
|
|
vibration_unsupported: "Su dispositivo no admite vibración a través de la API web.",
|
|
|
|
|
webcam_title: "📷 Cámara Web",
|
|
|
|
|
turn_on: "Encender",
|
|
|
|
|
turn_off: "Apagar",
|
|
|
|
|
status_waiting: "Estado: Esperando...",
|
|
|
|
|
webcam_ok: "Cámara: Funcionando (OK)",
|
|
|
|
|
status_stopped: "Estado: Detenido",
|
|
|
|
|
mic_title: "🎤 Micrófono",
|
|
|
|
|
monitor_live: "Monitorear en Vivo",
|
|
|
|
|
stop: "Parar",
|
|
|
|
|
record_10s: "Grabar 10s",
|
|
|
|
|
capturing_audio: "Capturando audio...",
|
|
|
|
|
starting_capture: "Iniciando captura...",
|
|
|
|
|
recording: "Grabando...",
|
|
|
|
|
playing_recording: "Reproduciendo grabación...",
|
|
|
|
|
sound_title: "🔊 Salida de Sonido",
|
|
|
|
|
play_music: "Reproducir Música",
|
|
|
|
|
device_unknown: "Dispositivo desconocido",
|
|
|
|
|
default_output: "Salida Predeterminada",
|
|
|
|
|
ipv4_unavailable: "No disponible",
|
|
|
|
|
ipv6_not_detected: "No detectado",
|
|
|
|
|
privacy_policy: "Política de Privacidad",
|
|
|
|
|
terms_conditions: "Términos y Condiciones"
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
let currentLang = localStorage.getItem('deviceTesterLang') || 'en';
|
|
|
|
|
|
|
|
|
|
function changeLanguage(lang) {
|
|
|
|
|
currentLang = lang;
|
|
|
|
|
localStorage.setItem('deviceTesterLang', lang);
|
|
|
|
|
|
|
|
|
|
// Update active button state
|
|
|
|
|
document.querySelectorAll('.icon-btn').forEach(btn => btn.classList.remove('active'));
|
|
|
|
|
const activeBtn = document.getElementById(`btn-${lang}`);
|
|
|
|
|
if (activeBtn) activeBtn.classList.add('active');
|
|
|
|
|
|
|
|
|
|
document.documentElement.lang = lang === 'pt' ? 'pt-BR' : (lang === 'es' ? 'es-MX' : 'en-US'); // Set html tag lang
|
|
|
|
|
applyTranslations();
|
|
|
|
|
// Refresh dynamic content that depends on language (like IP detection messages if needed, though they are mostly dynamic data)
|
|
|
|
|
// Re-listing devices to update "Unknown Device" text
|
|
|
|
|
listDevices();
|
|
|
|
|
// Trigger battery update to refresh text
|
|
|
|
|
if (navigator.getBattery) {
|
|
|
|
|
navigator.getBattery().then(b => b.dispatchEvent(new Event('levelchange')));
|
|
|
|
|
} else {
|
|
|
|
|
document.getElementById("battery-status").textContent = dictionary[currentLang].battery_unsupported;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function applyTranslations() {
|
|
|
|
|
const elements = document.querySelectorAll('[data-i18n]');
|
|
|
|
|
elements.forEach(el => {
|
|
|
|
|
const key = el.getAttribute('data-i18n');
|
|
|
|
|
if (dictionary[currentLang] && dictionary[currentLang][key]) {
|
|
|
|
|
el.textContent = dictionary[currentLang][key];
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Initialize Language
|
|
|
|
|
changeLanguage(currentLang);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Theme
|
|
|
|
|
function toggleTheme() {
|
|
|
|
|
document.body.classList.toggle('dark-mode');
|
|
|
|
|
@@ -365,6 +606,10 @@
|
|
|
|
|
function listDevices() {
|
|
|
|
|
navigator.mediaDevices.enumerateDevices().then(devices => {
|
|
|
|
|
// Preserve selection if possible? For now simple rebuild
|
|
|
|
|
const oldWebcam = webcamSelect.value;
|
|
|
|
|
const oldMic = micSelect.value;
|
|
|
|
|
const oldSpk = spkSelect.value;
|
|
|
|
|
|
|
|
|
|
webcamSelect.innerHTML = "";
|
|
|
|
|
micSelect.innerHTML = "";
|
|
|
|
|
spkSelect.innerHTML = "";
|
|
|
|
|
@@ -372,7 +617,7 @@
|
|
|
|
|
devices.forEach(device => {
|
|
|
|
|
const option = document.createElement("option");
|
|
|
|
|
option.value = device.deviceId;
|
|
|
|
|
option.text = device.label || "Dispositivo não identificado";
|
|
|
|
|
option.text = device.label || dictionary[currentLang].device_unknown;
|
|
|
|
|
if (device.kind === "videoinput") webcamSelect.appendChild(option.cloneNode(true));
|
|
|
|
|
if (device.kind === "audioinput") micSelect.appendChild(option.cloneNode(true));
|
|
|
|
|
if (device.kind === "audiooutput" && typeof spkSelect.setSinkId === "function")
|
|
|
|
|
@@ -382,9 +627,14 @@
|
|
|
|
|
if (spkSelect.options.length === 0) {
|
|
|
|
|
const option = document.createElement("option");
|
|
|
|
|
option.value = "";
|
|
|
|
|
option.text = "Saída Padrão";
|
|
|
|
|
option.text = dictionary[currentLang].default_output;
|
|
|
|
|
spkSelect.appendChild(option);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Try to restore selection
|
|
|
|
|
if (oldWebcam) webcamSelect.value = oldWebcam;
|
|
|
|
|
if (oldMic) micSelect.value = oldMic;
|
|
|
|
|
if (oldSpk) spkSelect.value = oldSpk;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@@ -397,7 +647,7 @@
|
|
|
|
|
.then(stream => {
|
|
|
|
|
webcamStream = stream;
|
|
|
|
|
video.srcObject = stream;
|
|
|
|
|
document.getElementById("webcam-status").textContent = "Webcam: Funcionando (OK)";
|
|
|
|
|
document.getElementById("webcam-status").textContent = dictionary[currentLang].webcam_ok;
|
|
|
|
|
document.getElementById("webcam-status").style.color = "var(--success)";
|
|
|
|
|
})
|
|
|
|
|
.catch((e) => {
|
|
|
|
|
@@ -410,7 +660,7 @@
|
|
|
|
|
webcamStream.getTracks().forEach(t => t.stop());
|
|
|
|
|
video.srcObject = null;
|
|
|
|
|
webcamStream = null;
|
|
|
|
|
document.getElementById("webcam-status").textContent = "Status: Parado";
|
|
|
|
|
document.getElementById("webcam-status").textContent = dictionary[currentLang].status_stopped;
|
|
|
|
|
document.getElementById("webcam-status").style.color = "var(--text-color)";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@@ -432,14 +682,14 @@
|
|
|
|
|
micBar.style.width = pct + "%";
|
|
|
|
|
if (pct > 5) {
|
|
|
|
|
const st = document.getElementById("mic-status");
|
|
|
|
|
if (st.textContent !== "Capturando áudio...") {
|
|
|
|
|
st.textContent = "Capturando áudio...";
|
|
|
|
|
if (st.textContent !== dictionary[currentLang].capturing_audio) {
|
|
|
|
|
st.textContent = dictionary[currentLang].capturing_audio;
|
|
|
|
|
st.style.color = "var(--success)";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
source.connect(micWorkletNode);
|
|
|
|
|
document.getElementById("mic-status").textContent = "Iniciando captura...";
|
|
|
|
|
document.getElementById("mic-status").textContent = dictionary[currentLang].starting_capture;
|
|
|
|
|
} catch (e) {
|
|
|
|
|
document.getElementById("mic-status").textContent = "Erro: " + e.message;
|
|
|
|
|
document.getElementById("mic-status").style.color = "var(--danger)";
|
|
|
|
|
@@ -455,7 +705,7 @@
|
|
|
|
|
micStream = null;
|
|
|
|
|
micBar.style.width = "0%";
|
|
|
|
|
const st = document.getElementById("mic-status");
|
|
|
|
|
st.textContent = "Status: Parado";
|
|
|
|
|
st.textContent = dictionary[currentLang].status_stopped;
|
|
|
|
|
st.style.color = "var(--text-color)";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@@ -493,18 +743,18 @@
|
|
|
|
|
let remaining = 10;
|
|
|
|
|
const status = document.getElementById("mic-status");
|
|
|
|
|
status.style.color = "var(--primary)";
|
|
|
|
|
status.textContent = `Gravando... ${remaining}s`;
|
|
|
|
|
status.textContent = `${dictionary[currentLang].recording} ${remaining}s`;
|
|
|
|
|
|
|
|
|
|
const countdown = setInterval(() => {
|
|
|
|
|
remaining--;
|
|
|
|
|
if (remaining > 0) status.textContent = `Gravando... ${remaining}s`;
|
|
|
|
|
if (remaining > 0) status.textContent = `${dictionary[currentLang].recording} ${remaining}s`;
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
clearInterval(countdown);
|
|
|
|
|
micRecorder.stop();
|
|
|
|
|
stream.getTracks().forEach(t => t.stop());
|
|
|
|
|
status.textContent = "Reproduzindo gravação...";
|
|
|
|
|
status.textContent = dictionary[currentLang].playing_recording;
|
|
|
|
|
status.style.color = "var(--text-color)";
|
|
|
|
|
}, 10000);
|
|
|
|
|
} catch (err) {
|
|
|
|
|
@@ -559,25 +809,31 @@
|
|
|
|
|
|
|
|
|
|
// IPs
|
|
|
|
|
function getIPv4AndISP() {
|
|
|
|
|
fetch("https://ipwhois.app/json/?lang=pt")
|
|
|
|
|
fetch("https://ipwhois.app/json/?lang=en") // Using 'en' for consistency, can be improved to use currentLang but ISP data might be mix
|
|
|
|
|
.then(res => res.json())
|
|
|
|
|
.then(data => {
|
|
|
|
|
document.getElementById("ipv4").textContent = data.ip || "Indisponível";
|
|
|
|
|
document.getElementById("ipv4").textContent = data.ip || dictionary[currentLang].ipv4_unavailable;
|
|
|
|
|
const geo = [data.city, data.region, data.country].filter(Boolean);
|
|
|
|
|
document.getElementById("geo-ipv4").textContent = geo.length ? "(" + geo.join(", ") + ")" : "";
|
|
|
|
|
document.getElementById("isp-label-ipv4").textContent = data.isp ? "ISP: " + decodeURIComponent(escape(data.isp)) : "";
|
|
|
|
|
})
|
|
|
|
|
.catch(() => { });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getIPv6AndISP() {
|
|
|
|
|
fetch("https://api64.ipify.org?format=json")
|
|
|
|
|
.then(res => res.json())
|
|
|
|
|
// Use IPv6 specific endpoint to force IPv6 usage
|
|
|
|
|
fetch("https://api6.ipify.org?format=json")
|
|
|
|
|
.then(res => {
|
|
|
|
|
if (!res.ok) throw new Error("IPv6 Fetch Failed");
|
|
|
|
|
return res.json();
|
|
|
|
|
})
|
|
|
|
|
.then(ip => {
|
|
|
|
|
if (ip.ip && ip.ip.includes(":")) {
|
|
|
|
|
document.getElementById("ipv6").textContent = ip.ip;
|
|
|
|
|
return fetch(`https://ipwhois.app/json/${ip.ip}?lang=pt`);
|
|
|
|
|
// Fetch validation/Geo for IPv6
|
|
|
|
|
return fetch(`https://ipwhois.app/json/${ip.ip}?lang=en`);
|
|
|
|
|
} else {
|
|
|
|
|
document.getElementById("ipv6").textContent = "Não detectado";
|
|
|
|
|
throw new Error("No IPv6 detected");
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then(res => res.json())
|
|
|
|
|
@@ -587,7 +843,10 @@
|
|
|
|
|
document.getElementById("geo-ipv6").textContent = geo.length ? "(" + geo.join(", ") + ")" : "";
|
|
|
|
|
document.getElementById("isp-label-ipv6").textContent = data.isp ? "ISP: " + decodeURIComponent(escape(data.isp)) : "";
|
|
|
|
|
})
|
|
|
|
|
.catch(() => { });
|
|
|
|
|
.catch((e) => {
|
|
|
|
|
console.log("IPv6 Check Failed:", e);
|
|
|
|
|
document.getElementById("ipv6").textContent = dictionary[currentLang].ipv6_not_detected;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// NEW FEATURES
|
|
|
|
|
@@ -597,7 +856,7 @@
|
|
|
|
|
navigator.getBattery().then(battery => {
|
|
|
|
|
function updateBattery() {
|
|
|
|
|
const level = Math.round(battery.level * 100);
|
|
|
|
|
const charging = battery.charging ? "⚡ Carregando" : "Desconectado";
|
|
|
|
|
const charging = battery.charging ? dictionary[currentLang].charging : dictionary[currentLang].disconnected;
|
|
|
|
|
document.getElementById("battery-status").textContent = `${level}% - ${charging}`;
|
|
|
|
|
document.getElementById("battery-bar").style.width = level + "%";
|
|
|
|
|
|
|
|
|
|
@@ -610,8 +869,11 @@
|
|
|
|
|
updateBattery();
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
document.getElementById("battery-status").textContent = "API de Bateria não suportada neste navegador.";
|
|
|
|
|
document.getElementById("battery-bar").style.width = "0%";
|
|
|
|
|
// Wait for dictionary to be ready or just set it
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
document.getElementById("battery-status").textContent = dictionary[currentLang].battery_unsupported;
|
|
|
|
|
document.getElementById("battery-bar").style.width = "0%";
|
|
|
|
|
}, 100);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Vibration
|
|
|
|
|
@@ -619,7 +881,7 @@
|
|
|
|
|
if (navigator.vibrate) {
|
|
|
|
|
navigator.vibrate([200, 100, 200]); // Vibrate twice
|
|
|
|
|
} else {
|
|
|
|
|
alert("Seu dispositivo não suporta vibração via API web.");
|
|
|
|
|
alert(dictionary[currentLang].vibration_unsupported);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@@ -656,6 +918,9 @@
|
|
|
|
|
}).catch(() => listDevices());
|
|
|
|
|
getIPv4AndISP();
|
|
|
|
|
getIPv6AndISP();
|
|
|
|
|
|
|
|
|
|
// Ensure initial text is correct
|
|
|
|
|
applyTranslations();
|
|
|
|
|
};
|
|
|
|
|
navigator.mediaDevices.addEventListener("devicechange", listDevices);
|
|
|
|
|
audio.addEventListener("ended", () => {
|
|
|
|
|
|
