Skip to content

Commit f094de7

Browse files
loganhzloganhz
authored
Merge pull request #118 from loganhz/nginx
Update nginx app
2 parents 8df775d + 57508a7 commit f094de7

File tree

8 files changed

+357
-120
lines changed

8 files changed

+357
-120
lines changed

‎update.list‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
web-framework/nodejs/next
1+
web-framework/nginx

‎web-framework/nginx/publish.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ Type: Application
22
Name: start-nginx
33
Provider:
44
- 阿里云
5-
Version: 0.0.6
5+
Version: 0.0.7
66
Description: 快速部署 nginx 到函数计算
77
HomePage: https://github.com/devsapp/start-web-framework
88
Tags:

‎web-framework/nginx/src/code/css/bootstrap.min.css‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web-framework/nginx/src/code/css/index.css‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
*{
2+
margin: 0px;
3+
padding: 0px;
4+
}
5+
6+
body{
7+
font-family: 'Exo', sans-serif;
8+
}
9+
10+
11+
.context {
12+
width: 100%;
13+
position: absolute;
14+
top:30vh;
15+
16+
}
17+
18+
.context h1{
19+
text-align: center;
20+
color: #fff;
21+
font-size: 50px;
22+
}
23+
24+
25+
.area{
26+
background: #4e54c8;
27+
background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
28+
width: 100%;
29+
height:100vh;
30+
}
31+
32+
.circles{
33+
position: absolute;
34+
top: 0;
35+
left: 0;
36+
width: 100%;
37+
height: 100%;
38+
overflow: hidden;
39+
}
40+
41+
.circles li{
42+
position: absolute;
43+
display: block;
44+
list-style: none;
45+
width: 20px;
46+
height: 20px;
47+
background: rgba(255, 255, 255, 0.2);
48+
animation: animate 25s linear infinite;
49+
bottom: -150px;
50+
51+
}
52+
53+
.circles li:nth-child(1){
54+
left: 25%;
55+
width: 80px;
56+
height: 80px;
57+
animation-delay: 0s;
58+
}
59+
60+
61+
.circles li:nth-child(2){
62+
left: 10%;
63+
width: 20px;
64+
height: 20px;
65+
animation-delay: 2s;
66+
animation-duration: 12s;
67+
}
68+
69+
.circles li:nth-child(3){
70+
left: 70%;
71+
width: 20px;
72+
height: 20px;
73+
animation-delay: 4s;
74+
}
75+
76+
.circles li:nth-child(4){
77+
left: 40%;
78+
width: 60px;
79+
height: 60px;
80+
animation-delay: 0s;
81+
animation-duration: 18s;
82+
}
83+
84+
.circles li:nth-child(5){
85+
left: 65%;
86+
width: 20px;
87+
height: 20px;
88+
animation-delay: 0s;
89+
}
90+
91+
.circles li:nth-child(6){
92+
left: 75%;
93+
width: 110px;
94+
height: 110px;
95+
animation-delay: 3s;
96+
}
97+
98+
.circles li:nth-child(7){
99+
left: 35%;
100+
width: 150px;
101+
height: 150px;
102+
animation-delay: 7s;
103+
}
104+
105+
.circles li:nth-child(8){
106+
left: 50%;
107+
width: 25px;
108+
height: 25px;
109+
animation-delay: 15s;
110+
animation-duration: 45s;
111+
}
112+
113+
.circles li:nth-child(9){
114+
left: 20%;
115+
width: 15px;
116+
height: 15px;
117+
animation-delay: 2s;
118+
animation-duration: 35s;
119+
}
120+
121+
.circles li:nth-child(10){
122+
left: 85%;
123+
width: 150px;
124+
height: 150px;
125+
animation-delay: 0s;
126+
animation-duration: 11s;
127+
}
128+
129+
130+
131+
@keyframes animate {
132+
133+
0%{
134+
transform: translateY(0) rotate(0deg);
135+
opacity: 1;
136+
border-radius: 0;
137+
}
138+
139+
100%{
140+
transform: translateY(-1000px) rotate(720deg);
141+
opacity: 0;
142+
border-radius: 50%;
143+
}
144+
145+
}

‎web-framework/nginx/src/code/css/sticky.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web-framework/nginx/src/code/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7+
<meta
8+
name="viewport"
9+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
10+
/>
11+
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" />
12+
<link href="./css/sticky.css" rel="stylesheet" type="text/css" />
13+
<link href="./css/index.css" rel="stylesheet" type="text/css" />
14+
<script type="text/javascript" src="./js/confetti.js"></script>
15+
<title>FC Example</title>
16+
</head>
17+
<body class="area">
18+
<script defer>
19+
startConfetti();
20+
setTimeout(() => {
21+
stopConfetti();
22+
}, 5000);
23+
</script>
24+
<div class="context">
25+
<h1>Welcome to Function Compute!</h1>
26+
</div>
27+
28+
<div>
29+
<ul class="circles">
30+
<li></li>
31+
<li></li>
32+
<li></li>
33+
<li></li>
34+
<li></li>
35+
<li></li>
36+
<li></li>
37+
<li></li>
38+
<li></li>
39+
<li></li>
40+
</ul>
41+
</div>
42+
</body>
43+
</html>

