ProjectOne/groupskeleton.html at master · dfarrenk/ProjectOne · 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
<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="UTF-8">
    <title>Secret Santa Groups</title>

    <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>

    <!-- JQuery link -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    <link rel="stylesheet" href="./assets/css/indexStyle.css" type="text/css" />
</head>

<body>
    <nav>
        <div class="nav-wrapper cyan darken-3">

            <a href="#" class="brand-logo center">Logo</a>
            <!--<ul id="nav-mobile" class="left cyan darken-3">-->
            <!--    <li><a href="index.html">One</a></li>-->
            <!--    <li><a href="badges.html">Two</a></li>-->
            <!--    <li><a href="collapsible.html">Three</a></li>-->
            <!--</ul>-->
        </div>
    </nav>
    <div class="row">
        <div class="col s3">

        </div>
        <div class="col s6">
            <div class="group-item" id="group-0">
                <h3 class="center">Group One</h3>
                <h5>Members: <span id="member-count0">Test</span></h5>
                <ul class="collection" id="member-list0">
                    <li class="collection-item">Alvin</li>
                </ul>
                <a class="waves-effect waves-light btn"><i class="material-icons left">ac_unit</i>Start</a>
                <a class="waves-effect waves-light btn" id="expandEmail0"><i class="material-icons left">email</i>AdD</a>

                <form class="input-field scale-transition scale-out" id="emailForm0">
                    <input id="inviteEmail" type="email" class="validate" style="width:80%">
                    <label for="inviteEmail">Email</label>
                    <button id="inviteEmailButton" type="button" class="btn-floating btn-large right"><i class="material-icons">arrow_forward</i></button>
                </form>

            </div>
            <!--<div class="group-item">-->
            <!--    <h3 class="center">Group One</h3>-->
            <!--    <h5>Members: <span id="member-count1">Test</span></h5>-->
            <!--    <ul class="collection" id="member-list1">-->
            <!--        <li class="collection-item">-->
            <!--            <div class="chip">-->
            <!--                <img src="images/yuna.jpg" alt=""> Jane Doe-->
            <!--            </div>-->
            <!--        </li>-->
            <!--        <li class="collection-item">Alvin</li>-->
            <!--    </ul>-->
            <!--    <a class="waves-effect waves-light btn"><i class="material-icons left">ac_unit</i>Start</a>-->
            <!--</div>-->

        </div>
        <div class="col s3">
            <div style="padding: 20px">
                <button class="btn-floating btn-large waves-effect waves-light right" id="play-music"><i class="material-icons">play_circle_outline</i></button>
                <div id="player" style="visibility:hidden"></div>
            </div>
        </div>


        <!--TODO: Link Me-->
        <script src="assets/javascript/script.js"></script>
        <script type="text/javascript" src="assets/javascript/music.js"></script>
        <script>
            $("#expandEmail0").click(function() {
                $("#emailForm0").toggleClass("scale-out").toggleClass("scale-in");
            });
        </script>
    </div>
</body>

</html>