mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-05-15 22:59:41 +02:00
Code Issues Releases Wiki Activity

add web app button

Browse Source
This commit is contained in:
Kushagra Gour 2018-01-20 21:02:41 +05:30
parent a7c97eb6dd
commit 7ab83682d5
1 changed files with 38 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@ -83,7 +83,43 @@
.download-btn { .download-btn {
color: white; color: white;
background-color: #4d7bd6; background-color: #4d7bd6;
line-height: 2.5rem;
margin: 0 1rem;
width: 240px;
} }
.web-app-btn {
position: relative;
}
.web-app-btn:after {
content: 'New';
font-size: 1.1rem;
position: absolute;
background-color: #96b835;
padding: 0px 9px;
letter-spacing: 2px;
color: white;
border-radius: 4px;
transform: rotate(-9deg);
right: -50px;
top: -10px;
transition: 0.25s ease;
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}
.web-app-btn:before {
content: '🎊';
font-size: 5.2rem;
position: absolute;
right: -22px;
top: -5px;
transition: 0.25s ease 0.1s;
}
.web-app-btn:hover:after {
transform: rotate(0deg);
}
.web-app-btn:hover:before {
transform: rotate(-10deg);
}
.btn > img { .btn > img {
vertical-align: middle; vertical-align: middle;
margin-right: 10px; margin-right: 10px;
@ -259,18 +295,8 @@
<h1><img class="logo" width="128" height="128" src="icon-128.png" alt="Web Maker logo">Web Maker</h1> <h1><img class="logo" width="128" height="128" src="icon-128.png" alt="Web Maker logo">Web Maker</h1>
<h2 style="margin-bottom:0.4em;">A blazing fast & offline web playground in your browser</h2> <h2 style="margin-bottom:0.4em;">A blazing fast & offline web playground in your browser</h2>
<div style="margin-top: 30px;" id="cta"> <div style="margin-top: 30px;" id="cta">
<script> <a class="btn download-btn" href="javascript:void(0)" onclick="addToChrome()"><img src="chrome-logo.png" height="40" alt=""><span>Add to Chrome</span></a>
if (navigator.userAgent.indexOf('Chrome') === -1) { <a class="btn download-btn web-app-btn" href="/app" onclick="addToChrome()"><span>Web App (beta)</span></a>
document.write('<img src="chrome-logo.png" height="30" alt="" style="vertical-align:middle"> Available only on Chrome currently.');
}
if (chrome.app.isInstalled) {
document.write('You have this extension already installed!')
}
else {
document.write('<a class="btn download-btn" href="javascript:void(0)" onclick="addToChrome()"><img src="chrome-logo.png" height="40" alt=""><span>Add to Chrome</span></a>');
}
</script>
</div> </div>
<div style="margin-top:30px;"> <div style="margin-top:30px;">