index.shtml

<!--#include virtual="/inc/meta.html" -->
<meta name="description" content="Firefox 正體中文版 / Thunderbird 正體中文版下載、中文討論區及 Mozilla 專案推廣活動。MozTW（Mozilla 台灣社群）是一群愛好網路的人，想要讓網路變得更好，不論你的專長是什麼，都歡迎加入一同快樂貢獻！（中文版火狐瀏覽器下載）" />
<!--#include virtual="/inc/title.html" -->
<link rel="stylesheet" href="/css/cavendish/home.css" title="Cavendish" media="screen">
<link rel="stylesheet" href="/css/cavendish/narrow.css" title="Cavendish" media="screen and (max-width: 500px)">
<link rel="alternate" type="application/rss+xml" title="moztw.org: Mozilla Taiwan 社群新聞" href="/xmlnews.rdf">
<style>
  <!--
  .front-feature {
    position: relative;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.33) inset;
  }

  .front-feature #firefox_quantum {
    background: url(/images/browser-high-res.png) right top no-repeat scroll transparent;
    color: #FFFFFF;
    display: block;
    font-family: "DFHei Std", "DFLiHei Std", "Heiti TC", "华文细黑", "Microsoft JhengHei", sans-serif;
    font-weight: 300;
    padding: 0;
    position: absolute;
    right: -100px;
    top: 45px;
    text-decoration: none;
    width: 600px;
    height: 453px;
    z-index: 0;
    background-size: 100%;
  }

  .front-feature #firefox_quantum a {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 595px;
  }

  .front-feature #firefox_quantum a:hover {
    background: none;
  }

  .front-feature #firefox_quantum #quantum_better {
    position: absolute;
    font-size: 29px;
    left: 0;
    line-height: 1.2em;
    text-shadow: 1px 1px 6px black;
    bottom: 50px;
    visibility: hidden;
  }

  .front-feature:hover #firefox_quantum #quantum_better {
    visibility: visible;
  }

  #feature-content h2 {
    margin-bottom: 5px;
  }

  .front-feature a.fx-link {
    color: white;
    display: inline-block;
    height: 82px;
    line-height: 82px;
    font-size: 38px;
    margin-bottom: 10px;
    font-family: "PingFang TC", 微軟正黑體, arial, verdana, sans-serif;
    font-weight: 400;
  }

  .front-feature a.fx-link:hover {
    background-color: transparent;
  }

  .front-feature a.fx-link img {
    vertical-align: bottom;
    margin-right: 0.3em;
    height: 82px;
    width: auto;
  }

  @media only screen and (min-width: 501px) {
    .front-feature a.fx-link:hover {
      background-color: rgba(255, 255, 255, 0.2);
      height: 90px;
      line-height: 90px;
      margin: -5px 0 10px -15px;
      padding: 3px 10px 5px;
      border-radius: 35px;
      font-size: 40px;
    }

    .front-feature a.fx-link:hover img {
      height: 88px;
    }
  }

  #front-feature .download {
    padding: 12px 0 10px 15px !important;
    margin-bottom: 15px;
    box-shadow: 0 0 3px #5F8FBE;
  }

  #front-feature .dl-mobile {
    margin-bottom: 0px;
  }

  #front-feature .dl-mobile div {
    height: 0px;
    overflow: hidden;
  }

  #front-feature .dl-mobile:hover div {
    height: 45px;
    margin-top: 5px;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
  }

  #front-feature .download ul {
    padding-left: 30px;
  }

  #front-feature .download ul li.mbl {
    display: none;
  }

  #front-feature #feature-content {
    padding: 10px 485px 5px 20px;
  }


  .mobile-header {
    text-shadow: 1px 1px 1px #d44000, 1px 1px 2px #fbba20;
  }

  #planets ul {
    padding-left: 1.5em;
    margin-top: 0.5em;
  }

  #planets ul li {
    margin-bottom: 1em;
  }

  .promo {
    border: 0;
    width: 72px;
    height: 72px;
  }

  .key-point {
    background-color: #0060df;
    background: url("/images/fox-tail-header.png"), linear-gradient(to bottom, #003eaa 40%, #004ec2 60%, #0060df 80%, #0080ff 90%, #00c7ff 100%);
    background-repeat: no-repeat;
    background-size: 150% auto;
    background-position: -100px center;
    border-bottom: none;
  }

  .homepage .download {
    width: 250px;
  }

  @media only screen and (max-width: 500px) {
    #front-feature {
      background-position: right center;
      background-size: 115% auto;
      padding-bottom: 160px;
    }
    #front-feature #feature-content {
      height: 75px;
      position: absolute;
      width: 100%;
      padding: 0;
      background: url(images/firefox_logo_57-wordmark-horiz_RGB_512w.png) no-repeat;
      background-size: auto 100%;
      filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.5));
      -webkit-filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.5));
      pointer-events: none;
    }
    #front-feature #feature-content h2 {
      display: none;
    }
    .front-feature #firefox_quantum {
      width: 420px;
      background-position: 100% top;
      background-size: 100% auto;
      right: -90px;
      top: 65px;
    }
    .front-feature #firefox_quantum a {
      width: 500px;
      height: 300px;
      top: -100px;
      left: -50px;
    }
  }
  -->
  .hide {
    display: none;
  }
