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)
181 lines
6.6 KiB
HTML
181 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>B: Energy Flow — กระแสพลังงาน</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;800;900&display=swap');
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: 'Kanit', system-ui, sans-serif;
|
|
background: #080d14;
|
|
color: #fff; overflow: hidden;
|
|
display: flex; align-items: center; justify-content: center; min-height: 100vh;
|
|
}
|
|
.demo { position: relative; width: 650px; height: 580px; }
|
|
canvas#flowCanvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
|
|
.scene {
|
|
position: relative; width: 100%; height: 100%;
|
|
transform-style: preserve-3d;
|
|
transition: transform 0.3s ease-out;
|
|
}
|
|
|
|
.node {
|
|
position: absolute;
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center; text-align: center;
|
|
}
|
|
|
|
/* Core */
|
|
.core {
|
|
left: 50%; top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 160px; height: 160px; border-radius: 50%;
|
|
background: radial-gradient(circle at 35% 30%, #2a1a00, #100800);
|
|
border: 2px solid rgba(254,212,0,0.8);
|
|
box-shadow: 0 0 40px rgba(254,212,0,0.3), 0 0 80px rgba(254,180,0,0.1), inset 0 0 40px rgba(254,212,0,0.08);
|
|
z-index: 10;
|
|
animation: coreBeat 2s ease-in-out infinite;
|
|
}
|
|
@keyframes coreBeat {
|
|
0%, 100% { box-shadow: 0 0 40px rgba(254,212,0,0.3), 0 0 80px rgba(254,180,0,0.1), inset 0 0 40px rgba(254,212,0,0.08); }
|
|
50% { box-shadow: 0 0 60px rgba(254,212,0,0.5), 0 0 100px rgba(254,180,0,0.2), inset 0 0 50px rgba(254,212,0,0.12); }
|
|
}
|
|
.core .label { font-size: 2.6rem; font-weight: 900; color: #fed400; }
|
|
.core .sub { font-size: 0.7rem; color: rgba(254,212,0,0.5); margin-top: 4px; font-weight: 600; }
|
|
|
|
/* Satellites */
|
|
.satellite {
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.04);
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(254,212,0,0.25);
|
|
width: 120px; height: 120px;
|
|
z-index: 5;
|
|
left: 50%; top: 50%;
|
|
}
|
|
.satellite:nth-child(2) { transform: translate(-50%, -50%) translateY(-230px); animation: float1 4s ease-in-out infinite; }
|
|
.satellite:nth-child(3) { transform: translate(-50%, -50%) translateX(220px) translateY(10px); animation: float2 4.5s ease-in-out infinite; }
|
|
.satellite:nth-child(4) { transform: translate(-50%, -50%) translateX(-160px) translateY(190px); animation: float3 5s ease-in-out infinite; }
|
|
@keyframes float1 { 0%,100%{ transform: translate(-50%,-50%) translateY(-230px); } 50%{ transform: translate(-50%,-50%) translateY(-245px); } }
|
|
@keyframes float2 { 0%,100%{ transform: translate(-50%,-50%) translateX(220px) translateY(10px); } 50%{ transform: translate(-50%,-50%) translateX(235px) translateY(0px); } }
|
|
@keyframes float3 { 0%,100%{ transform: translate(-50%,-50%) translateX(-160px) translateY(190px); } 50%{ transform: translate(-50%,-50%) translateX(-175px) translateY(205px); } }
|
|
|
|
.satellite .tag { font-size: 0.9rem; font-weight: 800; color: #fff; }
|
|
.satellite .desc { font-size: 0.65rem; color: rgba(255,255,255,0.5); margin-top: 3px; }
|
|
|
|
.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">B. Energy Flow — กระแสพลังงาน พร้อม particles</span>
|
|
<div class="demo">
|
|
<canvas id="flowCanvas"></canvas>
|
|
<div class="scene" id="scene">
|
|
<div class="node core" data-node="center">
|
|
<span class="label">กำไร</span>
|
|
<span class="sub">เป้าหมายของทุกธุรกิจ</span>
|
|
</div>
|
|
<div class="node satellite" data-node="mkt">
|
|
<span class="tag">Marketing</span>
|
|
<span class="desc">เพิ่มรายได้</span>
|
|
</div>
|
|
<div class="node satellite" data-node="ai">
|
|
<span class="tag">AI</span>
|
|
<span class="desc">ลดต้นทุนและเวลา</span>
|
|
</div>
|
|
<div class="node satellite" data-node="biz">
|
|
<span class="tag">Business<br>Knowledge</span>
|
|
<span class="desc">ลดความเสี่ยง</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const canvas = document.getElementById('flowCanvas');
|
|
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);
|
|
|
|
// Particle system per connection
|
|
const connections = [];
|
|
let t = 0;
|
|
|
|
function draw() {
|
|
t++;
|
|
const rect = canvas.parentElement.getBoundingClientRect();
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
const sun = document.querySelector('[data-node="center"]');
|
|
const sats = document.querySelectorAll('.satellite');
|
|
if (!sun) { requestAnimationFrame(draw); return; }
|
|
|
|
const sr = sun.getBoundingClientRect();
|
|
const sx = sr.left + sr.width/2 - rect.left;
|
|
const sy = sr.top + sr.height/2 - rect.top;
|
|
|
|
sats.forEach((sat, i) => {
|
|
const pr = sat.getBoundingClientRect();
|
|
const px = pr.left + pr.width/2 - rect.left;
|
|
const py = pr.top + pr.height/2 - rect.top;
|
|
|
|
const dx = px - sx, dy = py - sy;
|
|
const dist = Math.sqrt(dx*dx + dy*dy);
|
|
|
|
// Draw stream line
|
|
ctx.beginPath();
|
|
ctx.moveTo(sx + (dx/dist)*80, sy + (dy/dist)*80);
|
|
ctx.lineTo(px - (dx/dist)*60, py - (dy/dist)*60);
|
|
const grad = ctx.createLinearGradient(sx, sy, px, py);
|
|
grad.addColorStop(0, 'rgba(254,212,0,0.6)');
|
|
grad.addColorStop(0.5, 'rgba(254,212,0,0.3)');
|
|
grad.addColorStop(1, 'rgba(254,212,0,0.1)');
|
|
ctx.strokeStyle = grad;
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
|
|
// Animated particles along the line
|
|
const count = 12;
|
|
for (let j = 0; j < count; j++) {
|
|
const phase = (t * 0.03 + j / count + i * 0.33) % 1;
|
|
const pp = phase < 0.5 ? phase * 2 : 2 - phase * 2;
|
|
const x = sx + (dx/dist)*80 + dx * (1 - 80/dist - 60/dist) * phase;
|
|
const y = sy + (dy/dist)*80 + dy * (1 - 80/dist - 60/dist) * phase;
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, 2.5, 0, Math.PI*2);
|
|
ctx.fillStyle = `rgba(254,230,100,${0.8 * pp})`;
|
|
ctx.fill();
|
|
// Glow
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, 5, 0, Math.PI*2);
|
|
ctx.fillStyle = `rgba(254,212,0,${0.25 * pp})`;
|
|
ctx.fill();
|
|
}
|
|
});
|
|
|
|
requestAnimationFrame(draw);
|
|
}
|
|
|
|
document.addEventListener('mousemove', e => {
|
|
const x = (e.clientX / window.innerWidth - 0.5) * 6;
|
|
const y = (e.clientY / window.innerHeight - 0.5) * -6;
|
|
scene.style.transform = `rotateX(${y}deg) rotateY(${x}deg)`;
|
|
});
|
|
|
|
draw();
|
|
</script>
|
|
</body>
|
|
</html>
|