Language switch for landing page

cofacts · Jun 11, 2018 · 0cb80e1 · 0cb80e1
1 parent f212068
commit 0cb80e1
Show file tree

Hide file tree

Showing 5 changed files with 194 additions and 7 deletions.
diff --git a/server.js b/server.js
@@ -43,10 +43,20 @@ app.prepare().then(() => {
 
   //
   server.use(async (ctx, next) => {
-    if ('/' === ctx.path) {
-      await send(ctx, './static/index.html');
-    } else {
-      await next();
+    switch (ctx.path) {
+      case '/': {
+        const lang = ctx.acceptsLanguages(['zh', 'en']).replace('zh', 'tw');
+        await send(ctx, `./static/index-${lang}.html`);
+        break;
+      }
+      case '/en':
+        await send(ctx, './static/index-en.html');
+        break;
+      case '/tw':
+        await send(ctx, './static/index-tw.html');
+        break;
+      default:
+        await next();
     }
   });
 

diff --git a/static/index.css → static/index-en.css b/static/index.css → static/index-en.css
diff --git a/static/index.html → static/index-en.html b/static/index.html → static/index-en.html
diff --git a/static/index-tw.css b/static/index-tw.css
@@ -0,0 +1,163 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-size: 22px;
+  font-family: wt011, Helvetica, Arial, sans-serif;
+}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-weight: 900;
+}
+nav {
+  text-shadow: 0 0 2px rgba(0,0,0,0.3);
+  font-size: 0.9em;
+}
+.jumbotron {
+  height: 100%;
+  max-height: 640px;
+  margin-bottom: 0;
+  position: relative;
+  background: url("img/jumbotron.jpg") center center no-repeat #222;
+  background-size: cover;
+  border-radius: 0;
+}
+.jumbotron .text-center {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  height: 210px;
+}
+.jumbotron .emphasis {
+  font-style: normal;
+  color: #ffc107;
+}
+.section {
+  padding: 80px 20px;
+}
+.section .inner {
+  margin: 0 auto;
+  max-width: 1024px;
+}
+h2 {
+  margin-bottom: 50px;
+}
+.huge {
+  font-size: 3em;
+  font-weight: 900;
+}
+.section-line {
+  padding: 0 40px;
+}
+.section-line .inner {
+  display: flex;
+  flex-flow: wrap;
+  justify-content: center;
+  align-items: flex-end;
+}
+.section-line .content {
+  padding: 40px 0;
+  min-width: 50%;
+  -webkit-flex: 1;
+  flex: 1;
+}
+.phone-container {
+  margin: 0 20px;
+  max-width: 100%;
+  width: 360px;
+  overflow: hidden;
+}
+.phone-container .phone-img {
+  width: 100%;
+  padding-bottom: 150%;
+  background: url("img/phone.png") top left;
+  background-size: cover;
+  position: relative;
+}
+.phone-container video {
+  position: absolute;
+  width: 78%;
+  left: 11%;
+  top: 14%;
+}
+.section-why {
+  background: #fff url("img/cofacts-db-bg.jpg") bottom left no-repeat;
+}
+.section-why p {
+  background: rgba(255,255,255,0.6);
+}
+.section-photos {
+  padding: 0;
+}
+.section-photos .inner {
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  flex-wrap: wrap;
+  width: 100%;
+  max-width: 100%;
+}
+.section-photos .photo {
+  -webkit-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 33%;
+  height: 270px;
+  background-color: #000;
+  background-position: center center;
+  background-size: cover;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
+}
+.section-photos .photo .mask {
+  content: " ";
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: #000;
+  opacity: 0.5;
+}
+.section-photos .photo:hover .mask {
+  opacity: 0;
+}
+.section-features {
+  padding-top: 90px;
+}
+.section-features .icon {
+  font-size: 90px;
+  margin-bottom: 40px;
+}
+.section-features p {
+  font-size: 0.9em;
+  color: #555;
+}
+.section-contribute {
+  background: #fff url("img/giraffe.jpg") bottom right no-repeat;
+  background-size: 150px auto;
+}
+.section-footer a {
+  color: #9be;
+}
+.sep.gap-sm {
+  margin: 15px 0;
+}
+.sep.gap {
+  margin: 30px 0;
+}
+.sep.gap-lg {
+  margin: 60px 0;
+}
+.sep.light {
+  border-bottom: 1px solid rgba(255,255,255,0.5);
+}
+.sep.dark {
+  border-bottom: 1px solid rgba(0,0,0,0.5);
+}
+.sep.light-dark {
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+}
diff --git a/static/index-tw.html b/static/index-tw.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html><html lang="zh-TW"><head><meta property="og:locale" content="zh_TW"><meta property="og:title" content="Cofacts 真的假的 - 協作型事實查核系統"><meta property="og:type" content="article"><meta property="og:url" content="https://cofacts.g0v.tw"><meta property="og:image" content="https://cofacts.g0v.tw/static/img/ogimage.png"><meta property="og:image:type" content="image/png"><meta property="og:image:width" content="1920"><meta property="og:image:height" content="1271"><meta property="og:description" content="「Cofacts 真的假的」是一套連結網路訊息與事實查核的協作型系統。"><meta property="article:author" content="MrOrz"><meta property="article:section" content="Taiwan"><meta name="viewport" content="width=device-width; initial-scale=1.0;"><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"><link rel="stylesheet" type="text/css" href="/static/index-tw.css"><link href="//fonts.googleapis.com/css?family=Asap:400" rel="stylesheet" type="text/css"><script type="text/javascript">var _jf = _jf || [];_jf.push(['p','53936']);_jf.push(['_setFont','wt011','css','.wt011']);_jf.push(['_setFont','wt011','alias','wt011']);_jf.push(['_setFont','wt011','english','Asap']);_jf.push(['_setFont','wt011','weight',400]);(function(f,q,c,h,e,i,r,d){var k=f._jf;if(k.constructor===Object){return}var l,t=q.getElementsByTagName("html")[0],a=function(u){for(var v in k){if(k[v][0]==u){if(false===k[v][1].call(k)){break}}}},j=/\S+/g,o=/[\t\r\n\f]/g,b=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,g="".trim,s=g&&!g.call("\uFEFF\xA0")?function(u){return u==null?"":g.call(u)}:function(u){return u==null?"":(u+"").replace(b,"")},m=function(y){var w,z,v,u,x=typeof y==="string"&&y;if(x){w=(y||"").match(j)||[];z=t[c]?(" "+t[c]+" ").replace(o," "):" ";if(z){u=0;while((v=w[u++])){if(z.indexOf(" "+v+" ")<0){z+=v+" "}}t[c]=s(z)}}},p=function(y){var w,z,v,u,x=arguments.length===0||typeof y==="string"&&y;if(x){w=(y||"").match(j)||[];z=t[c]?(" "+t[c]+" ").replace(o," "):"";if(z){u=0;while((v=w[u++])){while(z.indexOf(" "+v+" ")>=0){z=z.replace(" "+v+" "," ")}}t[c]=y?s(z):""}}},n;k.push(["_eventActived",function(){p(h);m(e)}]);k.push(["_eventInactived",function(){p(h);m(i)}]);k.addScript=n=function(u,A,w,C,E,B){E=E||function(){};B=B||function(){};var x=q.createElement("script"),z=q.getElementsByTagName("script")[0],v,y=false,D=function(){x.src="";x.onerror=x.onload=x.onreadystatechange=null;x.parentNode.removeChild(x);x=null;a("_eventInactived");B()};if(C){v=setTimeout(function(){D()},C)}x.type=A||"text/javascript";x.async=w;x.onload=x.onreadystatechange=function(G,F){if(!y&&(!x.readyState||/loaded|complete/.test(x.readyState))){y=true;if(C){clearTimeout(v)}x.src="";x.onerror=x.onload=x.onreadystatechange=null;x.parentNode.removeChild(x);x=null;if(!F){setTimeout(function(){E()},200)}}};x.onerror=function(H,G,F){if(C){clearTimeout(v)}D();return true};x.src=u;z.parentNode.insertBefore(x,z)};a("_eventPreload");m(h);n(r,"text/javascript",false,3000)})(this,this.document,"className","jf-loading","jf-active","jf-inactive","//d3gc6cgx8oosp4.cloudfront.net/js/stable/v/5.0.3/id/232745737846");
+
+</script></head><body><nav class="navbar navbar-expand-lg navbar-dark fixed-top"><a href="/" class="navbar-brand">Cofacts</a><button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse"><ul class="navbar-nav ml-auto"><li class="nav-item active"><a href="/articles" class="nav-link">謠言資料庫</a></li><li class="nav-item active"><a href="/replies" class="nav-link">回應列表</a></li><li class="nav-item active"><a href="https://www.facebook.com/groups/cofacts/permalink/1959641497601003/" class="nav-link">Facebook</a></li><li class="nav-item active"><a href="https://beta.hackfoldr.org/cofacts" class="nav-link">Hackfoldr</a></li></ul></div></nav><div class="jumbotron text-light"><div class="text-center"><h1 class="mb-2">你知道你<span id="short-name">媽</span>在<em class="emphasis">轉傳謠言</em>嗎？</h1><div style="border-bottom:1px solid rgba(255,255,255,0.3);margin:20px"></div><p>現在就加入 LINE bot 與 Cofacts 編輯<br>地方的<span id="long-name">媽媽</span>需要你來闢謠！</p><br><a style="width:280px" href="/articles" class="btn btn-danger btn-lg">立刻開始闢謠</a></div></div><script>var randomCharacters = [
+  {short: '媽', long: '媽媽'},
+  {short: '爸', long: '爸爸'},
+  {short: '妹', long: '妹妹'},
+  {short: '姐', long: '姊姊'},
+  {short: '弟', long: '弟弟'},
+  {short: '哥', long: '哥哥'},
+  {short: '家同事', long: '同事'},
+  {short: '家小孩', long: '孩子'},
+];
+var chosenCharacter = randomCharacters[Math.floor(Math.random()*randomCharacters.length)];
+document.getElementById('short-name').innerHTML = chosenCharacter.short;
+document.getElementById('long-name').innerHTML = chosenCharacter.long;</script><div class="section bg-warning section-line"><div class="inner"><div class="content"><h4>開 LINE 加好友，謠言隨手查!</h4><div class="sep light-dark gap-sm"></div><p>id 搜尋 @cofacts 或是掃描 QR Code 成為真的假的 Cofacts 的 LINE 好友後，轉傳可疑的謠言訊息給他，就可以讓機器人幫你查謠言囉！</p><p><a href="https://hackmd.io/s/Bk06LhrxG" target="_blank"><small>使用教學 <i class="fa fa-arrow-right"></i></small></a></p><p><img src="/static/img/qr-code.png"></p></div><div class="phone-container"><div class="phone-img"><video poster="/static/img/recording-still.gif" src="/static/img/recording.mp4" autoplay loop muted></video></div></div></div></div><div class="section section-why bg-light"><div class="inner"><div class="text-center"><h2>自己的回應自己寫</h2></div><p>使用者所看到的回應，是由其他同樣是使用者的人所寫出來的喔。我們沒有全知全能的判斷者，只有互相貢獻的公民協作。覺得別人的回應回得不夠好嗎？你想知道的事情還沒有人查證過嗎？自己寫出新回應，一起幫助更多人。</p><p>資料庫裡每一則可疑的轉傳文章都是來自某位使用者，公開檢索，讓你查證後給予回應。一則文章也可以有不同人分別給予各自的回應，讓新的回應比舊的回應更好。</p><p class="text-center"><a href="/articles" class="btn btn-secondary btn-lg mr-2">謠言資料庫檢索 <i class="fa fa-database"></i></a></p></div></div><div class="section section-traction bg-danger text-light"><div class="inner text-center"><h2>謠言與回應的追逐戰</h2><p>這是我們目前在面對的事情</p><div style="border-bottom:1px solid rgba(255,255,255,0.6);margin:40px auto;width:150px" class="sep"></div><div class="row"><div class="col-6 col-md-3">每週有 <div class="huge">250</div> 則新訊息進入資料庫</div><div class="col-6 col-md-3">每週有 <div class="huge">210</div> 人發新訊息至資料庫</div><div class="col-6 col-md-3">每週僅 <div class="huge">12</div> 名編輯上線闢謠</div><div class="col-6 col-md-3">每 <div class="huge">2</div> 個月舉辦<a href="https://cofacts.kktix.cc/">編輯小聚</a></div></div></div></div><div class="section section-photos"><div class="inner"><div style="background-image:url(/static/img/gallery/1.jpg)" class="photo"><div class="mask"></div></div><div style="background-image:url(/static/img/gallery/2.jpg)" class="photo"><div class="mask"></div></div><div style="background-image:url(/static/img/gallery/3.jpg)" class="photo"><div class="mask"></div></div><div style="background-image:url(/static/img/gallery/4.jpg)" class="photo"><div class="mask"></div></div><div style="background-image:url(/static/img/gallery/5.jpg)" class="photo"><div class="mask"></div></div><div style="background-image:url(/static/img/gallery/6.jpg)" class="photo"><div class="mask"></div></div></div></div><div class="section section-trivia"><div class="inner"><div class="text-center"><h2>Cofacts 特色</h2></div><p>Cofacts 謠言查證專案 致力於鼓勵所有人都一起成為別人的聊天機器人。只要主動查證謠言訊息，把你查到的回應加入資料庫，就能進而幫助更多人。</p><br><div class="row"><div class="col-6 col-md-3"><div class="media"><i class="fa mr-2 mt-1 fa-cube"></i><div class="media-body"><span class="name"><b>群眾協作</b></span><p style="line-height:1.4em;font-size:0.6em;color:#444">任何人都可以查證且回應別人的謠言或訊息，並寫在資料庫裡。我們鼓勵公眾參與，最好把你爸爸媽媽都一起找來闢謠。</p></div></div></div><div class="col-6 col-md-3"><div class="media"><i class="fa mr-2 mt-1 fa-cube"></i><div class="media-body"><span class="name"><b>即時回應</b></span><p style="line-height:1.4em;font-size:0.6em;color:#444">只要資料庫裡有回應，機器人就透過程式找答案給你，即時方便不用等。連問候答謝都省了，聊天機器人讓你查謠言都不用不好意思。</p></div></div></div><div class="col-6 col-md-3"><div class="media"><i class="fa mr-2 mt-1 fa-cube"></i><div class="media-body"><span class="name"><b>意見交鋒</b></span><p style="line-height:1.4em;font-size:0.6em;color:#444">了解事實與評論的差異，同時看見不同立場的意見，覺察自己的盲點，互相尊重。你聽你的鳥鳴，但也可以湊過去看她的日出。</p></div></div></div><div class="col-6 col-md-3"><div class="media"><i class="fa mr-2 mt-1 fa-cube"></i><div class="media-body"><span class="name"><b>開源授權</b></span><p style="line-height:1.4em;font-size:0.6em;color:#444">過往的程式碼、會議紀錄、數據資料都完全公開，鼓勵更多的開放資料，透明化地與每個人分享合作，創造不同的可能性。</p></div></div></div></div></div></div><div class="section section-media bg-warning text-dark"><div class="inner"><h2 class="text-center">媒體報導</h2><ul><li>2017-12-20 食力 foodNEXT／<a href="http://www.foodnext.net/issue/paper/4098799425">闢謠高手在民間！自發性團體為公眾偵查網路謠言</a></li><li>2017-07-27 時力新北聊天室／<a href="https://www.facebook.com/nppnewtpe/videos/452378341813693/">群組謠言滿天飛 真的假的 LINE bot 幫你查</a></li><li>2017-07-14 聯合新聞網／<a href="https://udn.com/news/story/6649/2585096">打假新聞！新創團隊造Line bot幫你查證消息</a></li><li>2017-05-10 商周雜誌／<a href="https://magazine.businessweekly.com.tw/Article_mag_page.aspx?id=64444&amp;p=0">台灣被檢舉的假消息 三成來自中國</a></li><li>2017-03 University of Oxford／<a href="http://comprop.oii.ox.ac.uk/research/working-papers/computational-propaganda-in-taiwan-where-digital-democracy-meets-automated-autocracy/">Computational Propaganda in Taiwan: Where Digital Democracy Meets Automated Autocracy</a></li><li>2017-01-25 g0v news／<a href="https://g0v.news/%E5%9D%91%E4%B8%BB%E5%B0%88%E8%A8%AA-line-%E4%B8%8A%E9%9D%A2%E8%A8%8A%E6%81%AF%E6%9C%89%E4%BA%9B%E6%98%AF%E5%81%87%E7%9A%84-%E5%A5%BD%E5%9B%B0%E6%93%BE%E5%95%8A-%E5%AF%AB%E7%A8%8B%E5%BC%8F%E5%B0%8D%E6%8A%97%E5%81%87%E6%96%B0%E8%81%9E-%E4%BB%96%E5%80%91%E8%83%8C%E5%BE%8C%E7%9A%84%E9%95%B7%E5%BE%81%E8%A8%88%E7%95%AB-df9ca1460995">【坑主專訪】「LINE有些訊息是假的，好困擾啊」他們對抗假新聞，背後的長征計劃</a></li><li>2017-01-11 數位時代／<a href="https://www.bnext.com.tw/article/42725/line-fake-news-check">還不能用！「真的假的 — 查證 Line 轉傳訊息」開發者澄清：仍在開發中</a></li></ul></div></div><div class="section section-contribute bg-light text-dark"><div class="inner"><div class="text-center"><h2>一起來開源</h2></div><p>Cofacts 需要大家一起來幫忙讓目前的專案做得更好更完整。協作專案無法由少數人來完成，我們需要每一個人都一起付出、寫程式、闢謠、仔細研究查資料，自發性的查證與寫回應才能成就背後龐大的資料庫。</p><p>這裡列出我們需要的協助，歡迎每一個朋友加入我們。</p><ul><li>有好奇心、有正義感，就能查詢資料協助闢謠，幫助身邊的人。</li><li>寫程式難不倒你嗎？快快來幫助我們一起解 issue。</li></ul><br><div class="text-center"><a href="https://hackmd.io/s/Bk06LhrxG" class="btn btn-secondary btn-lg mr-2">我想學用「真的假的」 <i class="fa fa-user-plus"></i></a><a href="https://hackmd.io/s/SyMRyrfEl" class="btn btn-secondary btn-lg mr-2">我可以闢謠 <i class="fa fa-pencil-square-o"></i></a><a href="https://hackmd.io/s/r1nfwTrgM" class="btn btn-secondary btn-lg mr-2">我會寫 Code <i class="fa fa-code"></i></a></div></div></div><div class="section section-footer bg-dark text-light"><div class="inner"><div class="row"><div class="col-12 col-md-8"><div class="row"><div class="col-6 col-md-4"><label>Cofacts 真的假的</label><div class="item"><a href="https://beta.hackfoldr.org/cofacts">專案介紹</a></div><div class="item"><a href="https://grants.g0v.tw/projects/588fa7b382223f001e022944">原始提案</a></div><div class="item"><a href="https://github.com/cofacts">Source code</a></div><div class="item"><a href="https://www.facebook.com/groups/cofacts/">FB 社團</a></div><div class="item"><a href="mailto:cofacts@googlegroups.com">聯絡窗口</a></div></div><div class="col-6 col-md-4"><label>注意事項</label><div class="item"><a href="https://beta.hackfoldr.org/cofacts/https%253A%252F%252Fhackmd.io%252Fs%252FryE0G6rxG">成果授權</a></div></div></div></div><div class="col-12 col-md-4 text-center"><img src="/static/img/g0v-bg-dark.svg" style="width:100px"><div>powered by g0v</div></div></div></div></div></body></html>