master

分支 (1)

管理

管理

master

Web_Sweet
/
index.html

<!DOCTYPE html>
<html>

	<script src="js/clipboard.js"></script>
    <script>
    var clipboard = new ClipboardJS('.fuzhitkl');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

   <head>
      <meta charset="utf-8">
      <title>小茹茹的网站啊</title>
	<meta name="keywords" content="我的网页" />
<meta name="description" content="是小茹茹的小窝啊" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
      <link href="css/base.css" rel="stylesheet" type="text/css" media="all"/>
      <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
      <link href="css/venobox.css" rel="stylesheet" type="text/css"  media="all" />
      <link href="css/fonts.css" rel="stylesheet" type="text/css"  media="all" />
      <link href="css/ae168344b8194b348b667f19ac4d1956.css" rel="stylesheet">
   </head>
   <body>
      <embed src="music/bg_music.mp3" hidden="true" autostart="true" loop="true">
      <div class="loader">
         <div class="loader-inner">
            <svg width="120" height="220" viewbox="0 0 100 100" class="loading-spinner" version="1.1" xmlns="http://www.w3.org/2000/svg">
               <circle class="spinner" cx="50" cy="50" r="21" fill="#ffffff" stroke-width="2"/>
            </svg>
         </div>
      </div>
      <div class="wrapper">
         <section class="hero overlay">
            <div class="background-img">
               <img src="picture/17.jpg" alt="">
            </div>
            <header class="header default">
               <div class=" left-part">
                  <a class="logo scroll" href="#hero">
                     <h2 style="font-size: 20px;">LOVE</h2>
                  </a>
               </div>
               <div class="right-part">
                  <nav class="main-nav">
                     <div class="toggle-mobile-but">
                        <a href="#" class="mobile-but" >
                           <div class="lines"></div>
                        </a>
                     </div>
                     <ul>
                        <li><a class="scroll" href="#home" style="font-size:20px;">爱的首页</a></li>
                        <li><a class="scroll" href="#story" style="font-size:20px;">爱的故事</a></li>
                        <li><a class="scroll" href="#album" style="font-size:20px;">爱的相册</a></li>
                     </ul>
                  </nav>
               </div>
            </header>
            <div class="inner-hero">
               <div class="container hero-content">
                  <div class="row">
                     <div class="col-sm-12 text-center">
                        <h1 class="large mb-20">i love you</h1>
                        <div class="block-date-hero">
                           <div class="circle-dashed bg-n">
                              <div class="round-circle">
                                 <svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg"  class="dashed-border">
                                    <circle cx="50%" cy="50%" r="50" />
                                 </svg>
                                 <i class="icon-heart"></i>
                              </div>
                           </div>
                           <ul>
                              <li>小茹茹</li>
                              <li>造造</li>
                           </ul>
                        </div>
                        <p class="mt-20 lead"></p>
                     </div>
                  </div>
               </div>
            </div>
         </section>
         <section id="story" class="story pt-120 pb-120">
            <svg class="section-dashed" version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="578px" xml:space="preserve">
               <path class="dashed-line" stroke-width="1"  d="M30 0 v600 400"/>
            </svg>
            <div class="container">
               <div class="row">
                  <div class="col-sm-12 text-center mb-100">

                     <h1 class="title">Our love story</h1>
                     <p>The Story of our love</p>
                  </div>
				    <div class="background-img">
               <img src="picture/1.jpeg" alt="">
            </div>
               </div>
               <div class="row">
                  <div class="col-md-4 col-md-offset-4 col-sm-8 col-sm-offset-2 text-center mb-30">
                     <h2 class="heavy" style="font-size:35px">这就是我们的独有时光<br><span style="font-size:18px;line-height:25px">你的眼中有春与秋<br> 胜过我见过爱过的一切山川与河流</span></h2>
                  </div>
               </div>
               <div class="row story-row mt-100 mb-100">
                  <div class="circle-dashed timeline bg">
                     <div class="round-circle bg before">
                        <svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
                           <circle cx="50%" cy="50%" r="50"/>
                        </svg>
                        <i class="icon-heart"></i>
                     </div>
                  </div>
                  <div class="col-sm-5 ">
                     <div class="couple-story text-right">
                        <p style="font-size:25px;line-height:35px">我们的相遇是意外的，但这是一个美丽幸福的意外，让我遇到了这么好的你</p>
                     </div>
                  </div>
                  <div class="col-sm-5 col-sm-offset-2">
                     <div class="couple-story">
                        <p style="font-size:25px;line-height:35px">今天的你也是宇宙独一无二的可爱，与众不同的可爱，表里如一的可爱，迷倒万千少男的可爱，说了再见也还是挥之不去的可爱，世界第一未解之谜，万千科学家用尽一生，所有的科学道理也解释不出的可爱 ◡̈⃝</p>
                     </div>
                  </div>
               </div>
               <div class="row story-row mt-100 mb-80 ">
                  <div class="circle-dashed timeline bg green">
                     <div class="round-circle  green before">
                        <svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
                           <circle cx="50%" cy="50%" r="50"/>
                        </svg>
                        <i class="icon-heart"></i>
                     </div>
                  </div>
                  <div class="col-sm-5 ">
                     <div class="couple-story text-right">
                        <p style="font-size:25px;line-height:35px">我看什么都像你，我看月亮 ，像你，看星星⭐️，也像你。那些白亮透澈、温柔冷清的光，它们都让我想起你。其实我不太懂喜欢，可我想走向你 ´•ﻌ•`</p>
                     </div>
                  </div>
                  <div class="col-sm-5 col-sm-offset-2">
                     <div class="couple-story">
                        <p style="font-size:25px;line-height:35px">这个世界美好的事情不多，立秋傍晚河对岸吹来的风，和笑起来甜得要命的你</p>
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12  text-center mt-100">
                     <a href="#" class="but">
                        <span style="font-size:30px">Home</span>
                        <svg class="but-svg" width="175" height="50" viewBox="0 0 415 120" xmlns="http://www.w3.org/2000/svg">
                           <rect class="but-rect" x="10" y="10" width="400" height="100" rx="6" ry="6"/>
                        </svg>
                     </a>
                  </div>
               </div>
            </div>
         </section>
         <section class="date pt-150 pb-150 overlay">
            <div class="background-img">
               <img src="picture/4.jpg" alt="">
            </div>
            <div class="container">
               <div class="row">
                     <h2 class="indent">Sweet date</h2>
                  <div class="col-sm-12 text-center">
                     <div class="block-content front-p">

                        <h2 class="typo">Save the date</h2>
                        <span id="elapseClock" class="text-white" style="font-size: 45px;font-weight: 300;">days <span class="digit">20</span> hours <span class="digit">14</span> minutes <span class="digit">00</span> seconds</span>
                     </div>
                  </div>
               </div>
            </div>
         </section>
         <section id="album" class="album bg-grey pt-120 pb-120">
            <div class="container">
               <div class="row">
                  <div class="col-sm-12 text-center mb-100">
                     <h1 class="title">爱的相册</h1>
                     <p style="font-size: 20px;">Main ceremony - Sweet party</p>
                  </div>
               </div>
               <div class="row mb-30">
                     <h2 class="indent">Photo album</h2>
                  <div class="col-md-4 col-sm-4 col-xs-12 " >
                     <div class="block-img">
                        <a href="http://img.zxgnz.com/images/20190804/156490542579422.jpg" class="venobox">
                           <div class="background-img">
                              <img alt="" src="picture/1.jpg">
                           </div>
                        </a>
                     </div>
                  </div>
                  <div class="col-md-4 col-sm-4 col-xs-12 " >
                     <div class="block-img">
                        <a href="http://img.zxgnz.com/images/20190804/156490542731052.jpg" class="venobox">
                           <div class="background-img">
                              <img alt="" src="picture/2.jpg">
                           </div>
                        </a>
                     </div>
                  </div>
                  <div class="col-md-4 col-sm-4 col-xs-12 " >
                     <div class="block-img">
                        <a href="http://img.zxgnz.com/images/20190804/156490543096270.jpg" class="venobox">
                           <div class="background-img">
                              <img alt="" src="picture/3.jpg">
                           </div>
                        </a>
                     </div>
                  </div>
                  <div class="col-md-4 col-sm-4 col-xs-12" >
                     <div class="block-img">
                        <a href="http://img.zxgnz.com/images/20190804/156490543257636.jpg" class="venobox">
                           <div class="background-img">
                              <img alt="" src="picture/2.jpg">
                           </div>
                        </a>
                     </div>
                  </div>
                  <div class="col-md-4 col-sm-4 col-xs-12 " >
                     <div class="block-img">
                        <a href="http://img.zxgnz.com/images/20190804/156490543485467.jpg" class="venobox">
                           <div class="background-img">
                              <img alt="" src="picture/6.jpg">
                           </div>
                        </a>
                     </div>
                  </div>
                  <div class="col-md-4 col-sm-4 col-xs-12 " >
                     <div class="block-img">
                        <a href="http://img.zxgnz.com/images/20190804/156490543662231.jpg" class="venobox">
                           <div class="background-img">
                              <img alt="" src="picture/2.jpg">
                           </div>
                        </a>
                     </div>
                  </div>
               </div>
            </div>
         </section>
         <section class="just-married pt-200 pb-200 overlay">
            <div class="background-img">
               <img src="picture/17.jpg" alt="">
            </div>
            <div class="container">
               <div class="row">
                  <div class="col-sm-12 text-center">
                     <div class="block-content front-p">
                        <h2 class="typo">❤</h2>
                        <h2 class="heavy uppercase mt-10 light" style="font-size:20px">执子之手,与子携老</h2>
                     </div>
                  </div>
               </div>
            </div>
         </section>
         <footer class="footer pt-70 pb-70">
            <div class="container">
               <div class="row">
                  <div class="col-sm-12 text-center">
                     <p class="uppercase heavy normal" style="font-size:20px">&copy; 2020 Moment. 造造 & 小茹茹</p>
                  </div>
               </div>
            </div>
         </footer>
      </div>
      <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
      <script src="js/jquery.countdown.min.js" type="text/javascript"></script>
      <script src="js/venobox.min.js" type="text/javascript"></script>
      <script src="js/smooth-scroll.js" type="text/javascript"></script>
      <script src="js/script.js" type="text/javascript"></script>
<script type="text/javascript">
			var together = new Date();
		    var strs = "2020-07-02";
            var nowTime=new Date();
            var together = new Date(strs.replace(/-/g,"/"));
			timeElapse(together);
			setInterval(function () {timeElapse(together);}, 500);
			function timeElapse(c){
			var e=Date();
			var f=(Date.parse(e)-Date.parse(c))/1000;
			var g=Math.floor(f/(3600*24));f=f%(3600*24);
			var b=Math.floor(f/3600);
			if(b<10){b="0"+b}f=f%3600;var d=Math.floor(f/60);
			if(d<10){d="0"+d}f=f%60;
			if(f<10){f="0"+f}
			var a='<span class="digit">'+g+'</span> days <span class="digit">'+b+'</span> hours <span class="digit">'+d+'</span> minutes <span class="digit">'+f+"</span> seconds";$("#elapseClock").html(a)};
</script>


<link rel="stylesheet" href="css/cuplayer.css">
				 <div style="position:absolute; top:50px; right:50px;">
		<audio id="main_audio" autoplay="autoplay" preload="auto" loop>
            <source src="http://www.zaiyiqiba.com/mp3/kgmp3.php?id=de7a6d73d7caa0e8962fd29f4e2162ef" type="audio/mpeg" />
        </audio>
        <a class="c-white fs-12 icon-play rotate" id="btn-play" href="javascript:void(0);"></a>
    </div>
	 <script type="text/javascript">
    //获取picid函数
    $(function(){
        $("area").click(function(){
           var  picId=$(this).attr("data-id");
           var picSrc="images/img_big/"+picId+".jpg"
            $(".modal-content>.pic-box>img").attr("src",picSrc);
        })
        var isPlaying = function(audio) {return !audio.paused;}
        var a = document.getElementById('main_audio');
        $('#btn-play').on('click', function() {
            if($(this).hasClass('rotate')) {
                a.pause();
                $(this).removeClass('rotate');
            } else {
                a.play();
                $(this).addClass('rotate');
            }
        });

    })
    </script>
    <script src="js/jweixin-1.0.0.js"></script>
    <script>
    function autoPlayAudio1() {
        wx.config({
            // 配置信息, 即使不正确也能使用 wx.ready
            debug: false,
            appId: '',
            timestamp: 1,
            nonceStr: '',
            signature: '',
            jsApiList: []
        });
        wx.ready(function() {
            document.getElementById('main_audio').play();
        });
    }
    autoPlayAudio1(); // 推荐使用方法1
    </script>
	<bgsound src="http://www.51bbw.cn/mp3/1youdiantian.mp3" loop="-1"/>
<audio src="http://www.51bbw.cn/mp3/1youdiantian.mp3" controls autoplay='autoplay' loop="loop" id="bgmusic" style="display:none"></audio>
 <script>
    (function() {
        function log(info) {
            console.log(info);
            // alert(info);
        }
        function forceSafariPlayAudio() {
            audioEl.load(); // iOS 9   还需要额外的 load 一下, 否则直接 play 无效
            audioEl.play(); // iOS 7/8 仅需要 play 一下
        }

        var audioEl = document.getElementById('bgmusic');

        audioEl.addEventListener('loadstart', function() {
            log('loadstart');
        }, false);
        audioEl.addEventListener('loadeddata', function() {
            log('loadeddata');
        }, false);
        audioEl.addEventListener('loadedmetadata', function() {
            log('loadedmetadata');
        }, false);
        audioEl.addEventListener('canplay', function() {
            log('canplay');
        }, false);
        audioEl.addEventListener('play', function() {
            log('play');
            // 当 audio 能够播放后, 移除这个事件
            window.removeEventListener('touchstart', forceSafariPlayAudio, false);
        }, false);
        audioEl.addEventListener('playing', function() {
            log('playing');
        }, false);
        audioEl.addEventListener('pause', function() {
            log('pause');
        }, false);

        // 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio,
        // 因此我们通过一个用户交互事件来主动 play 一下 audio.
        window.addEventListener('touchstart', forceSafariPlayAudio, false);

        audioEl.src = "http://www.51bbw.cn/mp3/1youdiantian.mp3";
    })();
    </script>

   </body>
</html>