├── server.js ├── vars.styl ├── img ├── shaq.gif ├── gallery │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ └── 6.jpg ├── jumbotron.jpg ├── media │ ├── ltn.png │ ├── udn.png │ └── businesstoday.png ├── thumbnail.jpg ├── poweredby-square.png ├── poweredby-square-i.svg ├── poweredby-square.svg ├── g0v-bg-dark.svg └── g0v-bg-light.svg ├── .gitignore ├── module ├── photos.jade ├── how.jade ├── what.jade ├── jumbotron.jade ├── media.jade ├── news.jade ├── traction.jade ├── contribute.jade ├── features.jade ├── nav.jade ├── why.jade ├── trivia.jade └── footer.jade ├── deploy ├── package.json ├── README.md ├── basic.styl ├── index.jade ├── index.styl ├── index.css ├── index.html └── server.ls /server.js: -------------------------------------------------------------------------------- 1 | undefined -------------------------------------------------------------------------------- /vars.styl: -------------------------------------------------------------------------------- 1 | order = 'base' 2 | -------------------------------------------------------------------------------- /img/shaq.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/g0v/grants-landing-template/HEAD/img/shaq.gif -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | node_modules 3 | npm-debug.log 4 | .* 5 | !.gitignore 6 | assets 7 | -------------------------------------------------------------------------------- /img/gallery/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/g0v/grants-landing-template/HEAD/img/gallery/1.jpg -------------------------------------------------------------------------------- /img/gallery/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/g0v/grants-landing-template/HEAD/img/gallery/2.jpg -------------------------------------------------------------------------------- /img/gallery/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/g0v/grants-landing-template/HEAD/img/gallery/3.jpg -------------------------------------------------------------------------------- /img/gallery/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/g0v/grants-landing-template/HEAD/img/gallery/4.jpg -------------------------------------------------------------------------------- /img/gallery/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/g0v/grants-landing-template/HEAD/img/gallery/5.jpg -------------------------------------------------------------------------------- /img/gallery/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/g0v/grants-landing-template/HEAD/img/gallery/6.jpg -------------------------------------------------------------------------------- /img/jumbotron.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/g0v/grants-landing-template/HEAD/img/jumbotron.jpg -------------------------------------------------------------------------------- /img/media/ltn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/g0v/grants-landing-template/HEAD/img/media/ltn.png -------------------------------------------------------------------------------- /img/media/udn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/g0v/grants-landing-template/HEAD/img/media/udn.png -------------------------------------------------------------------------------- /img/thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/g0v/grants-landing-template/HEAD/img/thumbnail.jpg -------------------------------------------------------------------------------- /img/poweredby-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/g0v/grants-landing-template/HEAD/img/poweredby-square.png -------------------------------------------------------------------------------- /img/media/businesstoday.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/g0v/grants-landing-template/HEAD/img/media/businesstoday.png -------------------------------------------------------------------------------- /module/photos.jade: -------------------------------------------------------------------------------- 1 | //- module 2 | .section.section-photos: .inner 3 | each i in [1,2,3,4,5,6] 4 | .photo(style="background-image:url(img/gallery/" + i + ".jpg)"): .mask 5 | 6 | -------------------------------------------------------------------------------- /module/how.jade: -------------------------------------------------------------------------------- 1 | //- module 2 | .section.section-how.bg-danger.text-light: .inner.text-center 3 | h2 要怎麼開始呢 4 | p 何不放些文件與說明呢？請考慮到完全陌生的使用者，進入門檻跟上手的複雜度。 5 | br 6 | .btn.btn-light.btn-lg 現在就開始 7 | 8 | -------------------------------------------------------------------------------- /module/what.jade: -------------------------------------------------------------------------------- 1 | //- module 2 | .section.bg-warning.section-what: .inner 3 | .text-center: h2 什麼是這個專案？ 4 | p 簡單扼要的說明這個專案是什麼，或者輔以一些實例、一些使用情境。比方說，Cofact ( 在截稿日前 ) 的首頁只有一個文章列表，就需要一個更清楚的說明。 5 | p 分項式的說明可以更聚焦地說明專案的特色或要點，也可以附上圖示 ( optional )： 6 | 7 | -------------------------------------------------------------------------------- /module/jumbotron.jade: -------------------------------------------------------------------------------- 1 | //- module 2 | .jumbotron.text-light 3 | .text-center 4 | h1.mb-2 具有說服力的一具短話 5 | div(style="border-bottom:1px solid rgba(255,255,255,0.3);margin:20px") 6 | p 再稍微細節一點解釋這個專案的幾句話，以一到兩行的長度為主 7 | br 8 | .btn.btn-danger.btn-lg(style="width:280px") 現在就開始使用 9 | 10 | -------------------------------------------------------------------------------- /module/media.jade: -------------------------------------------------------------------------------- 1 | //- module 2 | .section.section-media.bg-warning.text-dark: .inner 3 | .text-center: h2 媒體報導 4 | .text-center 5 | img(src="img/media/udn.png",style="height:60px;margin:20px;") 6 | img(src="img/media/ltn.png",style="height:60px;margin:20px;") 7 | img(src="img/media/businesstoday.png",style="height:60px;margin:20px;") 8 | -------------------------------------------------------------------------------- /module/news.jade: -------------------------------------------------------------------------------- 1 | //- module 2 | .section.bg-white.section-news: .inner 3 | .text-center: h2 最新消息 4 | ul 5 | li: a(href="/news/") 最新消息區塊更新上線了！ #[small / 20190318] 6 | li: a(href="/news/") 加入官方獎助金圖示！ #[small / 20180713] 7 | li: a(href="/news/") 收到第一個 Pull Request ！ #[small / 20180317] 8 | li: a(href="/news/") 獎助金專案樣板網正式啟動！#[small / 20180119] 9 | 10 | 11 | -------------------------------------------------------------------------------- /module/traction.jade: -------------------------------------------------------------------------------- 1 | //- module 2 | .section.section-traction.bg-danger.text-light: .inner.text-center 3 | h2 我們的成果 4 | p 利用一些明確的數字可以給人更具體的感覺 5 | .sep(style="border-bottom:1px solid rgba(255,255,255,0.6);margin:40px auto;width:150px") 6 | .row 7 | .col-6.col-md-3 #[.huge 5] 次成果發表 8 | .col-6.col-md-3 #[.huge 9] 個實用案例 9 | .col-6.col-md-3 #[.huge 33] 個社群提起 10 | .col-6.col-md-3 #[.huge 2] 次實體活動 11 | 12 | -------------------------------------------------------------------------------- /module/contribute.jade: -------------------------------------------------------------------------------- 1 | //- module 2 | .section.section-contribute.bg-light.text-dark: .inner 3 | .text-center: h2 一起來開幹 4 | p 獎助金專案應懷抱開源的精神，歡迎大家一起來開幹。不過，要如何讓想幫忙的人一起來做呢？建議可以先提供一些最基本的資訊，例如專案庫、共筆、線上群組或聊天室頻道等讓新人可以先了解情況；若專案應用到群眾外包概念 ( 如開放政獻、真的假的 )，亦可將訪客導向相關的入口網。 5 | p 依照需求，這裡亦可以列出可能需要的協助，例如： 6 | ul 7 | li 你是有志青農嗎？阿龜誌徵求科技農夫試用者中，立刻來加一吧！ 8 | li 自己的長輩自己救 - 真的假的流言終結團團員募集中 9 | br 10 | .text-center 11 | .btn.btn-primary.btn-lg.mr-2 源碼庫 #[i.fa.fa-github] 12 | .btn.btn-primary.btn-lg 立刻來幫忙 13 | 14 | -------------------------------------------------------------------------------- /module/features.jade: -------------------------------------------------------------------------------- 1 | //- module 2 | .section.section-features: .inner 3 | .row 4 | .col-md 5 | .text-center: i.icon.fa.fa-wheelchair-alt 6 | .text-center: h5 只需改字即可實用 7 | p 重點文字直接用說明方式表達出來，方便用戶直接修改內文後立即套用。 8 | .col-md 9 | .text-center: i.icon.fa.fa-list 10 | .text-center: h5 內容的架構已預定 11 | p 敘事基本架構先準備好，照著內文的思路編排，可確保基本內容流暢。 12 | .col-md 13 | .text-center: i.icon.fa.fa-code 14 | .text-center: h5 開源自取且恰當授權 15 | p 開源於零時政府源碼庫，直接分支就可以使用，不用擔心找不到源碼。 16 | 17 | -------------------------------------------------------------------------------- /module/nav.jade: -------------------------------------------------------------------------------- 1 | //- module 2 | nav.navbar.navbar-expand-lg.navbar-dark.fixed-top 3 | a.navbar-brand(href="/") 專案名稱 4 | button.navbar-toggler(type="button",data-toggle="collapse",data-target="#navbarSupportedContent") 5 | span.navbar-toggler-icon 6 | .collapse.navbar-collapse 7 | ul.navbar-nav.ml-auto 8 | li.nav-item.active: a.nav-link(href="#") 關於專案 9 | li.nav-item.active: a.nav-link(href="#") 如何參與 10 | li.nav-item.active: a.nav-link(href="#") 新手教學 11 | li.nav-item.active: a.nav-link(href="#") 關於專案 12 | 13 | -------------------------------------------------------------------------------- /deploy: -------------------------------------------------------------------------------- 1 | REV=`git describe --always` 2 | git clone git@github.com:g0v/grants-landing-template --depth 1 -b gh-pages _public 3 | git clone git@github.com:g0v/grants-landing-template --depth 1 -b grants/middle2 _middle2 4 | git clone git@github.com:g0v/grants-landing-template --depth 1 -b master _master 5 | cd _public 6 | git rm -rf * 7 | rm -rf ../_master/.git 8 | rm -rf ../_middle2/.git 9 | cp -R ../_master/ ./ 10 | cp -R ../_middle2/ ./middle2/ 11 | git add * 12 | git commit -m "regen for $REV" 13 | git push 14 | cd .. 15 | rm -rf _public 16 | rm -rf _middle2 17 | rm -rf _master 18 | -------------------------------------------------------------------------------- /module/why.jade: -------------------------------------------------------------------------------- 1 | //- module 2 | .section.section-why.bg-light: .inner 3 | .text-center: h2 為什麼要做這個專案？ 4 | p 使用者了解了這是什麼專案以後，再來說明清楚為什麼要做這件事，為什麼要這樣做，做了可以帶來什麼好處。除了單純的文字，亦可穿插各種資源，例如影片、插畫、螢幕錄影、互動式體驗等等。 5 | p 下面的這一個例子可以想像成是一個插入的影片或插圖的效果，配合右方的敘述文字理解裡面想要表達的重點，亦從左方的數位內容營造出更具吸引人的效果。 6 | br 7 | .row 8 | .col: .media-preview(style="background:url(img/shaq.gif) center center no-repeat #444;background-size:cover") 9 | .col 10 | h4 就像是這樣 11 | .sep.light-dark.gap-sm 12 | p 左邊可以放一張圖、放個影片、放個動畫等等的東西，甚至有實際可以操作的實例，效果通常都會不錯喔！ 13 | .pull-right.mr-3: a(href="#"): small 了解更多的按鈕 #[i.fa.fa-arrow-right] 14 | 15 | -------------------------------------------------------------------------------- /module/trivia.jade: -------------------------------------------------------------------------------- 1 | //- module 2 | .section.section-trivia: .inner 3 | .text-center: h2 提供的選項有哪些？ 4 | p 如果你的專案做了許多事想要火力展示，卻又不適合寫一大堆東西的時候，做成迷你表列會更適合。 5 | br 6 | .row 7 | each item in [["Runtime","birthday-cake"],["Redis","bus"],["Scale","camera"],["Add-ons","calculator"],["Storage","bullhorn"],["AI","check-circle"],["Extensibility","cloud"],["Github","binoculars"]] 8 | .col-6.col-md-3 9 | .media 10 | i.fa.mr-2.mt-1(class="fa-" + item[1]) 11 | .media-body 12 | span.name: b #{item[0]} 13 | p(style="line-height:1.4em;font-size:0.6em;color:#444") 可以簡單介紹一下 #{item[0]}，長度不拘但各項間可以對齊。 14 | 15 | -------------------------------------------------------------------------------- /module/footer.jade: -------------------------------------------------------------------------------- 1 | //- module 2 | .section.section-footer.bg-dark.text-light: .inner 3 | .row 4 | .col-12.col-md-8 5 | .row 6 | .col-6.col-md-4 7 | label 本專案 8 | .item: a(href="#") 關於我們 9 | .item: a(href="#") 原始提案 10 | .item: a(href="#") 源碼庫 11 | .item: a(href="#") 社群專頁 12 | .item: a(href="#") 聯絡窗口 13 | .col-6.col-md-4 14 | label 注意事項 15 | .item: a(href="#") 使用條款 16 | .item: a(href="#") 隱私權政策 17 | .item: a(href="#") 成果授權 18 | .col-12.col-md-4.text-center 19 | a(href="https://grants.g0v.tw/power/",target="_blank") 20 | img(src="img/poweredby-square-i.svg",style="width:256px",alt="Powered by g0v") 21 | 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "Kirby Wu", 3 | "name": "grants-landing-template", 4 | "description": "grants default landing page template", 5 | "version": "0.0.1", 6 | "homepage": "https://github.com/g0v/grants-landing-template", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/g0v/grants-landing-template" 10 | }, 11 | "engines": { 12 | "node": ">=0.12.6", 13 | "npm": ">=1.2.2" 14 | }, 15 | "scripts": { 16 | "start": "node_modules/.bin/lsc server.ls", 17 | "restart": "node_modules\\.bin\\lsc server.ls", 18 | "prepare": "npm install chokidar@1.7.0" 19 | }, 20 | "dependencies": { 21 | "LiveScript": ">=1.2.0", 22 | "chokidar": "^1.7.0", 23 | "jade": "=1.11.0", 24 | "js-yaml": "^3.10.0", 25 | "markdown": "=0.5.0", 26 | "stylus": "=0.50.0", 27 | "uglify-js": "=3.2.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # g0v grants landing template 2 | 3 | 此為 [零時政府公民科技創新獎助金 ( g0v grant ) ](https://grants.g0v.tw) 獲獎專案首頁樣板。有鑑於各專案都處於超展開狀態，有時對於基本門面不太在意，因此我們準備了一個現成可套用的首頁參考樣板設計，各專案可直接分支使用、參考使用、或是仍然可以自己重頭打造一個簡潔的專案到達頁。 4 | 5 | ## 基本概念 6 | 7 | 做為專案到達頁 ( Landing Page )，首要的是做好新訪客的體驗。此到達頁樣板的訪客流程預想如下： 8 | 9 | * 主要針對「對這個專案有點興趣、又還不是很清楚這個專案在幹嘛」的訪客 10 | * 進入流程由 What, Why, How 引導讀者了解，並穿插以下模組： 11 | * Landing - 簡短的專案印象、快速跳轉的功能鈕 12 | * News - 最新消息，最近的更新與進展，公告事項 13 | * What - 這個專案是什麼？ 14 | * Why - 為什麼要做這件事？ 15 | * 成果 - 目前的成績 ( 可隨時間更新 ) 16 | * Gallery - 活動照片、程式截圖等 17 | * How - 進一步區分成 18 | * 這件事要如何做到 19 | * 如何讓大眾一起參與 20 | * 了解更多 21 | * Footer - 其它輔助性的連結與 「 powered by g0v 」 badge 22 | 23 | 各模組可依專案需求調整，樣板以參考性質為主，不一定要完全照著做。 24 | 25 | 26 | ## 樣版類型 27 | 28 | 常見的樣板列表，以及實作的狀況： 29 | 30 | * ☑ 主訴求 ( Jumbotron ) 31 | * ☑ 簡介 32 | * ☑ 實例介紹 33 | * ☑ 相片錦集 34 | * ☑ 主要特色 35 | * ☑ 成果數字 36 | * ☑ 功能列表 37 | * ☑ Call To Action 38 | * ☑ 贊助列表 39 | * ☑ Footer 40 | * ☑ 媒體報導 41 | * ☐ 用戶證言 42 | * ☐ 左右圖比較 43 | * ☐ 時序演變圖 44 | * ☐ 時間軸 45 | * ☐ 問答模組 46 | * ☐ 位置 ( 地圖 ) 47 | * ☐ 團隊介紹 48 | * ☐ 最新消息 49 | 50 | 51 | ## License 52 | 53 | 本專案以 CC0 開放授權釋出。 54 | 55 | 56 | -------------------------------------------------------------------------------- /basic.styl: -------------------------------------------------------------------------------- 1 | keyframes(name) 2 | width: 100% 3 | @-webkit-keyframes {name} 4 | {block} 5 | @-webkit-keyframes {name} 6 | {block} 7 | @-moz-keyframes {name} 8 | {block} 9 | @-ms-keyframes {name} 10 | {block} 11 | @keyframes {name} 12 | {block} 13 | 14 | transition() 15 | -ms-transition arguments 16 | -moz-transition arguments 17 | -webkit-transition arguments 18 | -o-transition arguments 19 | transition arguments 20 | 21 | transform() 22 | -ms-transform arguments 23 | -moz-transform arguments 24 | -webkit-transform arguments 25 | -o-transform arguments 26 | transform arguments 27 | 28 | animation() 29 | -ms-animation arguments 30 | -moz-animation arguments 31 | -webkit-animation arguments 32 | -o-animation arguments 33 | animation arguments 34 | 35 | animation-delay() 36 | -ms-animation-delay arguments 37 | -moz-animation-delay arguments 38 | -webkit-animation-delay arguments 39 | -o-animation-delay arguments 40 | animation-delay arguments 41 | 42 | no-selection() 43 | -webkit-touch-callout: none 44 | -webkit-user-select: none 45 | -khtml-user-select: none 46 | -moz-user-select: none 47 | -ms-user-select: none 48 | user-select: none 49 | 50 | ellipsis() 51 | white-space: nowrap 52 | overflow: hidden 53 | text-overflow: ellipsis 54 | 55 | flexbox() 56 | display: -webkit-flex 57 | display: flex 58 | 59 | flex-wrap(arg) 60 | -webkit-flex-wrap: arg 61 | flex-wrap: arg 62 | 63 | flex(arg) 64 | -webkit-flex: arg 65 | flex: arg 66 | 67 | -------------------------------------------------------------------------------- /index.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | meta(property="og:locale",content="zh_TW") 5 | meta(property="og:title",content="獎助金專案樣板") 6 | meta(property="og:type",content="article") 7 | meta(property="og:url",content="https://g0v.github.io/grants-landing-template") 8 | meta(property="og:image",content="https://g0v.github.io/grants-landing-template/img/thumbnail.jpg") 9 | meta(property="og:image:type",content="image/jpg") 10 | meta(property="og:image:width",content="1084") 11 | meta(property="og:image:height",content="631") 12 | meta(property="og:description",content="獎助金專案專用的一頁式專案說明樣板") 13 | meta(property="article:author",content="zbryikt") 14 | meta(property="article:section",content="Taiwan") 15 | meta(name="viewport" content="width=device-width; initial-scale=1.0;") 16 | meta(charset="utf-8") 17 | link(rel="stylesheet",type="text/css", 18 | href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css") 19 | link(rel="stylesheet",href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css") 20 | link(rel="stylesheet",type="text/css",href="index.css") 21 | 22 | body 23 | include module/nav.jade 24 | include module/jumbotron.jade 25 | include module/news.jade 26 | include module/what.jade 27 | include module/features.jade 28 | include module/why.jade 29 | include module/traction.jade 30 | include module/photos.jade 31 | include module/trivia.jade 32 | include module/media.jade 33 | include module/how.jade 34 | include module/contribute.jade 35 | include module/footer.jade 36 | -------------------------------------------------------------------------------- /index.styl: -------------------------------------------------------------------------------- 1 | @import vars 2 | @import basic 3 | 4 | html,body 5 | width: 100% 6 | height: 100% 7 | margin: 0 8 | padding: 0 9 | font-size: 22px 10 | font-family: wt011, Helvetica, Arial, sans-serif 11 | 12 | h1,h2,h3,h4,h5 13 | font-weight: 900 14 | 15 | nav 16 | text-shadow: 0 0 2px rgba(0,0,0,.3) 17 | font-size: 0.9em 18 | 19 | .jumbotron 20 | height: 100% 21 | max-height: 640px 22 | margin-bottom: 0 23 | position: relative 24 | background: url(img/jumbotron.jpg) center center no-repeat #222 25 | background-size: cover 26 | border-radius: 0 27 | .text-center 28 | position: absolute 29 | top: 0 30 | left: 0 31 | right: 0 32 | bottom: 0 33 | margin: auto 34 | height: 210px 35 | 36 | .section 37 | padding: 80px 20px 38 | 39 | .inner 40 | margin: 0 auto; 41 | max-width: 1024px 42 | 43 | 44 | h2 45 | margin-bottom: 50px 46 | 47 | .huge 48 | font-size: 3em 49 | font-weight: 900 50 | 51 | .section-photos 52 | padding: 0 53 | 54 | .section-photos .inner 55 | display: flex 56 | flex-wrap(wrap) 57 | width: 100% 58 | max-width:100% 59 | 60 | .section-photos .photo 61 | flex(1 1 auto) 62 | width: 33% 63 | height: 270px 64 | background-color: #000 65 | background-position: center center 66 | background-size: cover 67 | box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2) 68 | .mask 69 | content: " " 70 | width: 100% 71 | height: 100% 72 | display: block 73 | background: #000 74 | opacity: 0.5 75 | &:hover .mask 76 | opacity: 0 77 | 78 | .section-features 79 | padding-top: 90px 80 | .icon 81 | font-size: 90px 82 | margin-bottom: 40px 83 | p 84 | font-size: 0.9em 85 | color: #555 86 | 87 | .section-footer 88 | a 89 | color: #9be 90 | 91 | .media-preview 92 | border: 1px solid #ddd 93 | border-radius: 3px 94 | background: #444 95 | width: 100% 96 | height: 250px 97 | box-shadow: 0 1px 3px rgba(0,0,0,0.2) 98 | 99 | .sep.gap-sm 100 | margin: 15px 0 101 | .sep.gap 102 | margin: 30px 0 103 | .sep.gap-lg 104 | margin: 60px 0 105 | .sep.light 106 | border-bottom: 1px solid rgba(255,255,255,0.5) 107 | .sep.dark 108 | border-bottom: 1px solid rgba(0,0,0,0.5) 109 | .sep.light-dark 110 | border-bottom: 1px solid rgba(0,0,0,0.1) 111 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | width: 100%; 4 | height: 100%; 5 | margin: 0; 6 | padding: 0; 7 | font-size: 22px; 8 | font-family: wt011, Helvetica, Arial, sans-serif; 9 | } 10 | h1, 11 | h2, 12 | h3, 13 | h4, 14 | h5 { 15 | font-weight: 900; 16 | } 17 | nav { 18 | text-shadow: 0 0 2px rgba(0,0,0,0.3); 19 | font-size: 0.9em; 20 | } 21 | .jumbotron { 22 | height: 100%; 23 | max-height: 640px; 24 | margin-bottom: 0; 25 | position: relative; 26 | background: url("img/jumbotron.jpg") center center no-repeat #222; 27 | background-size: cover; 28 | border-radius: 0; 29 | } 30 | .jumbotron .text-center { 31 | position: absolute; 32 | top: 0; 33 | left: 0; 34 | right: 0; 35 | bottom: 0; 36 | margin: auto; 37 | height: 210px; 38 | } 39 | .section { 40 | padding: 80px 20px; 41 | } 42 | .section .inner { 43 | margin: 0 auto; 44 | max-width: 1024px; 45 | } 46 | h2 { 47 | margin-bottom: 50px; 48 | } 49 | .huge { 50 | font-size: 3em; 51 | font-weight: 900; 52 | } 53 | .section-photos { 54 | padding: 0; 55 | } 56 | .section-photos .inner { 57 | display: flex; 58 | -webkit-flex-wrap: wrap; 59 | flex-wrap: wrap; 60 | width: 100%; 61 | max-width: 100%; 62 | } 63 | .section-photos .photo { 64 | -webkit-flex: 1 1 auto; 65 | flex: 1 1 auto; 66 | width: 33%; 67 | height: 270px; 68 | background-color: #000; 69 | background-position: center center; 70 | background-size: cover; 71 | box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); 72 | } 73 | .section-photos .photo .mask { 74 | content: " "; 75 | width: 100%; 76 | height: 100%; 77 | display: block; 78 | background: #000; 79 | opacity: 0.5; 80 | } 81 | .section-photos .photo:hover .mask { 82 | opacity: 0; 83 | } 84 | .section-features { 85 | padding-top: 90px; 86 | } 87 | .section-features .icon { 88 | font-size: 90px; 89 | margin-bottom: 40px; 90 | } 91 | .section-features p { 92 | font-size: 0.9em; 93 | color: #555; 94 | } 95 | .section-footer a { 96 | color: #9be; 97 | } 98 | .media-preview { 99 | border: 1px solid #ddd; 100 | border-radius: 3px; 101 | background: #444; 102 | width: 100%; 103 | height: 250px; 104 | box-shadow: 0 1px 3px rgba(0,0,0,0.2); 105 | } 106 | .sep.gap-sm { 107 | margin: 15px 0; 108 | } 109 | .sep.gap { 110 | margin: 30px 0; 111 | } 112 | .sep.gap-lg { 113 | margin: 60px 0; 114 | } 115 | .sep.light { 116 | border-bottom: 1px solid rgba(255,255,255,0.5); 117 | } 118 | .sep.dark { 119 | border-bottom: 1px solid rgba(0,0,0,0.5); 120 | } 121 | .sep.light-dark { 122 | border-bottom: 1px solid rgba(0,0,0,0.1); 123 | } 124 | -------------------------------------------------------------------------------- /img/poweredby-square-i.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 26 | 30 | 31 | 32 | 33 | 34 | 35 | 39 | 40 | 41 | 44 | 49 | 51 | 52 | 55 | 56 | 59 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /img/poweredby-square.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 26 | 30 | 31 | 32 | 33 | 34 | 35 | 39 | 40 | 41 | 44 | 49 | 51 | 52 | 55 | 56 | 59 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 |

具有說服力的一具短話

再稍微細節一點解釋這個專案的幾句話，以一到兩行的長度為主


現在就開始使用

最新消息

什麼是這個專案？

簡單扼要的說明這個專案是什麼，或者輔以一些實例、一些使用情境。比方說，Cofact ( 在截稿日前 ) 的首頁只有一個文章列表，就需要一個更清楚的說明。

分項式的說明可以更聚焦地說明專案的特色或要點，也可以附上圖示 ( optional )：

只需改字即可實用

重點文字直接用說明方式表達出來，方便用戶直接修改內文後立即套用。

內容的架構已預定

敘事基本架構先準備好，照著內文的思路編排，可確保基本內容流暢。

開源自取且恰當授權

開源於零時政府源碼庫，直接分支就可以使用，不用擔心找不到源碼。

為什麼要做這個專案？

使用者了解了這是什麼專案以後，再來說明清楚為什麼要做這件事，為什麼要這樣做，做了可以帶來什麼好處。除了單純的文字，亦可穿插各種資源，例如影片、插畫、螢幕錄影、互動式體驗等等。

下面的這一個例子可以想像成是一個插入的影片或插圖的效果，配合右方的敘述文字理解裡面想要表達的重點，亦從左方的數位內容營造出更具吸引人的效果。


