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)
209 lines
7.9 KiB
HTML
209 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>D: Constellation — แผนที่ดาว</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: radial-gradient(ellipse at center, #0d1520 0%, #040810 100%);
|
|
color: #fff; overflow: hidden;
|
|
display: flex; align-items: center; justify-content: center; min-height: 100vh;
|
|
}
|
|
|
|
/* Starfield background */
|
|
.stars {
|
|
position: fixed; inset: 0; z-index: 0; pointer-events: none;
|
|
}
|
|
|
|
.demo { position: relative; width: 700px; height: 600px; z-index: 1; }
|
|
canvas#constCanvas { 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;
|
|
}
|
|
|
|
/* Polaris - main star */
|
|
.star-main {
|
|
left: 50%; top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 150px; height: 150px; border-radius: 50%;
|
|
background: radial-gradient(circle at 38% 35%, rgba(255,255,255,0.25), rgba(254,212,0,0.15) 50%, transparent 100%);
|
|
z-index: 10;
|
|
}
|
|
.star-main .glow {
|
|
position: absolute; inset: -30px; border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(254,212,0,0.08), transparent 70%);
|
|
animation: starGlow 3s ease-in-out infinite;
|
|
}
|
|
@keyframes starGlow {
|
|
0%, 100% { transform: scale(1); opacity: 0.5; }
|
|
50% { transform: scale(1.15); opacity: 0.8; }
|
|
}
|
|
.star-main .label { font-size: 2.6rem; font-weight: 900; color: #fed400; text-shadow: 0 0 30px rgba(254,212,0,0.6); position: relative; z-index: 1; }
|
|
.star-main .sub { font-size: 0.7rem; color: rgba(254,212,0,0.5); margin-top: 4px; font-weight: 600; position: relative; z-index: 1; }
|
|
|
|
/* Constellation stars */
|
|
.c-star {
|
|
width: 70px; height: 70px; border-radius: 50%;
|
|
background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.15), transparent);
|
|
z-index: 5;
|
|
left: 50%; top: 50%;
|
|
}
|
|
/* Star twinkle */
|
|
.c-star::before {
|
|
content: ''; position: absolute; inset: -15px; border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(254,240,200,0.1), transparent 70%);
|
|
animation: twinkle 4s ease-in-out infinite;
|
|
}
|
|
@keyframes twinkle {
|
|
0%, 100% { opacity: 0.3; transform: scale(0.8); }
|
|
50% { opacity: 0.7; transform: scale(1.15); }
|
|
}
|
|
|
|
.c-star:nth-child(2)::before { animation-delay: 0s; }
|
|
.c-star:nth-child(3)::before { animation-delay: 1.2s; }
|
|
.c-star:nth-child(4)::before { animation-delay: 2.5s; }
|
|
|
|
/* Star points (4-point cross) */
|
|
.c-star::after {
|
|
content: ''; position: absolute; inset: -8px; border-radius: 50%;
|
|
box-shadow:
|
|
0 -25px 0 -8px rgba(254,240,200,0.3),
|
|
0 25px 0 -8px rgba(254,240,200,0.3),
|
|
-25px 0 0 -8px rgba(254,240,200,0.3),
|
|
25px 0 0 -8px rgba(254,240,200,0.3);
|
|
animation: starRotate 10s linear infinite;
|
|
}
|
|
@keyframes starRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
|
|
|
.c-star:nth-child(2) { transform: translate(-50%,-50%) translate3d(-220px,-160px,-60px); }
|
|
.c-star:nth-child(3) { transform: translate(-50%,-50%) translate3d(190px,-30px,-30px); }
|
|
.c-star:nth-child(4) { transform: translate(-50%,-50%) translate3d(-120px,200px,-70px); }
|
|
|
|
.c-star .tag { font-size: 0.8rem; font-weight: 800; color: #fff; position: relative; z-index: 1; text-shadow: 0 0 15px rgba(255,255,255,0.4); }
|
|
.c-star .desc { font-size: 0.6rem; color: rgba(255,255,255,0.5); margin-top: 2px; position: relative; z-index: 1; }
|
|
|
|
.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">D. Constellation — แผนที่ดาว</span>
|
|
|
|
<!-- Starfield -->
|
|
<svg class="stars" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<radialGradient id="s"><stop offset="0%" stop-color="#fff" stop-opacity="0.8"/><stop offset="100%" stop-color="#fff" stop-opacity="0"/></radialGradient>
|
|
</defs>
|
|
<circle cx="8%" cy="12%" r="1.5" fill="#fff" opacity="0.6"/><circle cx="15%" cy="8%" r="1" fill="#fff" opacity="0.3"/>
|
|
<circle cx="22%" cy="18%" r="0.8" fill="#fff" opacity="0.5"/><circle cx="78%" cy="10%" r="1.2" fill="#fff" opacity="0.4"/>
|
|
<circle cx="85%" cy="22%" r="1" fill="#fff" opacity="0.3"/><circle cx="92%" cy="8%" r="0.6" fill="#fff" opacity="0.7"/>
|
|
<circle cx="6%" cy="85%" r="1" fill="#fff" opacity="0.4"/><circle cx="14%" cy="92%" r="0.8" fill="#fff" opacity="0.5"/>
|
|
<circle cx="88%" cy="88%" r="1.3" fill="#fff" opacity="0.35"/><circle cx="95%" cy="78%" r="0.7" fill="#fff" opacity="0.6"/>
|
|
<circle cx="42%" cy="5%" r="0.9" fill="#fff" opacity="0.45"/><circle cx="55%" cy="3%" r="0.5" fill="#fff" opacity="0.55"/>
|
|
<circle cx="65%" cy="92%" r="1.1" fill="#fff" opacity="0.3"/><circle cx="35%" cy="95%" r="0.7" fill="#fff" opacity="0.5"/>
|
|
</svg>
|
|
|
|
<div class="demo">
|
|
<canvas id="constCanvas"></canvas>
|
|
<div class="scene" id="scene">
|
|
<div class="node star-main" data-node="center">
|
|
<div class="glow"></div>
|
|
<span class="label">กำไร</span>
|
|
<span class="sub">เป้าหมายของทุกธุรกิจ</span>
|
|
</div>
|
|
<div class="node c-star" data-node="mkt">
|
|
<span class="tag">Marketing</span>
|
|
<span class="desc">เพิ่มรายได้</span>
|
|
</div>
|
|
<div class="node c-star" data-node="ai">
|
|
<span class="tag">AI</span>
|
|
<span class="desc">ลดต้นทุน</span>
|
|
</div>
|
|
<div class="node c-star" data-node="biz">
|
|
<span class="tag">Business Knowledge</span>
|
|
<span class="desc">ลดความเสี่ยง</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const canvas = document.getElementById('constCanvas');
|
|
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 center = document.querySelector('[data-node="center"]');
|
|
const stars = document.querySelectorAll('.c-star');
|
|
if (!center) { requestAnimationFrame(draw); return; }
|
|
|
|
const cr = center.getBoundingClientRect();
|
|
const cx = cr.left + cr.width/2 - rect.left;
|
|
const cy = cr.top + cr.height/2 - rect.top;
|
|
|
|
// Draw constellation lines (thin, elegant)
|
|
stars.forEach((star, i) => {
|
|
const pr = star.getBoundingClientRect();
|
|
const px = pr.left + pr.width/2 - rect.left;
|
|
const py = pr.top + pr.height/2 - rect.top;
|
|
const dx = px - cx, dy = py - cy;
|
|
const dist = Math.sqrt(dx*dx + dy*dy);
|
|
|
|
// Constellation line
|
|
ctx.beginPath();
|
|
ctx.moveTo(cx + (dx/dist)*75, cy + (dy/dist)*75);
|
|
ctx.lineTo(px - (dx/dist)*35, py - (dy/dist)*35);
|
|
ctx.strokeStyle = 'rgba(254,240,200,0.25)';
|
|
ctx.lineWidth = 1;
|
|
ctx.setLineDash([2, 6]);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
|
|
// Tiny connecting stars along line
|
|
for (let j = 0; j < 3; j++) {
|
|
const p = 0.25 + j * 0.25;
|
|
const sx = cx + (dx/dist)*75 + dx * (1 - 75/dist - 35/dist) * p;
|
|
const sy = cy + (dy/dist)*75 + dy * (1 - 75/dist - 35/dist) * p;
|
|
ctx.beginPath();
|
|
ctx.arc(sx, sy, 1.2, 0, Math.PI*2);
|
|
ctx.fillStyle = 'rgba(255,255,255,0.3)';
|
|
ctx.fill();
|
|
}
|
|
});
|
|
|
|
requestAnimationFrame(draw);
|
|
}
|
|
|
|
document.addEventListener('mousemove', e => {
|
|
scene.style.transform = `rotateX(${(e.clientY/window.innerHeight-0.5)*-5}deg) rotateY(${(e.clientX/window.innerWidth-0.5)*5}deg)`;
|
|
});
|
|
|
|
draw();
|
|
</script>
|
|
</body>
|
|
</html>
|