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>
<style type="text/css"> <style type="text/css">
html {
font-size: 1.3em;
}
body { body {
text-align: center; text-align: center;
font-family: Arial; font-family: Arial;
background: white; background: white;
min-height: 100vh; min-height: 100vh;
font-size: 18px;
line-height: 1.4; line-height: 1.4;
padding: 0; padding: 0;
margin: 0; margin: 0;
color: #555; color: #4a4a4a;
-webkit-font-smoothing: antialiased;
}
@media screen and (min-width: 2000px) {
html {
font-size: 2em;
}
} }
.ml-1 { .ml-1 {
@@ -459,6 +469,9 @@
margin-right: 10px; margin-right: 10px;
} }
button {
font-size: inherit;
}
h1 { h1 {
font-size: 4em; font-size: 4em;
margin: 0; margin: 0;
@@ -468,8 +481,8 @@
} }
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
body { html {
font-size: 14px; font-size: 0.9em;
} }
} }
@@ -490,16 +503,21 @@
a { a {
color: #1A5A7A; color: #1A5A7A;
outline: none; }
text-decoration: none;
.hero a {
color: white;
} }
.flex { .flex {
display: flex; display: flex;
} }
.header { .hero {
margin-top: 2em; background: #2b273c;
color: #a7a1bd;
padding: 2em 1em;
margin-bottom: 2em;
} }
.btn { .btn {
@@ -523,8 +541,10 @@
line-height: 2.5rem; line-height: 2.5rem;
margin: 1rem 0 0; margin: 1rem 0 0;
width: 80%; width: 80%;
text-decoration: none;
} }
.download-btn.disabled { .download-btn.disabled {
filter: grayscale(50); filter: grayscale(50);
} }
@@ -533,31 +553,6 @@
position: relative; 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 { .web-app-btn:hover:after {
transform: rotate(0deg); transform: rotate(0deg);
} }
@@ -609,10 +604,17 @@
.feature { .feature {
flex-basis: 100%; flex-basis: 100%;
max-width: 100%; max-width: 100%;
margin: 0.5em;
padding: 0.5em 1em; padding: 0.5em 1em;
box-sizing: border-box; box-sizing: border-box;
} }
.feature__title {
border-bottom: 7px solid;
padding-bottom: 0.4em;
white-space: nowrap;
}
.feature svg { .feature svg {
width: 32px; width: 32px;
height: 32px; height: 32px;
@@ -685,20 +687,31 @@
} }
@media (min-width: 751px) { @media (min-width: 751px) {
.header { .hero {
position: fixed; display: flex;
width: 460px; justify-content: center;
left: 0; align-items: center;
margin-bottom: 2em;
padding: 3em;
} }
body { .logo {
padding-left: 460px; width: 10em;
height: auto;
}
.screenshot {
height: 35vh;
}
.header {
width: 25vw;
} }
.download-btn { .download-btn {
/* margin: 1rem 0; */ /* margin: 1rem 0; */
/* margin: 0 1rem; */ /* margin: 0 1rem; */
width: 300px; /* width: 300px; */
} }
.web-app-btn:after { .web-app-btn:after {
@@ -729,9 +742,11 @@
} }
.feature { .feature {
flex-basis: 50%;
max-width: 50%;
padding: 0.5em 2em; padding: 0.5em 2em;
flex: 1;
flex-basis: 16vw;
padding: 0.5em 2em;
margin: 1em;
} }
.info { .info {
@@ -775,7 +790,7 @@
</style> </style>
<script> <script>
function changeLabel(label) { function changeLabel(label) {
document.querySelector('.download-btn span').innerHTML = label; document.querySelector('.js-chrome-btn span').innerHTML = label;
} }
function closeInfo(label) { function closeInfo(label) {
@@ -797,6 +812,8 @@
</head> </head>
<body> <body>
<div class="hero">
<header class="header"> <header class="header">
<svg class="logo" width="160" height="84"> <svg class="logo" width="160" height="84">
<use xlink:href="#logo"></use> <use xlink:href="#logo"></use>
@@ -806,11 +823,11 @@
</h1> </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" class="mb-2"> <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> <span>Open Web App</span>
</a> </button>
<p style="margin-top:3px;">Recommended: More features. More fun!</p> <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()"> onclick="addToChrome()">
<img src="chrome-logo.png" height="40" alt=""> <img src="chrome-logo.png" height="40" alt="">
<span>Add Chrome extension</span> <span>Add Chrome extension</span>
@@ -831,59 +848,76 @@
target="_blank" class="tweet-link">Share</a> target="_blank" class="tweet-link">Share</a>
</div> </div>
</header> </header>
<div style="margin-top:30px;"> <div style="margin-top:30px;">
<img class="screenshot" src="ss1.png?v3.0.0beta" height="" alt="Web Maker working screen"> <img class="screenshot" src="ss1.png?v3.0.0beta" height="" alt="Web Maker working screen">
</div> </div>
<script> <script>
if (top !== self) { 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.href = 'https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh';
btn.target = '_blank'; btn.target = '_blank';
} }
</script> </script>
</div>
<main>
<h2 style="font-size: 2em;">What you get</h2>
<div class="flex feature-box"> <div class="flex feature-box">
<div class="feature"> <div class="feature">
<!-- <svg viewBox="0 0 24 24"> <!-- <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" /> <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> --> </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> <p>Lives completely in your browser. There is no network involved, so it opens and shows previews instantly.</p>
</div> </div>
<div class="feature"> <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> <p>Be it Markdown, Jade, SCSS, LESS, Atomic CSS, JSX, CoffeeScript or TypeScript - you get it all.</p>
</div> </div>
<div class="feature"> <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>Drop in any library from the available list or put a URL of any other library you wish to add.
</p> </p>
</div> </div>
<div class="feature"> <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 <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 your work
in actual browser window. in actual browser window.
</p> </p>
</div> </div>
<div class="feature"> <div class="feature">
<h2>Preview screenshot capture</h2> <h3 class="feature__title">Files Mode</h3>
<p>Feel like taking a screenshot of your awesome creation, just hit the Capture button to get a beautiful screenshot <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 of
your result. your result.
</p> </p>
</div> </div>
<div class="feature"> <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>Done with your creation and want to share it with the world? One click and have your work open in CodePen.
</p> </p>
</div> </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>
<div class="people-say"> <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"> <div class="people-say-top">
<a target="_blank" href="https://blog.codepen.io/2017/01/19/web-maker/" class="say"> <a target="_blank" href="https://blog.codepen.io/2017/01/19/web-maker/" class="say">
<div class="say__name"> <div class="say__name">
@@ -989,6 +1023,7 @@
</div> </div>
</div> </div>
</main>
<div id="info" class="info"> <div id="info" class="info">
<p>Web Maker needs the following permissions to work with full capabilities. In words of Chrome extensions:</p> <p>Web Maker needs the following permissions to work with full capabilities. In words of Chrome extensions:</p>
@@ -1033,10 +1068,10 @@
</a>--> </a>-->
</div> </div>
<div style="margin:2em 0 1em"> <footer style="margin:2em 0 1em">
Follow Follow
<a style="color:#1da1f2" href="https://twitter.com/intent/follow?screen_name=webmakerApp" target="_blank">@webmakerApp</a> <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"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="logo" viewBox="-145 -2 372 175"> <symbol id="logo" viewBox="-145 -2 372 175">