‎web-framework/nginx/src/code/js/confetti.js‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
var maxParticleCount = 150; //set max confetti count
2+
var particleSpeed = 2; //set the particle animation speed
3+
var startConfetti; //call to start confetti animation
4+
var stopConfetti; //call to stop adding confetti
5+
var toggleConfetti; //call to start or stop the confetti animation depending on whether it's already running
6+
var removeConfetti; //call to stop the confetti animation and remove all confetti immediately
7+
8+
(function() {
9+
startConfetti = startConfettiInner;
10+
stopConfetti = stopConfettiInner;
11+
toggleConfetti = toggleConfettiInner;
12+
removeConfetti = removeConfettiInner;
13+
var colors = ["DodgerBlue", "OliveDrab", "Gold", "Pink", "SlateBlue", "LightBlue", "Violet", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"]
14+
var streamingConfetti = false;
15+
var animationTimer = null;
16+
var particles = [];
17+
var waveAngle = 0;
18+
19+
function resetParticle(particle, width, height) {
20+
particle.color = colors[(Math.random() * colors.length) | 0];
21+
particle.x = Math.random() * width;
22+
particle.y = Math.random() * height - height;
23+
particle.diameter = Math.random() * 10 + 5;
24+
particle.tilt = Math.random() * 10 - 10;
25+
particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
26+
particle.tiltAngle = 0;
27+
return particle;
28+
}
29+
30+
function startConfettiInner() {
31+
var width = window.innerWidth;
32+
var height = window.innerHeight;
33+
window.requestAnimFrame = (function() {
34+
return window.requestAnimationFrame ||
35+
window.webkitRequestAnimationFrame ||
36+
window.mozRequestAnimationFrame ||
37+
window.oRequestAnimationFrame ||
38+
window.msRequestAnimationFrame ||
39+
function (callback) {
40+
return window.setTimeout(callback, 16.6666667);
41+
};
42+
})();
43+
var canvas = document.getElementById("confetti-canvas");
44+
if (canvas === null) {
45+
canvas = document.createElement("canvas");
46+
canvas.setAttribute("id", "confetti-canvas");
47+
canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none");
48+
document.body.appendChild(canvas);
49+
canvas.width = width;
50+
canvas.height = height;
51+
window.addEventListener("resize", function() {
52+
canvas.width = window.innerWidth;
53+
canvas.height = window.innerHeight;
54+
}, true);
55+
}
56+
var context = canvas.getContext("2d");
57+
while (particles.length < maxParticleCount)
58+
particles.push(resetParticle({}, width, height));
59+
streamingConfetti = true;
60+
if (animationTimer === null) {
61+
(function runAnimation() {
62+
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
63+
if (particles.length === 0)
64+
animationTimer = null;
65+
else {
66+
updateParticles();
67+
drawParticles(context);
68+
animationTimer = requestAnimFrame(runAnimation);
69+
}
70+
})();
71+
}
72+
}
73+
74+
function stopConfettiInner() {
75+
streamingConfetti = false;
76+
}
77+
78+
function removeConfettiInner() {
79+
stopConfetti();
80+
particles = [];
81+
}
82+
83+
function toggleConfettiInner() {
84+
if (streamingConfetti)
85+
stopConfettiInner();
86+
else
87+
startConfettiInner();
88+
}
89+
90+
function drawParticles(context) {
91+
var particle;
92+
var x;
93+
for (var i = 0; i < particles.length; i++) {
94+
particle = particles[i];
95+
context.beginPath();
96+
context.lineWidth = particle.diameter;
97+
context.strokeStyle = particle.color;
98+
x = particle.x + particle.tilt;
99+
context.moveTo(x + particle.diameter / 2, particle.y);
100+
context.lineTo(x, particle.y + particle.tilt + particle.diameter / 2);
101+
context.stroke();
102+
}
103+
}
104+
105+
function updateParticles() {
106+
var width = window.innerWidth;
107+
var height = window.innerHeight;
108+
var particle;
109+
waveAngle += 0.01;
110+
for (var i = 0; i < particles.length; i++) {
111+
particle = particles[i];
112+
if (!streamingConfetti && particle.y < -15)
113+
particle.y = height + 100;
114+
else {
115+
particle.tiltAngle += particle.tiltAngleIncrement;
116+
particle.x += Math.sin(waveAngle);
117+
particle.y += (Math.cos(waveAngle) + particle.diameter + particleSpeed) * 0.5;
118+
particle.tilt = Math.sin(particle.tiltAngle) * 15;
119+
}
120+
if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
121+
if (streamingConfetti && particles.length <= maxParticleCount)
122+
resetParticle(particle, width, height);
123+
else {
124+
particles.splice(i, 1);
125+
i--;
126+
}
127+
}
128+
}
129+
}
130+
})();

0 commit comments

Comments
 (0)