-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
205 lines (180 loc) · 8.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<head>
<meta charset=UTF-8 />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-
scalable=yes"> <!--THIS-->
<link rel="stylesheet" type="text/css" href="stylesnew.css" media="screen" />
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet" />
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container text-center">
<div class="text-box">
<div class="heading">someday that product will boost your company</div>
<div class="row justify-content-center align-items-center">
<div class="m-3 col-sm-12 col-md-6 text-center">
<div class="button-wrapper">
<div class="button pizza-button" data-bs-toggle="modal" data-bs-target="#modalPizza"><span
class="pizza-slice"></span> PizzaX</div>
</div>
</div>
<div class="m-3 col-sm-12 col-md-6 text-center">
<div class="button-wrapper">
<div class="button company-button" data-bs-toggle="modal" data-bs-target="#modalCompany"><span
class="company"></span> Cohub</div>
</div>
</div>
</div>
</div>
<div class="modal fade custom-modal-background-pizza" id="modalPizza" tabindex="-1" aria-labelledby="modalPizza"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 style=" display: flex;
align-items: center; /* Wyrównaj elementy wertykalnie */
justify-content: center; /* Wyrównaj elementy poziomo */
"> <span class="pizza-slice"></span>
PizzaX - social app</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>🚧 Project in progress</p>
<div class="progress progress-pizza">
<div class="progress-bar progress-bar-pizza progress-bar-striped progress-bar-animated bg-info"
role="progressbar" aria-valuenow="10%" aria-valuemin="0" aria-valuemax="100" style="width: 25%"></div>
</div>
<h5 style="margin-top: 10px; text-align: center;">🍕 Exciting News for Pizza Lovers! 🍕</h5>
<p>Hey pizza lovers! Brace yourselves for something amazing, pizza portal is on the horizon!</p>
<p>Get ready to elevate your pizza game to a whole new level! We're thrilled to announce the upcoming launch
of our comprehensive pizza portal, designed especially for passionate pizza enthusiasts like you. </p>
<ul>
<li>📅 Pizza calculator with planning feature. Auto-sync your google calendar</li>
<li>👩🍳 Rate the baked goods of others and learn from them.</li>
<li>📊 The entire community in one place.</li>
<li>📝 All the infromation about pizza, ingredients and technical aspects of pizza-making in one place.
</li>
</ul>
<p>Stay tuned for updates. Get ready to elevate your pizza game to the next level! 🚀🍽️</p>
</div>
</div>
</div>
</div>
<div class="modal fade custom-modal-background-company" id="modalCompany" tabindex="-1"
aria-labelledby="modalCompany" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 style=" display: flex;
align-items: center; /* Wyrównaj elementy wertykalnie */
justify-content: center; /* Wyrównaj elementy poziomo */
"><span class="company"></span>Cohub - manage your company / project in one place</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>🔎 Product discovery</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar"
aria-valuenow="10%" aria-valuemin="0" aria-valuemax="100" style="width: 10%"></div>
</div>
<h5 style="margin-top: 10px; text-align: center;">🚀 Streamline Your Project Management with Cohub! 🚀</h5>
<p>Cohub is your go-to solution for all things project management! Why? Because it integrates all the
necessary tools you need to manage your project in one place. Say goodbye to switching between multiple
apps - Cohub has everything you need right at your fingertips. Manage tasks, schedules, documents, and
team communication seamlessly with Cohub!</p>
Core features:
<ul>
<li>🪪 Build Your Own company Website with Our CMS</li>
<li>💬 Seamless conferences, chats, and video calls with our communication module..</li>
<li>📊 Efficient project planning made simple.</li>
<li>📖 Your company's Wikipedia, all in one place</li>
<li>📧 Personalized emails, your message, your way</li>
<li>🚀 Streamline information flow, boost productivity</li>
</ul>
<p>
</p>
</div>
</div>
</div>
</div>
</div>
<script src="three.min.js"></script>
<script>
var progress = $('.progress-pizza');
var progressBar = $('.progress-bar-pizza');
startProgressBar = function () {
setTimeout(function () {
progressBar.removeClass("notransition");
progressBar.css('width', '25%');
setTimeout(function () {
progressBar.css('width', '60%');
setTimeout(function () {
progressBar.css('width', '100%');
setTimeout(function () {
progressBar.addClass("notransition")
progressBar.css('width', '0%');
startProgressBar()
}, 2000); // WAIT 5 milliseconds
}, 4000); // WAIT 2 seconds
}, 3000); // WAIT 1 seconds
}, 2000); // WAIT 1 second
}
startProgressBar()
let scene, camera, renderer, stars, starGeo;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 1;
camera.rotation.x = Math.PI / 2;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
starGeo = new THREE.Geometry();
for (let i = 0; i < 6000; i++) {
star = new THREE.Vector3(
Math.random() * 600 - 300,
Math.random() * 600 - 300,
Math.random() * 600 - 300
);
star.velocity = 0;
star.acceleration = 0.001;
starGeo.vertices.push(star);
}
let sprite = new THREE.TextureLoader().load('star.png');
let starMaterial = new THREE.PointsMaterial({
color: 0xaaaaaa,
size: 0.5,
map: sprite
});
stars = new THREE.Points(starGeo, starMaterial);
scene.add(stars);
window.addEventListener("resize", onWindowResize, false);
animate();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
starGeo.vertices.forEach(p => {
p.velocity += p.acceleration
p.y -= p.velocity;
if (p.y < -200) {
p.y = 200;
p.velocity = 0;
}
});
starGeo.verticesNeedUpdate = true;
stars.rotation.y += 0.002;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
init();
</script>
</body>
</html>