200 |
203 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
246 |
263 |
264 |
274 |
275 |
276 |
--------------------------------------------------------------------------------
/public/intro.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BrOrlandi/StarWarsIntroCreator/98a992a3c934a0247de3112028b847c56287eef5/public/intro.mp3
--------------------------------------------------------------------------------
/public/intro.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BrOrlandi/StarWarsIntroCreator/98a992a3c934a0247de3112028b847c56287eef5/public/intro.ogg
--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 |
89 |
--------------------------------------------------------------------------------
/public/main.js:
--------------------------------------------------------------------------------
1 | // sweet alerts config
2 | swal.setDefaults({
3 | customClass: 'star-wars-alert',
4 | });
5 |
6 | var OpeningKey = null;
7 |
8 | var defaultOpening = null; // to check if user not edited the default opening
9 |
10 | // make audio load on mobile devices
11 | var audio = document.getElementsByTagName('audio')[0];
12 | var audioIsLoaded = false;
13 | var loadData = function () {
14 | if(!audioIsLoaded){
15 | audio.load();
16 | audioIsLoaded = true;
17 | }
18 | };
19 | document.body.addEventListener('touchstart', loadData);
20 |
21 |
22 | // prevent arrow scrolling in firefox
23 | window.addEventListener("keydown", function(e) {
24 | // space and arrow keys
25 | var type = document.activeElement.type || '';
26 | if(!type.startsWith('text')){
27 | if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
28 | e.preventDefault();
29 | }
30 | }
31 | }, false);
32 |
33 | var notPlayed = true;
34 | var showFooter = true;
35 | window.setLoading = function (){
36 | $('#loader').show();
37 | $('#form-starwars').hide();
38 | }
39 |
40 | window.unsetLoading = function (){
41 | $('#loader').hide();
42 | $('#form-starwars').show();
43 | }
44 |
45 | setLoading();
46 |
47 | $('#form-starwars').submit(function(event) {
48 | event.preventDefault();
49 | var opening = getOpeningFormValues();
50 | var before = StarWars.opening;
51 | if(!isOpeningsDifferents(opening, before)){ // User replay the same intro without modification, doesn't need to create a new one
52 | var hashbefore = location.hash;
53 | var hashnow = '!/'+OpeningKey;
54 | location.hash = hashnow;
55 | if(hashbefore !== hashnow){ // if user is in edit form but not in /edit url, force hashchange because the hash will be the same.
56 | window.dispatchEvent(new Event('hashchange'));
57 | }
58 | return;
59 | }
60 |
61 | if(!isOpeningsDifferents(opening,defaultOpening)){
62 | setLoading();
63 | location.hash = '!/Episode8';
64 | return;
65 | }
66 |
67 | var aLogo = opening.logo.split('\n');
68 | if(aLogo.length > 2){
69 | sweetAlert("Oops...", "Logo can't have more than 2 lines.", "warning");
70 | return;
71 | }
72 | var aIntro = opening.intro.split('\n');
73 | if(aIntro.length > 2){
74 | sweetAlert("Oops...", "Intro text can't have more than 2 lines.", "warning");
75 | return;
76 | }
77 |
78 |
79 | for(var key in opening){
80 | if(opening[key] == "string" && opening[key].indexOf("??") > -1){
81 | sweetAlert("Oops...", "Your text can't contain the sequence \"??\", please fix it and submit again.", "error");
82 | return;
83 | }
84 | }
85 |
86 | setLoading();
87 | $.ajax({
88 | url: "https://starwarsopeninga.firebaseio.com/openings.json",
89 | method: "POST",
90 | data: JSON.stringify(opening),
91 | dataType: "json",
92 | success: function(data){
93 | var key = 'A'+data.name.substring(1);
94 | CreatedIntros.save(key,opening);
95 | location.hash = '!/'+key;
96 | },
97 | error: ajaxErrorFunction('Error when creating the intro.\n\n'+JSON.stringify(opening))
98 | });
99 | });
100 |
101 | $(window).on('hashchange', function() {
102 |
103 | var urlByKey = function(key){
104 | var code = key.charAt(0);
105 | if(code === "A"){
106 | key = key.substr(1);
107 | return 'https://starwarsopeninga.firebaseio.com/openings/-'+key+'.json';
108 | }else{
109 | return 'https://starwarsopening.firebaseio.com/openings/-'+key+'.json';
110 | }
111 | };
112 |
113 |
114 | $("#playBut").remove();
115 | var params = location.hash.replace('#!/', '').split('/');
116 | var key = params[0];
117 | var edit = false;
118 | try{
119 | edit = params[1] === "edit";
120 | }catch(e){}
121 | $('body').removeClass('running');
122 | if(key != ""){
123 | $('[name=custom]').val(key);
124 | try{
125 | key = parseSpecialKeys(key);
126 | var url = urlByKey(key);
127 | $.ajax({
128 | url: url,
129 | success: function(opening) {
130 | if(opening == null){
131 | sweetAlert("Oops...", "Introduction not found!", "error");
132 | return;
133 | }
134 | StarWars.opening = opening;
135 | OpeningKey = key;
136 | $("#videoButton").show();
137 |
138 | var intro = opening.intro.replace(//g,">");
140 | intro = intro.replace(/\n/g," ");
141 | StarWars.animation.find("#intro").html(intro);
142 | StarWars.animation.find("#episode").text(opening.episode);
143 |
144 | var title = StarWars.animation.find("#title")
145 | if(checkCompatibleSWFont(opening.title)){
146 | title.addClass('SWFont');
147 | }
148 | title.text(opening.title);
149 |
150 | var ps = opening.text.split('\n');
151 |
152 | var div = StarWars.animation.find("#text");
153 | div.text('');
154 | for(var i in ps){
155 | div.append($('
').text(ps[i]));
156 | }
157 |
158 | div.css('text-align',opening.center ? 'center':'');
159 |
160 | $('#logosvg',StarWars.animation).css('width',$(window).width()+'px'); // set width of the logo
161 | $('#logoimg',StarWars.animation).css('width',$(window).width()+'px');
162 |
163 | var logoText = opening.logo ? opening.logo : "star\nwars";
164 | var aLogo = logoText.split('\n'); // breaks logo text in 2 lines
165 | var logo1 = aLogo[0];
166 | var logo2 = aLogo[1] || "";
167 | if(logoText.toLowerCase() != "star\nwars"){
168 | var texts = $('#logosvg text',StarWars.animation);
169 | texts[0].textContent = logo1;
170 | texts[1].textContent = logo2;
171 |
172 | // calculate the svg viewBox using the number of characters of the longest world in the logo.
173 | var logosize = logo1.length > logo2.length ? logo1 : logo2;
174 | var vbox = '0 0 '+logosize.length*200+' 500';
175 | $('#logosvg',StarWars.animation).each(function () {$(this)[0].setAttribute('viewBox', vbox) });
176 | $('#logosvg',StarWars.animation).show();
177 | $('#logoimg',StarWars.animation).hide();
178 | }else{ // if the logo text is "Star Wars" set to the logo SVG.
179 | $('#logosvg',StarWars.animation).hide();
180 | $('#logoimg',StarWars.animation).show();
181 | }
182 |
183 | var play = function(){
184 | $.when(StarWars.audioDefer).then(function(){
185 | var buffered = StarWars.audio.buffered.end(StarWars.audio.buffered.length-1);
186 | if(buffered == 0 && !audioIsLoaded){
187 | unsetLoading();
188 | playbutton = $('
');
189 | $('body').append(playbutton);
190 | $('#playBut',playbutton).click(function(){
191 | setLoading();
192 | playbutton.remove();
193 | });
194 | StarWars.audio.oncanplaythrough = function () {
195 | notPlayed = false;
196 | StarWars.play();
197 | };
198 | }else{
199 | notPlayed = false;
200 | StarWars.play();
201 | }
202 | if(edit){
203 | StarWars.audio.currentTime = 97;
204 | $('#form-starwars').show();
205 | }
206 | });
207 | };
208 |
209 | if(document.hasFocus()){ // play if has focus
210 | play();
211 | }else{
212 | $(window).focus(function(){ // play when got focus
213 | if(notPlayed){
214 | play();
215 | }
216 | });
217 | }
218 |
219 | },
220 | error: ajaxErrorFunction('Error when try to load the intro '+key)
221 | });
222 | }catch(error){
223 | location.hash = "";
224 | setLoading();
225 | }
226 | }else{
227 | if(!notPlayed){
228 | StarWars.reset();
229 | StarWars.resetAudio();
230 | }else{
231 | unsetLoading();
232 | }
233 |
234 | }
235 | ga('send', 'pageview', {
236 | 'page': location.pathname + location.search + location.hash
237 | });
238 | });
239 |
240 | function getInternetExplorerVersion()
241 | {
242 | var rv = -1;
243 | if (navigator.appName == 'Microsoft Internet Explorer')
244 | {
245 | var ua = navigator.userAgent;
246 | var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
247 | if (re.exec(ua) != null)
248 | rv = parseFloat( RegExp.$1 );
249 | }
250 | else if (navigator.appName == 'Netscape')
251 | {
252 | var ua = navigator.userAgent;
253 | var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
254 | if (re.exec(ua) != null)
255 | rv = parseFloat( RegExp.$1 );
256 | }
257 | return rv;
258 | }
259 |
260 | $(document).ready(function() {
261 | if(getInternetExplorerVersion() !== -1){
262 | sweetAlert("Internet Explorer Detected", "This website is not compatible with Internet Explorer, please use Chrome. Sorry for the inconvenience.", "error");
263 | unsetLoading();
264 | return;
265 | }
266 | defaultOpening = getOpeningFormValues(); // get the default opening from the default form values
267 | window.dispatchEvent(new Event('hashchange'));
268 |
269 | $('#f-center').change(function(){
270 | var center = $(this).is(':checked');
271 | $('#f-text').css('text-align', center == true ? 'center' : 'initial');
272 | });
273 | });
274 |
275 | var calcTime = function(queue){
276 | var minutes = (queue+1)*30;
277 | var hours = Math.floor(minutes/60);
278 | var days = Math.floor(hours/24);
279 | var time = "";
280 | if(days > 0){
281 | time += days + " days";
282 | }
283 | if(days < 3){
284 | hours = hours%24;
285 | minutes = minutes%60;
286 | if(hours > 0){
287 | time += " " +hours + " hours";
288 | }
289 | if(minutes > 0){
290 | time += " " +minutes + " minutes";
291 | }
292 | }
293 | return time;
294 | };
295 |
296 | function validateEmail(email) {
297 | var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
298 | return re.test(email);
299 | }
300 |
301 | var termsOfServiceText = 'By using this website you are agreeing to our Terms of Service.';
302 |
303 | var requestVideo = function(donate, email){
304 | if(email === false) return false;
305 | if (!validateEmail(email)) {
306 | swal.showInputError("You need to type an e-mail!");
307 | return false;
308 | }
309 |
310 | var url = "https://endor.nihey.org/request?code="+ OpeningKey +"&email=" + email;
311 | $.ajax({
312 | url: url,
313 | type: 'GET',
314 | crossDomain: true,
315 | success: function(data){
316 | var queue = data.queue;
317 | swal({
318 | html: true,
319 | title: '
video request sent
',
320 | text:'
'+
321 | 'Your video has been queued. Your current position on the queue is '+
322 | (queue+1) + ', which will take up to '+ calcTime(queue) +'. '+
323 | 'The link to download the video will be sent to the e-mail: '+
324 | '
But as you donated, we will bump you up on the queue.'+
329 | ' Thank you so much for supporting us! You should receive the confirmation email within a few minutes.'+
330 | '
'
331 | ) :
332 | ''
333 | ) +
334 | '
'+termsOfServiceText+'
'
335 | });
336 | },
337 | error: ajaxErrorFunction('Error when request video download.')
338 | });
339 |
340 | };
341 |
342 | $("#videoButton").click(function(){
343 | var now = getOpeningFormValues();
344 | var before = StarWars.opening;
345 |
346 | if(isOpeningsDifferents(now, before)){ // prevent user to request download without save the edited intro
347 | swal({
348 | html: true,
349 | title: '
Text modified
',
350 | text: '
'+
351 | 'You have changed some of the text inputs. You need to play the new intro to save and request a download.',
352 | showCancelButton: true,
353 | confirmButtonText: "Ok, play it!",
354 | confirmButtonColor: "#807300",
355 | animation: "slide-from-top"
356 | },function(ok){
357 | if(ok){
358 | $('#form-starwars').submit();
359 | }
360 | });
361 | return;
362 | }
363 | // swal({
364 | // html: true,
365 | // title: '
'+
388 | 'We want to provide videos for free, but we have to use a server to render it, which costs money. '+
389 | 'There are '+(queue+1)+' videos in front of you and it will take '+calcTime(queue)+' to be processed.
'+
390 | 'Can\'t wait for it? Donate at least 5 US Dollars, you will jump the queue and your video will be ready in few hours. '+
391 | 'The video will be rendered in HD quality and MP4 file. To see a sample video click '+
392 | 'here.'+
393 | 'Donate at least 10 US Dollars and you will get the video in Full HD resolution (1920x1080)
'+
394 | 'Attention! Make sure there are no typos in your text, there will be no correction after the video rendering. '+
395 | termsOfServiceText+
396 | '
'+
411 | 'Type your email below and you will receive a message with the URL to download your video when it\'s ready. We promise not to send spam!'+
412 | '
' + (donate ? [
413 | '
',
414 | ' Please, use the same email from you PayPal account.',
415 | " If you want to receive in another e-mail too, click on download button again and add more e-mails. You don't need to donate again.",
416 | '
',
417 | ' Attention! Make sure there are no typos in your text, you will need to request a new video download and donate again.
These Terms of Service (“Terms”, “Terms of Service”) refers to the Star Wars Intro Creator website (brorlandi.github.io/StarWarsIntroCreator) (the “Service”) operated by Bruno Orlandi and Nihey Takizawa (“us”, “we”, or “our”).
28 | Your access to and use of the Service is conditioned on your acceptance of and compliance with these Terms. These Terms apply to all visitors, users and others who access or use the Service.
29 |
About the Service
30 |
This website is not related or to Lucasfilm Ltd., Walt Disney, or Twentieth Century Fox. The music and the Star Wars logo are copyrights of Lucasfilm Ltd. This website is developed by fans only.
31 |
We are not responsible for the content inserted in our service. This service should not be used to publish content to suggest violence, discrimination, illegal acts, transgression and hatred.
32 | You must not defame, stalk, bully, abuse, harass, threaten, impersonate or intimidate people or entities via the Service.
33 | The content published in the service is registered by a unique key available in the URL. The content of this service is publicly available to anyone who knows the URL. You can not prevent others from accessing your content if it was published to the service. If you want your content removed from the site, please contact us via email. We don't share users' personal information with anyone.
34 |
About Download Videos
35 |
The videos are rendered on a 1280 x 720 pixel resolution, thus, we do not guarantee that the rendered videos are identical to the creations in this service. The quality may differ depending on the device on which the content is displayed. You can see a sample of a video rendered here: https://www.youtube.com/watch?v=IQf8AN07T_E
36 |
The videos are rendered in our servers and takes 50 minutes on average to be rendered. To deliver this feature for free we have a queue of videos to be rendered. You will be prompted to put your email in. Your email will be only used to send a link to download the video when it’s ready. We don’t send spam and we don’t share your email address with third parties.
37 |
We are not responsible for any errors (typos, misspellings) made when rendering the video, the rendered video is reproduced exactly how it was received. Any fix(es) requested in a rendered text will be subject to our current availability.
38 |
We cannot ensure the video will be properly delivered when it was caused by any issues that are beyond the domains of Star Wars Intro Creator (misspelled email, user inbox is full, inactive user account, the email service sent the video notification e-mail to spam).
39 |
The videos have rendered content, logo and music, copyrighted to Lucasfilm Ltd and its reproduction may depend on the terms of service of third party applications. We are not responsible for the reproduction of videos on third party services. The reproduction of the videos for commercial use is subject to the copyrights of Lucasfilm Ltd.
40 |
Sharing the rendered video on services like Facebook and YouTube may violate copyright, which is not allowed by such services. In those cases it may be better to use the shareable link to Star Wars Intro Creator’s Web Intro.
41 |
About Donations
42 |
Donations are used to maintain the video rendering servers up.
43 |
As a reward for donors who donate at least 5 US Dollars we will provide the video before the entire queue. The donation must be in the exact value or greater than 5 US Dollars. Multiple donations that add up to the value of 5 US Dollars will not be accepted to get the video earlier. For 10 US Dollars or more the video will be rendered in Full HD resolution (1920x1080).
44 |
You must use the same email you have used in your PayPal account used to donate to ask for the video rendering. We are not responsible for misspelled emails, user inbox is full, inactivate user account and spam filters.
45 |
Donators will generally get their video within 2-4 hours, but the time it takes for a given video to be ready may vary on how many video requests were made recently. You should receive a confirmation email about your donation and your video being processed, if not, contact us.
46 |
Only donations made via the website buttons will be processed. If you make a donation directly to our PayPal account it will not be processed automatically, please contact us if it’s the case.
47 |
If you want to donate a greater value to get more videos, you can, contact us for further details.
48 |
We use PayPal to receive donations and it’s only way we accept donations at the time.
49 |
About third parties
50 |
Our Service may contain links to third-party web sites or services that are not owned or controlled by Star Wars Intro Creator. Star Wars Intro Creator has no control over, and assumes no responsibility for: the content, privacy policies, or practices of any third party web sites or services. You further acknowledge and agree that Star Wars Intro Creator shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such web sites or services.
51 |
We reserve the right, at our sole discretion, to modify or replace these Terms at any time.
48 |
49 | A long time ago in a galaxy far,
50 | far away....
51 |
52 |
53 |
54 |
55 |
56 | Episode IV
57 |
58 |
59 | A NEW HOPE
60 |
61 |
62 |
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
63 |
During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
64 |
Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plan that can save her people and restore freedom to the galaxy....
65 |
66 |
67 |
68 |
69 |
70 |
71 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
114 |
115 |
116 |
117 |
--------------------------------------------------------------------------------
/public/tfa.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BrOrlandi/StarWarsIntroCreator/98a992a3c934a0247de3112028b847c56287eef5/public/tfa.mp3
--------------------------------------------------------------------------------
/public/tfa.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BrOrlandi/StarWarsIntroCreator/98a992a3c934a0247de3112028b847c56287eef5/public/tfa.ogg
--------------------------------------------------------------------------------
/public/wic.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BrOrlandi/StarWarsIntroCreator/98a992a3c934a0247de3112028b847c56287eef5/public/wic.jpg
--------------------------------------------------------------------------------
/sass/styles.scss:
--------------------------------------------------------------------------------
1 | // generic transform
2 | @mixin transform($transforms) {
3 | -moz-transform: $transforms;
4 | -o-transform: $transforms;
5 | -ms-transform: $transforms;
6 | -webkit-transform: $transforms;
7 | transform: $transforms;
8 | }
9 |
10 | @mixin backface-visibility ($arguments) {
11 | -webkit-backface-visibility: $arguments;
12 | -moz-backface-visibility: $arguments;
13 | -ms-backface-visibility: $arguments;
14 | -o-backface-visibility: $arguments;
15 | backface-visibility: $arguments;
16 | }
17 |
18 |
19 | @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
20 |
21 | @font-face {
22 | font-family: StarWars;
23 | src: url('Starjedi.ttf');
24 | }
25 |
26 | @font-face {
27 | font-family: StarWarsTitle;
28 | src: url('SWCrawlTitle2.ttf');
29 | }
30 |
31 | $timeFactor: 1;
32 | $introColor: rgb(75, 213, 238);
33 | $titlesColor: #ffd54e;
34 |
35 | html,
36 | body {
37 | width: 100%;
38 | height: 100%;
39 | font: 700 1em "News Cycle", sans-serif;
40 | letter-spacing:.15em;
41 | color: $titlesColor;
42 | margin: 0;
43 | background-color: black;
44 | }
45 |
46 | /* Remove dotted border on Firefox (http://stackoverflow.com/a/199319) */
47 | button::-moz-focus-inner {
48 | border: 0;
49 | }
50 |
51 | .starwars {
52 |
53 | section {
54 | position: absolute;
55 | top: 45%;
56 | left: 50%;
57 | z-index: 1;
58 | }
59 |
60 | .start {
61 | font-size: 200%;
62 | $start-width: 100%;
63 | width: $start-width;
64 | margin: 0 0 0 (- $start-width / 2);
65 | text-align: center;
66 | top: 0;
67 |
68 | #config{
69 | margin: 0 auto;
70 | width: 500px;
71 | }
72 | }
73 | .introBg{
74 | position: absolute;
75 | top: 0px;
76 | left: 0px;
77 | width: 100%;
78 | height: 100%;
79 | background-color: black;
80 | animation: introBg 9s * $timeFactor;
81 | opacity: 0;
82 | }
83 |
84 | .intro {
85 | margin: 0 auto;
86 | padding: 0 100px;
87 | position: static;
88 | top: 0px;
89 | left: 0px;
90 | font-size: 500%;
91 | font-weight: 400;
92 | color: $introColor;
93 | opacity: 0;
94 | animation: intro 6s * $timeFactor ease-out 1s * $timeFactor;
95 | @media (max-height: 720px){
96 | font-size: 350%;
97 | }
98 | }
99 |
100 | .logo {
101 | font-family: StarWars;
102 | text-align:center;
103 | position: static;
104 |
105 | margin: 0 auto;
106 | opacity: 0;
107 | animation: logo 11s * $timeFactor cubic-bezier(0.11, 0.51, 0.48, 0.88) 9s * $timeFactor;
108 | // animation-iteration-count: infinite; // for testing only
109 | // animation-delay: 0s;
110 |
111 | img {
112 | width: 300px;
113 | }
114 | }
115 |
116 | .titles {
117 | $titles-width: 14.65em;
118 | width: $titles-width;
119 | margin: 0 0 0 (- $titles-width / 2);
120 | top: auto;
121 | bottom: 0;
122 | height: 50em;
123 | font-size: 350%;
124 | text-align: justify;
125 | overflow: hidden;
126 | word-wrap: break-word;
127 | transform-origin: 50% 100%;
128 | @include transform(perspective(300px) rotateX(25deg));
129 |
130 | @media screen and (min-width: 1920px) and (max-width: 1920px) {
131 | // and (min-height: 1080px) and (max-height: 1080px) {
132 | zoom: 1.9;
133 | @include transform(perspective(266px) rotateX(29deg) scaleX(1.2));
134 | }
135 |
136 | @media screen and (min-width: 1366px) and (max-width: 1366px) {
137 | zoom: 1.5;
138 | @include transform(perspective(216px) rotateX(26deg));
139 | }
140 |
141 | @media screen and (min-width: 1280px) and (max-width: 1280px) {
142 | zoom: 1.5;
143 | @include transform(perspective(216px) rotateX(26deg));
144 | }
145 |
146 | > div {
147 | position: absolute;
148 | top: 100%;
149 | animation: titles 73s * $timeFactor linear 13s * $timeFactor;
150 |
151 | > p {
152 | margin: 1.35em 0 1.85em 0;
153 | line-height: 1.35em;
154 |
155 | @include backface-visibility(hidden);
156 | }
157 |
158 | .tcenter{
159 | margin: 1.35em 0 -1em 0;
160 | text-align: center;
161 | }
162 | }
163 | }
164 | }
165 |
166 | .verticalWrapper{
167 | display: flex;
168 | align-items: center;
169 | height: 100%;
170 | width: 100%;
171 | position: absolute;
172 | top: 0px;
173 | left: 0px;
174 | right: 0px;
175 | bottom: 0px;
176 | }
177 |
178 | @keyframes intro {
179 | 0% {
180 | opacity: 0;
181 | }
182 | 20% {
183 | opacity: 1;
184 | }
185 | 90% {
186 | opacity: 1;
187 | }
188 | 100% {
189 | opacity: 0;
190 | }
191 | }
192 |
193 | @keyframes introBg {
194 | 0% {
195 | opacity: 1;
196 | }
197 | 100% {
198 | opacity: 1;
199 | }
200 | }
201 |
202 | @keyframes logo {
203 | 0% {
204 | @include transform(scale(1.3));
205 | opacity: 1;
206 | }
207 | 95% {
208 | opacity: 1;
209 | }
210 | 100% {
211 | @include transform(scale(.01));
212 | opacity: 0;
213 | }
214 | }
215 |
216 | @keyframes titles {
217 | 0% {
218 | top: 100%;
219 | opacity: 1;
220 | }
221 | 95% {
222 | opacity: 1;
223 | }
224 | 100% {
225 | top: 20%;
226 | opacity: 0;
227 | }
228 | }
229 |
230 |
231 | .noselect {
232 | -webkit-touch-callout: none;
233 | -webkit-user-select: none;
234 | -khtml-user-select: none;
235 | -moz-user-select: none;
236 | -ms-user-select: none;
237 | user-select: none;
238 | }
239 |
240 | .playButton{
241 | font-family: StarWars;
242 | cursor: pointer;
243 | font-size: 50px;
244 | border: 0;
245 | background: transparent;
246 | color: $titlesColor;
247 | text-shadow: none;
248 | transition: text-shadow 0.5s ease-out;
249 | outline: none;
250 |
251 | &:focus, &:hover {
252 | text-shadow: -1px 1px 8px #45f500, 1px -1px 8px #45f500;
253 | }
254 | }
255 |
256 | // Used only in the Form input. The text is a outlined SVG Text
257 | /// Stroke font-character
258 | /// @param {Integer} $stroke - Stroke width
259 | /// @param {Color} $color - Stroke color
260 | /// @return {List} - text-shadow list
261 | @function stroke($stroke, $color) {
262 | $shadow: ();
263 | $from: $stroke*-1;
264 | @for $i from $from through $stroke {
265 | @for $j from $from through $stroke {
266 | $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
267 | }
268 | }
269 | @return $shadow;
270 | }
271 | /// Stroke font-character
272 | /// @param {Integer} $stroke - Stroke width
273 | /// @param {Color} $color - Stroke color
274 | /// @return {Style} - text-shadow
275 | @mixin stroke($stroke, $color) {
276 | text-shadow: stroke($stroke, $color);
277 | }
278 |
279 | #form-starwars{
280 | // display: none;
281 | width: 500px;
282 |
283 | input,textarea {
284 | width: 97%;
285 | margin-bottom: 0px;
286 | padding: 0.3em;
287 | border: 3px solid transparentize($titlesColor, 0.8);
288 | border-radius: 3px;
289 | background: black;
290 | color: $titlesColor;
291 | transition: border-color 0.7s ease-out;
292 | overflow-x: hidden;
293 |
294 | &:active, &:focus {
295 | border-color: $titlesColor;
296 | }
297 |
298 | }
299 |
300 | textarea{
301 | resize: none;
302 | &#f-logo{
303 | color: black;
304 | border: 0.0666em solid transparentize($titlesColor, 0.8);
305 | border-radius: 0.0533em;
306 | font-family: StarWars;
307 | font-size: 50px;
308 | font-weight: normal;
309 | height: 92px;
310 | line-height: 86%;
311 | // width: 481.66px;
312 | width: 93%;
313 | @include stroke(2,$titlesColor);
314 | }
315 |
316 | &#f-text{
317 | margin-top: 10px;
318 | }
319 | }
320 | }
321 |
322 | #f-intro{
323 | color: $introColor !important;
324 | }
325 | #f-text{
326 | height: 200px;
327 | }
328 |
329 | #f-logo,#f-title,#f-episode{
330 | text-align: center;
331 | }
332 |
333 | #loader{
334 | .inner {
335 | width: 100%;
336 | text-align: center;
337 | }
338 | }
339 |
340 | #pageTitle{
341 | line-height: 100%;
342 | font-family: StarWars;
343 | }
344 |
345 | .star-wars-alert{
346 | background-color: black !important;
347 |
348 | border: 2px solid $titlesColor;
349 | h2, p{
350 | color: $titlesColor !important;
351 | }
352 |
353 | button{
354 | border: 2px solid $titlesColor !important;
355 | color: $titlesColor !important;
356 | background-color: black !important;
357 | }
358 | }
359 |
360 | #footer {
361 | position: fixed;
362 | width: 100%;
363 | bottom: 1em;
364 | text-align: center;
365 | font-size: 0.7em;
366 | color: #9e9e42;
367 |
368 | a {
369 | color: $titlesColor;
370 | text-decoration: none;
371 | &:hover {
372 | color: #fff;
373 | text-decoration: none;
374 | }
375 | }
376 | }
377 |
378 | .socialButtons{
379 | position: fixed;
380 | bottom: 1em;
381 | left: 1em;
382 | z-index: 10;
383 |
384 | form {
385 | margin-bottom: 5px;
386 | }
387 |
388 | div {
389 | margin-bottom: 0.33em;
390 |
391 | &:last-of-type{
392 | margin-bottom: 0;
393 | }
394 | }
395 | }
396 |
397 | .bg {
398 | width: 100%;
399 | height: 4100px;
400 | position: absolute;
401 | top: 0;
402 | left: 0;
403 | background-color: black;
404 | background: url('bg-stars.png') repeat;
405 | }
406 |
407 | .running {
408 | overflow: hidden;
409 | .bg{
410 | animation: scrolldown 7s * $timeFactor 86s * $timeFactor forwards;
411 | }
412 | }
413 |
414 | @keyframes scrolldown {
415 | 0% {
416 | transform: translateY(0);
417 | }
418 | 100% {
419 | transform: translateY(-2200px);
420 | }
421 | }
422 |
423 | .deathstar {
424 | background: black url(deathstar.png) no-repeat;
425 | width: 655px;
426 | height: 663px;
427 | position: absolute;
428 | bottom: 1150px;
429 | right: 100px;
430 | }
431 |
432 | #logosvg{
433 | width: 900px;
434 | display: none;
435 | font-size: 210px;
436 | }
437 |
438 | .playAudio{
439 | width: 100%;
440 | text-align: center;
441 | font-size: 50px;
442 | }
443 |
444 | #videoButton{
445 | display: none;
446 | margin-bottom: 30px;
447 | font-size: 60px;
448 | }
449 |
450 | .sweet-alert {
451 | fieldset{
452 | input {
453 | width: 100%;
454 | margin-bottom: 10px;
455 | padding: 0.25em;
456 | border: 0.25em solid transparentize($titlesColor, 0.8);
457 | border-radius: 0.2em;
458 | background: black;
459 | color: $titlesColor;
460 | transition: border-color 0.7s ease-out;
461 |
462 | &:active, &:focus {
463 | outline: none;
464 | box-shadow: none;
465 | border: 0.25em solid $titlesColor;
466 | }
467 | }
468 | }
469 | .icon, .sa-input-error::before, .sa-input-error::after{
470 | background-color: #C31D00 !important;
471 | }
472 | }
473 |
474 | .sa-error-container{
475 | background-color: #3c3808 !important;
476 | }
477 |
478 | iframe{
479 | border: none;
480 | }
481 |
482 | .termsOfService{
483 | text-align: center;
484 | position: fixed;
485 | bottom: 1em;
486 | right: 1em;
487 | z-index: 10;
488 |
489 | a{
490 | color: $titlesColor;
491 | text-decoration: none;
492 |
493 | &:hover{
494 | text-decoration: underline;
495 | }
496 | }
497 | }
498 |
499 | @keyframes pulseDownload {
500 | 0%{
501 | text-shadow: none;
502 | }
503 |
504 | 40%{
505 | text-shadow: -1px 1px 93px #45f500, 1px -1px 23px #45f500;
506 | }
507 |
508 | 60%{
509 | text-shadow: -1px 1px 93px #45f500, 1px -1px 23px #45f500;
510 | }
511 |
512 | 100%{
513 | text-shadow: none;
514 | }
515 | }
516 |
517 | .downloadButton{
518 | @extend .playButton;
519 | animation: pulseDownload 3s ease 0s infinite;
520 |
521 | &:hover{
522 | text-shadow: -1px 1px 93px #45f500, 1px -1px 23px #45f500;
523 | animation: none;
524 | }
525 | }
526 |
527 | #createdIntros{
528 | #box{
529 | position: fixed;
530 | top: 1em;
531 | left: 1em;
532 | z-index: 10;
533 | border: $titlesColor 3px solid;
534 | border-radius: 7px;
535 | padding: 10px;
536 | color: $titlesColor;
537 | max-width: 20%;
538 |
539 | div{
540 | max-width: 100%;
541 | white-space: nowrap;
542 | overflow: hidden;
543 | text-overflow: ellipsis;
544 | a{
545 | color: $titlesColor;
546 | text-decoration: none;
547 | &.link{
548 | width: 250px;
549 | &:hover{
550 | text-decoration: underline;
551 | }
552 | }
553 | }
554 | .circCont{
555 | display:inline-block;
556 | float: right;
557 | margin-top: 4px;
558 | margin-left: 5px;
559 | .circle {
560 | width: 20px;
561 | height: 20px;
562 | background: transparent;
563 | border: 2px solid $titlesColor;
564 | -moz-border-radius: 50%;
565 | -webkit-border-radius: 50%;
566 | border-radius: 50%;
567 | position: relative;
568 | cursor: pointer;
569 | display: inline-block;
570 | }
571 | .circle:after {
572 | width: 12px;
573 | height: 2px;
574 | background-color: $titlesColor;
575 | content: "";
576 | left: 50%;
577 | top: 50%;
578 | margin-left: -6px;
579 | margin-top: -1px;
580 | position: absolute;
581 | -moz-transform: rotate(-45deg);
582 | -ms-transform: rotate(-45deg);
583 | -webkit-transform: rotate(-45deg);
584 | transform: rotate(-45deg);
585 | /*@include transform-origin(100%,100%);*/
586 | }
587 | .circle:before {
588 | left: 50%;
589 | top: 50%;
590 | margin-left: -6px;
591 | margin-top: -1px;
592 | width: 12px;
593 | height: 2px;
594 | background-color: $titlesColor;
595 | content: "";
596 | position: absolute;
597 | -moz-transform: rotate(45deg);
598 | -ms-transform: rotate(45deg);
599 | -webkit-transform: rotate(45deg);
600 | transform: rotate(45deg);
601 | /*@include transform-origin(0%,0%);*/
602 | }
603 | .fromMiddle:before, .fromMiddle:after {
604 | z-index: 9999;
605 | -moz-transition-delay: 150ms;
606 | -o-transition-delay: 150ms;
607 | -webkit-transition-delay: 150ms;
608 | transition-delay: 150ms;
609 | -moz-transition: ease-in-out 400ms;
610 | -o-transition: ease-in-out 400ms;
611 | -webkit-transition: ease-in-out 400ms;
612 | transition: ease-in-out 400ms;
613 | }
614 | .fromMiddle span {
615 | width: 18px;
616 | height: 18px;
617 | background-color: $titlesColor;
618 | display: inline-block;
619 | position: absolute;
620 | -moz-border-radius: 100%;
621 | -webkit-border-radius: 100%;
622 | border-radius: 100%;
623 | left: -1px;
624 | top: -1px;
625 | z-index: -9999;
626 | -moz-transform: scale(0.3);
627 | -ms-transform: scale(0.3);
628 | -webkit-transform: scale(0.3);
629 | transform: scale(0.3);
630 | opacity: 0;
631 | -moz-transition: ease-in-out 300ms;
632 | -o-transition: ease-in-out 300ms;
633 | -webkit-transition: ease-in-out 300ms;
634 | transition: ease-in-out 300ms;
635 | }
636 |
637 | .fromMiddle:hover:before, .fromMiddle:hover:after {
638 | position: absolute;
639 | background-color: black;
640 | }
641 | .fromMiddle:hover span {
642 | -moz-transform: scale(1);
643 | -ms-transform: scale(1);
644 | -webkit-transform: scale(1);
645 | transform: scale(1);
646 | opacity: 1;
647 | }
648 | }
649 |
650 | }
651 | }
652 | }
653 |
654 | #videoRequestAdvise{
655 | font-size: 50%;
656 | }
657 |
658 | #flabel{
659 | font-size: 13px;
660 | font-family: Arial;
661 | font-weight: normal;
662 | display: inline;
663 | vertical-align: middle;
664 |
665 | }
666 |
667 | .regular-checkbox {
668 | display: none;
669 | }
670 |
671 | .regular-checkbox + label {
672 | background-color: black;
673 | // border: 1px solid #cacece;
674 | border: 3px solid transparentize($titlesColor, 0.8);
675 | // box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
676 | padding: 9px;
677 | border-radius: 3px;
678 | display: inline-block;
679 | position: relative;
680 | top: 3px;
681 | }
682 |
683 | .regular-checkbox + label:active, .regular-checkbox:checked + label:active {
684 | // box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
685 | }
686 |
687 | .regular-checkbox:checked + label {
688 | // border: 1px solid #adb8c0;
689 | // box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
690 | color: #99a1a7;
691 | }
692 |
693 | .regular-checkbox:checked + label:after {
694 | content: '\2714';
695 | font-size: 14px;
696 | position: absolute;
697 | bottom: -2px;
698 | left: 3px;
699 | color: $titlesColor;
700 | }
701 |
702 | #text{
703 | line-height: 1.5em;
704 | }
705 |
706 | #episode{
707 | margin-bottom: -2em;
708 | }
709 |
710 | #title.SWFont{
711 | font-family: StarWarsTitle;
712 | font-weight: normal;
713 | font-size: 210%;
714 | transform: scaleY(1);
715 | margin-bottom: -0.1em;
716 | margin-top: 1.35em;
717 | text-transform: lowercase;
718 | }
719 |
720 | #title{
721 | transform: scaleY(2);
722 | margin-bottom: 1.6em;
723 | margin-top: 3.5em;
724 | text-transform: uppercase;
725 | }
726 |
727 | #playBut{
728 | z-index: 1000;
729 | }
730 |
731 | .sweet-alert {
732 | box-sizing : border-box;
733 | max-height : 100% !important;
734 | overflow-y : auto !important;
735 | padding : 0 17px 17px !important;
736 | width : 512px !important;
737 | }
738 | .sweet-alert:before {
739 | content : "";
740 | display : block;
741 | height : 17px;
742 | width : 0;
743 | }
744 |
745 | #btcether {
746 | &:hover {
747 | text-decoration: underline;
748 | cursor: pointer;
749 | }
750 | font-weight: bold;
751 | display: flex;
752 | line-height: 25px;
753 | span {
754 | margin-left: 5px;
755 | }
756 | }
--------------------------------------------------------------------------------
/sass/textDisplay.scss:
--------------------------------------------------------------------------------
1 | #logoimg{
2 | display: none;
3 | display: block;
4 | }
5 |
6 | #logosvg{
7 | //display: none;
8 | display: block;
9 | }
10 |
11 |
12 | $titlesColor: #ffd54e;
13 |
14 | #showIntroDiv{
15 | position: absolute;
16 | top: 20px;
17 | left: 50px;
18 | z-index: 20;
19 | }
20 |
21 | #showLogo{
22 | position: absolute;
23 | top: 80px;
24 | left: -60px;
25 | width: 200px;
26 | z-index: 20;
27 | }
28 |
29 | #logoConfig {
30 | position: absolute;
31 | top: 200px;
32 | left: -50px;
33 | width: 200px;
34 | -webkit-transform: rotate(90deg);
35 | z-index: 20;
36 | }
37 |
38 | #textHeightConfig {
39 | position: absolute;
40 | top: 500px;
41 | left: -50px;
42 | width: 200px;
43 | -webkit-transform: rotate(90deg);
44 | z-index: 20;
45 | }
46 |
47 | .configRanges{
48 | position: absolute;
49 | $first: 80px;
50 | top: $first;
51 | left: 50px;
52 | &.second{
53 | top: $first + 300px;
54 | }
55 | }
56 |
57 |
58 | .starwars {
59 |
60 | .intro {
61 | display: none;
62 | opacity: 1;
63 | animation: 0 !important;
64 | }
65 |
66 | .titles {
67 |
68 | > div {
69 | top: 80%;
70 | opacity: 1;
71 | }
72 | }
73 |
74 | .logo {
75 | display: none;
76 | opacity: 1;
77 | }
78 | }
79 |
80 | @keyframes titles {
81 |
82 | }
83 |
84 | @keyframes logo {
85 |
86 | }
87 |
--------------------------------------------------------------------------------
/ss1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BrOrlandi/StarWarsIntroCreator/98a992a3c934a0247de3112028b847c56287eef5/ss1.png
--------------------------------------------------------------------------------
/ss2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BrOrlandi/StarWarsIntroCreator/98a992a3c934a0247de3112028b847c56287eef5/ss2.png
--------------------------------------------------------------------------------
/termsOfService.md:
--------------------------------------------------------------------------------
1 | Last updated: February 25, 2017.
2 |
3 | These Terms of Service ("Terms", "Terms of Service") refers to the Star Wars Intro Creator website (brorlandi.github.io/StarWarsIntroCreator) (the "Service") operated by Bruno Orlandi and Nihey Takizawa ("us", "we", or "our").
4 | Your access to and use of the Service is conditioned on your acceptance of and compliance with these Terms. These Terms apply to all visitors, users and others who access or use the Service.
5 |
6 | #### About the Service
7 |
8 | This website is not related or to Lucasfilm Ltd., Walt Disney, or Twentieth Century Fox. The music and the Star Wars logo are copyrights of Lucasfilm Ltd. This website is developed by fans only.
9 |
10 | We are not responsible for the content inserted in our service. This service should not be used to publish content to suggest violence, discrimination, illegal acts, transgression and hatred.
11 | You must not defame, stalk, bully, abuse, harass, threaten, impersonate or intimidate people or entities via the Service.
12 | The content published in the service is registered by a unique key available in the URL. The content of this service is publicly available to anyone who knows the URL. You can not prevent others from accessing your content if it was published to the service. If you want your content removed from the site, please contact us via email. We don't share users' personal information with anyone.
13 |
14 | #### About Download Videos
15 |
16 | The videos are rendered on a 1280 x 720 pixel resolution, thus, we do not guarantee that the rendered videos are identical to the creations in this service. The quality may differ depending on the device on which the content is displayed. You can see a sample of a video rendered here: [https://www.youtube.com/watch?v=IQf8AN07T_E](https://www.youtube.com/watch?v=IQf8AN07T_E)
17 |
18 | The videos are rendered in our servers and takes 50 minutes on average to be rendered. To deliver this feature for free we have a queue of videos to be rendered. You will be prompted to put your email in. Your email will be only used to send a link to download the video when it’s ready. We don’t send spam and we don’t share your email address with third parties.
19 |
20 | We are not responsible for any errors (typos, misspellings) made when rendering the video, the rendered video is reproduced exactly how it was received. Any fix(es) requested in a rendered text will be subject to our current availability.
21 |
22 | We cannot ensure the video will be properly delivered when it was caused by any issues that are beyond the domains of Star Wars Intro Creator (misspelled email, user inbox is full, inactive user account, the email service sent the video notification e-mail to spam).
23 |
24 | The videos have rendered content, logo and music, copyrighted to Lucasfilm Ltd and its reproduction may depend on the terms of service of third party applications. We are not responsible for the reproduction of videos on third party services. The reproduction of the videos for commercial use is subject to the copyrights of Lucasfilm Ltd.
25 |
26 | Sharing the rendered video on services like Facebook and YouTube may violate copyright, which is not allowed by such services. In those cases it may be better to use the shareable link to Star Wars Intro Creator’s Web Intro.
27 |
28 | #### About Donations
29 |
30 | Donations are used to maintain the video rendering servers up.
31 |
32 | As a reward for donors who donate at least 5 US Dollars we will provide the video before the entire queue. The donation must be in the exact value or greater than 5 US Dollars. Multiple donations that add up to the value of 5 US Dollars will not be accepted to get the video earlier. For 10 US Dollars or more the video will be rendered in Full HD resolution (1920x1080).
33 |
34 | You must use the same email you have used in your PayPal account used to donate to ask for the video rendering. We are not responsible for misspelled emails, user inbox is full, inactivate user account and spam filters.
35 |
36 | Donators will generally get their video within 2-4 hours, but the time it takes for a given video to be ready may vary on how many video requests were made recently. You should receive a confirmation email about your donation and your video being processed, if not, contact us.
37 |
38 | Only donations made via the website buttons will be processed. If you make a donation directly to our PayPal account it will not be processed automatically, please contact us if it's the case.
39 |
40 | If you want to donate a greater value to get more videos, you can, contact us for further details.
41 |
42 | We use PayPal to receive donations and it’s only way we accept donations at the time.
43 |
44 | #### About third parties
45 |
46 | Our Service may contain links to third-party web sites or services that are not owned or controlled by Star Wars Intro Creator. Star Wars Intro Creator has no control over, and assumes no responsibility for: the content, privacy policies, or practices of any third party web sites or services. You further acknowledge and agree that Star Wars Intro Creator shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such web sites or services.
47 |
48 | We reserve the right, at our sole discretion, to modify or replace these Terms at any time.
49 |
50 | If you have any questions about these Terms, please contact us via brorlandi@gmail.com and nihey.takizawa@gmail.com .
51 |
--------------------------------------------------------------------------------
4 |
5 | 
150 |
154 | 
182 | Bitcoin & Ether
183 | 
