document.addEventListener('DOMContentLoaded', function () {
var mount = document.getElementById('hks-web-apps');
if (!mount) return;
var apps = [
{
id: 'mc5000',
name: 'MC5000 充電設定ツール',
description: '18650やNi-Znなどの充電・容量確認設定を確認できます。',
url: 'https://5150hks.com/tools/mc5000-charge-tool/'
}
];
mount.innerHTML = '\n ';
var buttons = mount.querySelector('#hks-app-buttons');
var frameWrap = mount.querySelector('#hks-app-frame-wrap');
function selectApp(app) {
Array.prototype.forEach.call(buttons.querySelectorAll('button'), function (button) {
var active = button.getAttribute('data-app') === app.id;
button.style.borderColor = active ? '#0f766e' : '#d7e2dd';
button.style.background = active ? '#ecfdf5' : '#ffffff';
button.style.boxShadow = active ? '0 8px 22px rgba(15,118,110,.12)' : 'none';
});
frameWrap.innerHTML = '';
var frame = document.createElement('iframe');
frame.src = app.url;
frame.title = app.name;
frame.loading = 'lazy';
frame.style.width = '100%';
frame.style.minHeight = '1200px';
frame.style.border = '0';
frame.style.display = 'block';
frameWrap.appendChild(frame);
}
apps.forEach(function (app, index) {
var button = document.createElement('button');
button.type = 'button';
button.setAttribute('data-app', app.id);
button.style.textAlign = 'left';
button.style.padding = '16px';
button.style.border = '1px solid #d7e2dd';
button.style.borderRadius = '8px';
button.style.background = '#ffffff';
button.style.cursor = 'pointer';
button.style.color = '#111827';
button.innerHTML = '' + app.name + '' + app.description + '';
button.addEventListener('click', function () { selectApp(app); });
buttons.appendChild(button);
if (index === 0) selectApp(app);
});
});