就像是這樣

左邊可以放一張圖、放個影片、放個動畫等等的東西，甚至有實際可以操作的實例，效果通常都會不錯喔！

了解更多的按鈕

我們的成果

利用一些明確的數字可以給人更具體的感覺

5
次成果發表
9
個實用案例
33
個社群提起
2
次實體活動

提供的選項有哪些？

如果你的專案做了許多事想要火力展示，卻又不適合寫一大堆東西的時候，做成迷你表列會更適合。


Runtime

可以簡單介紹一下 Runtime，長度不拘但各項間可以對齊。

Redis

可以簡單介紹一下 Redis，長度不拘但各項間可以對齊。

Scale

可以簡單介紹一下 Scale，長度不拘但各項間可以對齊。

Add-ons

可以簡單介紹一下 Add-ons，長度不拘但各項間可以對齊。

Storage

可以簡單介紹一下 Storage，長度不拘但各項間可以對齊。

AI

可以簡單介紹一下 AI，長度不拘但各項間可以對齊。

Extensibility

可以簡單介紹一下 Extensibility，長度不拘但各項間可以對齊。

Github

可以簡單介紹一下 Github，長度不拘但各項間可以對齊。

媒體報導

要怎麼開始呢

何不放些文件與說明呢？請考慮到完全陌生的使用者，進入門檻跟上手的複雜度。


