頁面名稱 切版檔案 備註說明
01 領取倒數 countdown.html

// 設定活動開始時間參數如下

offerTime = '2017/11/5 00:00:00 GMT+0800',

02 活動詳情

// 活動內容內容都只有使用<br>做換行

<div class="offercontent clearfix"> 《神偷奶爸》,2010年喜劇3D動畫片,是神偷奶爸系列電影的首部作品,由環球影業及照明娛樂製作,首部兩家合作的電腦動畫電影 。<br>
講述神偷格魯計畫利用三個孤兒女作為他偉大偷月計畫的棋子,直到發現她們天真的愛深刻地改變他。 <br>
一人得獎兩人同行 <br>
8月26日 12:30 欣欣秀泰影城20位<br>
8月28日 19:00 美麗華大直影城20位 </div>

// 注意事項內容可使用<br>做換行或<ol>做列表

<div class="offernoteinfo">
1.本票券為非賣品,嚴禁任何圖利、販賣與兜售行為,一經發現將取消資格<br>
2.票券未劃位,請於開演前一小時自行劃位,座位畫滿即不受理 <br>
....
</div>

// 或是可以用<ol>做列表

<div class="offernoteinfo">
<ol>
<li>本票券為非賣品,嚴禁任何圖利、販賣與兜售行為,一經發現將取消資格</li>
<li>票券未劃位,請於開演前一小時自行劃位,座位畫滿即不受理 </li>
.... </ol>
</div>

03 活動準備中 preparing.html  
04 請登入領取

confirm.html

confirm_login.html檔案與confirm.html一樣只差在以下設定

<!-- 領取顯示 -->
<a href="#" class="offerbutton">立馬領取</a> <a href="#" class="offerbutton hidden">請登入領取</a>
<!-- end -->

05 立即兌換 confirm.html <!-- 領取顯示 -->
<a href="#" class="offerbutton hidden">立馬領取</a> <a href="#" class="offerbutton">請登入領取</a>
<!-- end -->
06 立即兌換-未領取 confirm.html#get

這裡是純粹使用CSS3:target做的Lightbox效果,如需打開lifhtbox只需直接設定連結target即可

例如:<a href="#get" class="offerbutton">立馬領取</a>

07 立即兌換-已領取過 confirm.html#already
08 立即兌換-已索取完畢 confirm.html#end
09 活動已結束 eventended.html  
10 系統忙碌中 busy.html