vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

New experimental landing page design

Browse source
This commit is contained in:
Joseph Schorr 2014-04-13 18:33:32 -04:00
parent 0bd8a1bcbf
commit 50545236e3
10 changed files with 184 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

107
static/css/quay.css
View file

@ -1168,6 +1168,14 @@ i.toggle-icon:hover {
text-decoration: none;
}
.landing-page {
color: #555;
}
.landing-page .wrapper > nav {
display: none;
}
.landing .popover {
font-size: 14px;
}
@ -1176,20 +1184,53 @@ i.toggle-icon:hover {
color: white;
background-color: #1d1d1d;
background-position: left -30px;
background-image: url(../img/containers-back-black.jpg);
background-position: left -300px;
background-image: url(../img/landing-back.jpg);
background-repeat: no-repeat;
margin-top: -20px;
margin-bottom: 0px;
padding-top: 46px;
padding-top: 120px;
min-height: 440px;
}
.landing .messages {
margin-bottom: 40px;
.landing .logo {
position: absolute;
top: 10px;
left: 10px;
}
.landing .product-name {
position: absolute;
top: 22px;
left: 131px;
color: white;
font-size: 40px;
}
.landing .nav {
font-size: 16px;
position: absolute;
right: 20px;
top: 20px;
color: white;
}
.landing .nav a {
font-weight: bold;
color: white;
border-radius: 6px;
}
.landing .nav li a:hover {
background: rgba(255, 255, 255, 0.2);
}
@media (max-height: 768px) {
.landing {
}
}
.landing .messages b {
@ -1200,6 +1241,33 @@ i.toggle-icon:hover {
font-size: 48px;
}
.landing-section {
padding: 20px;
padding-bottom: 40px;
border-top: 1px solid #ddd;
display: block;
}
.landing-section:nth-child(even) {
background: #f7f7f7;
}
.landing-section h2 {
text-align: center;
display: block;
margin-bottom: 50px;
font-weight: 200;
}
.landing-page .tour-overview {
}
.landing-page .tour-overview img {
width: 500px;
padding: 10px;
display: inline-block;
}
.form-signup input {
margin: 12px;
margin-left: 0px;
@ -1259,28 +1327,39 @@ form input.ng-valid.ng-dirty,
color: black;
}
.landing .shoutout i {
.landing-page .shoutout > i {
font-size: 36px;
display: block;
}
.landing .shoutout b {
.landing-page .shoutout > b {
font-size: 22px;
display: block;
line-height: 31px;
}
.landing .shoutout {
.landing-page .shoutout {
font-size: 14px;
text-align: center;
line-height: normal;
}
@media (max-height: 768px) {
.landing {
padding: 20px;
padding-top: 20px;
}
.landing-page .feature-shoutout {
margin-bottom: 20px;
}
.landing-page .feature-shoutout > a {
font-size: 22px;
display: block;
line-height: 31px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.landing-page .feature-shoutout .img-responsive {
border: 2px solid #eee;
padding: 6px;
}
.page-footer {

BIN
static/img/box-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
static/img/landing-back copy.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 884 KiB

BIN
static/img/landing-back.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 886 KiB

BIN
static/img/landing-back.psd Normal file
View file

Binary file not shown.

BIN
static/img/modcloth-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9 KiB

2
static/js/app.js
View file

@ -4204,6 +4204,8 @@ quayApp.run(['$location', '$rootScope', 'Restangular', 'UserService', 'PlanServi
});
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
$rootScope.customClass = '';
if (current.$$route.title) {
$rootScope.title = current.$$route.title;
}

4
static/js/controllers.js
View file

@ -262,7 +262,9 @@ function RepoListCtrl($scope, $sanitize, Restangular, UserService, ApiService) {
loadPublicRepos();
}
function LandingCtrl($scope, UserService, ApiService) {
function LandingCtrl($scope, UserService, ApiService, $rootScope) {
$rootScope.customClass = 'landing-page';
$scope.namespace = null;
$scope.$watch('namespace', function(namespace) {

165
static/partials/landing.html
View file

@ -1,4 +1,17 @@
<div class="jumbotron landing">
<img class="logo" src="/static/img/box-logo.png">
<span class="product-name">Quay.io</span>
<ul class="nav navbar-nav">
<li><a href="http://docs.quay.io/" target="_blank">Tour</a></li>
<li><a href="http://docs.quay.io/" target="_blank">Documentation</a></li>
<li><a ng-href="/tutorial/" target="{{ appLinkTarget() }}">Tutorial</a></li>
<li><a ng-href="/plans/" target="{{ appLinkTarget() }}">Pricing</a></li>
<li><a ng-href="/repository/" target="{{ appLinkTarget() }}">Repositories</a></li>
<li><a ng-href="/organizations/" target="{{ appLinkTarget() }}">Organizations</a></li>
<li><a ng-href="/signin/" target="{{ appLinkTarget() }}">Sign In</a></li>
</ul>
<div class="container">
<div class="row messages">
<div class="col-md-7">
@ -49,101 +62,93 @@
</div>
</div> <!-- col -->
</div> <!-- row -->
<div class="row" ng-show="user.anonymous">
<div class="col-md-4 shoutout">
<i class="fa fa-lock"></i>
<b>Secure</b>
<span class="shoutout-expand">
Your data is transferred using <strong>SSL at all times</strong> and <strong>encrypted</strong> when at rest. More information available in our <a href="/security/">security guide</a>
</span>
</div>
<div class="col-md-4 shoutout">
<i class="fa fa-group"></i>
<b>Shareable</b>
<span class="shoutout-expand">
Have to share a repository? No problem! Share with anyone you choose
</span>
</div>
<div class="col-md-4 shoutout">
<i class="fa fa-cloud"></i>
<b>Cloud Hosted</b>
<span class="shoutout-expand">
Accessible from anywhere, anytime
</span>
</div>
</div> <!-- row -->
</div> <!-- container -->
</div> <!-- jumbotron -->
<div class="product-tour container" ng-show="user.anonymous">
<div class="tour-header row">
<div class="tour-shoutout-header"><i class="fa fa-chevron-circle-down"></i></div>
<div class="tour-shoutout">Take a tour of Quay</div>
</div>
<div class="tour-section row">
<div class="col-md-7"><img src="/static/img/user-home.png" data-title="User Home - Quay.io" data-screenshot-url="https://quay.io/" class="img-responsive"></div>
<div class="col-md-5">
<div class="tour-section-title">Customized for you</div>
<div class="tour-section-description">
Your personal home screen shows those repositories most important to you, ordered by recent activity.
</div>
<div class="tour-section-description">Keep up to date on the status of those repositories you deem important.</div>
<div class="">
<div class=" shoutout-row landing-section">
<h2>Simple and straightforward benefits</h2>
<div class="container">
<div class="col-md-4 shoutout">
<i class="fa fa-lock"></i>
<b>Secure</b>
<span class="shoutout-expand">
Your data is transferred using <strong>SSL at all times</strong> and <strong>encrypted</strong> when at rest. More information available in our <a href="/security/">security guide</a>
</span>
</div>
</div>
<div class="tour-section row">
<div class="col-md-7 col-md-push-5"><img src="/static/img/repo-view.png" data-title="Repository View - Quay.io" data-screenshot-url="https://quay.io/repository/devtable/complex" class="img-responsive"></div>
<div class="col-md-5 col-md-pull-7">
<div class="tour-section-title">Useful views of respositories</div>
<div class="tour-section-description">
Each repository is presented with the maximum amount of useful information, including its image history, <b>markdown</b>-based description, and tags.
<div class="col-md-4 shoutout">
<i class="fa fa-group"></i>
<b>Shareable</b>
<span class="shoutout-expand">
Have to share a repository? No problem! Share with anyone you choose
</span>
</div>
<div class="col-md-4 shoutout">
<i class="fa fa-cloud"></i>
<b>Cloud Hosted</b>
<span class="shoutout-expand">
Accessible from anywhere, anytime
</span>
</div>
</div>
</div> <!-- -->
<div class=" landing-section">
<h2>Trusted by companies who use Docker</h2>
<div class="container">
<div>
<img src="/static/img/modcloth-logo.png">
</div>
</div>
</div> <!-- -->
<div class="landing-section">
<h2>Business-class management tools</h2>
<div class="container">
<div class="col-md-4 feature-shoutout">
<img src="/static/img/user-home.png" class="img-responsive">
<a href="">Customized for you</a>
</div>
<div class="col-md-4 feature-shoutout">
<img src="/static/img/repo-view.png" class="img-responsive">
<a href="">Detailed repository information</a>
</div>
<div class="col-md-4 feature-shoutout">
<img src="/static/img/build-history.png" class="img-responsive">
<a href="">Dockerfile build in the cloud</a>
</div>
</div>
</div>
<div class="tour-section row">
<div class="col-md-7"><img src="/static/img/build-history.png" data-title="View Image - Quay.io"
data-screenshot-url="https://quay.io/repository/devtable/building/build"
class="img-responsive"></div>
<div class="col-md-5">
<div class="tour-section-title">Dockerfile Build in the cloud</div>
<div class="tour-section-description">
Like to use <b>Dockerfiles</b> to build your images? Simply upload your Dockerfile (and any additional files it needs) and we'll build your Dockerfile into an image and push it to your repository.
<div class="container">
<div class="col-md-4 feature-shoutout">
<img src="/static/img/repo-admin.png" class="img-responsive">
<a href="">Fine grain permissions model</a>
</div>
<div class="tour-section-description">
If you store your Dockerfile in <i class="fa fa-github fa-lg" style="margin: 6px;"></i><b>GitHub</b>, add a <b>Build Trigger</b> to your repository and we'll start a Dockerfile build for every change you make.
<div class="col-md-4 feature-shoutout">
<img src="/static/img/repo-changes.png" class="img-responsive">
<a href="">Docker diff visualized</a>
</div>
<div class="col-md-4 feature-shoutout">
<img src="/static/img/org-repo-list.png" class="img-responsive">
<a href="">Organizations and Teams</a>
</div>
</div>
</div>
</div> <!-- -->
<div class="tour-section row">
<div class="col-md-7 col-md-push-5"><img src="/static/img/repo-admin.png" data-title="Repository Admin - Quay.io" data-screenshot-url="https://quay.io/repository/devtable/complex/admin" class="img-responsive"></div>
<div class="col-md-5 col-md-pull-7">
<div class="tour-section-title">Share at your control</div>
<div class="tour-section-description">
Share any repository with as many (or as few) users as you choose.
</div>
<div class="tour-section-description">Need a repository only for your team? Easily <b>share</b> with your team members.</div>
<div class="tour-section-description">Need finer grain control? Mark a user as <b>read-only</b> or <b>read/write</b>.</div>
<div class="tour-section-description">Have a build script or a deploy process that needs access? Generate an <b>access token</b> to grant revocable access for pushing or pulling.</div>
<div class="tour-section-description">Want to share with the world? Make your repository <b>fully public</b>.</div>
</div>
</div>
<div class="tour-section row">
<div class="col-md-7"><img src="/static/img/repo-changes.png" data-title="View Image - Quay.io" data-screenshot-url="https://quay.io/repository/devtable/image/..." class="img-responsive"></div>
<div class="col-md-5">
<div class="tour-section-title">Docker diff whenever you need it</div>
<div class="tour-section-description">
We wanted to know what was changing in each image of our repositories just as much as you do. So we added diffs. Now you can see exactly which files were <b>added</b>, <b>changed</b>, or <b>removed</b> for each image. We've also provided two awesome ways to view your changes, either in a filterable list, or in a drill down tree view.
</div>
<div class="landing-section">
<h2>See what people are saying about Quay.io</h2>
<div class="container">
</div>
</div>
</div>
<div class="container">
<div style="border-top: 1px solid #eee; padding-top: 20px;">
<a href="https://mixpanel.com/f/partner"><img src="//cdn.mxpnl.com/site_media/images/partner/badge_light.png" alt="Mobile Analytics" /></a>
</div>

2
templates/base.html
View file

@ -102,7 +102,7 @@ var isProd = document.location.hostname === 'quay.io';
*/
</script>
</head>
<body>
<body ng-class="customClass">
<div ng-class="!fixFooter ? 'wrapper' : ''">
<nav class="navbar navbar-default header-bar" role="navigation"></nav>