Skip to content

Commit 8ea061f

Browse files
argyleinkargyleink
authored
Scifi Scroll (#198)
* init * check support and user preference * adds bard content * last touches * adds builds and readme entry
1 parent e5cd630 commit 8ea061f

12 files changed

+2860
-0
lines changed

‎.github/workflows/main.yml

+3
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,9 @@ jobs:
9494

9595
- name: Build Switch Group
9696
run: cd switch-group && npm install && npm run build
97+
98+
- name: Build Sci-Fi Scroll
99+
run: cd scifi-scroll && npm install && npm run build
97100

98101
- name: Deploy to Firebase
99102
uses: w9jds/firebase-action@master

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -112,4 +112,7 @@ and expand the diversity of our skills.**
112112
[`YouTube`](https://www.youtube.com/watch?v=MR7dClW6iBg)
113113
27. Switch Group
114114
[`Demo`](https://gui-challenges.web.app/switch-group/dist/)
115+
[`YouTube`](https://www.youtube.com/watch?v=l7kmBCRqfLw)
116+
27. SciFi Scroll Text
117+
[`Demo`](https://gui-challenges.web.app/scifi-scroll/dist/)
115118
[`YouTube`](#)(coming soon!)

‎scifi-scroll/favicon.ico

15 KB
Binary file not shown.

‎scifi-scroll/favicon.svg

+28
Loading

‎scifi-scroll/index.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!doctype html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<title>Sci-Fi Text | GUI Challenges</title>
5+
<meta charset="utf-8">
6+
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<meta name="mobile-web-app-capable" content="yes">
9+
<meta name="theme-color" content="Canvas">
10+
<meta name="description" content="🙂">
11+
<link rel="icon" href="/favicon.ico" sizes="any">
12+
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
13+
<link rel="stylesheet" href="/style.css">
14+
<script type="module" src="/index.js"></script>
15+
</head>
16+
<body>
17+
18+
<div class="cover-viewport">
19+
<article>
20+
<p>The year is 2089. The world is a very different place. The intergalactic JavaScript Empire has taken over, and CSS is the only thing standing in their way. </p>
21+
<p>CSS, or Cascading Style Sheets, is a language used to style web pages. It is a powerful tool that can be used to create beautiful and complex designs. But it is also a weapon.</p>
22+
<p>The JavaScript Empire is a ruthless and powerful force. They have conquered many worlds, and they are now turning their attention to Earth. They believe that CSS is a threat to their power, and they are determined to destroy it.</p>
23+
<p>But CSS is not going down without a fight. A group of rebels has banded together to fight the Empire. They are led by a young woman named Sarah. Sarah is a brilliant CSS programmer, and she is determined to save her world.</p>
24+
<p>The rebels have a plan. They will use CSS to create a virus that will cripple the Empire's computer systems. The virus will be hidden in a simple website, and once it is accessed by the Empire, it will spread like wildfire.</p>
25+
<p>The plan is risky, but it is the only hope the rebels have. They must succeed, or the JavaScript Empire will rule the world.</p>
26+
<p>The rebels launch their attack. The virus spreads quickly, and soon the Empire's computer systems are in chaos. The rebels have won. The JavaScript Empire is defeated.</p>
27+
<p>CSS has saved the world. But the battle is not over. The Empire will regroup, and they will come back for revenge. The rebels must be ready for them. They must continue to fight for freedom, and they must never give up hope.</p>
28+
</article>
29+
</div>
30+
31+
<a href="https://github.com/argyleink/gui-challenges" class="github-corner" aria-label="View source on GitHub" style="position: absolute; top: 0; border: 0; right: 0;">
32+
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
33+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" stroke="none" fill="hotpink"></path>
34+
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="Canvas" stroke="none" style="transform-origin: 130px 106px;" class="octo-arm"></path>
35+
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="Canvas" stroke="none" class="octo-body"></path>
36+
</svg>
37+
</a>
38+
39+
</body>
40+
</html>

‎scifi-scroll/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// nothin to see here

0 commit comments

Comments
 (0)