kunthawat/moreminimore-astroreal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Magnetic Field hero, Thai eyebrows, black text-stroke, service pages fixes

Browse Source 
- 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)
This commit is contained in:
Kunthawat Greethong
2026-06-26 11:15:58 +07:00
parent 689a8924e6
commit f114a34a62
18 changed files with 1201 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
public/demos/a-orbital.html Normal file
View File

@@ -0,0 +1,182 @@
<!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>

180
public/demos/b-energyflow.html Normal file
View File

@@ -0,0 +1,180 @@
<!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>

179
public/demos/c-holographic.html Normal file
View File

@@ -0,0 +1,179 @@
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>C: Holographic 3D — Hologram Sci-Fi</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: #020810;
color: #fff; overflow: hidden;
display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
.demo { position: relative; width: 700px; height: 600px; }
canvas#holoCanvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scene {
position: relative; width: 100%; height: 100%;
transform-style: preserve-3d; perspective: 1200px;
transition: transform 0.2s ease-out;
}
.node {
position: absolute;
display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center;
border-radius: 50%;
}
/* Center hologram */
.holo-core {
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 170px; height: 170px;
background: radial-gradient(circle at 40% 35%, rgba(0,255,255,0.15), rgba(0,200,255,0.05));
border: 2px solid rgba(0,255,255,0.5);
box-shadow: 0 0 50px rgba(0,255,255,0.2), 0 0 100px rgba(0,200,255,0.08), inset 0 0 30px rgba(0,255,255,0.05);
z-index: 10;
animation: holoPulse 2.5s ease-in-out infinite;
}
@keyframes holoPulse {
0%, 100% { border-color: rgba(0,255,255,0.5); box-shadow: 0 0 50px rgba(0,255,255,0.2), 0 0 100px rgba(0,200,255,0.08); }
50% { border-color: rgba(0,255,255,0.8); box-shadow: 0 0 70px rgba(0,255,255,0.35), 0 0 120px rgba(0,200,255,0.15); }
}
.holo-core .label { font-size: 2.8rem; font-weight: 900; color: #0ff; text-shadow: 0 0 20px rgba(0,255,255,0.5); }
.holo-core .sub { font-size: 0.7rem; color: rgba(0,255,255,0.5); margin-top: 4px; font-weight: 600; }
/* Scanline effect */
.holo-core::after {
content: ''; position: absolute; inset: 0; border-radius: 50%;
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,255,0.03) 2px, rgba(0,255,255,0.03) 4px);
pointer-events: none; z-index: 1;
}
/* Satellites - holographic */
.holo-sat {
width: 115px; height: 115px;
background: rgba(0,255,255,0.04);
border: 1.5px solid rgba(0,255,255,0.35);
box-shadow: 0 0 25px rgba(0,255,255,0.1), inset 0 0 20px rgba(0,255,255,0.04);
z-index: 5;
left: 50%; top: 50%;
}
.holo-sat::after {
content: ''; position: absolute; inset: 0; border-radius: 50%;
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,255,0.02) 2px, rgba(0,255,255,0.02) 4px);
pointer-events: none;
}
.holo-sat:nth-child(2) { transform: translate(-50%,-50%) translate3d(-220px,-140px,-80px); animation: hfloat1 5s ease-in-out infinite; }
.holo-sat:nth-child(3) { transform: translate(-50%,-50%) translate3d(180px,-20px,-30px); animation: hfloat2 6s ease-in-out infinite; }
.holo-sat:nth-child(4) { transform: translate(-50%,-50%) translate3d(-100px,210px,-100px); animation: hfloat3 5.5s ease-in-out infinite; }
@keyframes hfloat1 { 0%,100%{transform:translate(-50%,-50%) translate3d(-220px,-140px,-80px)} 50%{transform:translate(-50%,-50%) translate3d(-230px,-155px,-100px)} }
@keyframes hfloat2 { 0%,100%{transform:translate(-50%,-50%) translate3d(180px,-20px,-30px)} 50%{transform:translate(-50%,-50%) translate3d(195px,-35px,-55px)} }
@keyframes hfloat3 { 0%,100%{transform:translate(-50%,-50%) translate3d(-100px,210px,-100px)} 50%{transform:translate(-50%,-50%) translate3d(-115px,225px,-130px)} }
.holo-sat .tag { font-size: 0.9rem; font-weight: 800; color: #0ff; text-shadow: 0 0 10px rgba(0,255,255,0.4); }
.holo-sat .desc { font-size: 0.65rem; color: rgba(0,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(0,255,255,0.4); z-index: 100;
}
</style>
</head>
<body>
<span class="title">C. Holographic 3D — Hologram Sci-Fi</span>
<div class="demo">
<canvas id="holoCanvas"></canvas>
<div class="scene" id="scene">
<div class="node holo-core" data-node="center">
<span class="label">กำไร</span>
<span class="sub">เป้าหมายของทุกธุรกิจ</span>
</div>
<div class="node holo-sat" data-node="mkt">
<span class="tag">Marketing</span>
<span class="desc">เพิ่มรายได้</span>
</div>
<div class="node holo-sat" data-node="ai">
<span class="tag">AI</span>
<span class="desc">ลดต้นทุนและเวลา</span>
</div>
<div class="node holo-sat" data-node="biz">
<span class="tag">Business<br>Knowledge</span>
<span class="desc">ลดความเสี่ยง</span>
</div>
</div>
</div>
<script>
const canvas = document.getElementById('holoCanvas');
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);
let t = 0;
function draw() {
t++;
const rect = canvas.parentElement.getBoundingClientRect();
ctx.clearRect(0, 0, canvas.width, canvas.height);
const center = document.querySelector('[data-node="center"]');
const sats = document.querySelectorAll('.holo-sat');
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;
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 - cx, dy = py - cy;
const dist = Math.sqrt(dx*dx + dy*dy);
// Hologram beam line (dotted)
ctx.beginPath();
ctx.setLineDash([4, 8]);
ctx.lineDashOffset = -t * 2;
ctx.moveTo(cx + (dx/dist)*85, cy + (dy/dist)*85);
ctx.lineTo(px - (dx/dist)*58, py - (dy/dist)*58);
ctx.strokeStyle = 'rgba(0,255,255,0.3)';
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.setLineDash([]);
// Glow nodes at intervals
for (let j = 0; j < 5; j++) {
const phase = ((t * 0.02 + j/5 + i*0.33) % 1);
const x = cx + (dx/dist)*85 + dx * (1 - 85/dist - 58/dist) * phase;
const y = cy + (dy/dist)*85 + dy * (1 - 85/dist - 58/dist) * phase;
const alpha = Math.sin(phase * Math.PI);
ctx.beginPath();
ctx.arc(x, y, 2, 0, Math.PI*2);
ctx.fillStyle = `rgba(0,255,255,${0.6 * alpha})`;
ctx.fill();
}
});
requestAnimationFrame(draw);
}
document.addEventListener('mousemove', e => {
scene.style.transform = `rotateX(${(e.clientY/window.innerHeight-0.5)*-8}deg) rotateY(${(e.clientX/window.innerWidth-0.5)*8}deg)`;
});
draw();
</script>
</body>
</html>

