react-wrap/coming-soon.html at master · codingmaven/react-wrap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>React - Bootstrap Theme</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<!-- stylesheets -->
	<link rel="stylesheet" type="text/css" href="css/compiled/theme.css">
    <link rel="stylesheet" type="text/css" href="css/vendor/ionicons.min.css">
    <link rel="stylesheet" type="text/css" href="css/vendor/flipclock.css">

	<!-- javascript -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/vendor/flipclock/libs/base.js"></script>
    <script src="js/vendor/flipclock/flipclock.js"></script>
    <script src="js/vendor/flipclock/faces/hourlycounter.js"></script>

	<script src="js/theme.js"></script>

	<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body id="coming-soon" class="">

    <div class="skins-nav">
        <a href="#" class="skin light active">
            <span class="text">Light</span>
            <span class="ion ion-android-checkmark"></span>
        </a>
        <a href="#" class="skin dark">
            <span class="text">Dark</span>
            <span class="ion ion-android-checkmark"></span>
        </a>
    </div>

    <div class="container">
        <div class="row info">
            <div class="col-md-12">
                <h1><a href="index.html">React</a></h1>
                <h3>We're launching very soon.</h3>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div id="countdown">
                    <div id="clock"></div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <form class="form-inline" role="form">
                  <div class="form-group">
                    <label class="sr-only" for="exampleInputEmail2">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter your email">
                  </div>
                  <a href="index.html" class="button">Notify me</a>
                  <!-- <button type="submit" class="btn btn-primary">Notify me</button> -->
                </form>
            </div>
        </div>

        <div class="row social">
            <div class="col-md-12">
                <a class="ion" href="#"><span class="ion-social-twitter"></span></a>
                <!-- <a class="ion" href="#"><span class="ion-social-facebook"></span></a> -->
                <div class="tm">Follow up @ReactTheme</div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function () {

            var clock;

            // Grab the current date
            var currentDate = new Date();

            // Set some date in the future. In this case, it's always Jan 1
            var futureDate  = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), currentDate.getHours() + 20);

            // Calculate the difference in seconds between the future and current date
            var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;

            // Instantiate a coutdown FlipClock
            clock = $('#clock').FlipClock(diff, {
                countdown: true
            });


            // skin changer
            var $skins = $(".skins-nav .skin");
            $skins.click(function (e) {
                e.preventDefault();

                $skins.removeClass("active");
                $(this).addClass("active");

                if ($(this).hasClass("light")) {
                    $("body").removeClass("dark");
                } else {
                    $("body").addClass("dark");
                }
            });


        });
    </script>
</body>
</html>