index2.html 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>宇宙天使</title>
  6. <link rel="stylesheet" href="./css/index.css">
  7. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9. <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
  10. </head>
  11. <body>
  12. <div>
  13. <div class="top">
  14. <div class="logo">
  15. <img src="./img/logo.png" alt="">
  16. <!-- <h2>Liberty City</h2> -->
  17. </div>
  18. <div class="nav">
  19. <ul>
  20. <li><a href="#home">首页</a></li>
  21. <li><a href="#project">项目介绍</a></li>
  22. <li><a href="#nft">NFT</a></li>
  23. <li><a href="#model">经济模型</a></li>
  24. <li><a href="#xianlu">路线图</a></li>
  25. <li><a target="_blank" href="./pdf.html">白皮书</a></li>
  26. <li><a href="./index.html">EN</a></li>
  27. </ul>
  28. </div>
  29. <div class="nav-tab">
  30. <img id="zk" src="./img/menu.png" alt="">
  31. </div>
  32. <div class="nav-list">
  33. <div class="top">
  34. <span id="cols">X</span>
  35. </div>
  36. <ul>
  37. <li><a href="#home">首页</a></li>
  38. <li><a href="#project">项目介绍</a></li>
  39. <li><a href="#nft">NFT</a></li>
  40. <li><a href="#model">经济模型</a></li>
  41. <li><a href="#xianlu">路线图</a></li>
  42. <li><a target="_blank" href="./pdf.html">白皮书</a></li>
  43. <li><a href="./index.html">EN</a></li>
  44. </ul>
  45. </div>
  46. </div>
  47. <div class="banner_content cont" id="home">
  48. <div class="banner_logo">
  49. <div class="logo2">
  50. <img src="./img/33.png" alt="">
  51. </div>
  52. </div>
  53. <h2>元宇宙生态价值传递的链接者</h2>
  54. <p>将主流应用与资产带入整个CosmicAngel生态,帮助众多优质资产走进其他区块链网络进,<br>
  55. 使整个加密数字资产市场回归本源,实现不同区块链链上资产的自由流动、交互和聚合,<br>
  56. 并赋能实体产业发展</p>
  57. </div>
  58. <div>
  59. <img class="bg1" src="./img/74.png" alt="">
  60. </div>
  61. <video type="video/mp4" autoplay="autoplay" muted loop="loop" style="width: 100%;" id="void">
  62. <!-- <source src="./void/banner.mp4" type="video/ogg" / id="mp4"> -->
  63. </video>
  64. <!-- <audio autoplay="autoplay" id="audio" loop="loop">
  65. <source src="./void/13.mp3" type="audio/MP3">
  66. </audio> -->
  67. <div class="bg"></div>
  68. <!-- <div class="pay">是否播放背景音乐?
  69. <br>
  70. <span class="pays">是</span><span class="off">否</span>
  71. </div> -->
  72. <div class="project cont" id="project">
  73. <img class="bg1" src="./img/16.png" alt="">
  74. <div class="project_content">
  75. <h2>项目介绍</h2>
  76. <h1>NEW WORLD IS COMING!</h1>
  77. <p>
  78. CosmicAngel宇宙天使是首个以元宇宙生态为主题的的超级聚合平台,并融入了Web3.0+DAO+GameFi+DeFi+NFT+Metaverse等概率元素。<br>
  79. CosmicAngel为web3.0元宇宙生态打造集游戏、体育竞技、NFT收藏、DeFi聚合器、去中心化交易所等应用场景,<br>
  80. 打造无限扩展并尊重元宇宙新金融范式的真实生态愿景。<br>
  81. 并100%由其社区DAO运营来驱动发展和管理,以及拥有和自己的管理令牌CAGL的用户将能够做出决策。<br>
  82. </p>
  83. <p>
  84. CosmicAngel还将借助元宇宙的流量效应和财富效应推动人类文明完成从物质世界到数字世界的维度跃迁,<br>
  85. 缔造一个强IP的去中心化元宇宙聚合生态,致力于创造人人皆可以参与的轻量、开放、自由的元宇宙超级聚合生态,<br>
  86. 满足用户在元宇宙世界全方位的金融投资与生产生活需求,成为所有元宇宙生态应用服务的首选。<br>
  87. </p>
  88. </div>
  89. </div>
  90. <div class="car cont" id="nft">
  91. <img class="bg1" src="./img/4.png" alt="">
  92. <div class="car_content">
  93. <h1>NFT 勋章</h1>
  94. <!-- Swiper -->
  95. <div class="swiper mySwiper">
  96. <div class="swiper-wrapper">
  97. <div class="swiper-slide">
  98. <img src="./img/34.png" alt="">
  99. </div>
  100. <div class="swiper-slide">
  101. <img src="./img/35.png" alt="">
  102. </div>
  103. <div class="swiper-slide">
  104. <img src="./img/36.png" alt="">
  105. </div>
  106. <div class="swiper-slide">
  107. <img src="./img/37.png" alt="">
  108. </div>
  109. </div>
  110. </div>
  111. <div class="swiper-button-next"><img src="./img/r.png" alt=""></div>
  112. <div class="swiper-button-prev"><img src="./img/l.png" alt=""> </div>
  113. </div>
  114. </div>
  115. <video type="video/mp4" style="width: 100%; height: 100%; " poster="./img/4.jpg" id="void" controls>
  116. <source src="./void/banner.mp4" type="video/ogg" / id="mp4">
  117. </video>
  118. <div class="model cont" id="model">
  119. <img class="bg1" src="./img/42.png" alt="">
  120. <div class="model_content">
  121. <h1>经济模型</h1>
  122. <img src="./img/9.png" alt="">
  123. <div class="content">
  124. <p>
  125. CAGL发行总量:270,000,000 枚<br>
  126. 首次发行方式:IDO(流动性挖矿)<br>
  127. </p>
  128. <p>
  129. CAGL代币分配:<br>
  130. 30%~社区用于前期流动性(多余销毁)<br>
  131. 70%~矿池IDO产出/NFT勋章算力产出/LP挖矿产出<br>
  132. </p>
  133. </div>
  134. <div class="cs">
  135. <ul>
  136. <li><span></span>70%- 挖矿产出</li>
  137. <li class="li"><span></span>30%- 初始流动性</li>
  138. </ul>
  139. </div>
  140. </div>
  141. </div>
  142. <!-- 线路图 -->
  143. <div id="xianlu" class="cont">
  144. <img class="bg1" src="./img/20.png" alt="">
  145. <div class="Liberty2">路线图</div>
  146. <div class="container">
  147. <div class="left">
  148. <div class="tow">
  149. <h2>2021年</h2>
  150. <p> 2021.10 构建系统架构,开发CosmicAngel生态系统</p>
  151. </div>
  152. <div class="four">
  153. <h2>2023年</h2>
  154. <p>2023.01 CAGL代币将上线全球知名中心交易所<br>
  155. 2023.02 聚合外部不同类型的合作伙伴
  156. 2023.04 CosmicAngel2.0版本正式上线,对全球用户开放使用<br>
  157. 2023.08 迭代3.0版本,全面生态更新与开放,实现盈利</p>
  158. </div>
  159. </div>
  160. <div class="hx">
  161. <span class="y"></span>
  162. <span class="x"></span>
  163. <span class="y"></span>
  164. <span class="x"></span>
  165. <span class="y"></span>
  166. <span class="x"></span>
  167. </div>
  168. <div class="right">
  169. <div class="five">
  170. <h2>2022年</h2>
  171. <p>2022.01 产品生态合作伙伴建立<br>
  172. 2022.03 CosmicAngel系统1.0版开始内测<br>
  173. 2022.06 新模式及玩法研发升级<br>
  174. 2022.08 CAGL代币将上线全球知名DEX<br>
  175. 2022.10 上线CoinmarketCap<br>
  176. 2022.11 开启生态公测,用户将可以体验元宇宙场景<br>
  177. 2022.11 完成核心社区建设,实现社区用户突破100万人2022.12 游戏部署上线<br>
  178. </p>
  179. </div>
  180. </div>
  181. </div>
  182. </div>
  183. <div class="footer">
  184. <a target="_blank" href="https://ss.transgot.cn/libertycitydao"> <img src="./img/12.png" alt=""></a>
  185. <a target="_blank" href="https://discord.gg"><img src="./img/13.png" alt=""></a>
  186. <a target="_blank" href="https://twitter.com/dao_libertycity"><img src="./img/14.png" alt=""></a>
  187. </div>
  188. </div>
  189. </body>
  190. <script src="./swiper/swiper-bundle.min.js"></script>
  191. <script src="./js/jquery.min.js"></script>
  192. <script>
  193. let w=$(window).width();
  194. let h=$(window).height();
  195. console.log(w)
  196. if(w<766){
  197. $('#void').css('display','none')
  198. $('.bg').css('width',w,'display','line-break')
  199. }
  200. if(w>1024){
  201. console.log(w,2)
  202. $('.cont').css('height',h+30+"px")
  203. $('.bg1').css('height',h+30+"px")
  204. }
  205. $('.nav-tab').on('click',function(){
  206. $('#zk').css('display','none')
  207. $('.nav-list').css('margin-left','-300px')
  208. })
  209. $('#cols').on('click',function(){
  210. $('#zk').css('display','inline-block')
  211. $('.nav-list').css('margin-left','-700px')
  212. })
  213. $(function() {
  214. let music = $("#audio")[0];
  215. $('.off').click('on', function() {
  216. $('.pay').css('display', 'none')
  217. })
  218. $('.pays').click('on', function() {
  219. if (music.paused) { //判读是否播放
  220. music.paused = false;
  221. music.play(); //没有就播放
  222. $('.pay').css('display', 'none')
  223. console.log(music)
  224. }
  225. })
  226. })
  227. </script>
  228. <script>
  229. var swiper = new Swiper(".mySwiper", {
  230. slidesPerView: 3,
  231. spaceBetween: 30,
  232. navigation: {
  233. nextEl: ".swiper-button-next",
  234. prevEl: ".swiper-button-prev",
  235. },
  236. });
  237. </script>
  238. </html>