Skip to content

Commit 865ab02

Browse files
ntollntoll
committed
Firefox on mobile fixes.
1 parent b139b24 commit 865ab02

File tree

2 files changed

+322
-0
lines changed

2 files changed

+322
-0
lines changed

‎assets/css/main.css

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -454,11 +454,221 @@ a.examples-block:hover {
454454
width: 100%;
455455
}
456456

457+
/* ----------------------------------
458+
Terminal interface
459+
-----------------------------------*/
460+
.old-terminal {
461+
box-shadow: 1px 1px 40px rgb(0 0 0 / 30%);
462+
margin: 0 auto;
463+
max-width: 650px;
464+
display: none;
465+
}
466+
467+
.window-buttons {
468+
background-color: #ff3b47;
469+
border-radius: 50%;
470+
border: 1px solid #c03d44;
471+
display: inline-block;
472+
height: 10px;
473+
left: 6px;
474+
position: relative;
475+
top: 6px;
476+
width: 10px;
477+
}
478+
479+
.minimize {
480+
background-color: #ffc100;
481+
border-color: #9d802c;
482+
left: 11px;
483+
}
484+
485+
.zoom {
486+
background-color: #00d742;
487+
border-color: #049931;
488+
left: 16px;
489+
}
490+
491+
.menu {
492+
background-color: #1D1E22;
493+
border-top-left-radius: 5px;
494+
border-top-right-radius: 5px;
495+
box-sizing: border-box;
496+
height: 25px;
497+
margin: 0 auto;
498+
}
499+
500+
.screen {
501+
background-color: #1D1E22;
502+
border-bottom-left-radius: 5px;
503+
border-bottom-right-radius: 5px;
504+
box-sizing: border-box;
505+
margin: 0 auto;
506+
overflow: hidden;
507+
padding: 5rem 1rem;
508+
}
509+
510+
.pre {
511+
-webkit-overflow-scrolling: touch;
512+
background: #2D2E35;
513+
border-radius: 10px;
514+
color: #fff;
515+
display: block;
516+
font-family: 'Hack Regular', monospace;
517+
font-size: .75rem;
518+
line-height: 1.5;
519+
max-width: 100%;
520+
min-width: 100px;
521+
overflow-x: scroll;
522+
padding: 0.5rem;
523+
white-space: nowrap;
524+
}
525+
526+
#typewriter {
527+
animation: hide 6.5s 1s;
528+
font-family: 'Hack Regular', monospace;
529+
height: 0;
530+
line-height: 2.2;
531+
opacity: 0;
532+
position: relative;
533+
left: -34%;
534+
}
535+
536+
/* #typewriter:after{
537+
content: "|";
538+
animation: blink 500ms linear infinite alternate;
539+
} */
540+
541+
.old-terminal p {
542+
font-family: 'Hack Regular', monospace;
543+
font-size: 1em;
544+
left: 10%;
545+
overflow: hidden;
546+
position: relative;
547+
text-align: left;
548+
white-space: nowrap;
549+
width: 0;
550+
}
551+
552+
.old-terminal span {
553+
color: #fff;
554+
font-weight: bold;
555+
}
556+
557+
.line1 {
558+
animation: type .5s 8s steps(80, end) forwards;
559+
color: #9CD9F0;
560+
/* animation-direction: reverse; */
561+
}
562+
563+
.cursor1 {
564+
animation: blink 1s 8s 2 forwards;
565+
}
566+
567+
.line2 {
568+
animation: type .5s 10.25s steps(20, end) forwards;
569+
color: #888;
570+
}
571+
572+
.cursor2 {
573+
animation: blink 1s 10.1s 2 forwards;
574+
}
575+
576+
.line3 {
577+
animation: type .5s 12.2s steps(20, end) forwards;
578+
color: #FFAE57;
579+
}
580+
581+
.cursor3 {
582+
animation: blink 1s 13s 2 forwards;
583+
}
584+
585+
.line4 {
586+
animation: type .5s 14.85s steps(20, end) forwards;
587+
color: #9CD9F0;
588+
}
589+
590+
.cursor4 {
591+
animation: blink 1s 15.5s 2 forwards;
592+
}
593+
594+
.line5 {
595+
animation: type .5s 17.75s steps(20, end) forwards;
596+
color: #fff;
597+
}
598+
599+
.cursor5 {
600+
animation: blink 1s 8.5s infinite;
601+
}
602+
603+
/* ----------------------------------
604+
Animations
605+
-----------------------------------*/
606+
@keyframes blink {
607+
0% {
608+
opacity: 0;
609+
}
610+
611+
40% {
612+
opacity: 0;
613+
}
614+
615+
50% {
616+
opacity: 1;
617+
}
618+
619+
90% {
620+
opacity: 1;
621+
}
622+
623+
100% {
624+
opacity: 0;
625+
}
626+
}
627+
628+
@keyframes hide {
629+
0% {
630+
/* display: none;
631+
height: auto; */
632+
opacity: 1;
633+
}
634+
50% {
635+
opacity: 1;
636+
}
637+
638+
90% {
639+
opacity: 1;
640+
}
641+
642+
100% {
643+
height: 0;
644+
opacity: 0;
645+
}
646+
}
647+
648+
@keyframes type {
649+
to {
650+
width: 40rem;
651+
}
652+
}
653+
654+
@keyframes slideIn {
655+
from {
656+
background-position: center 200%;
657+
}
658+
to {
659+
background-position: center bottom;
660+
}
661+
}
662+
457663

