-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
341 lines (324 loc) · 14.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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width,initial-scale=1" name="viewport" />
<meta
content="Reactonite is a transpiler to convert HTML to React code and PWAs ✨ It's free and open-source and powered by Python3."
name="description" />
<meta name="google" content="notranslate" />
<meta content="Reactonite" name="author" />
<!-- Disable tap highlight on IE -->
<meta name="msapplication-tap-highlight" content="no" />
<link href="./favicon.ico" rel="icon" />
<!-- Primary Meta Tags -->
<title>Reactonite</title>
<meta name="title" content="Reactonite">
<meta name="description"
content="Reactonite is a transpiler to convert HTML to React code and PWAs ✨ It's free and open-source and powered by Python3.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://reactonite.github.io/">
<meta property="og:title" content="Reactonite">
<meta property="og:description"
content="Reactonite is a transpiler to convert HTML to React code and PWAs ✨ It's free and open-source and powered by Python3.">
<meta property="og:image" content="https://reactonite.github.io/assets/images/reactonite-transpiled.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://reactonite.github.io/">
<meta property="twitter:title" content="Reactonite">
<meta property="twitter:description"
content="Reactonite is a transpiler to convert HTML to React code and PWAs ✨ It's free and open-source and powered by Python3.">
<meta property="twitter:image" content="https://reactonite.github.io/assets/images/reactonite-transpiled.jpg">
<link href="./main.css" rel="stylesheet" />
<style>
/* Some CSS Comments */
h1 {
font-size: 100px;
}
header {
background-color: #4457C0;
}
nav {
margin: 0px !important;
}
@media (max-width: 991.98px) {
h1 {
font-size: 50px;
}
}
</style>
</head>
<body>
<!-- Add your content of header -->
<header>
<nav class="navbar navbar-default active fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./index.html" title="">
<img src="./assets/images/reactonite-logo.png" width="50px" class="navbar-logo-img" alt="">
Reactonite
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="./features.html" title="">Features</a></li>
<li><a href="./examples/" title="">Examples</a></li>
<li>
<p>
<a href="https://reactonite.github.io/dev/index.html" class="btn btn-default navbar-btn"
title="">Documentation</a>
</p>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Add your site or app content here -->
<div class="hero-full-container background-image-container white-text-container">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Reactonite</h1>
<p>A transpiler to convert HTML to React code and PWAs ✨</p>
<br>
<a href="https://reactonite.github.io/dev/index.html" class="btn btn-default btn-lg" title="">Get Started!</a>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<div class="text-center">
<h2>About Reactonite</h2>
<p>Reactonite is a wrapper for React which allows one to write vanilla html code and convert it to a react
code and hence building a PWA, SPA ✨
<br>
It facilitates one to transpile HTML code to React website, create PWAs and React applications as quickly
as possible. Acting as a wrapper to NPM it helps you install dependencies and has functionality of Hot
Reloading. It supports almost all HTML tags we have worked upon so far and is powered by React hooks as
well. 😄</p>
</div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="carousel-example-generic" class="carousel carousel-fade slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="./assets/images/reactonite-github.png" alt="Reactonite Github">
<div class="carousel-caption card-shadow reveal">
<h3>Reactonite is Open Source!</h3>
<p>
Reactonite is a Free and Open Source, and it's source code is available to the community on our
Github <a href="https://github.com/SDOS2020/Team_3_Reactonite">here.</a> We believe in peer reviews
and contribution for Reactonite to be of great success.
</p>
<p>
Interested in contributing to the project? Feel free to create a PR to on of the issues on Github or
simply make one if you feel like so!
</p>
<a href="https://github.com/SDOS2020/Team_3_Reactonite/blob/master/CONTRIBUTING.md"
class="btn btn-primary" title="">
Contibuting Guide!
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="container text-center">
<div class="row section-container-spacer">
<div class="col-xs-12 col-md-12">
<h2>Our Team</h2>
<p>Although Reactonite is Open Source and each contribution is of great help!
<br>Here's the core team behind Reactonite!</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-3">
<img src="./assets/images/team/amogh-gulati.jpg" alt=""
class="reveal img-responsive reveal-content image-center">
<h3>Amogh Gulati</h3>
<a href="https://www.facebook.com/amogh.gulati" class="social-round-icon fa-icon" title="">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href="https://twitter.com/amoghgulati" class="social-round-icon fa-icon" title="">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="https://www.linkedin.com/in/amogh-gulati" class="social-round-icon fa-icon" title="">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</div>
<div class="col-xs-12 col-md-3">
<img src="./assets/images/team/avi-garg.jpg" alt="Avi Garg"
class="reveal img-responsive reveal-content image-center">
<h3>Avi Garg</h3>
<a href="https://facebook.com/avisionx" class="social-round-icon fa-icon" title="">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href="https://twitter.com/_avisionx" class="social-round-icon fa-icon" title="">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="https://www.linkedin.com/in/avisionx/" class="social-round-icon fa-icon" title="">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</div>
<div class="col-xs-12 col-md-3">
<img src="./assets/images/team/chirag-jain.jpg" alt=""
class="reveal img-responsive reveal-content image-center">
<h3>Chirag Jain</h3>
<a href="https://www.facebook.com/chgjain" class="social-round-icon fa-icon" title="">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href="https://twitter.com/chiragj_" class="social-round-icon fa-icon" title="">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="https://www.linkedin.com/in/jnchirag" class="social-round-icon fa-icon" title="">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</div>
<div class="col-xs-12 col-md-3">
<img src="./assets/images/team/aniket.jpg" alt="Aniket Pradhan"
class="reveal img-responsive reveal-content image-center">
<h3>Aniket Pradhan</h3>
<a href="https://www.facebook.com/aniket.pradhan.311/" class="social-round-icon fa-icon" title="">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href="https://twitter.com/MeWjOr_" class="social-round-icon fa-icon" title="">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="https://www.linkedin.com/in/ap9989/" class="social-round-icon fa-icon" title="">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="container text-center">
<div class="row section-container-spacer">
<div class="col-xs-12 col-md-12">
<h2 class="text-center">Our Guides</h2>
<p>Here's a special mentions to the those without whom Reactonite wouldn't have been possible.
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-md-2"></div>
<div class="col-xs-12 col-md-4">
<img src="./assets/images/team/pankaj-jalote.jpg" alt=""
class="reveal img-responsive reveal-content image-center">
<h3>Pankaj Jalote</h3>
<p>Distinguished Professor @ IIITD</p>
<a href="https://www.facebook.com/pankaj.jalote" class="social-round-icon fa-icon" title="">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href="https://twitter.com/pjalote" class="social-round-icon fa-icon" title="">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="https://www.linkedin.com/in/pankaj-jalote-0924782/" class="social-round-icon fa-icon" title="">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</div>
<div class="col-xs-12 col-md-4">
<img src="./assets/images/team/saurabh-badhwar.jpg" alt=""
class="reveal img-responsive reveal-content image-center">
<h3>Saurabh Badhwar</h3>
<p>Senior Software Engineer @ LinkedIn</p>
<a href="https://www.facebook.com/saurabh.badhwar1" class="social-round-icon fa-icon" title="">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href="https://twitter.com/MYNET55" class="social-round-icon fa-icon" title="">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="https://www.linkedin.com/in/sbadhwar/" class="social-round-icon fa-icon" title="">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
<div class="section-container contact-container">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="section-container-spacer">
<h2 class="text-center">Get in touch</h2>
<p class="text-center">Feel free to reach us through this form, alternatively you can email any of the team
members above.</p>
</div>
<div class="card-container">
<div class="card card-shadow col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 reveal">
<form class="reveal-content" id="contactForm">
<div class="form-group">
<input type="email" class="form-control" id="emailForm" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="subjectForm" placeholder="Subject" required>
</div>
<div class="form-group">
<textarea class="form-control" id="messageForm" rows="3" placeholder="Enter your message"
required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send message</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer-container white-text-container">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h3>Reactonite</h3>
<div class="row">
<div class="col-xs-12 col-sm-7">
<p><small>Copyright © 2021 Reactonite | All rights reserved</small>
</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<script>
document.getElementById("contactForm").addEventListener('submit', function (event) {
event.preventDefault();
var email = document.getElementById("emailForm")
var subject = document.getElementById("subjectForm")
var message = document.getElementById("messageForm")
const formUrl =
"https://docs.google.com/forms/d/e/1FAIpQLSeKU3CNWCLBn6yN1nppdYm7ZUmuNDjb2BhQ1DVUf9fHv6pRYw/formResponse?entry.815887852=" +
email.value + "&entry.129154247=" + subject.value + "&entry.500869233=" + message.value
const xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', formUrl);
xmlHttp.send(null);
email.value = "";
subject.value = "";
message.value = "";
});
</script>
<script src="./main.js"></script>
</body>
</html>