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

Commit 187e4f8

Browse files
ClassicMC-StudiosClassicMC-Studios
authored
Update beta.html
1 parent ea14e45 commit 187e4f8

File tree

1 file changed

+126
-193
lines changed

1 file changed

+126
-193
lines changed

‎beta.html

Lines changed: 126 additions & 193 deletions
Original file line numberDiff line numberDiff line change
@@ -1,201 +1,134 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<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('https://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>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Sno.js</title>
7+
<link rel="stylesheet" href="https://guyotjs.github.io/bcss/bc.css">
8+
<link rel="stylesheet" href="https://guyotjs.github.io/bcss/bc-colors.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10+
<style>
11+
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');
12+
body{
13+
margin:0;
14+
padding:0;
15+
overflow-x: hidden;
16+
}
17+
.f-xxl{
18+
font-size: 80px;
19+
}
20+
.f-respond{
21+
font-size: 17px;
22+
white-space: nowrap;
23+
}
24+
.fw-strong{
25+
font-weight: 900;
26+
}
27+
.border-light{
28+
border: 1px solid lightgray;
29+
}
30+
.border-right-light{
31+
border-right: 1px solid lightgray;
32+
}
33+
.border-bottom-light{
34+
border-bottom: 1px solid lightgray;
35+
}
36+
.plr-l{
37+
padding-left: 32px;
38+
padding-right: 32px;
39+
}
40+
.karla{
41+
font-family: "Karla";
42+
}
43+
.dark-sky{
44+
color:rgb(63, 144, 176);
45+
}
46+
.grad{
47+
background-image: linear-gradient(to right, lightblue,rgb(230, 124, 230));
48+
-webkit-background-clip: text;
49+
background-clip: text;
50+
-webkit-text-fill-color: transparent;
51+
white-space: nowrap;
52+
background-size: 200%;
53+
}
54+
.bg-grad{
55+
background-image: linear-gradient(to right, lightblue,rgb(230, 124, 230));
56+
background-color: rgba(255,255,255,0.7);
57+
background-blend-mode: lighten;
58+
}
59+
.w-full{
60+
position: absolute;
61+
left:0;
62+
width: 93.5%;
63+
}
64+
</style>
10065
</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
66+
<body data='{
67+
"count":0
10868
}'>
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-
</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>
69+
<div class=" p-m">
70+
<a href="https://github.com/snojs/snojs" class="m-m dark-sky">Docs</a>
71+
<a href="https://github.com/snojs">
72+
<i class="fa-lg fa m-m fa-github"></i>
73+
</a>
74+
</div>
75+
<div class="text-center m-m">
76+
<p class="f-xxl karla fw-strong bold"><span class="grad fw-strong karla">Sno</span>.js</p><br/>
77+
<p>Building the web <span class="grad karla fw-strong">{ your way }.</span></p>
78+
</div><br/><br/>
79+
<div class="text-center m-m" computer>
80+
<div class="grid-2 left-center border-light r">
81+
<div class="border-right-light">
82+
<div class="plr-l f-respond p-m text-left karla">
83+
<span class="gray">1|</span> &lt;body data='{"count":0}'&gt;<br/>
84+
<span class="gray">2|</span> &emsp;&lt;p react&gt;{{count}}&lt;/p&gt;<br/>
85+
<span class="gray">3|</span> &emsp;&lt;button onclick='$("count++")'&gt;+&lt;/button&gt;<br/>
86+
<span class="gray">4|</span> &emsp;&lt;script src="./sno.js"&gt;&lt;/script&gt;<br/>
87+
<span class="gray">5|</span> &lt;/body&gt;<br/>
88+
</div>
89+
</div>
90+
<div class="plr-l p-m" style="margin-top:15px;">
91+
<p react>{{count}}</p>
92+
<button class="p border-light gray bg-white r m" onclick='$("count++;")'>+</button>
93+
</div>
13094
</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-
“Have nothing in your house that you do not know to be useful, or believe to be beautiful.”<br/>
141-
- William Morris
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);
95+
</div>
96+
<div class="text-center m-m" mobile>
97+
<div class="left-center border-light r">
98+
<div class="border-bottom-light">
99+
<div class="plr-l f-respond p-m text-left karla">
100+
<span class="gray">1|</span> &lt;body data='{"count":0}'&gt;<br/>
101+
<span class="gray">2|</span> &emsp;&lt;p react&gt;{{count}}&lt;/p&gt;<br/>
102+
<span class="gray">3|</span> &emsp;&lt;button onclick='$("count++")'&gt;+&lt;/button&gt;<br/>
103+
<span class="gray">4|</span> &emsp;&lt;script src="./sno.js"&gt;&lt;/script&gt;<br/>
104+
<span class="gray">5|</span> &lt;/body&gt;<br/>
105+
</div>
106+
</div>
107+
<div class="p">
108+
<p react>{{count}}</p>
109+
<button class="p border-light gray bg-white r m" onclick='$("count++;")'>+</button>
110+
</div>
111+
</div>
112+
</div><span mobile><br/><br/><br/></span><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
113+
<div class="text-center karla">
114+
<p class="karla f-l">Add <span class="grad fw-strong">Sno</span> to Your Project...</p><br/>
115+
All you need is <strong>One</strong> script tag <br/>
116+
Download Locally <a href="https://snojs.github.io/snojs-beta/snoflake.js" download class="dark-sky">Here</a><br/>
117+
Run from the link with a script tag<br/>
118+
↓ Click to Copy ↓<br/>
119+
<div class="p-m border-light r m-m" style="display:inline-block;" onclick="copy('<script src=\'https://snojs.github.io/snojs/build/sno-min.js\'></script>')">
120+
&#60;script src="https://snojs.github.io/snojs/build/sno-min.js"&#62;&#60;/script&#62;
121+
</div>
122+
</div><br/><br/><br/>
123+
<div class="karla bg-grad p-xl text-center footer">
124+
"Have nothing in your house that you do not know to be useful, or believe to be beautiful."<br/>
125+
- William Morris
126+
</div>
127+
<script>
128+
function copy(id){
129+
navigator.clipboard.writeText(id);
197130
}
198-
requestAnimationFrame(draw);
199-
</script>
200-
<script src="https://snojs.github.io/snojs-beta/snoflake.js"></script>
131+
</script>
132+
<script src="./sno-flake.js"></script>
201133
</body>
134+
</html>

0 commit comments

Comments
 (0)
0