</style>
<!--[if lte IE 8]>
<style>
.key-point {
    background-image: url(/images/fox-tail-header.png);
}
.frontcolumn {
    padding-right: 2%;
}
#front-feature .download ul, #planets ul {
    margin-left: 0;
}
.front-feature #firefox_quantum {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/browser-high-res.png', sizingMethod='scale');
}
</style>
<![endif]-->

<!--#include virtual="/inc/class_homepage.html" -->
<!--#include virtual="/inc/header.html" -->

<div class="key-point front-feature" id="front-feature">
  <div id="firefox_quantum">
    <a href="https://mozilla.org/firefox/" title="全新 Firefox Quantum，更快、更多好事。" onclick="ga('send', 'event', 'Outgoing', 'mozilla.org/firefox', 'home_feature');"></a>
  </div>
  <div id="feature-content">
    <h2><a class="fx-link" href="https://mozilla.org/firefox/" onclick="ga('send', 'event', 'Outgoing', 'mozilla.org/firefox', 'home_logo');"><img src="images/firefox_logo_57_512w.png" alt="Firefox" height="82" width="79">全新 Firefox</a></h2>
    <div class="download dl-box">
      <h3><a href="https://mozilla.org/firefox/" title="全新 Firefox Quantum，更快、更多好事。" onclick="ga('send', 'event', 'Outgoing', 'mozilla.org/firefox', 'home_dl_title');"><strong class="downloadText">Firefox 正體中文版</strong></a></h3>
      <div style="margin-top: 5px;">
        <!--#comment NOTE: Point to .shtml while test locally -->
        <!--#include virtual="/inc/dlff.html" -->
      </div>
    </div>
    <div class="download dl-mobile" onclick="">
      <h3><a href="/mobile/"><strong class="downloadText">Firefox 行動版</strong></a></h3>
      <div>
        <ul>
          <li><a href="http://mzl.la/Firefox-Android-zh-TW" target="_blank" onclick="ga('send', 'event', 'Outgoing', 'FirefoxMobile', 'GooglePlay');">Firefox for Android</a></li>
          <li><a href="https://itunes.apple.com/app/id989804926" target="_blank" onclick="ga('send', 'event', 'Outgoing', 'FirefoxMobile', 'iTunesStore');">Firefox for iOS</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div id="mBody">

  <div class="frontcolumn hide" id="mobile-feature-ios">
    <h2 class="mobile-header"><a href="https://itunes.apple.com/app/id989804926" onclick="ga('send', 'event', 'Outgoing', 'iOS-AppStore-Firefox', 'frontpage-frontcolumn');">Firefox for iOS<img src="/images/product-firefox-ios.png" alt="Firefox for iOS" class="promo"></a></h2>
    <p>在您的 iPhone、iPad 及 iPod touch 上，時時取用 Firefox 的瀏覽歷史、書籤及開啟分頁；還有滿滿的安全功能，保護您的隱私資訊。</p>
  </div>
  <!-- <div class="frontcolumn hide">
    <h2><a href="/mobile/"><img src="/images/foxmosa-android.png" style="float: left;height: 125px;margin:-5px 9px 0 -10px;width: 107px;" alt="Foxmosa love Android" class="promo">Android 版 Firefox</a></h2>
  	<p>Android 版 Firefox 全面更新，更快、更聰明、更加安全，輕巧又靈活，讓您更快到達想去的地方。</p>
  </div> -->
  <div class="frontcolumn" id="feature-thunderbird">
    <h2><a href="/thunderbird/">Thunderbird<img src="/images/product-thunderbird-v3.png" style="height:72px;width:72px;" alt="Thunderbird Logo" class="promo"></a></h2>
    <p><a href="/thunderbird/">Thunderbird</a> 電子郵件軟體全新登場，帶來分頁、威力倍增的搜索及郵件備存功能，並提供您個人專屬的郵件體驗。</p>
  </div>
  <!--  <div class="frontcolumn">
    <h2><a href="https://webmaker.org/"><img src="/images/webmaker.png" style="" alt="Webmaker" class="promo">Mozilla Webmaker</a></h2>
    <p>網路發展至今，人人都該具備在網路上創作的能力，Webmaker 計畫以各種簡單有趣的專案，讓大家嘗試混搭網頁、踏出網頁創作的第一步。</p>
  </div>-->
  <div class="frontcolumn">
    <h2><a href="/space/">摩茲工寮<img src="/images/product-firefox-home.png" alt="" class="promo"></a></h2>
    <p>
      <a href="/space/" style="font-size: 0.9em;">Mozilla Community Space Taipei</a> 是位於台北的社群空間，提供電力、網路與激發創意的 Mozilla 小物，讓摩茲人在此一起貢獻各種開放專案，歡迎來訪。
    </p>
  </div>

  <div class="frontcolumnlast">
    <h2><a href="/contribute/">參與我們<img src="/images/toy_gold_32.png" alt="Contribute Logo" class="promo"></a></h2>
    <p>我們想要讓網路變得更好。歡迎<a href="/contribute/">參與我們的任務</a>，成為推廣網路自由的一份子！
      <br>　　　→ <a href="https://groups.google.com/group/moztw-general" onclick="ga('send', 'event', 'Outgoing', 'moztw-general', 'Frontpage');">MozTW 社群郵件群組</a></p>
  </div>
