檢視 Tool:程式工具的原始碼

<div style="width:100%; max-width:1000px; margin:0 auto; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color:#f4f5f7; color:#2d3436; box-sizing: border-box; line-height: 1.6;">

<div style="padding: 15px 0 10px 5px;">
<span style="background:#dfe6e9; padding:6px 15px; border-radius:20px; font-size:0.9em; font-weight:bold;">
[[首頁|← 回首頁]]
</span>
</div>

<div style="background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); color:white; border-radius:16px; padding:40px 30px; box-shadow: 0 10px 20px rgba(44, 62, 80, 0.2); margin-bottom: 25px;">
<div style="font-size:2.5em; font-weight:800; letter-spacing:-1px; margin-bottom:8px;">工具說明與官方資訊查詢</div>
<div style="font-size:1.3em; font-weight:300; opacity:0.9;">Development Resources & Official Links</div>
<div style="margin-top:15px; border-top:1px solid rgba(255,255,255,0.2); padding-top:15px; font-size:0.95em; background:rgba(0,0,0,0.1); display:inline-block; padding:8px 15px; border-radius:8px;">
⚠️ 提醒：請務必自官方管道下載或查詢，以確保版本正確與安全。
</div>
</div>

<div style="display: flex; flex-wrap: wrap; gap: 20px;">

<div style="flex: 1 1 100%; background:white; border-radius:16px; padding:30px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); border-left: 6px solid #24292e;">
<div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:15px;">
<div style="font-size:1.5em; font-weight:bold; color:#24292e;">GitHub</div>
<div style="background:#f4f6f6; color:#24292e; font-size:0.85em; padding:4px 10px; border-radius:4px; font-weight:bold;">Code Hosting</div>
</div>

<div style="color:#555; margin-bottom:20px; line-height:1.7;">
全球最大的程式碼託管與協作平台，支援 Git 版本控制，廣泛應用於軟體開發、開源專案與團隊協作。
<ul style="margin-top:10px; padding-left:20px;">
<li>提供專案版本管理、問題追蹤（Issues）。</li>
<li>支援協作開發（Pull Requests）。</li>
<li>能與 CI/CD 工具及編輯器（如 VS Code）深度整合。</li>
</ul>
</div>

<div style="border-top:1px dashed #eee; padding-top:15px;">
<span style="font-weight:bold; color:#24292e; margin-right:10px;">🔗 連結：</span>
[https://github.com GitHub 官網]
</div>
</div>

<div style="flex: 1 1 400px; background:white; border-radius:16px; padding:30px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); border-top: 6px solid #00979d;">
<div style="font-size:1.5em; font-weight:bold; color:#00979d; margin-bottom:10px;">Arduino (IDE)</div>

<div style="margin-bottom:15px;">
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Windows</span>
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">macOS</span>
<span style="background:#e8f6f3; color:#16a085; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Linux</span>
</div>

<div style="color:#636e72; margin-bottom:20px;">
開源硬體與軟體互動平台，適合互動設計入門與實作。
</div>

<div style="border-top:1px dashed #eee; padding-top:15px;">
<ul style="list-style:none; padding:0; margin:0; font-size:0.95em;">
<li style="margin-bottom:8px;">🌐 [https://www.arduino.cc/ Arduino 官網]</li>
<li>📖 [https://docs.arduino.cc/ 官方文件 (Docs)]</li>
</ul>
</div>
</div>

<div style="flex: 1 1 400px; background:white; border-radius:16px; padding:30px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); border-top: 6px solid #ed225d;">
<div style="font-size:1.5em; font-weight:bold; color:#ed225d; margin-bottom:10px;">p5.js</div>

<div style="margin-bottom:15px;">
<span style="background:#fdf2f5; color:#ed225d; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">Web (瀏覽器)</span>
<span style="background:#fdf2f5; color:#ed225d; font-size:0.8em; padding:3px 8px; border-radius:4px; font-weight:bold;">跨平台</span>
</div>

<div style="color:#636e72; margin-bottom:20px;">
讓創意編碼更親民的 JavaScript 函式庫，專注於視覺化與互動藝術。
</div>

<div style="border-top:1px dashed #eee; padding-top:15px;">
<ul style="list-style:none; padding:0; margin:0; font-size:0.95em;">
<li style="margin-bottom:8px;">🌐 [https://p5js.org/ p5.js 官網]</li>
<li>🎨 適合視覺藝術與網頁互動創作</li>
</ul>
</div>
</div>

</div>

</div>