English
Español
:root {
–primary-color: #3498db;
–secondary-color: #2c3e50;
–accent-color: #e74c3c;
–light-color: #ecf0f1;
–dark-color: #2c3e50;
–text-color: #333;
–card-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
–hover-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
–transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
color: var(–text-color);
line-height: 1.6;
overflow-x: hidden;
}
/* Header Styles */
header {
background: linear-gradient(135deg, var(–primary-color), var(–secondary-color));
color: white;
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 10;
}
.header-container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center; /* Alinha verticalmente ao centro */
gap: 12px; /* Espaço entre ícone e título (ajuste livre) */
}
.logo i {
font-size: 1.5rem; /* Tamanho do ícone */
display: flex;
align-items: center; /* Se for FontAwesome, pode ajudar */
height: 1.5rem; /* Mantém a altura igual ao h1, ajuste se precisar */
}
.logo h1 {
font-size: 1.5rem;
font-weight: 600;
display: flex;
align-items: center; /* Garante alinhamento com o ícone também */
height: 1.5rem; /* Igual ao ícone para alinhar perfeitamente */
margin: 0; /* Remove margem padrão do h1 */
line-height: 1.5rem; /* Garante alinhamento vertical */
}
/* Main Content */
.container {
width: 90%;
max-width: 800px;
margin: 0.1rem auto;
padding: 2rem 0;
}
/* Calculator Container */
.calculator-container {
background: white;
border-radius: 15px;
box-shadow: var(–card-shadow);
padding: 2rem;
position: relative;
overflow: hidden;
}
.calculator-container::before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(–primary-color), var(–accent-color));
}
.calculator-header {
text-align: center;
margin-bottom: 2rem;
}
.calculator-header h2 {
color: var(–secondary-color);
margin-bottom: 0.5rem;
font-size: 2rem;
}
.calculator-header img {
max-width: 200px;
border-radius: 10px;
margin-bottom: 1rem;
box-shadow: var(–card-shadow);
}
/* Input Section */
.input-section {
margin-bottom: 2rem;
}
.input-group {
display: flex;
margin-bottom: 1rem;
position: relative;
}
.input-group-text {
background: var(–primary-color);
color: white;
border: none;
padding: 0 1rem;
border-radius: 10px 0 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
.form-control {
flex: 1;
padding: 1rem;
border: 2px solid #e9ecef;
border-left: none;
border-radius: 0 10px 10px 0;
font-size: 1rem;
transition: var(–transition);
}
.form-control:focus {
outline: none;
border-color: var(–primary-color);
box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}
.btn-calculate {
background: linear-gradient(135deg, var(–primary-color), #2980b9);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: var(–transition);
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: 1rem;
}
.btn-calculate:hover {
transform: translateY(-3px);
box-shadow: var(–hover-shadow);
background: linear-gradient(135deg, #2980b9, var(–primary-color));
}
/* Result Section */
.result-card {
background: linear-gradient(to bottom left, #e6e6ff 0%, #d9d9d9 100%);
border-left: 5px solid var(–primary-color);
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 2rem;
display: none;
}
.result-card.show {
display: block;
animation: fadeInUp 0.5s ease;
}
.result-card h5 {
color: var(–secondary-color);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Guide Section */
.guide-card {
background: #f8f9fa;
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 2rem;
}
.guide-card h5 {
color: var(–secondary-color);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.guide-card ul {
padding-left: 1.5rem;
}
.guide-card li {
margin-bottom: 0.5rem;
}
/* History Section */
.history-card {
background: #f8f9fa;
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 2rem;
}
.history-card h5 {
color: var(–secondary-color);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.history-list {
max-height: 300px;
overflow-y: auto;
}
.history-item {
padding: 0.75rem;
border-bottom: 1px solid #e9ecef;
transition: var(–transition);
border-radius: 5px;
}
.history-item:hover {
background-color: #e9ecef;
transform: scale(1.02);
}
.history-item:last-child {
border-bottom: none;
}
.history-content {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Controls Section */
.controls {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.btn {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: var(–transition);
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-reset {
background: linear-gradient(135deg, #6c757d, #5a6268);
color: white;
}
.btn-reset:hover {
transform: translateY(-3px);
box-shadow: var(–hover-shadow);
background: linear-gradient(135deg, #5a6268, #6c757d);
}
.btn-tools {
background: linear-gradient(135deg, var(–primary-color), #2980b9);
color: white;
}
.btn-tools:hover {
transform: translateY(-3px);
box-shadow: var(–hover-shadow);
background: linear-gradient(135deg, #2980b9, var(–primary-color));
}
/* Footer Message */
.footer-message {
background: #f8f9fa;
border-radius: 10px;
padding: 1rem;
margin-bottom: 2rem;
color: #6c757d;
font-size: 0.9rem;
text-align: justify;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.calculator-container {
padding: 1.5rem;
}
.calculator-header h2 {
font-size: 1.5rem;
}
.input-group {
flex-direction: column;
}
.input-group-text {
border-radius: 10px 10px 0 0;
padding: 0.75rem;
}
.form-control {
border-radius: 0 0 10px 10px;
border-left: 2px solid #e9ecef;
}
.btn-calculate {
margin-left: 0;
margin-top: 1rem;
width: 100%;
justify-content: center;
}
.controls {
flex-direction: column;
}
.btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.calculator-container {
padding: 1rem;
}
.calculator-header h2 {
font-size: 1.3rem;
}
}
Ferramentas Online
ResistorPro – Calculadora SMD
Detalhes do Resistor
Guia Rápido de Códigos
- 3 dígitos: 103 = 10 kΩ
- 4 dígitos: 1001 = 100 Ω
- EIA-96: 02C = 102 Ω x 100
Histórico de Cálculos
// Tabela de valores EIA-96
const eia96Values = {
“01”: 100, “02”: 102, “03”: 105, “04”: 107, “05”: 110,
“06”: 113, “07”: 115, “08”: 118, “09”: 121, “10”: 124,
“11”: 127, “12”: 130, “13”: 133, “14”: 137, “15”: 140,
“16”: 143, “17”: 147, “18”: 150, “19”: 154, “20”: 158,
“21”: 162, “22”: 165, “23”: 169, “24”: 174, “25”: 178,
“26”: 182, “27”: 187, “28”: 191, “29”: 196, “30”: 200,
“31”: 205, “32”: 210, “33”: 215, “34”: 221, “35”: 226,
“36”: 232, “37”: 237, “38”: 243, “39”: 249, “40”: 255,
“41”: 261, “42”: 267, “43”: 274, “44”: 280, “45”: 287,
“46”: 294, “47”: 301, “48”: 309, “49”: 316, “50”: 324,
“51”: 332, “52”: 340, “53”: 348, “54”: 357, “55”: 365,
“56”: 374, “57”: 383, “58”: 392, “59”: 402, “60”: 412,
“61”: 422, “62”: 432, “63”: 442, “64”: 453, “65”: 464,
“66”: 475, “67”: 487, “68”: 499, “69”: 511, “70”: 523,
“71”: 536, “72”: 549, “73”: 562, “74”: 576, “75”: 590,
“76”: 604, “77”: 619, “78”: 634, “79”: 649, “80”: 665,
“81”: 681, “82”: 698, “83”: 715, “84”: 732, “85”: 750,
“86”: 768, “87”: 787, “88”: 806, “89”: 825, “90”: 845,
“91”: 866, “92”: 887, “93”: 909, “94”: 931, “95”: 953,
“96”: 976
};
// Multiplicadores EIA-96
const eia96Multipliers = {
‘A’: 1, ‘B’: 10, ‘C’: 100, ‘D’: 1000, ‘E’: 10000,
‘F’: 100000, ‘G’: 1000000, ‘H’: 10000000, ‘J’: 0.01,
‘K’: 0.1, ‘L’: 1, ‘M’: 1000000000, ‘N’: 1000000000000,
‘P’: 0.001, ‘Q’: 0.0001, ‘R’: 0.00001, ‘S’: 0.000001,
‘T’: 0.0000001, ‘U’: 0.00000001, ‘V’: 0.000000001,
‘W’: 0.0000000001, ‘X’: 0.00000000001, ‘Y’: 0.000000000001,
‘Z’: 0.0000000000001
};
// Histórico de cálculos
const calculationHistory = [];
function validateInput(input) {
input.value = input.value.toUpperCase();
}
function calculateResistance() {
const code = document.getElementById(‘resistorCode’).value.trim().toUpperCase();
let resistance = 0;
let codeType = ”;
let unit = ‘Ω’;
if (code.length === 3) {
if (/[A-Z]/.test(code[2])) {
// EIA-96
codeType = ‘EIA-96’;
const valueCode = code.substring(0, 2);
const multiplierCode = code[2];
resistance = (eia96Values[valueCode] || 0) * (eia96Multipliers[multiplierCode] || 0);
} else if (code.includes(‘R’)) {
// Trata códigos com “R” como decimal (3 dígitos EIA)
codeType = ‘3-digitos EIA (decimal)’;
const valueStr = code.replace(‘R’, ‘.’);
resistance = parseFloat(valueStr);
} else if (/^d{3}$/.test(code)) {
// Lógica padrão 3 dígitos EIA
codeType = ‘3-digitos EIA’;
const significant = parseInt(code.substring(0, 2));
const multiplier = Math.pow(10, parseInt(code[2]));
resistance = significant * multiplier;
}
}
else if (code.length === 4) {
if (code.includes(‘R’)) {
// Trata códigos com “R” como decimal (4 dígitos EIA)
codeType = ‘4-digitos EIA (decimal)’;
const valueStr = code.replace(‘R’, ‘.’);
resistance = parseFloat(valueStr);
} else if (/^d{4}$/.test(code)) {
// Lógica padrão 4 dígitos EIA (multiplicador)
codeType = ‘4-digitos EIA’;
const significant = parseInt(code.substring(0, 3));
const multiplier = Math.pow(10, parseInt(code[3]));
resistance = significant * multiplier;
}
}
// Validação e formatação
if (isNaN(resistance) || resistance <= 0) {
document.getElementById('result').innerHTML = '
‘;
document.getElementById(‘result’).classList.add(‘show’);
return;
}
if (resistance >= 1e6) {
resistance /= 1e6;
unit = ‘MΩ’;
} else if (resistance >= 1e3) {
resistance /= 1e3;
unit = ‘kΩ’;
}
// Mostrar resultado
const resultDiv = document.getElementById(‘result’);
resultDiv.classList.add(‘show’);
resultDiv.innerHTML = `
Código: ${codeType}
Valor: ${resistance.toLocaleString()} ${unit}
`;
// Adicionar ao histórico
const historyItem = {
code: code,
type: codeType,
value: `${resistance.toLocaleString()} ${unit}`
};
calculationHistory.unshift(historyItem);
// Limitar histórico a 8 itens
if (calculationHistory.length > 8) {
calculationHistory.pop();
}
updateHistoryDisplay();
}
function resetSettings() {
calculationHistory.length = 0;
updateHistoryDisplay();
document.getElementById(‘resistorCode’).value = ”;
document.getElementById(‘result’).classList.remove(‘show’);
}
function updateHistoryDisplay() {
const historyList = document.getElementById(‘calculationHistory’);
historyList.innerHTML = ”;
calculationHistory.forEach((item, index) => {
const listItem = document.createElement(‘div’);
listItem.classList.add(‘history-item’);
listItem.innerHTML = `
${item.type}
`;
historyList.appendChild(listItem);
});
}