10000 Update index.html · snojs/snojs.github.io@11be288 · GitHub
[go: up one dir, main page]
Skip to content

Commit 11be288

Browse files
ClassicMC-StudiosClassicMC-Studios
authored
Update index.html
1 parent 5a3484c commit 11be288

File tree

1 file changed

+110
-39
lines changed

1 file changed

+110
-39
lines changed

‎index.html

Lines changed: 110 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
77
<title>Sno - More with Less</title>
8-
<link rel="stylesheet" href="https://classicmc-studios.github.io/bc.css"/>
8+
<link rel="stylesheet" href="https://guyotjs.github.io/bcss/bc.css"/>
9+
<link rel="stylesheet" href="https://guyotjs.github.io/bcss/bc-colors.css"/>
910
<style type="text/css">
1011
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@900&family=Roboto:wght@100&display=swap');
1112
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@@ -19,6 +20,9 @@
1920
font-size: 60px;
2021
font-family:"Merriweather";
2122
}
23+
.bold{
24+
font-weight: 900;
25+
}
2226
h2{
2327
font-family:"Merriweather";
2428

@@ -53,7 +57,7 @@
5357
color:skyblue;
5458
text-decoration: underline;
5559
}
56-
.true-center-with-mac{
60+
.inline-block{
5761
display: inline-block;
5862
}
5963
body{
@@ -68,55 +72,122 @@
6872
font-family:"Merriweather";
6973
}
7074
pre code {
71-
background-color: #2b2b2b;
75+
backdrop-filter: blur(10px);
76+
border: 1px solid gray;
7277
border-radius: 10px;
7378
display: block;
7479
padding: 20px;
7580
display: inline-block;
7681
}
82+
.light-bold{
83+
font-weight: 600;
84+
}
85+
#myCanvas{
86+
position: fixed;
87+
top:0;
88+
left:0;
89+
width:100%;
90+
height:100%;
91+
z-index:-110;
92+
}
93+
.bg-filt{
94+
backdrop-filter: blur(10px);
95+
}
7796
</style>
7897
</head>
79-
<body class="bc-text-align" data='{"title":"sno","attr":["if/else","lint","for","data","bind","incl"],"active":"min is 3.46kb","counter":0}'>
80-
<h1>
81-
<a href="#Fjall">#</a> <span id="Fjall" class="grad" lint>{{title}}</span>js
82-
</h1>
83-
<p class="sub">
84-
More with Less
98+
<body class="text-center" data='{
99+
"title":"sno",
100+
"version":"snostorm",
101+
"describe":["Crazy","Simple","Perfect","Dense","Speedy","Tiny","Portable","Reactive","Lightweight"],
102+
"att":["if","react","for","bind","data","incl"],
103+
"size":"min is 4.38kb"
104+
}'>
105+
<h1 id="#sno" react>
106+
<a href="#sno" >#</a> <span class="grad">{{title}}</span>js
107+
</h1>
108+
<p class="sub">
109+
Ex Glande Quercus
110+
</p><br/>
111+
<p>
112+
A Lightweight JavaScript Framework to add <span class="grad bold">reactivity</span> in a <em>snap</em>.
113+
</p><br/>
114+
<div class="border-gray r inline-block p bg-filt" exc="save(random(describe.length))">
115+
<button class="bg-white black hover-bg-calm m r light-bold sans no-border p" click='save(random(describe.length))'>
116+
What is Sno?
117+
</button><br/>
118+
<span react>
119+
{{describe[retrieve()]}}
120+
</span>
121+
</div><br/><br/>
122+
<div>
123+
<div class="border-gray r inline-block p bg-filt">
124+
<h2 class="m"><span class="grad">##</span> With Attributes Like...</h2>
125+
<ol for="att" item="li" class="m-m" item-class="item text-left "></ol>
126+
</div>
127+
</div><br/>
128+
<h2 class="m"><span class="grad">##</span> Absolutely <em>Tiny</em>...</h2>
129+
<button class="bg-white black hover-bg-calm m r light-bold sans no-border p" click='size = "source is 7.9kb"'>Source</button>
130+
<button class="bg-white black hover-bg-calm m r light-bold sans no-border p" click='size = "min is 4.38kb"'>Min</button>
131+
<button class="bg-white black hover-bg-calm m r light-bold sans no-border p" click='size = "build is 1.5kb"'>Build</button>
132+
<p>
133+
Sno <em react>{{size}}</em>!!
85134
</p><br/>
86-
<p>A new Lightweight JavaScript framework to add reactivity in a **<b>snap</b>**</p><br/>
87-
<div class="bc-border true-center-with-mac">
88-
<button click="counter++;" class="bc-white bc-text-black bc-p-5 bc-hover-p-10 bc-m-10 bc-r-5">Increment</button>
89-
<p lint>
90-
Count: {{counter}}
91-
</p>
92-
</div><br/><br/>
93-
<div class="bc-border true-center-with-mac bc-p-25 bc-r-5">
94-
<h2 id="with-attr"><a href="#with-attr">##</a> With Attributes Like...</h2>
95-
<ol style="text-align:left;" class="bc-m-10" for="attr" item="li" item-class="item"></ol>
96-
</div><br/><br/>
97-
<h2><a href="#TINY">##</a> Absolutely <em id="TINY">TINY</em></h2>
98-
<div>
99-
<button click='active="src is 5.01kb"' class="bc-white bc-text-black bc-p-5 bc-hover-p-10 bc-m-5 bc-r-5">Source</button>
100-
<button click='active="min is 3.46kb"' class="bc-white bc-text-black bc-p-5 bc-hover-p-10 bc-m-5 bc-r-5">Min</button>
101-
<button click='active="build is 1.57kb"' class="bc-white bc-text-black bc-p-5 bc-hover-p-10 bc-m-5 bc-r-5">Build</button><br/>
102-
<span>Sno</span>
103-
<em lint>
104-
{{active}}!!
105-
</em>
106-
</div><br/><br/>
107135
<blockquote>
108136
“If your mind isn’t clouded by unnecessary things, then this is the best season of your life.”<br/>
109137
- Wu Men
110138
</blockquote><br/><br/>
111-
<h2 id="learn"><a href="#learn">##</a> Learn The Basics</h2><br/>
139+
<h2 class="m"><span class="grad">##</span> Add Sno to Your Project...</h2><br/>
112140
<p>
113-
Visit the tutorial <a href="https://snojs.github.io/snojs/Sno-Basics.md">Here</a>!
141+
All you need is One script tag<br/>
142+
Download Locally Here<br/>
143+
Run from the link with a script tag<br/>
114144
</p><br/>
115-
<h2 id="add"><a href="#add">##</a> Add Sno to your Project</h2><br/>
116-
<p>
117-
All you need is <b>One</b> script tag<br/>
118-
Download Locally <a href="https://snojs.github.io/snojs/build/sno-min.js">Here</a><br/>
119-
Run from the link with a script tag <br/><br/><pre><code>&#60;script src="https://snojs.github.io/snojs/build/sno-min.js"&#62;&#60;/script&#62;</code></pre>
120-
</p><br/><br/>
121-
<script type="text/javascript" src="https://snojs.github.io/snojs/build/sno-min.js"></script>
145+
<pre><code>&#60;script src="https://snojs.github.io/snojs/build/sno-min.js"&#62;&#60;/script&#62;</code></pre>
146+
<br/><br/><br/><br/>
147+
<canvas id="myCanvas"></canvas>
148+
<script src="https://classicmc-studios.github.io/js/moss.js"></script>
149+
<script>
150+
createCanvas(screen.width,screen.height);
151+
let cv = document.getElementById("myCanvas");
152+
bg("#242424");
153+
//Snow_Particles
154+
var angle = 0;
155+
var W = screen.width;
156+
var H = screen.height;
157+
var mp = 50;//max particles
158+
var particles = [];
159+
for(var i = 0; i < mp; i++){
160+
particles.push({
161+
x: Math.random()*W,
162+
y: Math.random()*H,
163+
r: Math.random()*4+1,
164+
d: Math.random()*mp
165+
});
166+
}
167+
function update(){
168+
angle += 0.01;
169+
for(var i = 0; i < mp; i++){
170+
var p = particles[i];
171+
p.y += Math.cos(angle+p.d) + 1 + p.r/2;
172+
p.x += Math.sin(angle) * 2;
173+
if(p.x > W+5 || p.x < -5 || p.y > H){
174+
if(i%3 > 0){particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};}
175+
else{
176+
if(Math.sin(angle) > 0){particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};}
 9BBB
177+
else{particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};}
178+
}
179+
}
180+
}
181+
}
182+
function draw(){
183+
bg("#242424");
184+
for(var i = 0; i < mp; i++){
185+
noStroke();selectColor("#ffffff");var p = particles[i];ellipse(p.x,p.y,p.r);
186+
}
187+
update();
188+
requestAnimationFrame(draw);
189+
}
190+
requestAnimationFrame(draw);
191+
</script>
192+
<script src="https://snojs.github.io/snojs/build/sno-min.js"></script>
122193
</body>

0 commit comments

Comments
 (0)
0