brunosimon
294 lines
15 KiB
HTML
294 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Keppler</title>
|
||
<meta name="description" content="Real-time code sharing for your lectures and presentations">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||
|
||
<!-- GOOGLE + -->
|
||
<meta itemprop="name" content="Keppler">
|
||
<meta itemprop="description" content="Real-time code sharing for your lectures and presentations">
|
||
<meta itemprop="image" content="https://brunosimon.github.io/keppler/static/images/social/1200x630.png">
|
||
|
||
<!-- TWITTER -->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="Keppler">
|
||
<meta name="twitter:description" content="Real-time code sharing for your lectures and presentations">
|
||
<meta name="twitter:image" content="https://brunosimon.github.io/keppler/static/images/social/640x404.png">
|
||
|
||
<!-- FACEBOOK -->
|
||
<meta property="og:title" content="Keppler">
|
||
<meta property="og:url" content="https://brunosimon.github.io/keppler/">
|
||
<meta property="og:site_name" content="Keppler">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:description" content="Real-time code sharing for your lectures and presentations">
|
||
<meta property="og:image" content="https://brunosimon.github.io/keppler/static/images/social/1200x630.png">
|
||
|
||
<!-- Favicons -->
|
||
<link rel="apple-touch-icon" sizes="180x180" href="static/images/favicons/apple-touch-icon.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="static/images/favicons/favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="static/images/favicons/favicon-16x16.png">
|
||
<link rel="manifest" href="static/images/favicons/manifest.json">
|
||
<link rel="mask-icon" href="static/images/favicons/safari-pinned-tab.svg" color="#330867">
|
||
<meta name="apple-mobile-web-app-title" content="Keppler">
|
||
<meta name="application-name" content="Keppler">
|
||
<meta name="theme-color" content="#ffffff">
|
||
</head>
|
||
<body>
|
||
<!-- Header -->
|
||
<section class="section header" id="header">
|
||
|
||
<div class="background"></div>
|
||
|
||
<header class="navigation">
|
||
<a class="item underline features js-scroll-item" href="#features">Features</a>
|
||
<a class="item underline get-started js-scroll-item" href="#get-started">Get started</a>
|
||
<a class="item underline whos-using-it js-scroll-item" href="#whos-using-it">Who's using it?</a>
|
||
<a class="item underline 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 class="bars">
|
||
<div class="bar color-1 size-1 animation-1 pos-1"></div>
|
||
<div class="bar color-2 size-1 animation-2 pos-2"></div>
|
||
<div class="bar color-3 size-1 animation-3 pos-3"></div>
|
||
<div class="bar color-4 size-1 animation-4 pos-4"></div>
|
||
|
||
<div class="bar color-1 size-1 animation-5 pos-5"></div>
|
||
<div class="bar color-2 size-1 animation-6 pos-6"></div>
|
||
<div class="bar color-3 size-1 animation-7 pos-7"></div>
|
||
<div class="bar color-4 size-1 animation-8 pos-8"></div>
|
||
|
||
<div class="bar color-1 size-2 animation-13 pos-13"></div>
|
||
<div class="bar color-2 size-2 animation-14 pos-14"></div>
|
||
<div class="bar color-3 size-2 animation-15 pos-15"></div>
|
||
<div class="bar color-4 size-2 animation-16 pos-16"></div>
|
||
|
||
<div class="bar color-1 size-2 animation-17 pos-17"></div>
|
||
<div class="bar color-2 size-2 animation-18 pos-18"></div>
|
||
<div class="bar color-3 size-2 animation-19 pos-19"></div>
|
||
<div class="bar color-4 size-2 animation-20 pos-20"></div>
|
||
|
||
<div class="bar color-1 size-3 animation-25 pos-25"></div>
|
||
<div class="bar color-2 size-3 animation-26 pos-26"></div>
|
||
<div class="bar color-3 size-3 animation-27 pos-27"></div>
|
||
<div class="bar color-4 size-3 animation-28 pos-28"></div>
|
||
|
||
<div class="bar color-1 size-3 animation-29 pos-29"></div>
|
||
<div class="bar color-2 size-3 animation-30 pos-30"></div>
|
||
<div class="bar color-3 size-3 animation-31 pos-31"></div>
|
||
<div class="bar color-4 size-3 animation-32 pos-32"></div>
|
||
</div>
|
||
|
||
<div class="speaker js-speaker">
|
||
<div class="icon">
|
||
<div class="label">Speaker</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="audience js-audience">
|
||
<div class="icon">
|
||
<div class="label">Audience</div>
|
||
</div>
|
||
<div class="white-cache"></div>
|
||
<div class="url-bar"></div>
|
||
</div>
|
||
|
||
<div class="url">http://192.168.1.13</div>
|
||
|
||
</div>
|
||
|
||
<a class="get-started-button js-scroll-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-scroll-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="paragraph">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="paragraph">It all happens on their web browser! All they have to do is visit a URL.</p>
|
||
</div>
|
||
<div class="illustration aliens">
|
||
<div class="element background"></div>
|
||
<div class="element guy-2 levitation-2"></div>
|
||
<div class="element guy-1 levitation-1"></div>
|
||
<div class="element ship"></div>
|
||
|
||
<div class="system">
|
||
<div class="circle index-1"></div>
|
||
<div class="circle index-2"></div>
|
||
<div class="circle index-3"></div>
|
||
<div class="disc index-1"><div class="inner"></div></div>
|
||
<div class="disc index-2"><div class="inner"></div></div>
|
||
<div class="disc index-3"><div class="inner"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info right">
|
||
<div class="text">
|
||
<h4 class="title">Transparent for you</h4>
|
||
<p class="paragraph">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 class="illustration computer">
|
||
<div class="element background"></div>
|
||
<div class="element laptop levitation-3"></div>
|
||
|
||
<div class="system">
|
||
<div class="circle index-1"></div>
|
||
<div class="circle index-2"></div>
|
||
<div class="circle index-3"></div>
|
||
<div class="disc index-1"><div class="inner"></div></div>
|
||
<div class="disc index-2"><div class="inner"></div></div>
|
||
<div class="disc index-3"><div class="inner"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info">
|
||
<div class="text">
|
||
<h4 class="title">Resource sharing made easy</h4>
|
||
<p class="paragraph">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 astronaut">
|
||
<div class="element background"></div>
|
||
<div class="element guy levitation-3"></div>
|
||
<div class="element green-book levitation-2"></div>
|
||
<div class="element red-book levitation-1"></div>
|
||
|
||
<div class="system">
|
||
<div class="circle index-1"></div>
|
||
<div class="circle index-2"></div>
|
||
<div class="circle index-3"></div>
|
||
<div class="disc index-1"><div class="inner"></div></div>
|
||
<div class="disc index-2"><div class="inner"></div></div>
|
||
<div class="disc index-3"><div class="inner"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- Get started -->
|
||
<section class="section get-started" id="get-started">
|
||
<div class="background"></div>
|
||
|
||
<div class="illustration">
|
||
<div class="center">
|
||
<div class="circle index-1"></div>
|
||
<div class="circle index-2"></div>
|
||
<div class="circle index-3"></div>
|
||
<div class="circle index-4"></div>
|
||
<div class="circle index-5"></div>
|
||
<div class="disc index-1"><div class="inner"></div></div>
|
||
<div class="disc index-2"><div class="inner"></div></div>
|
||
<div class="disc index-3"><div class="inner"></div></div>
|
||
<div class="disc index-4"><div class="inner"></div></div>
|
||
<div class="disc index-5"><div class="inner"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<h3 class="main-title">Get started</h3>
|
||
|
||
<div class="step">
|
||
<div class="number">1.</div>
|
||
<p class="paragraph title">Install Keppler globally</p>
|
||
<p class="paragraph">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="paragraph">In your console, run:</p>
|
||
<pre class="code"><code>npm install -g keppler</code></pre>
|
||
<p class="paragraph 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="paragraph title">Launch Keppler inside your project folder</p>
|
||
<p class="paragraph">Navigate to your project folder.</p>
|
||
<p class="paragraph">In your console, run:</p>
|
||
<pre class="code"><code>keppler "My awesome project"</code></pre>
|
||
<p class="paragraph">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="paragraph title">Share the URL with your audience!</p>
|
||
<p class="paragraph">Make sure you’re on the same local network.</p>
|
||
<p class="paragraph">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="paragraph title">Get coding</p>
|
||
</div>
|
||
</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 class="paragraph">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">
|
||
|
||
<span class="background"></span>
|
||
<span class="background-2"></span>
|
||
|
||
<div class="content">
|
||
<div class="lists">
|
||
<ul class="list">
|
||
<li class="title">Keppler</li>
|
||
<li class="item"><a class="underline features js-scroll-item" href="#features">Features</a></li>
|
||
<li class="item"><a class="underline get-started js-scroll-item" href="#get-started">Get started</a></li>
|
||
<li class="item"><a class="underline whos-using-it js-scroll-item" href="#whos-using-it">Who's using it?</a></li>
|
||
</ul>
|
||
|
||
<ul class="list">
|
||
<li class="title">Development</li>
|
||
<li class="item"><a class="underline" href="https://github.com/brunosimon/keppler" target="_blank">Github</a></li>
|
||
<li class="item"><a class="underline" href="https://github.com/brunosimon/keppler/issues" target="_blank">Report an issue</a></li>
|
||
<li class="item"><a class="underline" href="mailto:contact@bruno-simon.com">Contact us</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<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>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|