独立渲染引擎就绪引擎就绪
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IFR 架构：无屏化高频示波探头原理</title>
<style>
/* Base Aesthetic: Cyber-Industrial / Precision Technical */
:root {
--bg-base: #05070A;
--bg-glow: #0A111E;
--text-dim: #4B5A73;
--text-main: #8A9BB4;
--accent-analog: #FF2A5F; /* Raw Signal */
--accent-digital: #00E5FF; /* Processed Data */
--accent-wireless: #9D4EDD; /* Bluetooth */
--accent-status: #00FF9D; /* Success/Diagnostic */
--font-tech: 'SF Mono', 'JetBrains Mono', 'Courier New', monospace;
}
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: var(--bg-base);
background-image:
radial-gradient(circle at 50% 50%, var(--bg-glow) 0%, transparent 70%),
linear-gradient(rgba(10, 17, 30, 0.5) 1px, transparent 1px),
linear-gradient(90deg, rgba(10, 17, 30, 0.5) 1px, transparent 1px);
background-size: 100% 100%, 40px 40px, 40px 40px;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--text-main);
display: flex;
justify-content: center;
align-items: center;
}
/* Strict Text Constraints: Minimal, Small, Cornered */
.info-panel {
position: absolute;
z-index: 10;
font-size: 12px;
line-height: 1.6;
pointer-events: none;
max-width: 250px;
}
.panel-top-left { top: 20px; left: 20px; }
.panel-bottom-right { bottom: 20px; right: 20px; text-align: right; }
.tag {
display: inline-block;
padding: 2px 6px;
background: rgba(0, 229, 255, 0.1);
border: 1px solid rgba(0, 229, 255, 0.3);
border-radius: 3px;
color: var(--accent-digital);
font-family: var(--font-tech);
font-size: 10px;
margin-bottom: 6px;
}
.text-hl-analog { color: var(--accent-analog); }
.text-hl-wireless { color: var(--accent-wireless); }
.text-hl-digital { color: var(--accent-digital); }
/* Animation Container */
.animation-container {
width: 95vw;
height: 90vh;
max-width: 1200px;
max-height: 700px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
filter: drop-shadow(0 0 30px rgba(0, 229, 255, 0.05));
}
svg {
width: 100%;
height: 100%;
overflow: visible;
}
/* SVG Specific CSS */
.glow-analog { filter: drop-shadow(0 0 8px rgba(255, 42, 95, 0.6)); }
.glow-digital { filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.6)); }
.glow-wireless { filter: drop-shadow(0 0 10px rgba(157, 78, 221, 0.8)); }
.font-tech { font-family: var(--font-tech); }
/* Hardware component styling */
.chip {
fill: #0B111A;
stroke-width: 1.5;
transition: all 0.3s ease;
}
/* CSS Animations for Data Flow */
@keyframes pulseData {
0% { opacity: 0.1; transform: translateX(0) scale(0.8); }
50% { opacity: 1; transform: translateX(100px) scale(1.2); }
100% { opacity: 0.1; transform: translateX(200px) scale(0.8); }
}
.data-packet {
animation: pulseData 1.5s linear infinite;
}
.delay-1 { animation-delay: 0.5s; }
.delay-2 { animation-delay: 1.0s; }
@keyframes scanline {
0% { transform: translateY(0); opacity: 0; }
10% { opacity: 0.3; }
90% { opacity: 0.3; }
100% { transform: translateY(380px); opacity: 0; }
}
.screen-scan {
animation: scanline 3s linear infinite;
}
</style>
</head>
<body>
<!-- Overlay Text Content (Strictly Cornered & Small) -->
<div class="info-panel panel-top-left">
<div class="tag">TRIZ / IFR 最终理想解</div>
<div style="color: #fff; font-weight: 500; margin-bottom: 4px;">无屏化仪器架构</div>
<div style="color: var(--text-dim);">
核心矛盾消除：利用现有资源(智能手机)充当显示与算力中心。<br>
物理探头极简化：仅保留<span class="text-hl-analog">信号调理(PGA)</span>、<span class="text-hl-digital">高速采样(ADC)</span>与<span class="text-hl-wireless">无线发送</span>功能。
</div>
</div>
<div class="info-panel panel-bottom-right">
<div class="tag">系统参数</div>
<div style="color: var(--text-dim);">
采样率: 100 kS/s (16-bit)<br>
传输: Bluetooth 5.0 BLE<br>
功耗限制: 连续工作 > 4H<br>
重量边界: < 250g
</div>
</div>
<!-- Main Animation Canvas -->
<div class="animation-container">
<svg viewBox="0 0 1000 600" preserveAspectRatio="xMidYMid meet">
<defs>
<!-- Gradients -->
<linearGradient id="probeBody" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#2A2F3A" />
<stop offset="50%" stop-color="#1E232B" />
<stop offset="100%" stop-color="#0F1318" />
</linearGradient>
<linearGradient id="screenGlass" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.05" />
<stop offset="50%" stop-color="#ffffff" stop-opacity="0.0" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.02" />
</linearGradient>
<!-- Filters for glowing elements -->
<filter id="glowSubtle" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="3" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<filter id="glowStrong" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="6" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<!-- Patterns -->
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1A2233" stroke-width="0.5"/>
</pattern>
</defs>
<!-- PART 1: Physical Environment & Raw Signal (Left) -->
<g id="environment">
<!-- Engine/Sensor Node Abstract -->
<circle cx="80" cy="300" r="40" fill="none" stroke="#1A2233" stroke-width="2" stroke-dasharray="4 4"/>
<circle cx="80" cy="300" r="10" fill="#FF2A5F" class="glow-analog">
<animate attributeName="opacity" values="0.6;1;0.6" dur="0.8s" repeatCount="indefinite"/>
</circle>
<text x="50" y="360" class="font-tech text-hl-analog" font-size="10">0.5~4.5V RAW</text>
<!-- Croc Clip / Connection Wire -->
<path d="M 90 300 C 120 300, 130 300, 150 300" fill="none" stroke="#FF2A5F" stroke-width="2" class="glow-analog">
<!-- Simulating signal traveling up the wire -->
<animate attributeName="stroke-dasharray" values="0,50; 50,0" dur="0.5s" repeatCount="indefinite" />
</path>
</g>
<!-- PART 2: The Pen Probe (Minimalist Hardware) -->
<g id="pen-probe" transform="translate(150, 275)">
<!-- Probe Body (18cm abstracted) -->
<rect x="0" y="0" width="220" height="50" rx="25" fill="url(#probeBody)" stroke="#3A4150" stroke-width="1.5"/>
<!-- Probe Tip -->
<path d="M 0 15 L -20 25 L 0 35 Z" fill="#4A5568" stroke="#2D3748"/>
<circle cx="-20" cy="25" r="3" fill="#FF2A5F" class="glow-analog"/>
<!-- Internal Components Display (X-Ray view) -->
<!-- PGA (Programmable Gain Amplifier) -->
<rect x="30" y="10" width="35" height="30" rx="4" class="chip" stroke="#FF2A5F"/>
<text x="37" y="29" class="font-tech" fill="#FF2A5F" font-size="9">PGA</text>
<circle cx="47" cy="15" r="2" fill="#FF2A5F">
<animate attributeName="opacity" values="0;1;0" dur="0.4s" repeatCount="indefinite"/>
</circle>
<!-- Signal path 1 -->
<path d="M 65 25 L 85 25" fill="none" stroke="#00E5FF" stroke-width="1.5" stroke-dasharray="2 2"/>
<!-- 16-bit ADC -->
<rect x="85" y="10" width="45" height="30" rx="4" class="chip" stroke="#00E5FF"/>
<text x="94" y="29" class="font-tech" fill="#00E5FF" font-size="9">16b ADC</text>
<circle cx="107" cy="15" r="2" fill="#00E5FF">
<animate attributeName="opacity" values="0;1;0" dur="0.2s" repeatCount="indefinite"/>
</circle>
<!-- Signal path 2 -->
<path d="M 130 25 L 150 25" fill="none" stroke="#9D4EDD" stroke-width="1.5" stroke-dasharray="2 2"/>
<!-- Bluetooth 5.0 Module -->
<rect x="150" y="10" width="55" height="30" rx="4" class="chip" stroke="#9D4EDD"/>
<text x="157" y="29" class="font-tech" fill="#9D4EDD" font-size="9">BT 5.0</text>
<path d="M 190 20 L 195 15 L 195 35 L 190 30 M 195 25 L 190 25" fill="none" stroke="#9D4EDD" stroke-width="1.5"/>
<!-- Battery Indicator (End of pen) -->
<rect x="210" y="20" width="4" height="10" fill="#00FF9D"/>
</g>
<!-- PART 3: Wireless Transmission (The Invisible Link) -->
<g id="wireless-link" transform="translate(370, 300)">
<!-- Animated Data Packets -->
<g class="data-packet">
<line x1="0" y1="0" x2="20" y2="0" stroke="#9D4EDD" stroke-width="3" stroke-linecap="round" class="glow-wireless"/>
<text x="0" y="-10" class="font-tech text-hl-wireless" font-size="8">0x4F</text>
</g>
<g class="data-packet delay-1">
<line x1="0" y1="0" x2="20" y2="0" stroke="#9D4EDD" stroke-width="3" stroke-linecap="round" class="glow-wireless"/>
<text x="0" y="-10" class="font-tech text-hl-wireless" font-size="8">0x5A</text>
</g>
<g class="data-packet delay-2">
<line x1="0" y1="0" x2="20" y2="0" stroke="#9D4EDD" stroke-width="3" stroke-linecap="round" class="glow-wireless"/>
<text x="0" y="-10" class="font-tech text-hl-wireless" font-size="8">0x8C</text>
</g>
<!-- Decorative RF Waves -->
<path d="M 20 -30 Q 50 0 20 30" fill="none" stroke="#9D4EDD" stroke-width="1" opacity="0.3">
<animate attributeName="opacity" values="0.1;0.5;0.1" dur="1s" repeatCount="indefinite"/>
</path>
<path d="M 30 -40 Q 70 0 30 40" fill="none" stroke="#9D4EDD" stroke-width="1" opacity="0.2">
<animate attributeName="opacity" values="0.1;0.4;0.1" dur="1s" begin="0.2s" repeatCount="indefinite"/>
</path>
<path d="M 40 -50 Q 90 0 40 50" fill="none" stroke="#9D4EDD" stroke-width="1" opacity="0.1">
<animate attributeName="opacity" values="0.1;0.3;0.1" dur="1s" begin="0.4s" repeatCount="indefinite"/>
</path>
</g>
<!-- PART 4: The Mobile App (Resource Utilization / IFR) -->
<g id="smartphone" transform="translate(620, 80)">
<!-- Phone Hardware -->
<rect x="0" y="0" width="320" height="440" rx="24" fill="#0A0F18" stroke="#2A3241" stroke-width="4"/>
<!-- Hardware Buttons -->
<rect x="-4" y="80" width="4" height="40" rx="2" fill="#2A3241"/>
<rect x="-4" y="130" width="4" height="40" rx="2" fill="#2A3241"/>
<!-- Screen Area -->
<rect x="12" y="12" width="296" height="416" rx="16" fill="#030508"/>
<rect x="12" y="12" width="296" height="416" rx="16" fill="url(#grid)"/>
<!-- Glass overlay effect -->
<rect x="12" y="12" width="296" height="416" rx="16" fill="url(#screenGlass)" pointer-events="none"/>
<!-- Top Status Bar -->
<text x="25" y="35" class="font-tech text-hl-digital" font-size="12" font-weight="bold">OSC_APP_PRO</text>
<circle cx="280" cy="30" r="4" fill="#00FF9D" class="glowSubtle">
<animate attributeName="opacity" values="0.4;1;0.4" dur="2s" repeatCount="indefinite"/>
</circle>
<text x="25" y="55" class="font-tech" fill="#00FF9D" font-size="9">LINK: PEN_PROBE_X (BT5.0) | 100kS/s</text>
<!-- UI Frame / Graph Area -->
<rect x="25" y="70" width="270" height="200" fill="#05080E" stroke="#1A2233" stroke-width="1.5" rx="4"/>
<!-- Graph Grid Details -->
<g stroke="#121A26" stroke-width="1">
<line x1="25" y1="120" x2="295" y2="120"/>
<line x1="25" y1="170" x2="295" y2="170"/>
<line x1="25" y1="220" x2="295" y2="220"/>
<line x1="92" y1="70" x2="92" y2="270"/>
<line x1="160" y1="70" x2="160" y2="270"/>
<line x1="227" y1="70" x2="227" y2="270"/>
</g>
<!-- Dynamic Rendered Waveform (Updated via JS) -->
<!-- A mask to keep the wave strictly inside the graph -->
<clipPath id="graphClip">
<rect x="25" y="70" width="270" height="200" />
</clipPath>
<path id="dynamic-wave" d="" fill="none" stroke="#00E5FF" stroke-width="2" class="glow-digital" clip-path="url(#graphClip)" stroke-linejoin="round"/>
<!-- Interaction / Cursor Overlays -->
<line x1="180" y1="70" x2="180" y2="270" stroke="#FF2A5F" stroke-width="1" stroke-dasharray="4 4" opacity="0.7"/>
<rect x="165" y="75" width="30" height="14" fill="#FF2A5F" rx="2"/>
<text x="168" y="86" class="font-tech" fill="#FFF" font-size="8">CUR 1</text>
<!-- Real-time Diagnostic AI Section (Below Graph) -->
<rect x="25" y="290" width="270" height="120" fill="#090E17" stroke="#1A2233" stroke-width="1" rx="8"/>
<text x="40" y="315" class="font-tech" fill="#8A9BB4" font-size="10">实时 AI 诊断模型加载...</text>
<g id="diagnostic-results" opacity="0.9">
<rect x="40" y="325" width="4" height="40" fill="#00FF9D"/>
<text x="50" y="338" class="font-tech" fill="#FFF" font-size="12">进气压力传感器响应: <tspan fill="#00FF9D">正常</tspan></text>
<text x="50" y="358" class="font-tech" fill="#8A9BB4" font-size="10">峰值: 4.21 V | 谷值: 0.85 V | Freq: 1.2kHz</text>
</g>
<!-- Save/Upload Buttons -->
<rect x="40" y="375" width="110" height="24" rx="12" fill="#1A2233" stroke="#2A3241"/>
<text x="65" y="391" class="font-tech" fill="#8A9BB4" font-size="10">保存至相册 (200)</text>
<rect x="160" y="375" width="110" height="24" rx="12" fill="rgba(0, 229, 255, 0.1)" stroke="rgba(0, 229, 255, 0.3)"/>
<text x="195" y="391" class="font-tech" fill="#00E5FF" font-size="10">云端对比</text>
<!-- Scanning Line Effect on Screen -->
<rect x="12" y="12" width="296" height="2" fill="#00E5FF" filter="url(#glowStrong)" class="screen-scan" clip-path="url(#graphClip)"/>
</g>
</svg>
</div>
<!-- Animation Logic script -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const wavePath = document.getElementById('dynamic-wave');
// Graph boundaries
const startX = 25;
const width = 270;
const endX = startX + width;
const baseY = 170; // Center of the 200px height graph (70 + 100)
// Waveform parameters simulating a MAP (Manifold Absolute Pressure) sensor signal with noise
let phase = 0;
const amplitudeMain = 60;
const pointsCount = 100; // Resolution
const step = width / pointsCount;
function renderWaveform() {
let d = `M ${startX} ${baseY}`;
for (let i = 0; i <= pointsCount; i++) {
const x = startX + (i * step);
// Create a complex waveform: Base sine + harmonic + high freq noise
// The phase makes it scroll from right to left
const t = (i * 0.1) + phase;
const mainSignal = Math.sin(t) * amplitudeMain;
const harmonic = Math.sin(t * 2.5) * (amplitudeMain * 0.2);
const noise = (Math.random() - 0.5) * 6; // High frequency ADC noise
// Simulate sensor flat-topping (clipping near max voltage)
let yVal = mainSignal + harmonic + noise;
if(yVal > 80) yVal = 80 - (Math.random()*4);
const y = baseY - yVal;
d += ` L ${x.toFixed(1)} ${y.toFixed(1)}`;
}
wavePath.setAttribute('d', d);
// Advance phase to create scrolling effect
phase -= 0.15;
requestAnimationFrame(renderWaveform);
}
// Start animation loop immediately
renderWaveform();
});
</script>
</body>
</html>
积分规则：每轮对话扣10分
等待动画代码生成...