Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update landing page #147

Merged
merged 3 commits into from
Oct 26, 2020
Merged

Update landing page #147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1736894
Update landing page
sirplagueis Oct 21, 2020
531fad9
Minimalistic landing page with clean layout and clear CTA
mdolr Oct 26, 2020
245da0c
Merge branch 'master' into pr/147
mdolr Oct 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/images/airplane.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions docs/images/logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
93 changes: 62 additions & 31 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A browser extension to preview any link you hover. Stop wasting time managing too many tabs and discover a new way of navigating on the internet.">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="https://rawcdn.githack.com/mdolr/survol/68a3e7d0117bbc84293f41c85aa70d53cc0d430d/images/icon128.png" />
Expand All @@ -25,56 +26,87 @@
<script src="https://rawcdn.githack.com/mdolr/survol/ed6ea6c6b786df352c105f00da6e9572f99add49/js/templates/twitter.js"></script>
<script src="https://rawcdn.githack.com/mdolr/survol/ed6ea6c6b786df352c105f00da6e9572f99add49/js/templates/wikipedia.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
const START = 1602226800000;
const END = 1602313200000;
let now = new Date().getTime();
<script src="https://cdn.jsdelivr.net/gh/mdolr/survol@master/js/templates/reddit.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mdolr/survol@master/js/templates/youtube.js"></script>

if (now >= START && now <= END) {
document.getElementById('producthunt').classList.remove('hidden');
}
});
</script>
<!--
<script src="https://cdn.jsdelivr.net/gh/mdolr/survol@master/js/templates/reddit.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mdolr/survol@master/js/templates/youtube.js"></script>
-->
</head>

<body>
<a id="producthunt" class="hidden" style="position:fixed; left:24px; bottom:24px; z-index:15000!important;" href="https://www.producthunt.com/posts/survol?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-survol" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=269855&theme=dark" alt="Survol - Preview any link you hover, save time and tabs. | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>

<div class="container">
<div class="hero">
<h1 class="title nunito has-text-centered is-1">Too many tabs opened ? <br><strong>Survol</strong> solves this.</h1>
<h2 class="subtitle nunito has-text-centered is-2">Seriously try it, just hover any link below</h2>
<div class="links">
<a class="link" target="_blank" href="https://twitter.com/hacktoberfest/status/1295752863986196480">A tweet</a>
<a class="link" target="_blank" href="https://www.producthunt.com/">A website</a>
<a class="link" target="_blank" href="https://en.wikipedia.org/wiki/Product_Hunt">A wikipedia article</a>
<div class="container" id="section1">
<div class="columns">
<div class="column is-two-thirds text-column">
<h1 class="is-1 title nunito">Too many tabs opened ?<br>Survol solves this</h1>
<h2 class="is-2 subtitle nunito">Survol is a <a href="https://en.wikipedia.org/wiki/Browser_extension">browser extension</a> that helps you choose which links are worth clicking.</h2>
<div class="buttons">
<a href="#install"><button class="button chrome is-info is-large">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Install the extension</span>
</button></a>
<a href="https://github.com/mdolr/survol"><button class="button firefox is-outlined is-large">
<span class="icon">
<i class="fab fa-github"></i>
</span>
<span>GitHub repository</span>
</button></a>
</div>
</div>
<div class="column logo-column">
<img id="icon" src="file:///D:/survol/docs/images/airplane.gif" width="356" height="356" />
</div>
</div>
<br/><br/><br/><br/><br/>
<h2 class="is-2 title nunito has-text-centered">Try it</h2>
<div class="columns links">
<div class="column">
<a class="link content is-large" href="https://twitter.com/hacktoberfest/status/1295752863986196480">Hover to preview</a>
</div>
<div class="column">
<a class="link content is-large" href="https://www.producthunt.com/posts/survol">Hover to preview</a>
</div>
<div class="column">
<a class="link content is-large" href="https://www.youtube.com/watch?v=jNQXAC9IVRw">Hover to preview</a>
</div>
</div>
</div>

<h2 class="subtitle nunito has-text-centered is-2">Convinced ?<br>Download the extension on your favourite browser :</h2>
<a href="https://chrome.google.com/webstore/detail/survol/fdnnmbmkgfdjclkgimonnimokhnndalk" class="button is-success is-medium">
<div class="container has-text-centered" id="installSection">
<h2 class="title is-2 nunito has-text-centered" id="install">Quotes</h2>
<br>
<div class="columns" style="display:inline-block; margin-left:auto; margin-right:auto; text-align:center;">
<div class="column" style="display:inline; width:96px!important; max-width:96px; min-width:96px; margin: 24px 0px 24px 24px!important;">
<img src="https://unavatar.now.sh/twitter/rrhoover" style="border-radius:50%;" height="96" width="96">
</div>
<div class="column" style="display:inline; margin-top:24px; margin-bottom:24px; min-width: none!important;">
<h3 class="is-3 subtitle nunito" style="margin-bottom:0px;">"Clever idea"</h3>
<!--https://www.producthunt.com/posts/survol#comment-1160813 -->
<p style="font-style:italic;" class="content is-medium">Ryan HOOVER, <a href="https://producthunt.com">Product Hunt</a> founder</p>
</div>
</div>
<br/><br/><br/><br/>
<h2 class="title nunito has-text-centered is-2" style="margin-left:16px;">Install</h2>
<h3 class="subtitle nunito has-text-centered is-3" style="margin-left:16px;">It's free, just choose your favorite browser</h3>
<div class="buttons has-text-centered">
<a href="https://chrome.google.com/webstore/detail/survol/fdnnmbmkgfdjclkgimonnimokhnndalk" class="button chrome is-success is-large">
<span class="icon">
<i class="fab fa-chrome"></i>
</span>
<span>Download on Chrome</span>
</a><br>
<a href="https://addons.mozilla.org/en-US/firefox/addon/survol/" class="button is-success is-medium">
<a href="https://addons.mozilla.org/en-US/firefox/addon/survol/" class="button firefox is-success is-large">
<span class="icon">
<i class="fab fa-firefox"></i>
</span>
<span>Download on Firefox</span>
</a><br>
</div>
<br/><br/><br/><br/><br/>
<div style="display:flex; justify-content:center;" class="has-text-centered">
<i class="fab fa-3x fa-github"></i>
<h2 class="subtitle nunito has-text-centered is-2" style="margin-left:16px;">Survol is the product of <a class="link" href="https://github.com/mdolr/survol" target="_blank">open-source</a></h2>
<h2 class="title nunito has-text-centered is-3" style="margin-left:16px;">Survol is the product of <a class="link" href="https://github.com/mdolr/survol" target="_blank">open-source</a></h2>
</div>
<br>
<h3 class="subtitle nunito has-text-centered is-2" style="margin-left:16px;">List of contributors</h3>
<div style="display:flex; align-items:center; justify-content:center;">
<table class="table is-hoverable contributor-table">
<thead>
Expand All @@ -87,13 +119,12 @@ <h3 class="subtitle nunito has-text-centered is-2" style="margin-left:16px;">Lis
<tr>
<td><img src="https://avatars2.githubusercontent.com/u/19026937?v=4" class="contributor-image" alt="Author avatar" /></td>
<td><a class="link" href="https://github.com/mdolr" target="_blank" rel="nofollow">@mdolr</td>
<td>Author of Survol and CEO of <a class="link" href="https://kaen.fr">Kaen</a></td>
<td>Author of Survol<br>CEO of <a class="link" href="https://kaen.fr/en">Kaen</a></td>
<td id="mdolr-contributions"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>

</html>
118 changes: 59 additions & 59 deletions docs/style/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,3 @@
body,
html {
margin: 0;
padding: 0;
text-align: center;
}

.hidden {
display: none!important;
}

@font-face {
font-family: 'Nunito';
src: url('/NunitoRegular.ttf') format('ttf');
Expand All @@ -18,87 +7,98 @@ html {
font-family: 'Nunito', sans-serif !important;
}

@media screen and (max-width: 1023px) {
.container {
padding-right: 32px;
padding-left: 32px;
}
.links {
flex-direction: column;
}
}

.hero {
#section1 {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 80vh;
}

.links {
#icon {
transform: scaleX(-1);
}

.text-column,
.logo-column {
display: flex;
flex-direction: row;
margin-bottom: 32px;
flex-direction: column;
justify-content: center;
}

.links .link {
margin-right: 24px;
margin-left: 24px;
.text-column button,
#installSection .buttons .button {
display: inline!important;
}

.badges img {
margin-right: 12px;
margin-left: 12px;
#installSection .buttons .button {
margin-left: auto;
margin-right: auto;
}

.hero .title {
font-size: 72px;
.chrome {
margin-right: 6px!important;
}

.links .link {
font-size: 32px;
font-weight: 300 !important;
.firefox {
margin-left: 6px!important;
}

.link {
position: relative;
color: #007aff;
text-decoration: none;
.logo-column {
align-items: center;
}

.link:hover {
color: #007aff;
.buttons {
margin-top: -12px;
}

.link:before {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #007aff;
visibility: hidden;
transform: scaleX(0);
transition: all 0.1s ease-in-out 0s;
.links {
text-align: center;
}

.link:hover.link:before {
visibility: visible;
transform: scaleX(1);
.links .link {
margin-right: auto;
margin-left: auto;
}

.contributor-image {
border-radius: 50%;
height: 64px;
width: 64px;
}

.contributor-table {
margin-bottom: 32px;
border-radius: 10px;
}

.table td {
vertical-align: middle;
display: table-cell;
}

.table td a {
overflow-wrap: anywhere;
}

@media screen and (max-width: 1023px) {
#section1 .columns {
margin-top: 72px!important;
}
.container {
padding-right: 32px;
padding-left: 32px;
text-align: center;
}
#install {
margin-top: 24px;
}
.buttons,
.button {
display: block;
}
#installSection .buttons .button {
display: block!important;
}
.links {
flex-direction: column;
}
}