index.htm 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <div id='wx_pic' style='margin:0 auto;display:none;'>
  6. <img src='photo.jpg' />
  7. </div>
  8. <title>七夕节就要高调秀恩爱!送TA一纸婚书</title>
  9. <meta http-equiv="pragma" content="no-cache">
  10. <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
  11. <meta http-equiv="expires" content="0">
  12. <meta name="keywords" content="送TA一纸婚书" />
  13. <meta name="description" content="送TA一纸婚书" />
  14. <meta itemprop="name" id="share-title" content="七夕节就要高调秀恩爱!">
  15. <meta name="description" id="share-timelinedesc" itemprop="timelinedescription" content="七夕节就要高调秀恩爱!">
  16. <meta name="description" id="share-desc" itemprop="description" content="单身人士请进,脱单就靠今天">
  17. <meta itemprop="image" id="share-image" content="http://mat1.gtimg.com/news/2015/zt/bromarry/img/share.jpg">
  18. <meta itemprop="link" id="share-url" content="http://news.qq.com/zt2015/brohunshu/index.htm">
  19. <meta itemprop="root" id="share-root" content="http://news.qq.com/zt2015/brohunshu/">
  20. <meta itemprop="cdnroot" id="cdn-root" content="http://mat1.gtimg.com/news/2015/zt/bromarry/">
  21. <meta name="apple-touch-fullscreen" content="yes" />
  22. <meta name="format-detection" content="telephone=no" />
  23. <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
  24. <meta name="apple-mobile-web-app-capable" content="yes">
  25. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  26. <link rel="stylesheet" href="css/mainnew.css">
  27. <script type="text/javascript">
  28. (function (doc, win) {
  29. var docEl = doc.documentElement,
  30. resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  31. recalc = function () {
  32. var clientWidth = docEl.clientWidth;
  33. // if (!clientWidth) return;
  34. docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
  35. };
  36. recalc();
  37. // Abort if browser does not support addEventListener
  38. if (!doc.addEventListener) return;
  39. win.addEventListener(resizeEvt, recalc, false);
  40. // doc.addEventListener('DOMContentLoaded', recalc, false);
  41. })(document, window);
  42. </script>
  43. </head>
  44. <body>
  45. <div class="hq-wrapper" >
  46. <div id="mo-slide">
  47. <div class="hq-page hq-page-loading">
  48. <div class="hq-loading">
  49. <div class="hq-loading__item">
  50. <ul class="hq-words">
  51. <li><span>有位老先生说</span></li>
  52. <li><span>从前的日色变得慢</span></li>
  53. <li><span>车 马 邮件都慢</span></li>
  54. <li><span>一生只够爱一个人</span></li>
  55. <li><span>从前的婚书也好看</span></li>
  56. <li><span>典雅精美有样子</span></li>
  57. <li><span>透着温暖的旧日气息</span></li>
  58. <li class="logo"></li>
  59. </ul>
  60. </div>
  61. <div class="hq-loading__item">
  62. <div class="lotus-container lotus-container2">
  63. <div class="lotus"></div>
  64. </div>
  65. </div>
  66. <div class="hq-loading__item">
  67. <div class="lotus-container lotus-container1">
  68. <div class="lotus"></div>
  69. </div>
  70. </div>
  71. <div class="hq-loading__item"></div>
  72. <div class="hq-loading__item" id="loading-txt">加载中 <span id="loading-progress">0%</span></div>
  73. </div>
  74. </div>
  75. <div class="hq-page hq-page-introduce ">
  76. <div class="hq-introduce">
  77. <div class="hq-introduce__item"></div>
  78. <div class="hq-introduce__item"></div>
  79. <div class="hq-introduce__item"></div>
  80. <div class="hq-introduce__item">
  81. <ul class="hq-words">
  82. <li><span class="first">两姓联姻</span>一堂缔约</li>
  83. <li><span class="first">良缘永结</span>匹配同称</li>
  84. <li><span class="first">谨以白头之约</span>书向鸿笺</li>
  85. <li><span class="first">好将红叶之盟</span>载明鸳谱</li>
  86. <li>此证</li>
  87. </ul>
  88. </div>
  89. <a href="#" class="hq-introduce__btn font-fzls" id="goto-maker">制作我们的婚书</a>
  90. <div class="hq-introduce__item item5"></div>
  91. </div>
  92. </div>
  93. <div class="hq-page hq-page-maker ">
  94. <div class="hq-maker ">
  95. <div class="hq-maker__item font-fzls">
  96. <h3 class="hq-maker__title">我的名字是</h3>
  97. <label class="hq-input">
  98. <input type="text" class="font-normal" name="" id="input-me">
  99. </label>
  100. </div>
  101. <div class="hq-maker__item font-fzls">
  102. <h3 class="hq-maker__title">TA的名字是</h3>
  103. <label class="hq-input">
  104. <input type="text" class="font-normal" name="" id="input-ta">
  105. </label>
  106. </div>
  107. <div class="hq-maker__item">
  108. <h3 class="hq-maker__title font-fzls">我们在这一天结婚</h3>
  109. <div id="dateSelector">
  110. <label class="hq-input__year" for="idYear">
  111. <select id="idYear" name="idYear" data="2015"></select>
  112. <span class="real">2015</span>
  113. <span class="txt">年</span>
  114. </label>
  115. <label class="hq-input__month" for="idMonth">
  116. <select id="idMonth" name="idMonth" data="5"></select>
  117. <span class="real">5</span>
  118. <span class="txt">月</span>
  119. </label><label class="hq-input__day" for="idDay">
  120. <select id="idDay" name="idDay" data="20"></select>
  121. <span class="real">20</span>
  122. <span class="txt">日</span>
  123. </label>
  124. <input type="date" name="date" id="input-selectdate" class="input-selectdate" value="2015-05-20" min="1815-01-01" max="2215-12-12" >
  125. </div>
  126. </div>
  127. <div class="hq-maker__item">
  128. <div class="hq-maker__btn" id="btn_make"></div>
  129. </div>
  130. </div>
  131. </div>
  132. <div class="hq-page hq-page-making ">
  133. <div class="hq-making">
  134. <div class="progress">
  135. <div class="step" id="making-step"></div>
  136. <div class="txt">
  137. 生成中 <span class="num" id="making-progress">0%</span>
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  142. <div class="hq-page hq-page-result ">
  143. <div class="result-inner" style="display:none">
  144. <div class="tips">
  145. <div class="txt">左右滑动</br>切换模板</div>
  146. <div class="arrow arrow-left"></div>
  147. <div class="arrow arrow-right"></div>
  148. </div>
  149. <div class="hq-swiper font-fzks">
  150. <ul id="slide-inner">
  151. <li class="inner-page">
  152. <div class="hq-result temp1">
  153. <div class="hq-result__item">
  154. <ul class="hq-words">
  155. <li><strong class="hq-words__date">日期</strong><span class="time-year">二零一五</span> 年 <span class="time-month">五</span> 月 <span class="time-day">二十</span> 日</li>
  156. </ul>
  157. <dl class="hq-words mask">
  158. <dt>结<br/>婚</br>人</dt>
  159. <dd class="font-normal">
  160. <p class="name-me">牛栏山</p>
  161. <p class="name-ta">刘桂芳</p>
  162. </dd>
  163. </br>
  164. </dl>
  165. <ul class="hq-words">
  166. <li>喜今日赤绳系定</br>,珠联璧合</br>。 </li>
  167. <li>卜他年白头永偕</br>,桂馥兰馨</br>。此证</br>!</li>
  168. </ul>
  169. <a href="#" class="hq-result__btn btn1 font-fzls btn-redo">填<br/>错<br/>了<br/><br/>重<br/>新<br/>写</a><a href="#" class="hq-result__btn btn2 font-fzls btn-share">太<br/>美<br/>了<br/><br/>秀<br/>恩<br/>爱</a>
  170. </div>
  171. <div class="hq-result__item"></div>
  172. <div class="hq-result__item"></div>
  173. <div id="flowers">
  174. <i></i>
  175. <i></i>
  176. <i></i>
  177. <i></i>
  178. <i></i>
  179. <i></i>
  180. <i></i>
  181. <i></i>
  182. <i></i>
  183. <i></i>
  184. <i></i>
  185. <i></i>
  186. <i></i>
  187. <i></i>
  188. <i></i>
  189. </div>
  190. </div>
  191. </li>
  192. <li class="inner-page">
  193. <div class="hq-result temp2">
  194. <div class="hq-result__item">
  195. <ul class="hq-words">
  196. <li><strong class="hq-words__date">日期</strong><span class="time-year">二零一五</span> 年 <span class="time-month">五</span> 月 <span class="time-day">二十</span> 日</li>
  197. </ul>
  198. <dl class="hq-words mask">
  199. <dt class="">结<br/>婚</br>人</dt>
  200. <dd class="font-normal">
  201. <p class="name-me">牛栏山</p>
  202. <p class="name-ta">刘桂芳</p>
  203. </dd>
  204. </br>
  205. </dl>
  206. <ul class="hq-words">
  207. <li>嘉礼初成</br>,良缘遂缔</br>。诗咏关雎</br>, </li>
  208. <li>雅歌麟趾</br>。花好月圆</br>,欣燕尔之</br>。 </br>此证</br>!</li>
  209. </ul>
  210. <a href="#" class="hq-result__btn btn1 font-fzls btn-redo">填<br/>错<br/>了<br/><br/>重<br/>新<br/>写</a><a href="#" class="hq-result__btn btn2 font-fzls btn-share">太<br/>美<br/>了<br/><br/>秀<br/>恩<br/>爱</a>
  211. <div class="left-ani"></div>
  212. <div class="right-ani"></div>
  213. </div>
  214. <div class="hq-result__item"></div>
  215. <div class="hq-result__item"></div>
  216. </div>
  217. </li>
  218. <li class="inner-page">
  219. <div class="hq-result temp3">
  220. <div class="hq-result__item">
  221. <ul class="hq-words">
  222. <li><strong class="hq-words__date">日期</strong><span class="time-year">二零一五</span> 年 <span class="time-month">五</span> 月 <span class="time-day">二十</span> 日</li>
  223. </ul>
  224. <dl class="hq-words mask">
  225. <dt>结<br/>婚</br>人</dt>
  226. <dd class="font-normal">
  227. <p class="name-me">牛栏山</p>
  228. <p class="name-ta">刘桂芳</p>
  229. </dd>
  230. </br>
  231. </dl>
  232. <ul class="hq-words">
  233. <li>礼同掌判</br>,合二姓以嘉姻</br>, </li>
  234. <li>诗咏宜家</br>,敦百年之静好</br>,此证</br>!</li>
  235. </ul>
  236. <a href="#" class="hq-result__btn btn1 font-fzls btn-redo">填<br/>错<br/>了<br/><br/>重<br/>新<br/>写</a><a href="#" class="hq-result__btn btn2 font-fzls btn-share">太<br/>美<br/>了<br/><br/>秀<br/>恩<br/>爱</a>
  237. </div>
  238. <div class="hq-result__item">
  239. <div class="ani-left"></div>
  240. <div class="ani-right"></div>
  241. </div>
  242. <div class="hq-result__item"></div>
  243. </div>
  244. </li>
  245. </ul>
  246. </div>
  247. </div>
  248. </div>
  249. </div>
  250. </div>
  251. <div class="arrow varrow" id="arrow" ></div>
  252. <div class="pop-share">
  253. <div class="share-tips">点击右上角秀恩爱</div>
  254. </div>
  255. <script type="text/javascript">
  256. document.body.ontouchmove=function(e){
  257. e.preventDefault();
  258. }
  259. </script>
  260. <script type="text/javascript">
  261. // window.numCH = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖");
  262. window.numCH = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九");
  263. window.ten="十";
  264. window.sharedesc="{{ta}},你这辈子归我啦!";
  265. window.tips="请填写您和TA的名字";
  266. </script>
  267. <script src="jsapi/news.js?_tsid=1"></script>
  268. <script src="js/main.min.js"charset="UTF-8"></script>
  269. </body>
  270. </html><!--[if !IE]>|xGv00|b37968b5cb210f947cc6a3abe8624aa5<![endif]-->