<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>zwei.ren的个人官网</title>
    <meta name="description" content="Zeng wei ren's personal website">
    <meta name="author" content="zvir@qq.com">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <link rel="shortcut icon" href="/assets/tiny_icon.jpg">
    <style type="text/css">
    .page {
        position: relative;
        min-height: 96vh;
        padding-bottom: 40px;
        box-sizing: border-box;
    }

    .beiandiv {
        position: absolute;
        bottom: 0px;
        width: 100vw;
        left: 0;
        /*background: #1e2229;*/
        text-align: center;
        padding: 12px 0;
        font-size: 14px;
    }

    .beiana {
        color: #999;
    }

    button {
        background: #3c96fc;
        color: #fff;
        padding: 4px 10px;
        border-radius: 4px;
    }

    input {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 4px;
        padding: 4px 10px;
    }

    td,
    th {
        padding: 4px 8px;
    }
    </style>
</head>

<body class="page">
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="//bmob-cdn-14918.b0.upaiyun.com/2018/06/25/751b35f640a5aaa78016289ccefbb2d1.css" rel="stylesheet"> -->
    <link href="/assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="/assets/css/style.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" id="color" href="/assets/css/colors/default.css" />
    <div>
        <div class="fireworks" style="position: fixed; width: 100vw; height: 100vh; left: 0; top: 0;">
        </div>
        <div id="preloader">
            <div id="loader">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="lading"></div>
            </div>
        </div>
        <div id="main-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <i class="fa fa-bars"></i>
                </button>
            </div>
            <!-- <nav class="collapse navbar-collapse">
		<ul id="headernavigation" class="nav navbar-nav" style="display: none;">
			<li class="active"><a href="#page-top">Home</a></li>
			<li><a href="#about">About</a></li>
			<li><a href="#subscribe">Subscribe</a></li>
			<li><a href="#contact">Contact</a></li>
		</ul>
	</nav> -->
        </div>
        <section id="page-top" class="section-style" data-background-image="/assets/images/bg1.jpg">
            <div class="pattern height-resize">
                <div class="container">
                    <h1 class="site-title" onclick="callFireworks(true)">
                        VV &amp; 77
                    </h1>
                    <h3 class="section-name" onclick="callFireworks(true)">
                        <span>
                            We've Been
                        </span>
                    </h3>
                    <h2 class="section-title" onclick="callFireworks(true)">
                        Together For
                    </h2>
                    <div id="time_countdown" class="time-count-container">
                        <div class="col-sm-2">
                            <div class="time-box">
                                <div class="time-box-inner dash years_dash animated" data-animation="rollIn" data-animation-delay="300">
                                    <span class="time-number">
                                        <span class="digit">0</span>
                                        <span class="digit">0</span>
                                    </span>
                                    <span class="time-name">Years</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="time-box">
                                <div class="time-box-inner dash months_dash animated" data-animation="rollIn" data-animation-delay="300">
                                    <span class="time-number">
                                        <span class="digit">0</span>
                                        <span class="digit">0</span>
                                    </span>
                                    <span class="time-name">Months</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="time-box">
                                <div class="time-box-inner dash days_dash animated" data-animation="rollIn" data-animation-delay="300">
                                    <span class="time-number">
                                        <span class="digit">0</span>
                                        <span class="digit">0</span>
                                    </span>
                                    <span class="time-name">Days</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="time-box">
                                <div class="time-box-inner dash hours_dash animated" data-animation="rollIn" data-animation-delay="600">
                                    <span class="time-number">
                                        <span class="digit">0</span>
                                        <span class="digit">0</span>
                                    </span>
                                    <span class="time-name">Hours</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="time-box">
                                <div class="time-box-inner dash minutes_dash animated" data-animation="rollIn" data-animation-delay="900">
                                    <span class="time-number">
                                        <span class="digit">0</span>
                                        <span class="digit">0</span>
                                    </span>
                                    <span class="time-name">Minutes</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="time-box">
                                <div class="time-box-inner dash seconds_dash animated" data-animation="rollIn" data-animation-delay="1200">
                                    <span class="time-number">
                                        <span class="digit">0</span>
                                        <span class="digit">0</span>
                                    </span>
                                    <span class="time-name">Seconds</span>
                                </div>
                            </div>
                        </div>
                        <div class="next-section">
                            <!-- <a class="go-to-about"><span></span></a> -->
                            <a class="go-to-contact"><span></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- <section id="about" class="section-style" data-background-image="/assets/images/background/about-us.jpg" style="display: none;">
	<div class="pattern height-resize">
		<div class="container">
			<h3 class="section-name">
					<span>
						About Us
					</span>
				</h3>
			<h2 class="section-title">
					We Are dedicated
				</h2>
			<p class="section-description">
				Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.
			</p>
			<div class="team-container">
				<div class="row">
					<div class="col-sm-4">
						<div class="team-member">
							<figure>
								<img src="/assets/images/team/team-member-1.jpg" alt="Team Member">
								<figcaption>
									<p class="member-name">John Doe</p>
									<p class="designation">
										CEO
									</p>
								</figcaption>
							</figure>
							<div class="social-btn-container">
								<div class="team-socail-btn">
									<span class="social-btn-box facebook-btn-container">
											<a href="#" class="facebook-btn">
												<i class="fa fa-facebook"></i>
											</a>
										</span>
									<span class="social-btn-box twitter-btn-container">
											<a href="#" class="twitter-btn">
												<i class="fa fa-twitter"></i>
											</a>
										</span>
									<span class="social-btn-box linkedin-btn-container">
											<a href="#" class="linkedin-btn">
												<i class="fa fa-linkedin"></i>
											</a>
										</span>
									<span class="social-btn-box github-btn-container">
											<a href="#" class="github-btn">
												<i class="fa fa-github-alt"></i>
											</a>
										</span>
								</div>
							</div>
						</div>
					</div>
					<div class="col-sm-4">
						<div class="team-member">
							<figure>
								<img src="/assets/images/team/team-member-2.jpg" alt="Team Member">
								<figcaption>
									<p class="member-name">
										Claudia Springer
									</p>
									<p class="designation">
										Designer
									</p>
								</figcaption>
							</figure>
							<div class="social-btn-container">
								<div class="team-socail-btn">
									<span class="social-btn-box facebook-btn-container">
											<a href="#" class="facebook-btn">
												<i class="fa fa-facebook"></i>
											</a>
										</span>
									<span class="social-btn-box twitter-btn-container">
											<a href="#" class="twitter-btn">
												<i class="fa fa-twitter"></i>
											</a>
										</span>
									<span class="social-btn-box linkedin-btn-container">
											<a href="#" class="linkedin-btn">
												<i class="fa fa-linkedin"></i>
											</a>
										</span>
									<span class="social-btn-box github-btn-container">
											<a href="#" class="github-btn">
												<i class="fa fa-github-alt"></i>
											</a>
										</span>
								</div>
							</div>
						</div>
					</div>
					<div class="col-sm-4">
						<div class="team-member">
							<figure>
								<img src="/assets/images/team/team-member-3.jpg" alt="Team Member">
								<figcaption>
									<p class="member-name">
										Max Anthony
									</p>
									<p class="designation">
										Developer
									</p>
								</figcaption>
							</figure>
							<div class="social-btn-container">
								<div class="team-socail-btn">
									<span class="social-btn-box facebook-btn-container">
											<a href="#" class="facebook-btn">
												<i class="fa fa-facebook"></i>
											</a>
										</span>
									<span class="social-btn-box twitter-btn-container">
											<a href="#" class="twitter-btn">
												<i class="fa fa-twitter"></i>
											</a>
										</span>
									<span class="social-btn-box linkedin-btn-container">
											<a href="#" class="linkedin-btn">
												<i class="fa fa-linkedin"></i>
											</a>
										</span>
									<span class="social-btn-box github-btn-container">
											<a href="#" class="github-btn">
												<i class="fa fa-github-alt"></i>
											</a>
										</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="next-section">
				<a class="go-to-subscribe"><span></span></a>
			</div>
		</div>
	</div>
