← Open template

WGT STUDIO / OWNER’S MANUAL / 1.0

A considered website.
Ready for your own story.

This is a plain HTML, CSS and JavaScript website template. It includes five page templates, three original fictional case studies, two colour themes and a local enquiry builder. No subscription or build step is required to open it.

This package is a website template. It does not include hosting, a domain, payment processing, AI writing, a CMS, or an email delivery service. The contact page prepares a brief; it never claims to have sent one.

01 — Preview / 預覽

Open index.html in your browser. All fonts and artwork work offline. You can also serve the folder using a local web server. Clipboard access depends on your browser; the download button is the fallback.

直接雙擊 index.html 即可預覽。不要只上傳這一個檔案：整個 assets 資料夾也必須保留。

02 — Make it yours / 改成你的品牌

Open assets/config.js with a text editor. Change name, suffix, email, location, title and intro. Keep the quotation marks and commas.

name: 'Your Studio',
email: 'hello@your-real-domain.com',
location: 'Working worldwide',

The demo email deliberately uses example.com. The “Open email app” button remains disabled until you replace it with a real email address. To update the browser tab titles and search descriptions, edit the <title> and description in each HTML file.

品牌、服務和案例共用同一份設定。分頁標題與搜尋描述請另外修改每個 HTML 的 head 區域。首頁裝飾圖上方的 FORM / FUNCTION / FEELING 可直接在 index.html 修改。

03 — Services / 服務項目

Each service has an id, name, note, description and an items array. Use a short unique English ID such as brand. The service page and enquiry menu update automatically.

04 — Portfolio / 作品集

Edit the projects array. Each project has a unique slug used in its URL, a title, summary, challenge, approach and deliverables. Project links open project.html?project=aera. Keep categories as Brand, Web or Launch unless you also edit the filter buttons in work.html.

The three artworks are original CSS illustrations. Their shapes are defined in assets/base.css; rendering is in the art() function in app.js. If you replace them with photographs, use assets you have permission to publish and provide meaningful alt text. Do not present the fictional projects as real client work.

05 — Colours / 配色

Colour variables are at the top of assets/base.css. The :root block controls the dark theme and body.light controls the light theme. The visitor’s colour choice is saved in their browser; enquiry details are not saved. Motion is disabled when the visitor requests reduced motion.

06 — Enquiries / 詢價

  1. The visitor completes the fields and chooses “Prepare my enquiry”.
  2. The browser creates a readable brief. Nothing is sent to a server.
  3. The visitor can copy or download the brief.
  4. When a real email is configured, “Open email app” opens a mail draft. The visitor must press Send in their own mail app.

Some visitors may not have a mail app configured. Keep the copy/download options available. If you need automatic form delivery, connect a suitable form provider or backend and update the privacy notice before accepting submissions. That integration is not included in this package.

07 — Deploy / 上線

  1. Replace brand details, fictional projects and demo contact information.
  2. Choose a static hosting service. Upload the whole template folder, including assets and docs. No build command is needed.
  3. For Netlify manual deployment, upload the folder whose top level contains index.html. Review the current plan and usage limits before accepting paid features.
  4. Open the resulting HTTPS URL. Check all navigation, project links, filters, theme switching, and enquiries.
  5. Connect your own domain in your hosting provider’s settings. Domain and hosting costs are separate.

The included netlify.toml adds basic response headers. It does not configure payment, email or storage. Deploying this template into an existing project can replace that project’s site; use a new project for a new customer.

08 — Before launch / 發布前

File map

index.html        Homepage
work.html         Filterable work index
services.html     Services and FAQ
project.html      Reusable case-study page
contact.html      Local enquiry builder
assets/config.js  Brand, services and project content
assets/app.js     Shared behaviour
assets/base.css   Original styles and responsive rules
assets/style.css  Stylesheet entry point
assets/favicon.svg Original vector icon
docs/start.html   This guide
netlify.toml      Optional hosting headers

Created by WGT Studio. See PACKAGE.txt for release scope and LICENSE.txt for the single-site commercial licence.