8000 Create beta.html · snojs/snojs.github.io@a449d01 · GitHub
[go: up one dir, main page]
Skip to content

Commit a449d01

Browse files
ClassicMC-StudiosClassicMC-Studios
authored
Create beta.html
1 parent 5c5c150 commit a449d01

File tree

1 file changed

+201
-0
lines changed

1 file changed

+201
-0
lines changed

‎beta.html

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Sno - More with Less</title>
8+
<link rel="icon" type="image/x-icon" href="https://avatars.githubusercontent.com/u/149719209?s=200&v=4"/>
9+
<link rel="stylesheet" href="https://guyotjs.github.io/bcss/bc.css"/>
10+
<link rel="stylesheet" href="https://guyotjs.github.io/bcss/bc-colors.css"/>
11+
<style type="text/css">
12+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@900&family=Roboto:wght@100&display=swap');
13+
@import url('http 8000 s://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
14+
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
15+
16+
*{
17+
font-family:'Open Sans',sans-serif;
18+
color:white;
19+
}
20+
h1{
21+
font-size: 60px;
22+
font-family:"Merriweather";
23+
}
24+
.bold{
25+
font-weight: 900;
26+
}
27+
h2{
28+
font-family:"Merriweather";
29+
30+
}
31+
.sub{
32+
font-family: 'Open Sans',sans-serif;
33+
font-size: 20px;
34+
color:gray;
35+
font-style: italic;
36+
}
37+
p{
38+
font-family: 'Open Sans',sans-serif;
39+
}
40+
b{
41+
font-weight: 400;
42+
font-family: 'Open Sans',sans-serif;
43+
}
44+
.item{
45+
border-bottom:1px solid lightgray;
46+
margin:10px;
47+
}
48+
.grad{
49+
animation: background-pan 3s linear infinite;
50+
background-image: linear-gradient(to right, lightblue,skyblue,darkblue);
51+
-webkit-background-clip: text;
52+
background-clip: text;
53+
-webkit-text-fill-color: transparent;
54+
white-space: nowrap;
55+
background-size: 200%;
56+
}
57+
a{
58+
color:skyblue;
59+
text-decoration: underline;
60+
}
61+
.inline-block{
62+
display: inline-block;
63+
}
64+
body{
65+
background-color: #2e2e2e;
66+
}
67+
blockquote{
68+
--mar:10px;
69+
display: inline-block;
70+
padding: 5px;
71+
border-left: 2px solid gray;
72+
margin-left:var(--mar);margin-left:var(--mar);
73+
font-family:"Merriweather";
74+
}
75+
pre code {
76+
-webkit-backdrop-filter: blur(5px);
77+
backdrop-filter: blur(5px);
78+
border: 1px solid gray;
79+
border-radius: 10px;
80+
display: block;
81+
padding: 20px;
82+
display: inline-block;
83+
}
84+
.light-bold{
85+
font-weight: 600;
86+
}
87+
#myCanvas{
88+
position: fixed;
89+
top:0;
90+
left:0;
91+
width:100%;
92+
height:100%;
93+
z-index:-110;
94+
}
95+
.bg-filt{
96+
-webkit-backdrop-filter: blur(5px);
97+
backdrop-filter: blur(5px);
98+
}
99+
</style>
100+
</head>
101+
<body class="text-center" data='{
102+
"title":"sno",
103+
"version":"snostorm",
104+
"describe":["Crazy","Simple","Perfect","Dense","Speedy","Tiny","Portable","Reactive","Lightweight"],
105+
"att":["if","react","for","bind","exc","incl"],
106+
"size":"min is 4kb",
107+
"updator":0
108+
}'>
109+
<h1 id="#sno" react>
110+
<a href="#sno" >#</a> <span class="grad">{{title}}</span>js
111+
</h1>
112+
<p class="sub">
113+
Ex Glande Quercus
114+
</p><br/>
115+
<p>
116+
"Building the web, <span class="grad bold">your way.</span>"
117+
</p><br/>
118+
<div class="border-gray r inline-block p bg-filt" exc="updator = random(describe.length)">
119+
<button class="bg-white black hover-bg-calm m r light-bold sans no-border p" onclick='$("updator = random(describe.length)")'>
120+
What is Sno?
121+
</button><br/>
122+
<span react>
123+
{{describe[updator]}}
124+
</span>
125+
</ F438 div><br/><br/>
126+
<div>
127+
<div class="border-gray r inline-block p bg-filt">
128+
<h2 class="m"><span class="grad">##</span> With Attributes Like...</h2>
129+
<ol for="att" item="li" class="m-m" item-class="item text-left "></ol>
130+
</div>
131+
</div><br/>
132+
<h2 class="m"><span class="grad">##</span> Absolutely <em>Tiny</em>...</h2>
133+
<button class="bg-white black hover-bg-calm m r light-bold sans no-border p" onclick='$("size = \"source is 7.5kb\"")'>Source</button>
134+
<button class="bg-white black hover-bg-calm m r light-bold sans no-border p" onclick='$("size = \"min is 4kb\"")'>Min</button>
135+
<button class="bg-white black hover-bg-calm m r light-bold sans no-border p" onclick='$("size = \"build is 1.3kb\"")'>Build</button>
136+
<p>
137+
Sno <em react>{{size}}</em>!!
138+
</p><br/>
139+
<blockquote>
140+
“If your mind isn’t clouded by unnecessary things, then this is the best season of your life.”<br/>
141+
- Wu Men
142+
</blockquote><br/><br/>
143+
<h2 class="m"><span class="grad">##</span> Add Sno to Your Project...</h2><br/>
144+
<p>
145+
All you need is One script tag<br/>
146+
Download Locally Here<br/>
147+
Run from the link with a script tag<br/>
148+
↓ Click to Copy ↓<br/>
149+
</p><br/>
150+
<pre><code onclick="copy(`<script src='https://snojs.github.io/snojs/build/sno-min.js'></script>`)">&#60;script src="https://snojs.github.io/snojs/build/sno-min.js"&#62;&#60;/script&#62;</code></pre>
151+
<br/><br/><br/><br/>
152+
<canvas id="myCanvas"></canvas>
153+
<script src="https://classicmc-studios.github.io/js/moss.js"></script>
154+
<script>
155+
function copy(id){
156+
navigator.clipboard.writeText(id);
157+
}
158+
createCanvas(screen.width,screen.height);
159+
let cv = document.getElementById("myCanvas");
160+
bg("#242424");
161+
//Snow_Particles
162+
var angle = 0;
163+
var W = screen.width;
164+
var H = screen.height;
165+
var mp = 100;//max particles
166+
var particles = [];
167+
for(var i = 0; i < mp; i++){
168+
particles.push({
169+
x: Math.random()*W,
170+
y: Math.random()*H,
171+
r: Math.random()*4+1,
172+
d: Math.random()*mp
173+
});
174+
}
175+
function update(){
176+
angle += 0.01;
177+
for(var i = 0; i < mp; i++){
178+
var p = particles[i];
179+
p.y += Math.cos(angle+p.d) + 1 + p.r/2;
180+
p.x += Math.sin(angle) * 2;
181+
if(p.x > W+5 || p.x < -5 || p.y > H){
182+
if(i%3 > 0){particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};}
183+
else{
184+
if(Math.sin(angle) > 0){particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};}
185+
else{particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};}
186+
}
187+
}
188+
}
189+
}
190+
function draw(){
191+
bg("#242424");
192+
for(var i = 0; i < mp; i++){
193+
noStroke();selectColor("#ffffff");var p = particles[i];ellipse(p.x,p.y,p.r);
194+
}
195+
update();
196+
requestAnimationFrame(draw);
197+
}
198+
requestAnimationFrame(draw);
199+
</script>
200+
<script src="https://snojs.github.io/snojs-beta/snoflake.js"></script>
201+
</body>

0 commit comments

Comments
 (0)
0