</section> -->
        <!-- <section id="subscribe" class="section-style" data-background-image="/assets/images/background/newsletter.jpg" style="display: none;">
	<div class="pattern height-resize">
		<div class="container">
			<h3 class="section-name">
					<span>
						Subscribe
					</span>
				</h3>
			<h2 class="section-title">
					Our Newsletter 
				</h2>
			<p class="section-description">
				Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.
			</p>
			<form class="news-letter" action="php/subscribe.php" method="post">
				<div class="subscribe-hide">
					<input class="form-control" type="email" id="subscribe-email" name="subscribe-email" placeholder="Email Address" required>
					<button type="submit" id="subscribe-submit" class="btn"><i class="fa fa-envelope"></i></button>
					<span id="subscribe-loading" class="btn"> <i class="fa fa-refresh fa-spin"></i> </span>
					<div class="subscribe-error"></div>
				</div>
				<div class="subscribe-message"></div>
			</form>
			<div class="social-btn-container">
				<span class="social-btn-box">
						<a href="#" class="facebook-btn">
						<i class="fa fa-facebook"></i></a>
					</span>
				<span class="social-btn-box">
						<a href="#" class="twitter-btn"><i class="fa fa-twitter"></i></a>
					</span>
				<span class="social-btn-box">
						<a href="#" class="linkedin-btn"><i class="fa fa-linkedin"></i></a>
					</span>
				<span class="social-btn-box">
						<a href="#" class="google-plus-btn"><i class="fa fa-google-plus"></i></a>
					</span>
				<span class="social-btn-box">
						<a href="#" class="youtube-btn"><i class="fa fa-youtube"></i></a>
					</span>
			</div>
			<div class="next-section">
				<a class="go-to-contact"><span></span></a>
			</div>
		</div>
	</div>