現在就開始

一起來開幹

獎助金專案應懷抱開源的精神，歡迎大家一起來開幹。不過，要如何讓想幫忙的人一起來做呢？建議可以先提供一些最基本的資訊，例如專案庫、共筆、線上群組或聊天室頻道等讓新人可以先了解情況；若專案應用到群眾外包概念 ( 如開放政獻、真的假的 )，亦可將訪客導向相關的入口網。

依照需求，這裡亦可以列出可能需要的協助，例如：


源碼庫
立刻來幫忙
關於我們
原始提案
源碼庫
社群專頁
聯絡窗口
使用條款
隱私權政策
成果授權
Powered by g0v
-------------------------------------------------------------------------------- /img/g0v-bg-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | g0v 5 | 6 | 7 | g0v,civic tech,open government,open data,open source,hackathon,code for all 8 | 9 | 10 | cc-by 11 | 12 | 13 | f0dssl 14 | -------------------------------------------------------------------------------- /img/g0v-bg-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | g0v 5 | 6 | 7 | g0v,civic tech,open government,open data,open source,hackathon,code for all 8 | 9 | 10 | cc-by 11 | 12 | 13 | f0dssl 14 | -------------------------------------------------------------------------------- /server.ls: -------------------------------------------------------------------------------- 1 | require! <[chokidar http fs path jade stylus markdown js-yaml]> 2 | require! 'uglify-js': uglify, LiveScript: lsc 3 | 4 | useMarkdown = true 5 | markdown = markdown.markdown 6 | 7 | RegExp.escape = -> it.replace /[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&" 8 | 9 | cwd = path.resolve process.cwd! 10 | cwd-re = new RegExp RegExp.escape "#cwd#{if cwd[* - 1]=='/' => "" else \/}" 11 | 12 | jade-extapi = do 13 | md: -> markdown.toHTML it 14 | yaml: -> js-yaml.safe-load fs.read-file-sync it 15 | yamls: (dir) -> 16 | ret = fs.readdir-sync dir 17 | .map -> "#dir/#it" 18 | .filter -> /\.yaml$/.exec(it) 19 | .map -> 20 | try 21 | js-yaml.safe-load(fs.read-file-sync it) 22 | catch e 23 | console.log "[ERROR@#it]: ", e 24 | return ret 25 | 26 | pad = -> if "#it".length < 2 => "0#it" else "#it" 27 | now = -> new Date! |> -> 28 | "[#{pad(it.getMonth! + 1)}/#{pad(it.getDate!)}" + 29 | " #{pad(it.getHours!)}:#{pad(it.getMinutes!)}:#{pad(it.getSeconds!)}]" 30 | 31 | _log = console.log 32 | console.log = (...arg) -> _log.apply null, [now!] ++ arg 33 | ignore-list = [/^server.ls$/, /^library.jade$/, /^\.[^/]+/, /^node_modules\//,/^assets\//] 34 | ignore-func = (f) -> if f => ignore-list.filter(-> it.exec f.replace(cwd-re, "")replace(/^\.\/+/, ""))length else 0 35 | 36 | type-table = 37 | "3gp":"video/3gpp", 38 | "aiff":"audio/x-aiff", 39 | "arj":"application/x-arj-compressed", 40 | "asf":"video/x-ms-asf", 41 | "asx":"video/x-ms-asx", 42 | "au":"audio/ulaw", 43 | "avi":"video/x-msvideo", 44 | "bcpio":"application/x-bcpio", 45 | "ccad":"application/clariscad", 46 | "cod":"application/vnd.rim.cod", 47 | "com":"application/x-msdos-program", 48 | "cpio":"application/x-cpio", 49 | "cpt":"application/mac-compactpro", 50 | "csh":"application/x-csh", 51 | "css":"text/css", 52 | "deb":"application/x-debian-package", 53 | "dl":"video/dl", 54 | "doc":"application/msword", 55 | "drw":"application/drafting", 56 | "dvi":"application/x-dvi", 57 | "dwg":"application/acad", 58 | "dxf":"application/dxf", 59 | "dxr":"application/x-director", 60 | "etx":"text/x-setext", 61 | "ez":"application/andrew-inset", 62 | "fli":"video/x-fli", 63 | "flv":"video/x-flv", 64 | "gif":"image/gif", 65 | "gl":"video/gl", 66 | "gtar":"application/x-gtar", 67 | "gz":"application/x-gzip", 68 | "hdf":"application/x-hdf", 69 | "hqx":"application/mac-binhex40", 70 | "html":"text/html", 71 | "ice":"x-conference/x-cooltalk", 72 | "ico":"image/x-icon", 73 | "ief":"image/ief", 74 | "igs":"model/iges", 75 | "ips":"application/x-ipscript", 76 | "ipx":"application/x-ipix", 77 | "jad":"text/vnd.sun.j2me.app-descriptor", 78 | "jar":"application/java-archive", 79 | "jpeg":"image/jpeg", 80 | "jpg":"image/jpeg", 81 | "js":"text/javascript", 82 | "json":"application/json", 83 | "latex":"application/x-latex", 84 | "lsp":"application/x-lisp", 85 | "lzh":"application/octet-stream", 86 | "m":"text/plain", 87 | "m3u":"audio/x-mpegurl", 88 | "m4v":"video/mp4", 89 | "man":"application/x-troff-man", 90 | "me":"application/x-troff-me", 91 | "midi":"audio/midi", 92 | "mif":"application/x-mif", 93 | "mime":"www/mime", 94 | "mkv":" video/x-matrosk", 95 | "movie":"video/x-sgi-movie", 96 | "mp4":"video/mp4", 97 | "mp41":"video/mp4", 98 | "mp42":"video/mp4", 99 | "mpg":"video/mpeg", 100 | "mpga":"audio/mpeg", 101 | "ms":"application/x-troff-ms", 102 | "mustache":"text/plain", 103 | "nc":"application/x-netcdf", 104 | "oda":"application/oda", 105 | "ogm":"application/ogg", 106 | "pbm":"image/x-portable-bitmap", 107 | "pdf":"application/pdf", 108 | "pgm":"image/x-portable-graymap", 109 | "pgn":"application/x-chess-pgn", 110 | "pgp":"application/pgp", 111 | "pm":"application/x-perl", 112 | "png":"image/png", 113 | "pnm":"image/x-portable-anymap", 114 | "ppm":"image/x-portable-pixmap", 115 | "ppz":"application/vnd.ms-powerpoint", 116 | "pre":"application/x-freelance", 117 | "prt":"application/pro_eng", 118 | "ps":"application/postscript", 119 | "qt":"video/quicktime", 120 | "ra":"audio/x-realaudio", 121 | "rar":"application/x-rar-compressed", 122 | "ras":"image/x-cmu-raster", 123 | "rgb":"image/x-rgb", 124 | "rm":"audio/x-pn-realaudio", 125 | "rpm":"audio/x-pn-realaudio-plugin", 126 | "rtf":"text/rtf", 127 | "rtx":"text/richtext", 128 | "scm":"application/x-lotusscreencam", 129 | "set":"application/set", 130 | "sgml":"text/sgml", 131 | "sh":"application/x-sh", 132 | "shar":"application/x-shar", 133 | "silo":"model/mesh", 134 | "sit":"application/x-stuffit", 135 | "skt":"application/x-koan", 136 | "smil":"application/smil", 137 | "snd":"audio/basic", 138 | "sol":"application/solids", 139 | "spl":"application/x-futuresplash", 140 | "src":"application/x-wais-source", 141 | "stl":"application/SLA", 142 | "stp":"application/STEP", 143 | "sv4cpio":"application/x-sv4cpio", 144 | "sv4crc":"application/x-sv4crc", 145 | "svg":"image/svg+xml", 146 | "swf":"application/x-shockwave-flash", 147 | "tar":"application/x-tar", 148 | "tcl":"application/x-tcl", 149 | "tex":"application/x-tex", 150 | "texinfo":"application/x-texinfo", 151 | "tgz":"application/x-tar-gz", 152 | "tiff":"image/tiff", 153 | "tr":"application/x-troff", 154 | "tsi":"audio/TSP-audio", 155 | "tsp":"application/dsptype", 156 | "tsv":"text/tab-separated-values", 157 | "unv":"application/i-deas", 158 | "ustar":"application/x-ustar", 159 | "vcd":"application/x-cdlink", 160 | "vda":"application/vda", 161 | "vivo":"video/vnd.vivo", 162 | "vrm":"x-world/x-vrml", 163 | "wav":"audio/x-wav", 164 | "wax":"audio/x-ms-wax", 165 | "webm":"video/webm", 166 | "wma":"audio/x-ms-wma", 167 | "wmv":"video/x-ms-wmv", 168 | "wmx":"video/x-ms-wmx", 169 | "wrl":"model/vrml", 170 | "wvx":"video/x-ms-wvx", 171 | "xbm":"image/x-xbitmap", 172 | "xlw":"application/vnd.ms-excel", 173 | "xml":"text/xml", 174 | "xpm":"image/x-xpixmap", 175 | "xwd":"image/x-xwindowdump", 176 | "xyz":"chemical/x-pdb", 177 | "zip":"application/zip" 178 | 179 | watch-path = \. 180 | 181 | mkdir-recurse = (f) -> 182 | if fs.exists-sync f => return 183 | parent = path.dirname(f) 184 | if !fs.exists-sync parent => mkdir-recurse parent 185 | fs.mkdir-sync f 186 | 187 | styl-tree = do 188 | down-hash: {} 189 | up-hash: {} 190 | parse: (filename) -> 191 | dir = path.dirname(filename) 192 | ret = fs.read-file-sync filename .toString!split \\n .map(-> /^ *@import (.+)/.exec it)filter(->it)map(->it.1) 193 | ret = ret.map -> path.join(dir, it.replace(/(\.styl)?$/, ".styl")) 194 | @down-hash[filename] = ret 195 | for it in ret => if not (filename in @up-hash.[][it]) => @up-hash.[][it].push filename 196 | find-root: (filename) -> 197 | work = [filename] 198 | ret = [] 199 | while work.length > 0 200 | f = work.pop! 201 | if @up-hash.[][f].length == 0 => ret.push f 202 | else work ++= @up-hash[f] 203 | ret 204 | 205 | ctype = (name=null) -> 206 | if useMarkdown and /\.md$/.exec(name) => return \text/html 207 | ret = /\.([^.]+)$/.exec name 208 | return \application/octet-stream if not ret or not ret.1 or not type-table[ret.1] 209 | return type-table[ret.1] 210 | 211 | ftype = -> 212 | switch 213 | | /\.ls$/.exec it => "ls" 214 | | /\.styl/.exec it => "styl" 215 | | /\.jade$/.exec it => "jade" 216 | | otherwise => "other" 217 | 218 | # assign functions to route-table for server side script routing 219 | sample-cgi = (req, res) -> 220 | res.writeHead 200, {"Content-type": "text/html"} 221 | res.end "hello world!" 222 | route-table = {"/sample-cgi": sample-cgi} 223 | 224 | server = (req, res) -> 225 | req.url = req.url - /[?#].*$/ 226 | file-path = path.resolve cwd, ".#{req.url}" 227 | if file-path.indexOf(cwd) < 0 => 228 | res.writeHead 403, ctype! 229 | return res.end "#{req.url} forbidden" 230 | 231 | # custom server side script 232 | rel-path = file-path.replace cwd, "" 233 | if rel-path of route-table => return route-table[rel-path] req, res 234 | 235 | # directory: give index.html, or generate a list of files 236 | if fs.existsSync(file-path) and fs.lstatSync(file-path)isDirectory! => 237 | dir = file-path.replace /\/$/,"" 238 | file-path = "#{file-path}/index.html" 239 | if not fs.existsSync(file-path) => 240 | files = fs.readdirSync dir 241 | dir = req.url.replace /\/$/,"" 242 | res.writeHead 200, {"Content-type": \text/html} 243 | res.write "

#{dir}

\n\n 246 | 247 | # file not exists: 404 248 | if not fs.existsSync(file-path) => 249 | res.writeHead 404, ctype! 250 | return res.end "#{req.url} not found" 251 | console.log "[ GET ] #{file-path} (#{ctype file-path})" 252 | 253 | length = 0 254 | buf = fs.readFileSync file-path 255 | if useMarkdown => 256 | if /\.md$/.exec(file-path) => 257 | buf = markdown.toHTML(buf.toString!).toString! 258 | buf = [ 259 | '' 260 | '' 261 | buf 262 | ].join("") 263 | length = Buffer.byteLength buf, 'utf-8' 264 | 265 | res.writeHead 200, do 266 | "Content-Length": length or buf.length 267 | "Content-Type": ctype file-path 268 | res.end buf 269 | 270 | log = (error, stdout, stderr) -> if "#{stdout}\n#{stderr}".trim! => console.log that 271 | filecache = {} 272 | update-file = -> 273 | if !it or /node_modules|\.swp$/.exec(it)=> return 274 | src = if it.0 != \/ => path.join(cwd,it) else it 275 | src = src.replace path.join(cwd,\/), "" 276 | [type,cmd,des] = [ftype(src), "",""] 277 | 278 | if type == \other => return 279 | if type == \ls => 280 | if /src\/ls/.exec src => 281 | try 282 | files = fs.readdir-sync \src/ls/ .map -> "src/ls/#it" 283 | files = files.filter -> (/\/\./.exec it) == null 284 | result = [uglify.minify(lsc.compile(fs.read-file-sync(file)toString!,{bare:true}),{fromString:true}).code for file in files].join("") 285 | fs.write-file-sync "build.min.js", result 286 | console.log "[BUILD] #src --> build.min.js" 287 | catch 288 | console.log "[BUILD] #src failed: " 289 | console.log e.message 290 | return 291 | else => 292 | des = src.replace /\.ls$/, ".js" 293 | try 294 | mkdir-recurse path.dirname(des) 295 | fs.write-file-sync( 296 | des, 297 | uglify.minify(lsc.compile(fs.read-file-sync(src)toString!,{bare:true}),{fromString:true}).code 298 | ) 299 | console.log "[BUILD] #src --> #des" 300 | catch 301 | console.log "[BUILD] #src failed: " 302 | console.log e.message 303 | return 304 | if type == \styl => 305 | if /(basic|vars)\.styl/.exec it => return 306 | try 307 | styl-tree.parse src 308 | srcs = styl-tree.find-root src 309 | catch 310 | console.log "[BUILD] #src failed: " 311 | console.log e.message 312 | 313 | console.log "[BUILD] recursive from #src:" 314 | for src in srcs 315 | try 316 | des = src.replace(/src\/styl/, "static/css").replace(/\.styl$/, ".css") 317 | code = fs.read-file-sync(src)toString! 318 | if /^\/\/- ?(module) ?/.exec(code) => continue 319 | stylus code 320 | .set \filename, src 321 | .define 'index', (a,b) -> 322 | a = (a.string or a.val).split(' ') 323 | return new stylus.nodes.Unit(a.indexOf b.val) 324 | .render (e, css) -> 325 | if e => 326 | console.log "[BUILD] #src failed: " 327 | console.log " >>>", e.name 328 | console.log " >>>", e.message 329 | else => 330 | mkdir-recurse path.dirname(des) 331 | fs.write-file-sync des, css 332 | console.log "[BUILD] #src --> #des" 333 | catch 334 | console.log "[BUILD] #src failed: " 335 | console.log e.message 336 | 337 | if type == \jade => 338 | des = src.replace /\.jade$/, ".html" 339 | try 340 | code = fs.read-file-sync src .toString! 341 | if /^\/\/- ?(module|view) ?/.exec(code) => return 342 | desdir = path.dirname(des) 343 | if !fs.exists-sync(desdir) or !fs.stat-sync(desdir).is-directory! => mkdir-recurse desdir 344 | fs.write-file-sync des, jade.render code, {filename: src, basedir: path.join(cwd)} <<< jade-extapi 345 | console.log "[BUILD] #src --> #des" 346 | catch 347 | console.log "[BUILD] #src failed: " 348 | console.log e.message 349 | return 350 | 351 | 352 | watcher = chokidar.watch watch-path, ignored: ignore-func, persistent: true 353 | .on \add, update-file 354 | .on \change, update-file 355 | 356 | http.createServer server .listen 9999, \0.0.0.0 357 | 358 | console.log "running server on 0.0.0.0:9999" 359 | --------------------------------------------------------------------------------