SAAS-786: Implement Landing Page Design
Implemented logo, station name and description
This commit is contained in:
drigato
parent
10ca987a51
commit
479dbc5525
|
|
@ -128,7 +128,11 @@ class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
|
|||
$view->headLink()->appendStylesheet($baseUrl . 'css/redmond/jquery-ui-1.8.8.custom.css?' . $CC_CONFIG['airtime_version']);
|
||||
$view->headLink()->appendStylesheet($baseUrl . 'css/pro_dropdown_3.css?' . $CC_CONFIG['airtime_version']);
|
||||
$view->headLink()->appendStylesheet($baseUrl . 'css/qtip/jquery.qtip.min.css?' . $CC_CONFIG['airtime_version']);
|
||||
$view->headLink()->appendStylesheet($baseUrl . 'css/styles.css?' . $CC_CONFIG['airtime_version']);
|
||||
|
||||
// Don't include style.css on the Radio Page because there are conflicting styles.
|
||||
if ($_SERVER['REQUEST_URI'] != "/") {
|
||||
$view->headLink()->appendStylesheet($baseUrl . 'css/styles.css?' . $CC_CONFIG['airtime_version']);
|
||||
}
|
||||
$view->headLink()->appendStylesheet($baseUrl . 'css/masterpanel.css?' . $CC_CONFIG['airtime_version']);
|
||||
$view->headLink()->appendStylesheet($baseUrl . 'css/tipsy/jquery.tipsy.css?' . $CC_CONFIG['airtime_version']);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,12 +12,18 @@ class IndexController extends Zend_Controller_Action
|
|||
{
|
||||
$CC_CONFIG = Config::getConfig();
|
||||
$baseUrl = Application_Common_OsPath::getBaseDir();
|
||||
$this->view->headLink()->appendStylesheet($baseUrl.'css/landing-page.css?'.$CC_CONFIG['airtime_version']);
|
||||
$this->_helper->layout->setLayout('login');
|
||||
$this->view->headLink()->appendStylesheet($baseUrl.'css/radio-page/radio-page.css?'.$CC_CONFIG['airtime_version']);
|
||||
$this->_helper->layout->setLayout('radio-page');
|
||||
|
||||
$this->view->stationLogo = Application_Model_Preference::GetStationLogo();
|
||||
$this->view->stationName = Application_Model_Preference::GetStationName();
|
||||
$this->view->stationDescription = Application_Model_Preference::GetStationDescription();
|
||||
|
||||
$stationName = Application_Model_Preference::GetStationName();
|
||||
$stationName = empty($stationName) ? "Station Name" : $stationName;
|
||||
$this->view->stationName = $stationName;
|
||||
|
||||
$stationDescription = Application_Model_Preference::GetStationDescription();
|
||||
$stationDescription = empty($stationDescription) ? "Station Description" : $stationDescription;
|
||||
$this->view->stationDescription = $stationDescription;
|
||||
}
|
||||
|
||||
public function mainAction()
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<?php echo $this->doctype() ?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
|
||||
<?php echo $this->headTitle() ?>
|
||||
<?php echo $this->headLink() ?>
|
||||
<?php echo $this->headScript() ?>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<?php echo $this->layout()->content ?>
|
||||
|
||||
<!--
|
||||
<div class="footer">
|
||||
<?php
|
||||
$company = COMPANY_NAME . " " . COMPANY_SUFFIX;
|
||||
$licenseSiteAnchor = "<a href='" . LICENSE_URL . "'>"
|
||||
. LICENSE_VERSION
|
||||
. "</a>";
|
||||
$companySiteAnchor = "<a href='" . COMPANY_SITE_URL . "'>"
|
||||
. $company
|
||||
. "</a>";
|
||||
echo sprintf(_('%1$s copyright © %2$s All rights reserved.<br />'
|
||||
. 'Maintained and distributed under the %3$s by %4$s'),
|
||||
PRODUCT_NAME, $company,
|
||||
$licenseSiteAnchor,
|
||||
$companySiteAnchor);
|
||||
?>
|
||||
</div>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
|
||||
<div class="wrapper">
|
||||
|
||||
<div class="bck_cover"></div>
|
||||
|
||||
<?php if (!empty($this->stationLogo)) {
|
||||
echo "<a href = '#' class='logo' ><img src = 'data:image/png;base64," . $this->stationLogo. "'></a>";
|
||||
} ?>
|
||||
|
||||
<div id="tab-1" class="schedule tab_content current">
|
||||
<ul class="tabs">
|
||||
<li class="active" data-tab="day-1">THU <span>30</span></li><li class="" data-tab="day-2">FRI <span>1</span></li><li class="" data-tab="day-3">SAT <span>2</span></li><li class="" data-tab="day-4">SUN <span>3</span></li><li class="" data-tab="day-5">MON <span>4</span></li><li class="" data-tab="day-6">TUE <span>5</span></li><li class="" data-tab="day-7">WED <span>6</span></li>
|
||||
</ul>
|
||||
|
||||
<div class="schedule_content">
|
||||
<div id="day-1" class="schedule_item active">
|
||||
<table class="widget widget now-playing-list"><colgroup><col width="110"><col width="350"><col width="240"></colgroup><thead></thead><tfoot><tr><td></td></tr></tfoot><tbody><tr><td class="time_grid col_two">09:00 - 10:00</td><td class="name_grid"><h4>Ryerson's Ryecast</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">10:00 - 11:00</td><td class="name_grid"><h4>Endeavours</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">11:00 - 13:00</td><td class="name_grid"><h4>!earshot 20</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">13:00 - 14:00</td><td class="name_grid"><h4>Resonating Reconciliation</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">14:00 - 15:00</td><td class="name_grid"><h4>Documentary and Spoken Word</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">15:00 - 16:00</td><td class="name_grid"><h4>A Peek in the Music Library</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">16:00 - 17:00</td><td class="name_grid"><h4>A Peek in the Music Library</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">17:00 - 18:00</td><td class="name_grid"><h4>A Peek in the Music Library</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">18:00 - 19:00</td><td class="name_grid"><h4>The Star Spot</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">19:00 - 20:00</td><td class="name_grid"><h4>Song Talk</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">20:00 - 21:00</td><td class="name_grid"><h4>Metal On Metal</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">21:00 - 22:00</td><td class="name_grid"><h4>The B & D Approach</h4></td><td class="more_grid"></td></tr><tr><td class="time_grid col_two">22:00 - 00:00</td><td class="name_grid"><h4>Something Completely Different</h4></td><td class="more_grid"></td></tr></tbody></table>
|
||||
</div>
|
||||
|
||||
<div id="day-2" class="schedule_item">
|
||||
<p>Day 2</p>
|
||||
</div>
|
||||
|
||||
<div id="day-3" class="schedule_item">
|
||||
<p>Day 3</p>
|
||||
</div>
|
||||
|
||||
<div id="day-4" class="schedule_item">
|
||||
<p>Day 4</p>
|
||||
</div>
|
||||
|
||||
<div id="day-5" class="schedule_item">
|
||||
<p>Day 5</p>
|
||||
</div>
|
||||
|
||||
<div id="day-6" class="schedule_item">
|
||||
<p>Day 6</p>
|
||||
</div>
|
||||
|
||||
<div id="day-7" class="schedule_item">
|
||||
<p>Day 7</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tab-2" class="about_us tab_content">
|
||||
<h1><?php echo $this->stationName ?></h1>
|
||||
<p><?php echo $this->stationDescription ?></p>
|
||||
</div>
|
||||
|
||||
<div id="tab-3" class="login tab_content">
|
||||
<h2>Login</h2>
|
||||
<form action="demo_form.asp">
|
||||
<input type="text" name="FirstName" value="username"><br>
|
||||
<input type="text" name="Password" value="password"><br>
|
||||
<input type="submit" value="Login">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bottom_bar">
|
||||
<div class="play cont_btn">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="on_air">
|
||||
<p>Bob Marley
|
||||
<span>Chant Down Babylon</span></p>
|
||||
</div>
|
||||
|
||||
<div class="schedule_btn button current" data-tab="tab-1">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="about_us_btn button" data-tab="tab-2">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="login_btn button" data-tab="tab-3">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
|
||||
$('.bottom_bar .button').click(function(){
|
||||
var tab_id = $(this).attr('data-tab');
|
||||
|
||||
$('.bottom_bar .button').removeClass('current');
|
||||
$('.tab_content').removeClass('current');
|
||||
|
||||
$(this).addClass('current');
|
||||
$("#"+tab_id).addClass('current');
|
||||
})
|
||||
|
||||
$('.tabs li').click(function(){
|
||||
var tab_id = $(this).attr('data-tab');
|
||||
|
||||
$('.tabs li').removeClass('active');
|
||||
$('.schedule_item').removeClass('active');
|
||||
|
||||
$(this).addClass('active');
|
||||
$("#"+tab_id).addClass('active');
|
||||
})
|
||||
|
||||
$(".play").click(function(){
|
||||
$(this).toggleClass("pause");
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 411 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 704 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 293 B |
Binary file not shown.
|
After Width: | Height: | Size: 691 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -0,0 +1,376 @@
|
|||
html {
|
||||
background: url("img/background.png") no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.bck_cover {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
margin: 70px 0px 0px 60px;
|
||||
}
|
||||
|
||||
.tab_content {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/*display: none;*/
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
max-width: 740px;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 140px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -380px;
|
||||
/* -webkit-transition-delay: 1s;
|
||||
transition-delay: 1s;*/
|
||||
}
|
||||
|
||||
.tab_content.current {
|
||||
/*display: block;*/
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.schedule .tabs {
|
||||
list-style: none;
|
||||
padding-left: 0px;
|
||||
margin: 0px;
|
||||
background: rgba(69, 155, 143, 0.8);
|
||||
}
|
||||
|
||||
.schedule .tabs li {
|
||||
width: 105px;
|
||||
height: 80px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.schedule .tabs li span {
|
||||
font-size: 30px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.schedule .tabs li.active {
|
||||
background: #459B8F;
|
||||
}
|
||||
|
||||
.schedule .tabs li.active:hover {
|
||||
background: #459B8F;
|
||||
}
|
||||
|
||||
.schedule .tabs li:hover {
|
||||
background: rgba(69, 155, 143, 0.6)
|
||||
}
|
||||
|
||||
.schedule_content {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
max-height: 0px;
|
||||
transition: max-height 2s ease;
|
||||
/*transition-delay: 1s;*/
|
||||
}
|
||||
|
||||
.schedule.current .schedule_content {
|
||||
max-height: 2000px;
|
||||
}
|
||||
|
||||
.schedule_content table {
|
||||
opacity: 0;
|
||||
/*transition: all 1s ease;*/
|
||||
}
|
||||
|
||||
.schedule.current .schedule_content table {
|
||||
opacity: 1;
|
||||
-webkit-transition-delay: 0.6s;
|
||||
transition-delay: 0.6s;
|
||||
}
|
||||
|
||||
.schedule_item {
|
||||
display: none;
|
||||
font-size: 17px;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
padding: 30px 40px;
|
||||
}
|
||||
|
||||
.schedule_item.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.schedule_item .time_grid {
|
||||
font-weight: 300;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
|
||||
.schedule_item .name_grid {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.schedule_item h4 {
|
||||
margin: 10px 0px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.about_us {
|
||||
-webkit-transition-delay: 2s;
|
||||
transition-delay: 2s;
|
||||
}
|
||||
|
||||
.schedule, .about_us, .login {
|
||||
/* -webkit-transition-delay: 1s;
|
||||
transition-delay: 1s;*/
|
||||
transition: all 0.4s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.about_us.current, .login.current {
|
||||
opacity: 1;
|
||||
-webkit-transition-delay: 0.4s;
|
||||
transition-delay: 0.4s;
|
||||
}
|
||||
|
||||
.schedule.current {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.about_us h1 {
|
||||
font-size: 80px;
|
||||
font-weight: 300;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.about_us p {
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.login h2 {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
margin-bottom: 1px;
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type="text"]:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
background: #459B8F;
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
padding: 18px 20px;
|
||||
margin-top: 20px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type="submit"]:hover {
|
||||
background-color: #409187;
|
||||
}
|
||||
|
||||
.bottom_bar {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
height: 120px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.bottom_bar .cont_btn {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bottom_bar .cont_btn:hover {
|
||||
background-color: #409187;
|
||||
}
|
||||
|
||||
.bottom_bar .play {
|
||||
background: #459B8F url('img/play.png') no-repeat center center;
|
||||
}
|
||||
|
||||
.bottom_bar .pause {
|
||||
background: #459B8F url('img/pause.png') no-repeat center center;
|
||||
}
|
||||
|
||||
.on_air {
|
||||
display: inline-block;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.bottom_bar p {
|
||||
color: #222222;
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
float: left;
|
||||
margin: 28px 0px;
|
||||
}
|
||||
|
||||
.bottom_bar p span {
|
||||
display: block;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.bottom_bar .button {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
margin: 35px 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bottom_bar .schedule_btn {
|
||||
background: url('img/schedule.png') no-repeat center 0px;
|
||||
}
|
||||
|
||||
.bottom_bar .schedule_btn.current {
|
||||
background: url('img/schedule.png') no-repeat center -50px;
|
||||
}
|
||||
|
||||
.bottom_bar .about_us_btn {
|
||||
background: url('img/about_us.png') no-repeat center 0px;
|
||||
}
|
||||
|
||||
.bottom_bar .about_us_btn.current {
|
||||
background: url('img/about_us.png') no-repeat center -50px;
|
||||
}
|
||||
|
||||
.bottom_bar .login_btn {
|
||||
background: url('img/login.png') no-repeat center 0px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.bottom_bar .login_btn.current {
|
||||
background: url('img/login.png') no-repeat center -50px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
@media (max-width: 780px) {
|
||||
.logo {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
.tab_content {
|
||||
margin-top: 0px;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.schedule .tabs li {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.about_us h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.about_us p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.bottom_bar {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.bottom_bar .play {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
float: left;
|
||||
background-size: 60%;
|
||||
}
|
||||
|
||||
.bottom_bar p {
|
||||
font-size: 18px;
|
||||
margin: 10px 10px;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bottom_bar p span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.on_air {
|
||||
margin-left: 0px;
|
||||
position: absolute;
|
||||
top: -82px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
padding-top: 40px;
|
||||
background: rgba(0,0,0,0);
|
||||
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 69%, rgba(0,0,0,1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(69%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 69%, rgba(0,0,0,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 69%, rgba(0,0,0,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 69%, rgba(0,0,0,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 69%, rgba(0,0,0,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
|
||||
}
|
||||
|
||||
.bottom_bar .button {
|
||||
margin: 15px 20px;
|
||||
}
|
||||
|
||||
.bottom_bar .schedule_btn.current {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.bottom_bar .about_us_btn {
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue