DIR : /home/kozerus/public_html/ko/index.htm
/home/kozerus/public_html/ko
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Konet Vas</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; height: 100vh; position: relative; }
canvas { display: block; cursor: none; }
#coords {
position: fixed; bottom: 8px; right: 8px;
color: #aaa; font-family: monospace; font-size: 18px;
background: rgba(0,0,0,0.8); padding: 4px 10px;
border-radius: 4px; z-index: 5; pointer-events: none;
letter-spacing: 0.5px;
}
#loader {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: #000; display: flex; align-items: center;
justify-content: center; flex-direction: column;
color: #888; font-family: monospace; font-size: 14px; z-index: 10;
}
#loader .bar { width: 200px; height: 4px; background: #333; margin-top: 12px; border-radius: 2px; overflow: hidden; }
#loader .fill { height: 100%; background: #ccc; transition: width 0.3s; }
</style>
</head>
<body>
<div id="loader">Loading<div class="bar"><div class="fill" id="loadFill"></div></div></div>
<div id="coords">x:000 y:000</div>
<canvas id="c"></canvas>
<script>
(function() {
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var coordsEl = document.getElementById('coords');
var W = 700, H = 480;
canvas.width = W;
canvas.height = H;
function resize() {
var scale = Math.min(window.innerWidth / W, window.innerHeight / H);
canvas.style.width = Math.floor(W * scale) + 'px';
canvas.style.height = Math.floor(H * scale) + 'px';
}
window.addEventListener('resize', resize);
resize();
/* ---- image loading ---- */
var imgSrcs = [
'imgs/swf/konet1.jpg', // narrow 0
'imgs/swf/konet2.jpg', // narrow 1
'imgs/swf/konet3.jpg', // narrow 2
'imgs/swf/konet4.jpg', // narrow 3
'imgs/swf/konet5.jpg', // narrow 4
'imgs/swf/konet6.jpg', // narrow 5
'imgs/swf/konet7_wide.jpg', // wide 6
'imgs/swf/konet8_wide.jpg', // wide 7
'imgs/swf/konet9_wide.jpg' // wide 8
];
var imgs = [];
var loaded = 0;
var total = imgSrcs.length;
var ready = false;
function onImgLoad() {
loaded++;
var pct = Math.round((loaded / total) * 100);
document.getElementById('loadFill').style.width = pct + '%';
if (loaded >= total) {
document.getElementById('loader').style.display = 'none';
ready = true;
}
}
imgSrcs.forEach(function(src) {
var img = new Image();
img.onload = onImgLoad;
img.src = src;
imgs.push(img);
});
/* ---- mouse ---- */
var mx = W / 2;
var my = H / 2;
var targetMx = mx;
var targetMy = my;
var mouseOnStage = true;
var globalMx = W / 2;
var globalMy = H / 2;
canvas.addEventListener('mousemove', function(e) {
var rect = canvas.getBoundingClientRect();
var cx = (e.clientX - rect.left) / rect.width * W;
var cy = (e.clientY - rect.top) / rect.height * H;
globalMx = cx;
globalMy = cy;
if (cx >= 0 && cx <= W && cy >= 0 && cy <= H) {
mouseOnStage = true;
targetMx = cx;
targetMy = cy;
} else {
mouseOnStage = false;
}
});
canvas.addEventListener('mouseleave', function() {
mouseOnStage = false;
});
canvas.addEventListener('touchmove', function(e) {
e.preventDefault();
var rect = canvas.getBoundingClientRect();
var cx = (e.touches[0].clientX - rect.left) / rect.width * W;
var cy = (e.touches[0].clientY - rect.top) / rect.height * H;
globalMx = cx;
globalMy = cy;
if (cx >= 0 && cx <= W && cy >= 0 && cy <= H) {
mouseOnStage = true;
targetMx = cx;
targetMy = cy;
} else {
mouseOnStage = false;
}
}, { passive: false });
/* ---- helpers ---- */
function lerp(a, b, t) { return a + (b - a) * t; }
function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
/* ============================================================
* Letterbox dimensions
* ============================================================ */
var LB_W = 704, LB_H = 300;
var LB_X = (W - LB_W) / 2;
var LB_Y = (H - LB_H) / 2;
/* ============================================================
* Determine active narrow image index (0-5) from mouse X
* and active wide image index (0-2) from mouse Y
* ============================================================ */
function getActiveNarrowIndex() {
if (!mouseOnStage) return -1;
return clamp(Math.floor(mx / (W / 6)), 0, 5);
}
function getActiveWideIndex() {
if (!mouseOnStage) return -1;
return clamp(Math.floor(my / (H / 3)), 0, 2);
}
/* ============================================================
* animation_x mask for a single narrow image band
* ============================================================ */
function getAnimXMask(frame, bandIndex) {
var f = clamp(frame, 0, W);
var bandTop = bandIndex * (H / 6);
var maskX = LB_X + (W - f);
var maskW = clamp(20 + 150 * Math.sin(Math.PI * f / W), 8, 200);
return { x: maskX, y: LB_Y + bandTop, w: maskW, h: H / 6 };
}
/* ============================================================
* animation_y mask for a single wide image band
* ============================================================ */
function getAnimYMask(frame, bandIndex) {
var f = clamp(frame + 50, 0, H);
var bandLeft = bandIndex * (W / 3);
var maskY = H - f;
var maskH = clamp(20 + 150 * Math.sin(Math.PI * f / H), 8, 200);
return { x: LB_X + bandLeft, y: LB_Y + maskY, w: W / 3, h: maskH };
}
/* ============================================================
* animation_x image state (single image)
* ============================================================ */
function getAnimXImageState(frame) {
var f = clamp(frame, 0, 700);
var x, alpha;
if (f <= 350) {
var t = f / 350;
x = W + (W / 2 - W) * t;
alpha = 0.05 + (1.0 - 0.05) * t;
} else {
var t = (f - 350) / 350;
x = W / 2 + (-W - W / 2) * t;
alpha = 1.0 + (0.05 - 1.0) * t;
}
return { x: x, alpha: clamp(alpha, 0, 1) };
}
/* ============================================================
* animation_y image state (single image)
* ============================================================ */
function getAnimYImageState(frame) {
var f = clamp(frame, 0, 300);
var y, alpha;
if (f <= 150) {
var t = f / 150;
y = H + (H / 2 - H) * t;
alpha = 0.05 + (1.0 - 0.05) * t;
} else {
var t = (f - 150) / 150;
y = H / 2 + (-H - H / 2) * t;
alpha = 1.0 + (0.05 - 1.0) * t;
}
return { y: y, alpha: clamp(alpha, 0, 1) };
}
/* ============================================================
* Drawing functions
* ============================================================ */
function drawBackground() {
ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, W, H);
}
/* ---- animation_x: single narrow image with own mask ---- */
function drawAnimX(frame) {
if (!mouseOnStage) return;
var idx = getActiveNarrowIndex();
if (idx < 0) return;
var f = clamp(Math.ceil(frame), 0, W);
var state = getAnimXImageState(f);
if (state.alpha < 0.01) return;
var img = imgs[idx];
if (!img || !img.complete || img.naturalWidth === 0) return;
ctx.save();
ctx.globalAlpha = state.alpha;
// Draw with correct width (236px) and height (355px), aligned to letterbox top
ctx.drawImage(img, state.x, LB_Y, 236, 355);
ctx.restore();
}
function drawAnimXOutline(frame) {
if (!mouseOnStage) return;
var idx = getActiveNarrowIndex();
if (idx < 0) return;
var f = clamp(Math.ceil(frame), 0, W);
var mask = getAnimXMask(f, idx);
var state = getAnimXImageState(f);
if (state.alpha < 0.01) return;
ctx.save();
ctx.strokeStyle = 'rgba(200, 200, 200, 0.4)';
ctx.lineWidth = 1;
ctx.setLineDash([]);
ctx.strokeRect(mask.x, mask.y, mask.w, mask.h);
ctx.restore();
}
/* ---- animation_y: single wide image with own mask ---- */
function drawAnimY(frame) {
if (!mouseOnStage) return;
var idx = getActiveWideIndex();
if (idx < 0) return;
var f = clamp(Math.ceil(frame), 0, 300);
var state = getAnimYImageState(f);
// For konet9_wide.jpg (idx = 2), use a gentler alpha curve to ensure visibility
var alpha = state.alpha;
if (idx === 2) { // konet9_wide.jpg
// Use a gentler alpha curve that ensures konet9_wide.jpg is always visible
alpha = 0.3 + 0.4 * Math.sin(Math.PI * f / 300);
}
if (alpha < 0.01) return;
var img = imgs[idx + 6];
if (!img || !img.complete || img.naturalWidth === 0) return;
ctx.save();
ctx.globalAlpha = alpha;
// Draw wide images with correct width (700px), height (217px), aligned to far left of letterbox
ctx.drawImage(img, LB_X, state.y, 700, 217);
ctx.restore();
}
function drawAnimYOutline(frame) {
if (!mouseOnStage) return;
var idx = getActiveWideIndex();
if (idx < 0) return;
var f = clamp(Math.ceil(frame), 0, 300);
var mask = getAnimYMask(f, idx);
// For konet9_wide.jpg, use a gentler alpha curve for outline too
var outlineAlpha = 0.4;
if (idx === 2) {
outlineAlpha = 0.6;
}
ctx.save();
ctx.strokeStyle = 'rgba(200, 200, 200,' + outlineAlpha + ')';
ctx.lineWidth = 1;
ctx.setLineDash([]);
ctx.strokeRect(mask.x, mask.y, mask.w, mask.h);
ctx.restore();
}
function drawLetterbox() {
ctx.save();
ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
ctx.lineWidth = 2;
ctx.strokeRect(LB_X, LB_Y, LB_W, LB_H);
ctx.restore();
// konet7_wide.jpg through konet9_wide.jpg should be aligned to far left of letterbox
ctx.save();
ctx.strokeStyle = 'rgba(255, 0, 0, 0.3)';
ctx.lineWidth = 1;
ctx.setLineDash([5, 5]);
ctx.strokeRect(LB_X, LB_Y, LB_W, LB_H);
ctx.restore();
}
function drawCrosshair() {
if (!mouseOnStage) return;
ctx.save();
ctx.strokeStyle = 'rgba(255, 255, 255, 0.35)';
ctx.lineWidth = 1;
ctx.setLineDash([6, 4]);
ctx.beginPath();
ctx.moveTo(mx, 0);
ctx.lineTo(mx, H);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, my);
ctx.lineTo(W, my);
ctx.stroke();
ctx.setLineDash([]);
ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
ctx.beginPath();
ctx.arc(mx, my, 4, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
function drawCrosshairButtons() {
if (!mouseOnStage) return;
var btnR = 8;
ctx.save();
ctx.fillStyle = 'rgba(255, 100, 100, 0.7)';
ctx.beginPath();
ctx.arc(mx, 15, btnR, 0, Math.PI * 2);
ctx.fill();
ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
ctx.lineWidth = 1;
ctx.stroke();
ctx.fillStyle = 'rgba(100, 255, 100, 0.7)';
ctx.beginPath();
ctx.arc(15, my, btnR, 0, Math.PI * 2);
ctx.fill();
ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
ctx.lineWidth = 1;
ctx.stroke();
ctx.restore();
}
function drawText() {
ctx.save();
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.font = 'bold 14px Arial, sans-serif';
ctx.textAlign = 'center';
ctx.fillText('konet_vas', W / 2, 20);
ctx.restore();
}
function drawBackButton() {
ctx.save();
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
ctx.font = '12px Arial, sans-serif';
ctx.textAlign = 'left';
ctx.fillText('BACK', 15, 465);
ctx.restore();
}
function drawSkipButton() {
var btnX = W / 2 - 30;
var btnY = LB_Y + LB_H + 5;
var btnW = 60;
var btnH = 20;
ctx.save();
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.fillRect(btnX, btnY, btnW, btnH);
ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
ctx.lineWidth = 1;
ctx.strokeRect(btnX, btnY, btnW, btnH);
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.font = '10px Arial, sans-serif';
ctx.textAlign = 'center';
ctx.fillText('SKIP', btnX + btnW / 2, btnY + 14);
ctx.restore();
}
/* ---- button hit detection ---- */
function getCanvasPos(e) {
var rect = canvas.getBoundingClientRect();
return {
x: (e.clientX - rect.left) / rect.width * W,
y: (e.clientY - rect.top) / rect.height * H
};
}
function isInCircle(px, py, cx, cy, r) {
var dx = px - cx, dy = py - cy;
return dx * dx + dy * dy <= r * r;
}
function isInRect(px, py, rx, ry, rw, rh) {
return px >= rx && px <= rx + rw && py >= ry && py <= ry + rh;
}
canvas.addEventListener('click', function(e) {
var pos = getCanvasPos(e);
var px = pos.x, py = pos.y;
if (px < 0 || px > W || py < 0 || py > H) return;
if (isInCircle(px, py, mx, 15, 10)) {
window.location.href = 'ko_contacts.html';
return;
}
if (isInCircle(px, py, 15, my, 10)) {
window.location.href = 'ko.php';
return;
}
var skipX = W / 2 - 30, skipY = LB_Y + LB_H + 5, skipW = 60, skipH = 20;
if (isInRect(px, py, skipX, skipY, skipW, skipH)) {
playSkipAudio();
window.location.href = 'ko.php';
return;
}
if (px >= 10 && px <= 50 && py >= 455 && py <= 475) {
window.history.back();
return;
}
});
/* ---- audio for skip button ---- */
var skipAudio = null;
function playSkipAudio() {
try {
if (!skipAudio) { skipAudio = new Audio('sounds/skip.mp3'); }
skipAudio.currentTime = 0;
skipAudio.play();
} catch (e) { /* audio may be blocked */ }
}
/* ---- main draw loop ---- */
function draw() {
if (mouseOnStage) {
mx = lerp(mx, targetMx, 0.12);
my = lerp(my, targetMy, 0.12);
}
/* update coordinate display with larger readable font */
var displayX = Math.round(globalMx);
var displayY = Math.round(globalMy);
coordsEl.textContent = 'x:' + displayX + ' y:' + displayY;
ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, W, H);
if (ready && mouseOnStage) {
var frameX = Math.ceil(clamp(mx, 0, W));
var frameY = Math.ceil(clamp(my, 0, H));
drawBackground();
drawAnimX(frameX);
drawAnimXOutline(frameX);
drawAnimY(frameY);
drawAnimYOutline(frameY);
drawLetterbox();
drawCrosshair();
drawCrosshairButtons();
drawText();
drawBackButton();
drawSkipButton();
} else if (ready) {
drawBackground();
drawLetterbox();
}
requestAnimationFrame(draw);
}
if (total === 0) {
document.getElementById('loader').style.display = 'none';
ready = true;
}
draw();
})();
</script>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer