mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-08-03 20:07:35 +02:00
Code Issues Releases Wiki Activity

website ui refactor

Browse Source
This commit is contained in:
Kushagra Gour
2019-03-08 18:20:05 +05:30
parent 6bf6d70fc3
commit bebaa1e758
1 changed files with 258 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
index.html
View File

@@ -424,16 +424,26 @@
</style>
<style type="text/css">
html {
font-size: 1.3em;
}
body {
text-align: center;
font-family: Arial;
background: white;
min-height: 100vh;
font-size: 18px;
line-height: 1.4;
padding: 0;
margin: 0;
color: #555;
color: #4a4a4a;
-webkit-font-smoothing: antialiased;
}
@media screen and (min-width: 2000px) {
html {
font-size: 2em;
}
}
.ml-1 {
@@ -459,6 +469,9 @@
margin-right: 10px;
}
button {
font-size: inherit;
}
h1 {
font-size: 4em;
margin: 0;
@@ -468,8 +481,8 @@
}
@media screen and (max-width: 400px) {
body {
font-size: 14px;
html {
font-size: 0.9em;
}
}
@@ -490,16 +503,21 @@
a {
color: #1A5A7A;
outline: none;
text-decoration: none;
}
.hero a {
color: white;
}
.flex {
display: flex;
}
.header {
margin-top: 2em;
.hero {
background: #2b273c;
color: #a7a1bd;
padding: 2em 1em;
margin-bottom: 2em;
}
.btn {
@@ -523,8 +541,10 @@
line-height: 2.5rem;
margin: 1rem 0 0;
width: 80%;
text-decoration: none;
}
.download-btn.disabled {
filter: grayscale(50);
}
@@ -533,31 +553,6 @@
position: relative;
}
/* .web-app-btn:after {
content: 'New';
font-size: 1rem;
position: absolute;
background-color: #96b835;
padding: 0px 9px;
letter-spacing: 2px;
color: white;
border-radius: 4px;
transform: rotate(-9deg);
right: 5px;
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: 10px;
top: -5px;
transition: 0.25s ease 0.1s;
} */
.web-app-btn:hover:after {
transform: rotate(0deg);
}
@@ -609,10 +604,17 @@
.feature {
flex-basis: 100%;
max-width: 100%;
margin: 0.5em;
padding: 0.5em 1em;
box-sizing: border-box;
}
.feature__title {
border-bottom: 7px solid;
padding-bottom: 0.4em;
white-space: nowrap;
}
.feature svg {
width: 32px;
height: 32px;
@@ -685,20 +687,31 @@
}
@media (min-width: 751px) {
.header {
position: fixed;
width: 460px;
left: 0;
.hero {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2em;
padding: 3em;
}
body {
padding-left: 460px;
.logo {
width: 10em;
height: auto;
}
.screenshot {
height: 35vh;
}
.header {
width: 25vw;
}
.download-btn {
/* margin: 1rem 0; */
/* margin: 0 1rem; */
width: 300px;
/* width: 300px; */
}
.web-app-btn:after {
@@ -729,9 +742,11 @@
}
.feature {
flex-basis: 50%;
max-width: 50%;
padding: 0.5em 2em;
flex: 1;
flex-basis: 16vw;
padding: 0.5em 2em;
margin: 1em;
}
.info {
@@ -775,7 +790,7 @@
</style>
<script>
function changeLabel(label) {
document.querySelector('.download-btn span').innerHTML = label;
document.querySelector('.js-chrome-btn span').innerHTML = label;
}
function closeInfo(label) {
@@ -797,6 +812,8 @@
</head>
<body>
<div class="hero">
<header class="header">
<svg class="logo" width="160" height="84">
<use xlink:href="#logo"></use>
@@ -806,11 +823,11 @@
</h1>
<h2 style="margin-bottom:0.4em;">A blazing fast & offline web playground in your browser</h2>
<div style="margin-top: 30px;" id="cta" class="mb-2">
<a aria-label="Open web app" class="btn download-btn web-app-btn" href="/app/">
<button type="button" class="btn download-btn web-app-btn" href="/app/">
<span>Open Web App</span>
</a>
</button>
<p style="margin-top:3px;">Recommended: More features. More fun!</p>
<a aria-label="Install chrome extension" class="btn download-btn js-chrome-btn hint--top-right" href="javascript:void(0)"
<a class="btn download-btn js-chrome-btn " href="javascript:void(0)"
onclick="addToChrome()">
<img src="chrome-logo.png" height="40" alt="">
<span>Add Chrome extension</span>
@@ -831,59 +848,76 @@
target="_blank" class="tweet-link">Share</a>
</div>
</header>
<div style="margin-top:30px;">
<img class="screenshot" src="ss1.png?v3.0.0beta" height="" alt="Web Maker working screen">
</div>
<script>
if (top !== self) {
var btn = document.querySelector('.download-btn');
var btn = document.querySelector('.js-chrome-btn');
btn.href = 'https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh';
btn.target = '_blank';
}
</script>
</div>
<main>
<h2 style="font-size: 2em;">What you get</h2>
<div class="flex feature-box">
<div class="feature">
<!-- <svg viewBox="0 0 24 24">
<path d="M2.28,3L1,4.27L2.47,5.74C2.04,6 1.61,6.29 1.2,6.6L3,9C3.53,8.6 4.08,8.25 4.66,7.93L6.89,10.16C6.15,10.5 5.44,10.91 4.8,11.4L6.6,13.8C7.38,13.22 8.26,12.77 9.2,12.47L11.75,15C10.5,15.07 9.34,15.5 8.4,16.2L12,21L14.46,17.73L17.74,21L19,19.72M12,3C9.85,3 7.8,3.38 5.9,4.07L8.29,6.47C9.5,6.16 10.72,6 12,6C15.38,6 18.5,7.11 21,9L22.8,6.6C19.79,4.34 16.06,3 12,3M12,9C11.62,9 11.25,9 10.88,9.05L14.07,12.25C15.29,12.53 16.43,13.07 17.4,13.8L19.2,11.4C17.2,9.89 14.7,9 12,9Z" />
</svg> -->
<h2>Works Offline</h2>
<h3 class="feature__title">Works Offline</h3>
<p>Lives completely in your browser. There is no network involved, so it opens and shows previews instantly.</p>
</div>
<div class="feature">
<h2>Preprocessor Support</h2>
<h3 class="feature__title">Preprocessor Support</h3>
<p>Be it Markdown, Jade, SCSS, LESS, Atomic CSS, JSX, CoffeeScript or TypeScript - you get it all.</p>
</div>
<div class="feature">
<h2>Quick Add Libraries</h2>
<h3 class="feature__title">Quick Add Libraries</h3>
<p>Drop in any library from the available list or put a URL of any other library you wish to add.
</p>
</div>
<div class="feature">
<h2>Multiple Layouts</h2>
<h3 class="feature__title">Multiple Layouts</h3>
<p>Get exact same layout in front of you, that you last saved the creation in. Plus, a full screen layout to see
your work
in actual browser window.
</p>
</div>
<div class="feature">
<h2>Preview screenshot capture</h2>
<p>Feel like taking a screenshot of your awesome creation, just hit the Capture button to get a beautiful screenshot
<h3 class="feature__title">Files Mode</h3>
<p>Get a complete local-like environment where you can code in files instead of 3 separate panes.
</p>
</div>
<div class="feature">
<h3 class="feature__title">Preview screenshot capture</h3>
<p>Feel like taking a screenshot of your awesome creation, just hit the Capture button to get a beautiful
screenshot
of
your result.
</p>
</div>
<div class="feature">
<h2>Open in Codepen</h2>
<h3 class="feature__title">Open in Codepen</h3>
<p>Done with your creation and want to share it with the world? One click and have your work open in CodePen.
</p>
</div>
<div class="feature">
<h3 class="feature__title">And much more awesomeness!</h3>
<p>It doesn't stop there. There is JavaScript console, integrated Prettier support, command palette and more!
</p>
</div>
</div>
<div class="people-say">
<h3 style="color:red;font-size: 2em;margin:0;">♥</h3>
<h2 style="font-size: 2em; " aria-label="Love from all around"><span style="color:red;">♥</span> from all
around</h2>
<div class="people-say-top">
<a target="_blank" href="https://blog.codepen.io/2017/01/19/web-maker/" class="say">
<div class="say__name">
@@ -989,6 +1023,7 @@
</div>
</div>
</main>
<div id="info" class="info">
<p>Web Maker needs the following permissions to work with full capabilities. In words of Chrome extensions:</p>
@@ -1033,10 +1068,10 @@
</a>-->
</div>
<div style="margin:2em 0 1em">
<footer style="margin:2em 0 1em">
Follow
<a style="color:#1da1f2" href="https://twitter.com/intent/follow?screen_name=webmakerApp" target="_blank">@webmakerApp</a>
for updates. <a href="/privacy-policy/">Privacy Policy</a>.</div>
for updates. <a href="/privacy-policy/">Privacy Policy</a>.</footer>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="logo" viewBox="-145 -2 372 175">