PawSync AI 寵智連 品牌行銷策略企劃 | AI + No-Code 品牌行銷接案術 x 艾倫老師

PawSync AI 寵智連 品牌行銷策略企劃 | AI + No-Code 品牌行銷接案術 x 艾倫老師 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap"); body { font-family: "Inter", "Noto Sans TC", sans-serif; background-color: #0f172a; color: #f8fafc; overflow: hidden; margin: 0; } /* 側邊導覽樣式 - 寬度再小 10% (15vw -> 13.5vw) */ .sidebar { width: 13.5vw; min-width: 170px; background: #1e293b; border-right: 1px solid #334155; height: 100vh; flex-shrink: 0; box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2); z-index: 100; display: flex; flex-direction: column; } .content-area { flex-grow: 1; height: 100vh; position: relative; background: #ffffff; } /* 頁首區域 Padding 與文字縮放 */ .sidebar-header { padding: 15px; border-bottom: 1px solid #334155; background: rgba(15, 23, 42, 0.5); } .logo-box { width: 32px; height: 32px; background: #ea5514; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } /* 標題放大 20% (16px -> 19px) */ .sidebar-header h1 { font-size: 19px; font-weight: 900; } .nav-item { padding: 12px 15px; cursor: pointer; transition: all 0.2s ease-in-out; border-left: 3px solid transparent; display: flex; flex-direction: column; gap: 2px; margin-bottom: 1px; } .nav-item:hover { background: #334155; border-left-color: #ea5514; } .nav-item.active { background: #0f172a; border-left-color: #ea5514; color: #ea5514; } /* 標籤文字放大 20% (8px -> 10px) */ .nav-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; opacity: 0.4; } /* 作品標題放大 20% (11.5px -> 14px) */ .nav-title { font-size: 14px; font-weight: 600; line-height: 1.3; color: inherit; } #viewer-frame { width: 100%; height: 100%; border: none; background: white; } .custom-scroll::-webkit-scrollbar { width: 4px; } .custom-scroll::-webkit-scrollbar-track { background: transparent; } .custom-scroll::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; } .loader-overlay { position: absolute; inset: 0; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; transition: opacity 0.3s; } .loader-hidden { opacity: 0; pointer-events: none; } /* 響應式優化：確保在小視窗下文字依然大且清晰 */ @media (max-width: 1024px) { .sidebar { width: 180px; min-width: 180px; } .nav-title, .nav-label { display: block !important; opacity: 1; } } .instructor-info { padding: 15px; border-top: 1px solid #334155; background: rgba(15, 23, 42, 0.3); } .instructor-info p:first-child { font-size: 9px; margin-bottom: 2px; } /* 講師姓名放大 20% (11px -> 13px) */ .instructor-info p:last-child { font-size: 13px; font-weight: 700; } window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", "G-M2N45HDPS3"); PawSync AI Growth Portfolio 實作作品清單 作品一 品牌行銷策略規劃 作品二 品牌架構規劃書 作品三 品牌官方銷售網頁 作品四 手機 App 監控介面 作品五 WordPress 實戰官網- 寵物電商 (PawSync) 作品五之一 WordPress 實戰官網- 化妝品電商 (PureBeauty) 作品五之二 WordPress 實戰官網- 品牌宣傳 (AcousticTech) 作品六 自動化銷售流程 (Mobile) 作品七 自動化收單系統 (Home) 作品八 SEO 與行銷分析報告 作品九 GA4 數據優化分析儀表板 Instructor 陳文仁老師 Loading... function renderProject(id, element) { document .querySelectorAll(".nav-item") .forEach((item) => item.classList.remove("active")); element.classList.add("active"); const loader = document.getElementById("loader"); loader.classList.remove("loader-hidden"); const frame = document.getElementById("viewer-frame"); const fileName = id.toString().padStart(2, "0") + ".html"; frame.src = fileName; frame.onload = function () { loader.classList.add("loader-hidden"); }; } window.onload = () => { const firstItem = document.querySelector(".nav-item"); if (firstItem) renderProject(1, firstItem); };