</div>
<br style="clear: both;">

<!-- Start News Columns -->

<div>
  <div class="frontcolumndouble" id="news_columns">
    <a href="/xmlnews.rdf">
        <img class="rss" src="/images/rss.png" alt="Announcements in RSS" width="28" height="16">
      </a>
    <h2>
      <a href="/news">最新消息與公告</a>
    </h2>
    <!--#include virtual="/inc/news.html" -->
    </ul>
    <!-- start tag is in inc/news.html, DO NOT REMOVE -->
    <br style="clear: both;">
    <a href="news">所有公告記錄</a>
  </div>
  <div id="planets" class="frontcolumn hide">
    <a href="https://planet.moztw.org/atom.xml">
      <img class="rss" src="/images/rss.png" alt="Announcements in RSS" width="28" height="16"/>
    </a>
    <h2>
      <a href="https://planet.moztw.org/">摩茲星球</a>
    </h2>
    <ul id='planet-rss-list'></ul>
  </div>
  <!-- End News Columns -->

  <div class="frontcolumnlast">
    <h2>快速捷徑</h2>
    <ul class="news">
      <li><a href="//forum.moztw.org/viewforum.php?f=2" onclick="ga('send', 'event', 'Outgoing', 'Firefox Mozilla - Channel', 'frontpage');">Firefox 中文討論區</a></li>
      <li><a href="/events/moztw-lab/">MozTW Lab 定期聚會</a></li>
      <li><a href="https://learning.mozilla.org/" onclick="ga('send', 'event', 'Outgoing', 'Webmaker', 'frontpage');">Mozilla Webmaker</a></li>
      <li><a href="http://mozlinks.moztw.org/" onclick="ga('send', 'event', 'Outgoing', 'Mozilla Links', 'frontpage');">Mozilla Links 正體中文版</a></li>
      <li><a href="http://www.mozilla.com/zh-TW/firefox/channel/" onclick="ga('send', 'event', 'Outgoing', 'Firefox Mozilla - Channel', 'frontpage');">Firefox 未來發行版本</a></li>
      <li><a href="http://wiki.moztw.org/">共筆系統</a></li>
      <li><a href="/firefox/extension_top_15/">社群嚴選：擴充套件 Top 15</a></li>
      <li><a href="/foxmosa/">Foxmosa 狐耳摩莎</a></li>
      <li><a href="/donate">捐款贊助 Mozilla</a></li>
    </ul>
  </div>
</div>
</div>
<!--#include virtual="/inc/footer.html" -->
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
/* 為相容舊版瀏覽器使用 jQuery，否則我超想用現代 fetch() 的啊！ */
jQuery(function ($) {
  $.ajax('https://cors-anywhere.herokuapp.com/https://feed2json.org/convert?url=https%3A%2F%2Fplanet.moztw.org%2Fatom.xml', {
    dataType: 'json',
    success: function (data) {
      var counter = 0

      $.each(data.items, function (_, val) {
        if (counter++ >= 6) return // 最多顯示 6 項
        // val.url: 文章網址
        // val.title: 文章標題
        var author = val.title.substring(0, val.title.indexOf(':'))
        val.title = val.title.substring(author.length + 2)
        if (val.title.length > 100) val.title = val.title.substring(0, 100) + "..." // 超過 100 個字就截斷並加上 '...'

        $('#planet-rss-list').append('<li><a href="' + val.url + '">' + val.title + '</a> &ndash; ' + author + '</li>')
      })

      // 顯示摩茲星球欄
      $('#news_columns').removeClass('frontcolumndouble').addClass('frontcolumn') // 預留空間給摩茲星球
      $('#planets').removeClass('hide') // 解除隱藏
    }
  })
})
</script>
<!--#include virtual="/inc/end.html" -->