-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.ejs
242 lines (241 loc) · 17.6 KB
/
index.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rebaslight | Easy to use video special fx editor.</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="How to add lightsaber effects to your videos."/>
<link rel="canonical" href="https://www.rebaslight.com/"/>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<![endif]-->
<meta name="application-name" content="Rebaslight">
<meta name="application-url" content="https://www.rebaslight.com/">
<meta itemprop="image" content="/media/rebaslight-demo-frame.jpg">
<meta property="og:image" content="/media/rebaslight-demo-frame.jpg">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152x152.png">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="/mstile-310x150.png">
<meta name="msapplication-square310x310logo" content="/mstile-310x310.png">
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<div>
<noscript>
<div class="alert alert-danger">For this site to work you must <b>enable JavaScript</b>.<br>Here are the <a href="http://www.enable-javascript.com/" target="_blank">instructions how to enable JavaScript in your web browser</a></div>
</noscript>
<!--[if lt IE 9]>
<div class="alert alert-danger"><strong>Heads up!</strong>The web browser you are using won't work well with this site.<br>We suggest the excellent (and free) <a href="https://www.google.com/intl/en/chrome/browser/" target="_blank">Google Chrome</a></div>
<![endif]-->
</div>
<div style="height: 100%;">
<div style="min-height: 100%; height: auto; margin: 0 auto -7em; padding: 0 0 7em; webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box;">
<header>
<nav class="navbar navbar-inverse rl-navbar">
<div class="container-fluid">
<div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#rl-navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="/" class="rl-navbar-brand"><span>Rebaslight</span></a></div>
<div id="rl-navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="/#effects">Effects</a></li>
<li><a href="/#how-to">How To</a></li>
<li>
<p class="navbar-btn"><a href="/#download" class="btn btn-primary">Download!</a></p>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<div style="padding: 1em; color: #000000; background: #DDDDDD;" class="ContentArea">
<h1 class="text-center">How to make Lightsaber special effects!</h1>
<div class="text-center" style="margin:20px 0">
<video width="640" height="360" autoplay loop muted poster="/media/rebaslight-demo-frame.jpg" style="max-width:100%">
<source src="/media/rebaslight-demo.mp4" type="video/mp4">
</video>
</div>
<div class="text-center">
<h3>Get started on your movie now!</h3>
<a href="/#download" class="btn btn-lg btn-primary">Download! <i class="fa fa-download"></i></a>
</div>
<div id="effects">
<h2 class="text-center">Other impressive special effects</h2>
<div style="margin-bottom: 1em;" class="row">
<div class="col-sm-6">
<div>
<img src="/img/effect.Lightning.png" alt="Lightning" style="margin-right: 20px; width: 250px; height: 140px;" class="pull-left">
<h3>Lightning</h3>
<div style="font-size: 14px;">Do you fingers have the power to shoot lightning? Magic wands that shoot lightning like energy? This effect will "shock" your viewers.</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-6">
<div>
<img src="/img/effect.MuzzleFlash.png" alt="Muzzle Flash" style="margin-right: 20px; width: 250px; height: 140px;" class="pull-left">
<h3>Muzzle Flash</h3>
<div style="font-size: 14px;">Make your gun shots look real. Simply draw on the movie and select your gun type: hand gun, shot gun, machine gun, laser gun, you name it!</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div id="download">
<div class="container">
<div style="padding: 1em; color: #000000; background: #DDDDDD;" class="ContentArea">
<h2>Download Rebaslight <small><%= version %></small></h2>
<div>
<ul class="nav nav-tabs js-tabs">
<li role="presentation"><a href="#build-tab-win32" role="tab" data-toggle="tab" aria-controls="profile"><i class="fa fa-windows"></i> Windows</a></li>
<li role="presentation"><a href="#build-tab-darwin" role="tab" data-toggle="tab" aria-controls="profile"><i class="fa fa-apple"></i> Mac</a></li>
<li role="presentation"><a href="#build-tab-linux" role="tab" data-toggle="tab" aria-controls="profile"><i class="fa fa-linux"></i> Linux</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" id="build-tab-win32" class="tab-pane">
<div style="margin-top: -1px; border-top-left-radius: 0;" class="panel panel-default">
<div class="panel-body">
<div>
<%- btns_by_os.win.join("") %>
<p>
Once downloaded, double-click it. It will automatically install and launch the program. It will also create an icon in the start menu.
</p>
<p>
Windows may show a warning saying it doesn't recognize Rebaslight.
Rebaslight is open source so anyone can view/audit the code.
Be sure to only download it from www.rebaslight.com
</p>
</div>
</div>
</div>
</div>
<div role="tabpanel" id="build-tab-darwin" class="tab-pane">
<div style="margin-top: -1px; border-top-left-radius: 0;" class="panel panel-default">
<div class="panel-body">
<div>
<%- btns_by_os.mac.join("") %>
<p>
Once downloaded, double click to mount it and drag the application icon to the <code>/Applications</code> folder.
</p>
<p>
After the app is dragged to your Applications folder, you can run it normally - from the Finder, Launchpad, Spotlight, dock, etc.
</p>
<p>
Mac may show a warning saying it doesn't recognize Rebaslight.
Rebaslight is open source so anyone can view/audit the code.
Be sure to only download it from www.rebaslight.com
</p>
</div>
</div>
</div>
</div>
<div role="tabpanel" id="build-tab-linux" class="tab-pane">
<div style="margin-top: -1px; border-top-left-radius: 0;" class="panel panel-default">
<div class="panel-body">
<div>
<%- btns_by_os.linux.join("") %>
Simply download it, open a terminal and extract it like so:
<pre>$ tar xf rebaslight-<%= version.replace(/^v/, "").trim() %>.tar.bz2</pre>
Then cd into the directory and run it!
<pre>$ cd rebaslight-<%= version.replace(/^v/, "").trim() %>/
$ ./rebaslight</pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="font-size:14px;border-top: 1px solid #CCC; margin-top: 1em; padding-top: .7em;" class="text-muted">
By downloading/using Rebaslight you agree to the <a href="https://github.com/rebaslight/rebaslight/blob/master/LICENSE.md">License.</a>
</div>
<div style="font-size:14px;">
<a href="https://github.com/rebaslight/rebaslight/releases">release details</a>
<span class="text-muted" style="margin:0 .5em">|</span>
<a href="https://github.com/rebaslight/rebaslight">view source <i class="fa fa-github"></i></a>
</div>
</div>
</div>
</div>
<br>
<div id="how-to">
<div class="container">
<div style="padding: 1em; color: #000000; background: #DDDDDD;" class="ContentArea">
<h2>How to add a lightsaber to your video</h2>
<ol>
<li>Open the vido or picture you want to edit.</li>
<li>From the menu select <i>Effects</i> > <i>Laser Glow</i>.</li>
<li>Click on the picture to add points. Right click (or ctrl+click) to remove them.</li>
<li>After clicking on a point, you can hold down the ctrl key use arrow keys to move it 1 pixel at a time.</li>
<li>To preview your work click the <i class="fa fa-star-o"></i> button on the far right.</li>
<li>You can change the color or size using the controlls on the left.</li>
<li>When you are done, select <i>Projects</i> > <i>Export</i>.</li>
</ol>
<h2>FAQ</h2>
<h4>How do I add sound effects? Cut scenes? Add titles and text?</h4>
<p>
Rebaslight is optimized for special effects that are not possible nor easy to do in standard video editors. We recommend using a standard editor to add sound effects, splice/join scenes, overlay titles etc. Then, after exporting, bring the exported video file into Rebaslight to add the final special effects like lasers and muzzle flash.
</p>
<h4>How much does it cost?</h4>
<p>
Rebaslight is free (no cost) to use as long as the "Made with Rebaslight" watermark appears on the output video/image.
However, if you make a one-time payment of <a href="/buy.html">$25</a> you may remove this watermark forever. <a href="/buy.html">Pay here</a>.
</p>
<h4>How do I save my changes?</h4>
<p>
It saves automatically. Next time you open Rebaslight it'll pick up right where you left off.
</p>
<h4>What should I do if my video format is not supported?</h4>
<p>
Rebaslight works best with video that is intended for the web (HTML5 video, either .webm or .mp4 with H.264 video and AAC or MP3 audio). If your file is not supported, Rebaslight gives you an option to try converting it to .webm. Another option is to export it as an HTML5 video from a standard video editor. Then import that file to Rebaslight to add the final effects.
</p>
<h4>What's with the name?</h4>
<p>
<i>Hint:</i> Rebas <span class="text-muted">|</span> sabeR
</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<footer>
<div class="container-fluid text-center">
<p>
<a href="/tips.html">Tip Jar</a>
</p>
<p style="font-size: 28px; margin-bottom: .5em;">
<a href="https://github.com/rebaslight/rebaslight" rel="nofollow"><i class="fa fa-github-square"></i></a>
</p>
<p>
<a href="https://github.com/rebaslight/rebaslight/blob/master/LICENSE.md">License</a>
,
<a href="https://smallhelm.com/privacy">Privacy</a>
,
<a href="https://smallhelm.com" class="no-link-styles">
© 2023 Very Small Helm LLC
</a>
<br>
No affiliation with Lucasfilm, Lucasarts, Star Wars, or Disney.
</p>
</div>
</footer>
</div>
</body>
<script src="/js/main.min.js"></script>
</html>