f114a34a62
- Hero: Magnetic Field design (ripple rings, field curves, attract animations) - H1: เปลี่ยนเป็น 'เป้าหมายของเราคือการเพิ่มกำไรให้ลูกค้า', กำไร เน้นขอบดำ - Site: ทุก eyebrow แปลเป็นไทย - Buttons: text สีดำทุกหน้าแม้ใน dark section - Yellow text: เพิ่ม -webkit-text-stroke ขอบดำทุก element - Service pages: light/light/dark pattern, process-grid แถวเดียว - Logo: อัพเดทใหม่ - Demos: เพิ่ม 5 hero design concepts (orbital, energy flow, holographic, constellation, magnetic)
183 lines
6.0 KiB
HTML
183 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>A: Orbital — ระบบดาวเคราะห์</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: 'Kanit', system-ui, sans-serif;
|
|
background: #0a0f1a;
|
|
color: #fff;
|
|
display: flex; align-items: center; justify-content: center;
|
|
min-height: 100vh; overflow: hidden;
|
|
}
|
|
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;800;900&display=swap');
|
|
|
|
.demo { position: relative; width: 650px; height: 580px; }
|
|
|
|
/* Canvas for orbital rings */
|
|
canvas#orbitalCanvas {
|
|
position: absolute; inset: 0; pointer-events: none; z-index: 1;
|
|
}
|
|
|
|
.scene {
|
|
position: relative; width: 100%; height: 100%;
|
|
transform-style: preserve-3d;
|
|
transition: transform 0.2s ease-out;
|
|
}
|
|
|
|
.node {
|
|
position: absolute; border-radius: 50%;
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
text-align: center; backface-visibility: hidden;
|
|
}
|
|
|
|
/* Center Sun */
|
|
.sun {
|
|
left: 50%; top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 170px; height: 170px;
|
|
background: radial-gradient(circle at 40% 35%, #fff7cc, #fed400 40%, #d4a000 100%);
|
|
box-shadow: 0 0 60px rgba(254,212,0,0.6), 0 0 120px rgba(254,212,0,0.3), 0 0 200px rgba(254,180,0,0.15);
|
|
z-index: 10; animation: sunPulse 3s ease-in-out infinite;
|
|
}
|
|
@keyframes sunPulse {
|
|
0%, 100% { box-shadow: 0 0 60px rgba(254,212,0,0.6), 0 0 120px rgba(254,212,0,0.3), 0 0 200px rgba(254,180,0,0.15); }
|
|
50% { box-shadow: 0 0 80px rgba(254,212,0,0.8), 0 0 150px rgba(254,212,0,0.4), 0 0 230px rgba(254,180,0,0.2); }
|
|
}
|
|
.sun .label { font-size: 2.8rem; font-weight: 900; color: #3a2e00; }
|
|
.sun .sub { font-size: 0.75rem; color: #6b5500; margin-top: 4px; font-weight: 600; }
|
|
|
|
/* Orbiting planets */
|
|
.planet {
|
|
width: 110px; height: 110px;
|
|
background: rgba(255,255,255,0.06);
|
|
backdrop-filter: blur(10px);
|
|
border: 1.5px solid rgba(255,255,255,0.2);
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
|
|
left: 50%; top: 50%;
|
|
animation: orbit var(--orbit-dur) linear infinite;
|
|
z-index: 5;
|
|
}
|
|
.planet:nth-child(2) { --orbit-dur: 12s; --radius: 230px; --angle: 0deg; --z: -40px; }
|
|
.planet:nth-child(3) { --orbit-dur: 15s; --radius: 280px; --angle: 120deg; --z: -70px; }
|
|
.planet:nth-child(4) { --orbit-dur: 18s; --radius: 330px; --angle: 240deg; --z: -100px; }
|
|
|
|
@keyframes orbit {
|
|
0% { transform: translate(-50%, -50%) rotate(0deg) translateX(var(--radius)) rotate(0deg); }
|
|
100% { transform: translate(-50%, -50%) rotate(360deg) translateX(var(--radius)) rotate(-360deg); }
|
|
}
|
|
|
|
.planet .tag { font-size: 1rem; font-weight: 800; color: #fff; text-transform: uppercase; }
|
|
.planet .desc { font-size: 0.7rem; color: rgba(255,255,255,0.6); margin-top: 4px; }
|
|
|
|
/* Connecting lines (drawn on canvas) */
|
|
|
|
.title {
|
|
position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
|
|
font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em;
|
|
color: rgba(255,255,255,0.4); z-index: 100;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<span class="title">A. Orbital — ระบบดาวเคราะห์โคจร</span>
|
|
<div class="demo">
|
|
<canvas id="orbitalCanvas"></canvas>
|
|
<div class="scene" id="scene">
|
|
<div class="node sun" data-node="center">
|
|
<span class="label">กำไร</span>
|
|
<span class="sub">เป้าหมายของทุกธุรกิจ</span>
|
|
</div>
|
|
<div class="node planet" data-node="mkt">
|
|
<span class="tag">Marketing</span>
|
|
<span class="desc">เพิ่มรายได้</span>
|
|
</div>
|
|
<div class="node planet" data-node="ai">
|
|
<span class="tag">AI</span>
|
|
<span class="desc">ลดต้นทุนและเวลา</span>
|
|
</div>
|
|
<div class="node planet" data-node="biz">
|
|
<span class="tag">Business<br>Knowledge</span>
|
|
<span class="desc">ลดความเสี่ยง</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const canvas = document.getElementById('orbitalCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const scene = document.getElementById('scene');
|
|
|
|
function resize() {
|
|
const rect = canvas.parentElement.getBoundingClientRect();
|
|
canvas.width = rect.width;
|
|
canvas.height = rect.height;
|
|
}
|
|
resize();
|
|
window.addEventListener('resize', resize);
|
|
|
|
function draw() {
|
|
const rect = canvas.parentElement.getBoundingClientRect();
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
const sun = document.querySelector('[data-node="center"]');
|
|
const planets = document.querySelectorAll('.planet');
|
|
if (!sun) return;
|
|
|
|
const sunRect = sun.getBoundingClientRect();
|
|
const sx = sunRect.left + sunRect.width/2 - rect.left;
|
|
const sy = sunRect.top + sunRect.height/2 - rect.top;
|
|
|
|
// Draw orbital rings
|
|
const sr = 85; // sun radius
|
|
const radii = [230, 280, 330];
|
|
radii.forEach((r, i) => {
|
|
ctx.beginPath();
|
|
ctx.ellipse(sx, sy, r, r * 0.45, 0, 0, Math.PI * 2);
|
|
ctx.strokeStyle = `rgba(254,212,0,${0.15 - i * 0.03})`;
|
|
ctx.lineWidth = 1;
|
|
ctx.setLineDash([8, 14]);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
});
|
|
|
|
// Draw connection lines
|
|
planets.forEach(p => {
|
|
const pRect = p.getBoundingClientRect();
|
|
const px = pRect.left + pRect.width/2 - rect.left;
|
|
const py = pRect.top + pRect.height/2 - rect.top;
|
|
|
|
const dx = px - sx, dy = py - sy;
|
|
const dist = Math.sqrt(dx*dx + dy*dy);
|
|
const r = 85;
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(sx + (dx/dist)*r, sy + (dy/dist)*r);
|
|
ctx.lineTo(px - (dx/dist)*55, py - (dy/dist)*55);
|
|
const grad = ctx.createLinearGradient(sx, sy, px, py);
|
|
grad.addColorStop(0, 'rgba(254,212,0,0.7)');
|
|
grad.addColorStop(1, 'rgba(254,212,0,0.15)');
|
|
ctx.strokeStyle = grad;
|
|
ctx.lineWidth = 1.5;
|
|
ctx.stroke();
|
|
});
|
|
|
|
requestAnimationFrame(draw);
|
|
}
|
|
|
|
// Mouse parallax
|
|
document.addEventListener('mousemove', e => {
|
|
const x = (e.clientX / window.innerWidth - 0.5) * 8;
|
|
const y = (e.clientY / window.innerHeight - 0.5) * -8;
|
|
scene.style.transform = `rotateX(${y}deg) rotateY(${x}deg)`;
|
|
});
|
|
|
|
draw();
|
|
</script>
|
|
</body>
|
|
</html>
|