kiosk/services.html at master · nateve/kiosk · 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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kiosk Display - Undergraduate Library Services</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/local_media_queries.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container-fluid">
    <div class="row" id="unit_header">
      <div class="col-xs-12 col-md-8">
        <h4 class="unit_name">Undergraduate Library</h4>
      </div>
      <div class="col-xs-12 col-md-4 blue_filler">

      </div>
    </div>
  </div> <!-- /container -->

  <!-- main call to action //-->
  <div class="container-fluid" id="news-frame">
    <div class="row col-md-offset-1">
      <h1 class="main_call blue-dk">Services</h1>
    </div>

    <div class="col-md-8 col-md-offset-1 news-container">

      <div class="news-item">
        <div class="news-image pull-left">
          <img src="img/group_small.jpg" height="100px" width="100px" />
        </div>
        <div class="news-body">
          <h4 class="news-header blue-md">Group and Individual Study</h4>
          <p class="no-margin">Take advantage of reservable Group Rooms, large tables, and technology-enhanced spaces on the Upper Level to work with friends and classmates, and quiet study spaces on the lower level for individual work.</p>
        </div>
      </div>

      <div class="news-item">
        <div class="news-image pull-left">
          <img src="img/collection_small.jpg" height="100px" width="100px" />
        </div>
        <div class="news-body">
          <h4 class="news-header blue-md">Collections</h4>
          <p class="no-margin">Explore our broad combination of traditional textbook and background information materials and unique popular culture items, including genre fiction, graphic novels, feature films, TV series, and video games.</p>
        </div>
      </div>

      <div class="news-item">
        <div class="news-image pull-left">
          <img src="img/tech_small.jpg" height="100px" width="100px" />
        </div>
        <div class="news-body">
          <h4 class="news-header blue-md">Technology</h4>
          <p class="no-margin">Enhance your projects with hardware from our Loanable Technology (cameras, lighting, audio recorders, etc.) and high-end computing resources from our Media Commons.</p>
        </div>
      </div>

      <div class="news-item">
        <div class="news-image pull-left">
          <img src="img/experts_small.jpg" height="100px" width="100px" />
        </div>
        <div class="news-body">
          <h4 class="news-header blue-md">Expert Assistance</h4>
          <p class="no-margin">Improve your skills by visiting with our variety of consultation services, including Librarian Office Hours, the Writer's Workshop, Media Commons Technology Specialists, and Resume and Cover Letter critiques.</p>
        </div>
      </div>

    </div>

  </div> <!-- /container //-->

  <!-- main navigation button//-->
  <div class="container-fluid" id="button_row">
    <div class="row">
      <div class="col-xs-12 col-md-6 col-md-offset-3">
        <a type="button" class="btn btn-xl" href="welcome_top.html">Start Over</a>
      </div>
    </div>
  </div> <!-- /container //-->

  <!-- footer //-->
  <div class="container-fluid">
    <div class="row" id="unit_footer">
      <div class="col-md-3 pull-right">
        <img src="img/ilogo_horz_bold.gif" alt="University of Illinois Logo" class="logo" />
      </div>

    </div> <!-- end footer row //-->

  </div> <!-- /container -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/kiosk.js"></script>
    <script>
      $(document).ready(function(){

        //functions

        function setHeight () {
          //var viewport = $( window ).height();
          var footer_loc = $("#unit_footer").offset();
          var header_loc = $("#unit_header").height();
          var maincall_loc = $("h1.main_call").first().outerHeight(true);
          var bg_offset = parseInt(footer_loc.top - header_loc - 120);
          var news_offset = parseInt(bg_offset-maincall_loc);
          $("#news-frame").height(bg_offset);
          $(".news-container").css("height", news_offset);

        }

        // global checks
        $( window ).resize(function() {
          setHeight();
        })

        // loading calls
        setHeight();

        preload([
            'img/collection_small.jpg',
            'img/tech_small.jpg',
            'img/experts_small.jpg',
            'img/group_small.jpg'
        ]);

      })

    </script>
    <script src="http://www.library.illinois.edu/scripts/ga/gaelt.js" type="text/javascript"></script>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-20288093-1']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </body>
</html>