app/views/main/index.html.erb
<!-- app/views/main/index.html.erb -->
<!DOCTYPE html>
<html>
<head>
<title>Project Hermione (Beta)</title>
<%= stylesheet_link_tag 'application' %>
<%= stylesheet_link_tag 'splash-bundle' %>
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'splash-bundle' %>
<%= csrf_meta_tags %>
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top"><%= image_tag "main/logo.png" %></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#services">Features</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">About</a>
</li>
<li>
<%= link_to "Sign In", login_path, class: "page-scroll", data: { toggle: "modal" } %>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header>
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">A New Way To Get Your Class</div>
<div class="intro-heading">Webcasted</div>
<a href="#services" class="page-scroll"><%= image_tag "main/down.png", width: "50px" %></a>
</div>
</div>
</header>
<!-- Services Section -->
<section id="services" class="bg-white">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Features</h2>
<h3 class="section-subheading text-muted">What makes Hermione undeniably awesome...</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-magic fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Automagical Configuration</h4>
<p class="text-muted">Configuring a webcast is as a simple as possible. In fact, it's almost magical how simple it is.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-cogs fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Customizable</h4>
<p class="text-muted">With many different possible options, Hermione lets you see what your webcast will look like as you configure it. What you see is what you get.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-cloud fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Web Native</h4>
<p class="text-muted">Project Hermione was purpose built to make configuring webcasts easy and reliable.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Grid Section -->
<section id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">About</h2>
<h3 class="section-subheading text-muted">Get to know how Hermione works...</h3>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-play fa-3x"></i>
</div>
</div>
<%= image_tag "main/roundicons.png", class: "img-responsive" %>
</a>
<div class="portfolio-caption">
<h4>Configuring Courses</h4>
<!-- <p class="text-muted">Graphic Design</p>-->
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-play fa-3x"></i>
</div>
</div>
<%= image_tag "main/startup-framework.png", class: "img-responsive" %>
</a>
<div class="portfolio-caption">
<h4>Organizing Courses</h4>
<!-- <p class="text-muted">Website Design</p>-->
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-play fa-3x"></i>
</div>
</div>
<%= image_tag "main/treehouse.png", class: "img-responsive" %>
</a>
<div class="portfolio-caption">
<h4>Editing Webcasts</h4>
<!-- <p class="text-muted">Website Design</p>-->
</div>
</div>
</div>
</div>
</section>
<footer class="bg-white">
<div class="container">
<div class="row">
<div class="col-md-6">
<span class="copyright">Copyright © UC Regents 2016</span>
</div>
<!--
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
-->
<div class="col-md-6">
<ul class="list-inline quicklinks">
<li><a href="#">Privacy Policy</a>
</li>
<li><a href="#">Terms of Use</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Portfolio Modals -->
<!-- Use the modals below to showcase details about your portfolio projects! -->
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Configuring Courses</h2>
<iframe class="img-centered" width="560" height="315" src="https://www.youtube.com/embed/lkoVXamWbFQ" frameborder="0" allowfullscreen></iframe>
<p>A brief walkthrough on how you can configure your course's settings for webcasting.</p>
<!--
<p>
<strong>Want these icons in this portfolio item sample?</strong>You can download 60 of them for free, courtesy of <a href="https://getdpd.com/cart/hoplink/18076?referrer=bvbo4kax5k8ogc">RoundIcons.com</a>, or you can purchase the 1500 icon set <a href="https://getdpd.com/cart/hoplink/18076?referrer=bvbo4kax5k8ogc">here</a>.</p>
<ul class="list-inline">
<li>Date: July 2014</li>
<li>Client: Round Icons</li>
<li>Category: Graphic Design</li>
</ul>
-->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 2 -->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Organizing Courses</h2>
<iframe class="img-centered" width="560" height="315" src="https://www.youtube.com/embed/lkoVXamWbFQ" frameborder="0" allowfullscreen></iframe>
<p>A brief walkthrough on how you can start organizing your courses in the user-friendly dashboard.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 3 -->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Editing Webcasts</h2>
<iframe class="img-centered" width="560" height="315" src="https://www.youtube.com/embed/lkoVXamWbFQ" frameborder="0" allowfullscreen></iframe>
<p>A brief walkthrough on how you can edit and retrieve previously saved webcast configurations for both new and old courses.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Plugin JavaScript -->
<%= javascript_include_tag 'http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js' %>
</body>
</html>