</section> -->
        <section id="contact" class="section-style" data-background-image="/assets/images/bg2.jpg">
            <div class="pattern height-resize">
                <div class="container">
                    <h3 class="section-name">
                        留言
                    </h3>
                    <h2 class="section-title">
                        祝福/吐槽
                    </h2>
                    <p class="section-description">
                        我知道你看到中文很激动，可以在下面抒发一下你的激动之情
                    </p>
                    <form id="contact-form" action="#" method="post" class="clearfix">
                        <div class="contact-box-hide">
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="contact_name" name="name" placeholder="你是谁?">
                                <span class="contact_name-error"></span>
                            </div>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="contact_phone" name="phone" placeholder="手机号码">
                                <span class="contact_phone-error"></span>
                            </div>
                            <div class="col-sm-6">
                                <input type="email" class="form-control" id="contact_email" name="email" placeholder="邮箱">
                                <span class="contact_email-error"></span>
                            </div>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="contact_wechat" name="wechat" placeholder="微信号">
                                <span class="contact_wechat-error"></span>
                            </div>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="5" id="message" name="message" placeholder="祝福语/吐槽的话"></textarea>
                                <span class="contact_message-error"></span>
                            </div>
                            <div class="col-sm-2">
                                <button id="contact-submit" class="btn custom-btn col-xs-12" type="submit" name="submit"><i onclick="callFireworks(true)" class="fa fa-rocket"></i></button>
                                <span id="contact-loading" class="btn custom-btn col-xs-12"> <i class="fa fa-refresh fa-spin"></i> </span>
                            </div>
                        </div>
                        <div class="contact-message"></div>
                    </form>
                    <div class="next-section">
                        <a class="go-to-page-top"><span></span></a>
                    </div>
                </div>
            </div>
        </section>
        <div id="color-style-switcher">
            <div>
                <h3>Color palette</h3>
                <ul class="colors">
                    <li><a class="color1 active" href="#"></a></li>
                    <li><a class="color2" href="#"></a></li>
                    <li><a class="color3" href="#"></a></li>
                    <li><a class="color4" href="#"></a></li>
                    <li><a class="color5" href="#"></a></li>
                    <li><a class="color6" href="#"></a></li>
                    <li><a class="color7" href="#"></a></li>
                    <li><a class="color8" href="#"></a></li>
                </ul>
            </div>
            <div class="bottom">
                <a href="#" class="settings"><i class="fa fa-cogs icon-2x"></i></a>
            </div>
        </div>
    </div>
    <!-- <script type="text/javascript" src="/assets/js/jquery-2.1.0.min.js"></script> -->
    <script type="text/javascript" src="/assets/js/jquery-2.1.0.min.js"></script>
    <!-- <script type="text/javascript" src="//bmob-cdn-14918.b0.upaiyun.com/2018/06/25/75d0991540ff10548037aa870086f47c.js"></script> -->
    <script type="text/javascript" src="/assets/js/plugins.js"></script>
    <!-- <script type="text/javascript" src="//bmob-cdn-14918.b0.upaiyun.com/2018/06/25/ee27d98b40c754a2802278c3be361831.js"></script> -->
    <script type="text/javascript" src="/assets/js/functions.js"></script>
    <script type="text/javascript" src="/assets/js/switcher.js"></script>
    <script type="text/javascript" src="/assets/js/jquery.fireworks.js"></script>
    <script type="text/javascript">
    function callFireworks(isClick) {
        if (window.isFirewordOpen) return;
        window.isFirewordOpen = true;

        var scr_fws = document.createElement('script');

        scr_fws.setAttribute('type', 'text/javascript');
        scr_fws.setAttribute('src', '/assets/js/jquery.fireworks.js');
        document.body.appendChild(scr_fws);
        $('.fireworks').fireworks({
            sound: false, // sound effect
            opacity: 0.18,
            width: '100%',
            height: '100%'
        });

        var bgmEle = document.createElement('embed');
        document.body.append(bgmEle);
        bgmEle.outerHTML = '<embed src="' + (isClick ? '//bmob-cdn-510.b0.upaiyun.com/2019/04/18/d896561240e8b4df8061635423f8d4a1.mp3' : '//bmob-cdn-510.b0.upaiyun.com/2019/04/18/9e45a3e64017ff1e80b81fa70b0c5697.mp3') + '" width="0" height="0" type="audio/mp3" loop="1" autostart="true" volume="10"></embed>';
    }
    setTimeout(function() { callFireworks(false); }, 60000);
    $('#time_countdown').countDown({
        fromDate: new Date(2012, 10 - 1, 19, 21, 22, 0),
        curDate: new Date(1775302508319),
        // curDate: new Date(2013,08,19,21,21,57),
        omitWeeks: true
    });
    </script>
    <!-- <div class="beiandiv"><a class="beiana" href="https://beian.miit.gov.cn/" target="_blank">粤ICP备18036418号-1</a></div> -->
</body>

</html>