mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-02-22 22:24:00 +01:00
Code Issues Releases Wiki Activity
php-web-maker/packages/website/index.html

188 lines
8.3 KiB
HTML
Raw Blame History

---
layout: default.html
---
<h2 style="font-size: 2em; " class="ta-c">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> -->
<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">
<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">
<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">
<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">
<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">
<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">
<h2 style="font-size: 2em;" class="ta-c" 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">
<img src="https://pbs.twimg.com/profile_images/883049860332609537/IsUISvAq_400x400.jpg" alt="">
<div>Chris Coyier</div>
</div>
<p>If you're looking for a CodePen-like offline editor, and use Chrome, check out Web-Maker by Kushagra Gour.</p>
</a>
<a target="_blank" href="https://twitter.com/Ryan_Random/status/832242636970930177" class="say say--twitter">
<div class="say__name">
<img src="https://pbs.twimg.com/profile_images/777487197532401665/hsnFGGH2_bigger.jpg" alt="">
<div>Ryan Davidson
<div class="say__handle">@Ryan_Random</div>
</div>
</div>
<p>Really enjoying using Web Maker - super fast offline web playground.</p>
</a>
<a target="_blank" href="https://twitter.com/NashVail/status/831126444486975489" class="say say--twitter">
<div class="say__name">
<img src="https://pbs.twimg.com/profile_images/798582099691212800/15i7-mX-_400x400.jpg" alt="">
<div>Nishant Verma
<div class="say__handle">@NashVail</div>
</div>
</div>
<p>Finding awesome pens on @CodePen and recreating them in @webmakerApp is my new hobby</p>
</a>
<a target="_blank" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
class="say">
<div class="say__name">
<img src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABECLSb76_ywaCj7gEiC3ZjYXJkX3Bob3RvKigyMTBmZjI0YjYxM2VkZWZiNmYyNTkwZjEwN2RlNjBlYjRkOTE2YmJlMAHafGv-p112HZJ-KreQxPF8-yn0EQ"
alt="">
<div>Joacim Nilsson</div>
</div>
<p>This is something I will be using alot. Thank you! :D</p>
</a>
<a target="_blank" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
class="say">
<div class="say__name">
<img src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABDCK_Jvffnu_2AXSILdmNhcmRfcGhvdG8qKDk3Njg3NDE2NjI1YThmNDgyMDk4OWM3MTBiMTMxNmUzOWQwZGNhMWEwAbe0xm_6UPdrZFAaScMLUOpKFfHP"
alt="">
<div>Oksana Borukh</div>
</div>
<p>It's fantastic! I'm glad I've discovered it! Thanks!
</p>
</a>
</div>
<div class="people-say-bottom">
<a target="_blank" href="https://twitter.com/labnol/status/816576061622235136" class="say say--twitter">
<div class="say__name">
<img src="https://pbs.twimg.com/profile_images/905692103883104256/J0feWkQe_normal.jpg" alt="">
<div>Amit Agarwal
<div class="say__handle">@labnol</div>
</div>
</div>
<p>This is like having your own copy of Codepen that also works offline.</p>
</a>
<a target="_blank" href="https://twitter.com/Armstrong/status/832191260026888197" class="say say--twitter">
<div class="say__name">
<img src="https://pbs.twimg.com/profile_images/974909553/Screen_shot_2010-06-09_at_19.14.22_bigger.png" alt="">
<div>Chris Armstrong
<div class="say__handle">@Armstrong</div>
</div>
</div>
<p>@webmakerApp looks like a good offline alternative to @CodePen.</p>
</a>
<a target="_blank" href="https://twitter.com/sitepointdotcom/status/832987050597085184" class="say say--twitter">
<div class="say__name">
<img src="https://pbs.twimg.com/profile_images/851318206807420928/etT-R3rp_bigger.jpg" alt="">
<div>SitePoint
<div class="say__handle">@sitepointdotcom</div>
</div>
</div>
<p>Meet Web Maker, an Offline, Browser-based CodePen Alternative.</p>
</a>
<a target="_blank" href="https://twitter.com/fedorloenko/status/835186942354534400" class="say">
<div class="say__name">
<img src="https://pbs.twimg.com/profile_images/947822663061393408/zhC3vxBL_bigger.jpg" alt="">
<div>Fedor Loenko
<div class="say__handle">@fedorloenko</div>
</div>
</div>
<p>Great Chrome extension via @chinchang457. I need offline CodePen from time to time.</p>
</a>
<a target="_blank" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
class="say">
<div class="say__name">
<img src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABDCNn44MXB2a_DZSILdmNhcmRfcGhvdG8qKDM2YTNiMDhkYzEyMmVkY2IyZjM2YzY0NTAzNTdjMWU5YWVhM2JmM2MwAc4a1i_Vddj6AIdGg9rpk_xdMePf"
alt="">
<div>Steve Lack</div>
</div>
<p>Thanks for creating this. What a great tool for productivity!</p>
</a>
<a target="_blank" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
class="say">
<div class="say__name">
<img src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABECOrDgpLHt4jwzwEiC3ZjYXJkX3Bob3RvKig2ZWNkNGM4MmM0MDY2ZmFkMDUzZmE3MGY4MWE3NWM5OTIzZjA4MGRlMAEmU4uVE7yiEAzp6wGGR7B3MMjErg"
alt="">
<div>Margaret H</div>
</div>
<p>Decided to use it to work on my latest project, it's pretty awesome! Thank you for making this!</p>
</a>
</div>
</div>
<div id="info" class="info">
<p>Web Maker needs the following permissions to work with full capabilities. In words of Chrome extensions:</p>
<p>
<strong>Read & change all your data on the websites that you visit</strong> - Worry not. This is just required for
the new tab
replacement feature where Web Maker shows up only if the new tab url is chrome://newtab/. Nothing is read, stored or
changed.
</p>
<h3>Disclaimer</h3>
<p>Web Maker
<strong>does not track</strong> any user specific data. It uses Google Analytics to track aggregated events to
improve user experience
based on what features are used more. If still you want to opt-out of Google Analytics tracking, please visit
<a href="https://tools.google.com/dlpage/gaoptout" target="_blank">https://tools.google.com/dlpage/gaoptout</a> or
you can set up a filter in Adblock Plus or similar ad blocker tools like
AdBlock, uBlock or Adblock Pro.</p>
<div style="text-align: center;">
<a class="btn" href="javascript:void(0)" onclick="closeInfo()">Close</a>
</div>
</div>
Reference in New Issue View Git Blame Copy Permalink