458664
/* ----------------------------------
459665
Mobile layout
460666
-----------------------------------*/
461667
@media all and (max-width: 700px) {
668+
.old-terminal p {
669+
font-size: .8rem;
670+
left: 3%;
671+
}
462672

463673
#typewriter {
464674
left: -253px;

‎index.html

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,39 @@
5151
<section class="content">
5252

5353
<!-- begin terminal window -->
54+
<div id="new-terminal">
5455
<script id="python-terminal" type="mpy" terminal worker>
5556
import code
5657
code.interact()
5758
</script>
5859
<script type="mpy" src="./main.py" async></script>
60+
</div>
61+
62+
<div class="old-terminal" id="old-terminal">
63+
<div class="menu">
64+
<div class="window-buttons close"></div>
65+
<div class="window-buttons minimize"></div>
66+
<div class="window-buttons zoom"></div>
67+
</div>
68+
<div class="screen">
69+
<div class="code">
70+
71+
<pre id="typewriter">
72+
Wouldn't it be cool...
73+
to run Python...
74+
in your browser?
75+
</pre>
76+
77+
<p class="line1">&lt;html&gt;<span class="cursor1">|</span></p>
78+
<p class="line2">&nbsp;&nbsp;...<span class="cursor2">|</span></p>
79+
<p class="line3">&nbsp;&nbsp;&lt;script type="py"&gt;<br/>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #aaa;"><span style="color:#FFD580;">print</span>(<span style="color:#BAE67E;">'You can!'</span>)</span><br/>&nbsp;&nbsp;&lt;/script&gt;<span class="cursor3">|</span></p>
80+
<p class="line4">&lt;/html&gt;<span class="cursor4">|</span></p>
81+
82+
<p class="line5"><span class="cursor5">|</span></p>
83+
84+
</div>
85+
</div>
86+
</div>
5987
<!-- end terminal window -->
6088

6189
<div class="dialogs">
@@ -208,12 +236,96 @@ <h2>PyScript is...</h2>
208236
</section>
209237
</main>
210238

239+
<script>
240+
// Typing animation
241+
function setupTypewriter(t) {
242+
var HTML = t.innerHTML;
243+
244+
t.innerHTML = '';
245+
246+
var cursorPosition = 0,
247+
tag = '',
248+
writingTag = false,
249+
tagOpen = false,
250+
typeSpeed = 100,
251+
tempTypeSpeed = 0;
252+
253+
var type = function() {
254+
255+
if (writingTag === true) {
256+
tag += HTML[cursorPosition];
257+
}
258+
259+
if (HTML[cursorPosition] === '<') {
260+
tempTypeSpeed = 0;
261+
if (tagOpen) {
262+
tagOpen = false;
263+
writingTag = true;
264+
} else {
265+
tag = '';
266+
tagOpen = true;
267+
writingTag = true;
268+
tag += HTML[cursorPosition];
269+
}
270+
}
271+
if (!writingTag && tagOpen) {
272+
tag.innerHTML += HTML[cursorPosition];
273+
}
274+
if (!writingTag && !tagOpen) {
275+
if (HTML[cursorPosition] === ' ') {
276+
tempTypeSpeed = 0;
277+
}
278+
else {
279+
tempTypeSpeed = (Math.random() * typeSpeed) + 50;
280+
}
281+
t.innerHTML += HTML[cursorPosition];
282+
}
283+
if (writingTag === true && HTML[cursorPosition] === '>') {
284+
tempTypeSpeed = (Math.random() * typeSpeed) + 50;
285+
writingTag = false;
286+
if (tagOpen) {
287+
var newSpan = document.createElement('span');
288+
t.appendChild(newSpan);
289+
newSpan.innerHTML = tag;
290+
tag = newSpan.firstChild;
291+
}
292+
}
293+
294+
cursorPosition += 1;
295+
if (cursorPosition < HTML.length - 1) {
296+
setTimeout(type, tempTypeSpeed);
297+
}
298+
};
299+
300+
return {
301+
type: type
302+
};
303+
}
304+
305+
let typer = document.getElementById('typewriter');
306+
307+
typewriter = setupTypewriter(typewriter);
308+
309+
typewriter.type();
310+
</script>
211311

212312
<!-- BEGIN HEAP INTEGRATION -->
213313
<script type="text/javascript">
214314
window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};
215315
heap.load("758475466");
216316
</script>
217317
<!-- END HEAP INTEGRATION -->
318+
<script>
319+
// It's a hack.
320+
if(
321+
navigator.userAgent.includes("Firefox") &&
322+
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
323+
324+
) {
325+
document.getElementById("new-terminal").style.display = "none";
326+
document.getElementById("old-terminal").style.display = "block";
327+
}
328+
329+
</script>
218330
</body>
219331
</html>

0 commit comments

Comments
 (0)