208
public/demos/d-constellation.html Normal file
View File

@@ -0,0 +1,208 @@
<!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>

197
public/demos/e-magnetic.html Normal file
View File

@@ -0,0 +1,197 @@
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E: Magnetic Field — สนามแม่เหล็ก</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: #060a12;
color: #fff; overflow: hidden;
display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
.demo { position: relative; width: 700px; height: 600px; }
canvas#magCanvas { 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;
border-radius: 50%;
}
/* Magnet core */
.magnet {
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 170px; height: 170px;
background: radial-gradient(circle at 40% 35%, #3a2000, #0d0500);
border: 3px solid #fed400;
box-shadow: 0 0 0 12px rgba(254,212,0,0.1), 0 0 60px rgba(254,212,0,0.3), 0 0 140px rgba(254,180,0,0.1);
z-index: 10;
animation: magnetPulse 2s ease-in-out infinite;
}
@keyframes magnetPulse {
0%, 100% { box-shadow: 0 0 0 12px rgba(254,212,0,0.1), 0 0 60px rgba(254,212,0,0.3), 0 0 140px rgba(254,180,0,0.1); }
50% { box-shadow: 0 0 0 18px rgba(254,212,0,0.15), 0 0 80px rgba(254,212,0,0.4), 0 0 160px rgba(254,180,0,0.15); }
}
.magnet .label { font-size: 2.6rem; font-weight: 900; color: #fed400; }
.magnet .sub { font-size: 0.7rem; color: rgba(254,212,0,0.5); margin-top: 4px; font-weight: 600; }
/* Attracted nodes */
.attract {
width: 105px; height: 105px;
background: rgba(254,212,0,0.04);
border: 1.5px solid rgba(254,212,0,0.3);
box-shadow: 0 0 20px rgba(254,212,0,0.08);
z-index: 5;
left: 50%; top: 50%;
animation: attract 3s ease-in-out infinite alternate;
}
.attract:nth-child(2) {
transform: translate(-50%,-50%) translate3d(-200px,-150px,-60px);
animation-name: attract1;
}
.attract:nth-child(3) {
transform: translate(-50%,-50%) translate3d(170px,-20px,-25px);
animation-name: attract2;
}
.attract:nth-child(4) {
transform: translate(-50%,-50%) translate3d(-100px,190px,-70px);
animation-name: attract3;
}
@keyframes attract1 {
0% { transform: translate(-50%,-50%) translate3d(-220px,-160px,-80px); }
100% { transform: translate(-50%,-50%) translate3d(-185px,-140px,-50px); }
}
@keyframes attract2 {
0% { transform: translate(-50%,-50%) translate3d(185px,-25px,-35px); }
100% { transform: translate(-50%,-50%) translate3d(155px,-15px,-20px); }
}
@keyframes attract3 {
0% { transform: translate(-50%,-50%) translate3d(-120px,210px,-90px); }
100% { transform: translate(-50%,-50%) translate3d(-90px,180px,-60px); }
}
.attract .tag { font-size: 0.9rem; font-weight: 800; color: #fff; }
.attract .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">E. Magnetic Field — สนามแม่เหล็กดึงดูด</span>
<div class="demo">
<canvas id="magCanvas"></canvas>
<div class="scene" id="scene">
<div class="node magnet" data-node="center">
<span class="label">กำไร</span>
<span class="sub">เป้าหมายของทุกธุรกิจ</span>
</div>
<div class="node attract" data-node="mkt">
<span class="tag">Marketing</span>
<span class="desc">เพิ่มรายได้</span>
</div>
<div class="node attract" data-node="ai">
<span class="tag">AI</span>
<span class="desc">ลดต้นทุนและเวลา</span>
</div>
<div class="node attract" data-node="biz">
<span class="tag">Business<br>Knowledge</span>
<span class="desc">ลดความเสี่ยง</span>
</div>
</div>
</div>
<script>
const canvas = document.getElementById('magCanvas');
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);
let t = 0;
function draw() {
t++;
const rect = canvas.parentElement.getBoundingClientRect();
ctx.clearRect(0, 0, canvas.width, canvas.height);
const center = document.querySelector('[data-node="center"]');
const nodes = document.querySelectorAll('.attract');
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;
// Magnetic field lines (ripple waves)
for (let r = 0; r < 4; r++) {
const radius = 95 + r * 30 + (t * 0.02) % 30;
const alpha = Math.max(0, 0.25 - r * 0.06 - ((t * 0.02) % 30) / 120);
ctx.beginPath();
ctx.arc(cx, cy, radius, 0, Math.PI*2);
ctx.strokeStyle = `rgba(254,212,0,${alpha})`;
ctx.lineWidth = 1;
ctx.stroke();
}
// Connection lines with magnetic field arcs
nodes.forEach((node, i) => {
const pr = node.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);
// Main connection
ctx.beginPath();
ctx.moveTo(cx + (dx/dist)*85, cy + (dy/dist)*85);
ctx.lineTo(px - (dx/dist)*53, py - (dy/dist)*53);
ctx.strokeStyle = `rgba(254,212,0,0.4)`;
ctx.lineWidth = 2;
ctx.stroke();
// Field curve arcs on both sides
for (let side = -1; side <= 1; side += 2) {
const offset = side * 15;
const midX = cx + dx * 0.5 + (-dy/dist) * offset;
const midY = cy + dy * 0.5 + (dx/dist) * offset;
ctx.beginPath();
ctx.moveTo(cx + (dx/dist)*85, cy + (dy/dist)*85);
ctx.quadraticCurveTo(midX, midY, px - (dx/dist)*53, py - (dy/dist)*53);
ctx.strokeStyle = `rgba(254,212,0,0.1)`;
ctx.lineWidth = 1;
ctx.stroke();
}
});
requestAnimationFrame(draw);
}
document.addEventListener('mousemove', e => {
scene.style.transform = `rotateX(${(e.clientY/window.innerHeight-0.5)*-6}deg) rotateY(${(e.clientX/window.innerWidth-0.5)*6}deg)`;
});
draw();
</script>
</body>
</html>

75
public/demos/index.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero Design Demos</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;800;900&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Kanit', system-ui, sans-serif;
background: #0d1117;
color: #fff;
min-height: 100vh;
padding: 48px 24px;
}
h1 { font-size: 2rem; text-align: center; margin-bottom: 8px; }
h1 span { color: #fed400; }
.sub { text-align: center; color: rgba(255,255,255,0.5); margin-bottom: 40px; font-size: 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; }
.card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
padding: 32px 24px;
text-decoration: none;
color: #fff;
transition: all 0.3s ease;
display: flex; flex-direction: column; gap: 12px;
}
.card:hover { background: rgba(254,212,0,0.06); border-color: rgba(254,212,0,0.3); transform: translateY(-2px); }
.card .emoji { font-size: 3rem; }
.card .name { font-size: 1.3rem; font-weight: 800; }
.card .name span { color: #fed400; }
.card .desc { font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.5; }
.card .tag { display: inline-block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(254,212,0,0.6); border: 1px solid rgba(254,212,0,0.2); border-radius: 20px; padding: 4px 10px; width: fit-content; }
</style>
</head>
<body>
<h1>Hero Section — <span>5 Design Demos</span></h1>
<p class="sub">เลือกดูแต่ละแนวคิดเพื่อเปรียบเทียบ</p>
<div class="grid">
<a href="a-orbital.html" class="card">
<div class="emoji">🌌</div>
<div class="name">A. <span>Orbital</span></div>
<div class="tag">ระบบดาวเคราะห์โคจร</div>
<div class="desc">กำไรเป็นดวงอาทิตย์เรืองแสง 3 ป้ายโคจรรอบด้วยวงแหวน orbital พร้อมหมุนอัตโนมัติ</div>
</a>
<a href="b-energyflow.html" class="card">
<div class="emoji">⚡</div>
<div class="name">B. <span>Energy Flow</span></div>
<div class="tag">กระแสพลังงาน</div>
<div class="desc">Particle วิ่งตามเส้นเชื่อมสีทอง เหมือนพลังงาน/ข้อมูลไหลเข้าสู่กำไร ดูมีชีวิตชีวา</div>
</a>
<a href="c-holographic.html" class="card">
<div class="emoji">🌀</div>
<div class="name">C. <span>Holographic 3D</span></div>
<div class="tag">Hologram Sci-Fi</div>
<div class="desc">โทน Cyan เรืองแสง พร้อม scanline และ beam เชื่อมต่อ ดูล้ำสมัย ดูแพง</div>
</a>
<a href="d-constellation.html" class="card">
<div class="emoji">✨</div>
<div class="name">D. <span>Constellation</span></div>
<div class="tag">แผนที่ดาว</div>
<div class="desc">โหนดเป็นดาวระยิบระยับ เส้นเชื่อมแบบกลุ่มดาว พื้นหลังมีดาวกระจาย ดูลึกลับสง่า</div>
</a>
<a href="e-magnetic.html" class="card">
<div class="emoji">🧲</div>
<div class="name">E. <span>Magnetic Field</span></div>
<div class="tag">สนามแม่เหล็ก</div>
<div class="desc">กำไรเป็นแม่เหล็กทรงพลัง มี ripple wave + field curve สื่อถึงการดึงดูดทุกอย่างสู่กำไร</div>
</a>
</div>
</body>
</html>

BIN
public/images/logos/logo-long-black.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB