brunosimon
153 lines
6.9 KiB
HTML
153 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Keppler</title>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||
<link class="favicon" rel="icon" type="image/png" href="" />
|
||
</head>
|
||
<body>
|
||
<!-- Header -->
|
||
<section class="section header" id="header">
|
||
|
||
<div class="background"></div>
|
||
|
||
<header class="navigation js-navigation">
|
||
<a class="item features js-navigation-item" href="#features">Features</a>
|
||
<a class="item get-started js-navigation-item" href="#get-started">Get started</a>
|
||
<a class="item whos-using-it js-navigation-item" href="#whos-using-it">Who's using it?</a>
|
||
<a class="item github" href="https://github.com/brunosimon/keppler" target="_blank"></a>
|
||
</header>
|
||
|
||
<h1 class="title">
|
||
<span class="sky"></span>
|
||
<span class="keppler"></span>
|
||
<span class="avatar"></span>
|
||
</h1>
|
||
<h2 class="sub-title">Real-time code sharing for your lectures and presentations</h2>
|
||
|
||
<div class="demo js-demo">
|
||
</div>
|
||
|
||
<a class="get-started-button js-navigation-item" href="#get-started">
|
||
<span class="out">Get started</span>
|
||
<span class="hover">
|
||
<span class="inner">Get started</span>
|
||
</span>
|
||
</a>
|
||
|
||
<a class="scroll-button js-navigation-item" href="features">
|
||
<span class="mouse">
|
||
<span class="wheel"></span>
|
||
</span>
|
||
</a>
|
||
</section>
|
||
|
||
<!-- Features -->
|
||
<section class="section features" id="features">
|
||
<h3 class="main-title">Features</h3>
|
||
|
||
<div class="intro">
|
||
<h4 class="title">Your audience will thank you</h4>
|
||
<p class="paragraphe">Let your audience browse the code of any file in your project or catch up with your most recent changes during your code presentation. With Keppler, your audience will now aloway be up-to-date with what you’re doing, and have the bigger picture in mind.</p>
|
||
</div>
|
||
|
||
<div class="info">
|
||
<div class="text">
|
||
<h4 class="title">No setup for your audience</h4>
|
||
<p class="paragraphe">It all happens on their web browser! All they have to do is visit a URL.</p>
|
||
</div>
|
||
<div class="illustration"></div>
|
||
</div>
|
||
|
||
<div class="info">
|
||
<div class="illustration"></div>
|
||
<div class="text">
|
||
<h4 class="title">Transparent for you</h4>
|
||
<p class="paragraphe">Once Keppler is launched, you can forget about it. Just code as you would normally do,and your changes will automatically be pushed to your audience, on LAN.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info">
|
||
<div class="text">
|
||
<h4 class="title">Resource sharing made easy</h4>
|
||
<p class="paragraphe">Your audience can download the resources used in the project directly on Keppler. No need to host your files anywhere!</p>
|
||
</div>
|
||
<div class="illustration"></div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- Get started -->
|
||
<section class="section get-started" id="get-started">
|
||
<h3 class="main-title">Get started</h3>
|
||
|
||
<div class="step">
|
||
<div class="number">1.</div>
|
||
<p class="paragraphe title">Install Keppler globally</p>
|
||
<p class="paragraphe">You must have <a href="https://nodejs.org/en/" target="_blank">node</a> and <a href="https://www.npmjs.com" target="_blank">npm</a> already installed.</p>
|
||
<p class="paragraphe">In your console, run:</p>
|
||
<pre><code>npm install -g keppler</code></pre>
|
||
<p class="paragraphe small">Didn’t work? <a href="https://github.com/brunosimon/keppler/issues" target="_blank">Report a bug</a>.</p>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="number">2.</div>
|
||
<p class="paragraphe title">Launch Keppler inside your project folder</p>
|
||
<p class="paragraphe">Navigate to your project folder.</p>
|
||
<p class="paragraphe">In your console, run:</p>
|
||
<pre><code>keppler "My awesome project"</code></pre>
|
||
<p class="paragraphe">This will launch Keppler and automatically open your browser at the URL for viewing your code.</p>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="number">3.</div>
|
||
<p class="paragraphe title">Share the URL with your audience!</p>
|
||
<p class="paragraphe">Make sure you’re on the same local network.</p>
|
||
<p class="paragraphe">Your audience will now be able to see the contents of the files in project folder, updated in real-time.</p>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="number">4.</div>
|
||
<p class="paragraphe title">Get coding</p>
|
||
</div>
|
||
|
||
<div class="illustration"></div>
|
||
</section>
|
||
|
||
<!-- Who's using it -->
|
||
<section class="section whos-using-it" id="whos-using-it">
|
||
<h3 class="main-title">Who’s using Keppler?</h3>
|
||
|
||
<div class="text">
|
||
<p>Keppler is already being used with hundreds of students learning web development.</p>
|
||
</div>
|
||
|
||
<div class="items">
|
||
<div class="item hetic"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="section footer">
|
||
|
||
<ul class="list">
|
||
<li class="title">Keppler</li>
|
||
<li class="item"><a class="features js-navigation-item" href="#features">Features</a></li>
|
||
<li class="item"><a class="get-started js-navigation-item" href="#get-started">Get started</a></li>
|
||
<li class="item"><a class="whos-using-it js-navigation-item" href="#whos-using-it">Who's using it?</a></li>
|
||
</ul>
|
||
|
||
<ul class="list">
|
||
<li class="title">Development</li>
|
||
<li class="item"><a href="https://github.com/brunosimon/keppler" target="_blank">Github</a></li>
|
||
<li class="item"><a href="https://github.com/brunosimon/keppler/issues" target="_blank">Report an issue</a></li>
|
||
<li class="item"><a href="mailto:contact@bruno-simon.com">Contact us</a></li>
|
||
</ul>
|
||
|
||
<p class="text">Keppler is an open-source project made by <a href="https://bruno-simon.com" target="_blank">Bruno Simon</a> and released under the MIT license.</p>
|
||
|
||
</footer>
|
||
</body>
|
||
</html>
|