faces/index.php at master · danteoh/faces · 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<?php require "directory.php" ?>
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Nulogy Anniversary</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="../favicon.ico">

    <!--Styles-->
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" href="css/reveal.css">

    <!--Modernizr-->
    <script type="text/javascript" src="js/modernizr.custom.26887.js"></script>

    <!--Initialize Avgrund -->


    </head>
    <body>
      <div id="anniversary_banner">
        <img src="images/ribbon-800.png"/>
      </div>
<div class="overlay"></div>

<?php foreach($people as $key => $person): ?>
<div id="modal_<?php echo $key?>" class="reveal-modal [expand, xlarge, large, medium, small]">
  <div style="width: 300px; float: left">
    <h2><?php echo $person["name"]?></h2>
    <p class="lead"><?php echo $person["team"]?></p>
    <?php if($person["favourite"]): ?>
      <h3>Favourite part of Nulogy</h3>
      <p><?php echo $person["favourite"]?></p>
    <?php endif ?>
    <?php if($person["future"]): ?>
      <h3>Looking to the future</h3>
      <p><?php echo $person["future"]?></p>
    <?php endif ?>
    <a class="close-reveal-modal">&#215;</a>
  </div>
  <div class="float: right; width: 350px">
    <img width=300 src="nulogy_anniversary/<?php echo $person["image"]?>.jpg"/>
  </div>
</div>
<?php endforeach ?>


    <img src="images/loading.gif" style="display:none;"/>

        <div class="container">

      <section class="main">

        <div id="responsive-grid" class="responsive-grid responsive-grid-size-3">
          <ul>
            <?php foreach($people as $key => $person): ?>
              <li><a <?php if($person["name"]):?>data-reveal-id="modal_<?php echo $key ?>"<?php endif ?>><img src="nulogy_anniversary/<?php echo $person["image"]?>.jpg"/></a></li>
            <?php endforeach ?>
          </ul>
        </div>

      <div class="avgrund-cover"></div>

      <!--Modal details for each individual -->


      </section>

        </div>


<!--Scripts (image roatation, responsive grid, agrund modal) -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.transit.min.js"></script>
    <script type="text/javascript" src="js/jquery.gridrotator.js"></script>
    <script type="text/javascript" src="js/jquery.reveal.js"></script>


<!--Specify Responsive Grid Break Points -->

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

        $( '#responsive-grid' ).gridrotator( {
          rows    : 10,
          columns   : 5,
          maxStep   : 0,
          step      : 0,
          w1024   : {
            rows  : 20,
            columns : 4
          },
          w768    : {
            rows  : 20,
            columns : 3
          },
          w480    : {
            rows  : 20,
            columns : 2
          },
          w320    : {
            rows  : 20,
            columns : 1
          },
          w240    : {
            rows  : 20,
            columns : 1
          },
        } );

        var ie = (function(){

            var undef,
                v = 3,
                div = document.createElement('div'),
                all = div.getElementsByTagName('i');

            while (
                div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
                all[0]
            );

            return v > 4 ? v : undef;

        }());

        if(ie < 9){
          alert("This team page requires the use of a modern browser.  Please use a recent version of Chrome, Safari, Firefox, or Internet Explorer (9+)")
        }

      });

    </script>
    </body>
</html>