-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
251 lines (245 loc) · 12.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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-159158579-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-159158579-3');
</script>
<style>
html,
body,
div {
padding: 0;
margin: 0;
}
i {
font-size: 4em !important;
margin-top: 10%;
color: darkgrey;
}
h1 {
padding-top: 30px;
color: black;
}
h2 {
color: teal;
}
.intro {
min-height: 0vh;
}
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
</style>
<link rel="apple-touch-icon" href="favicon.png">
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<meta charset="utf-8" />
<meta http-equiv="content-language" content="en">
<meta name="description" content="Welcome to HD-Projects this is a site to show all of our open source programming projects. We have made several games and helpful tools.">
<meta name="keywords" content="hd projects, open source, github, hd, open source, free, HD, projects, ">
<link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@500;600&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HD Open Source Projects</title>
<link rel="shortcut icon" href="https://hdprojects.dev/favicon.ico" type="image/x-icon" />
<script src="https://hdprojects.dev/dark.js" type="text/javascript"></script>
<meta name="author" content="HD Projects">
</head>
<body onload="getDarkMode()">
<noscript>
<h1 class="no-script">Please allow scripts it will make everything function better on our site</h1>
</noscript>
<div w3-include-html="nav.html"></div>
<script src="w3.js" type="text/javascript"></script>
<script>
w3.includeHTML();
</script>
<div class="parallax">
<div class="caption">
<span class="border"><button onclick="openNav()" title="Open Navigation">☰</button>Home | HD Projects<span class="hide-small hide-medium">Open Source Projects</span></span>
</div>
</div>
<div class="container-fluid text-center">
<div class="row">
<div class="col-sm-3 fourth">
<i class="fa fa-user hide-small hide-medium"></i>
<h2 data-max="450">+ Contributions</h2>
</div>
<div class="col-sm-3 fourth">
<i class="fa fa-code hide-small hide-medium"></i>
<h2 data-max="15000">+ Lines of code</h2>
</div>
<div class="col-sm-3 fourth">
<i class="fa fa-lock hide-small hide-medium"></i>
<h2 data-max="15">+ Projects</h2>
</div>
<div class="col-sm-3 fourth">
<i class="fa fa-briefcase hide-small hide-medium"></i>
<h2 data-max="4" id="test"> Developers</h2>
</div>
</div>
<hr>
<div class="container">
<h2>Our Story</h2>
<p>We are two students that have been working hard on all of our projects and we would like to share our projects with you. All of our projects you are free to use in any way you would like and if you find any errors or bug feel free to <a href="/contact/">contact us</a>. This site serves as a place to find infrmation about all our open source content.</p>
</div>
<hr>
<div class="container">
<div class="row">
<div class="column-66">
<p><span style="font-size:36px">Open Public Secure</span> These are the three tenats of open source, open secure and public. Open source code is public open and secure because it is avaliable for anyone to test download or modify. If you want to see our code use the button below to view all our GitHub pages.</p>
<button class="button">
<a href="https://hdprojects.dev/github/">
Veiw And Download Our Code
</a>
</button>
</div>
</div>
</div>
<hr>
<p> Our four latest projects </p>
<div class="row">
<div class="column">
<p><a href="https://github.com/HD-Projects/github-discord-bot">
Discord Bot</a> A discord bot that uses the github API to return info about users
</p>
<img src="githubbot.jpg" alt="discord bot">
</div>
<div class="column">
<p><a href="https://github.com/HD-Projects/Kerbal-Kontroller">
Kerbal Kontroller</a> Docs + Source code for building your own custom KSP controller
</p>
<img src="kerbalkontroller.png" alt="Kerbal Kontroller">
</div>
<div class="column">
<p><a href="https://github.com/HD-Projects/joke-generator">
Joke maker chrome extension</a>
A chrome extension that generates silly jokes
</p>
<img src="icon128.png" alt="Joke Maker">
</div>
<div class="column">
<p><a href="https://github.com/HD-Projects/joke-generator">
HD Projects API</a>
An API to return our latest blog posts, this will be integrated into our app where you can keep up to date with the latest HD Projects news
</p>
<img src="blog.jpg" alt="HD projects API">
</div>
</div>
<div class="container-fluid">
<div class="half boxes">
<p> We maintain a blog that we update often with the latest news. Look at the blog page if you want to know of our latest projects.</p>
<a style="color: blue; text-decoration: underline;" href="https://hdprojects.dev/progress/">
-- See what We Are Up To
</a>
</div>
<div class="half boxes">
<p> We have been working hard and to keep open source projects alive but we need donations pay for server power, domain hosting, hardware, and sotware to create the open source projects. </p>
<a style="color: blue; text-decoration: underline;" href="https://hdprojects.dev/donate/">
-- Send A Much Needed donatation
</a>
</div>
<div class="half boxes">
<p> Check out our latest projects! Currently we are working on a bunch of KSP mods and a really cool discord bot that integrates with the github API to fetch info about users. </p>
<a style="color: blue; text-decoration: underline;" href="https://github.com/HD-Projects">
-- Check out our latest cool projects
</a>
</div>
</div>
<hr>
<div class="w3-center">
<h1> Inspect our code, join the revolution of open source </h1>
<button class="button">
<a href="https://hdprojects.dev/github/">
View And Download Our Code
</a>
</button>
</div>
<hr>
<div id="signUp">
<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://google.us19.list-manage.com/subscribe/post?u=76298ffc3ad8c21c11068c55e&id=008ca1756c" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe To Our Email-List</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" placeholder="Email Adress" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_76298ffc3ad8c21c11068c55e_008ca1756c" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
</div>
</div>
<div w3-include-html="footer.html"></div>
<script>
w3.includeHTML();
</script>
<script>
function inVisible(element) {
//Checking if the element is
//visible in the viewport
var WindowTop = $(window).scrollTop();
var WindowBottom = WindowTop + $(window).height();
var ElementTop = element.offset().top;
var ElementBottom = ElementTop + element.height();
//animating the element if it is
//visible in the viewport
if ((ElementBottom <= WindowBottom) && ElementTop >= WindowTop)
animate(element);
}
function animate(element) {
//Animating the element if not animated before
if (!element.hasClass('ms-animated')) {
var maxval = element.data('max');
var html = element.html();
element.addClass("ms-animated");
$({
countNum: element.html()
}).animate({
countNum: maxval
}, {
//duration 5 seconds
duration: 1800,
easing: 'linear',
step: function() {
element.html(Math.floor(this.countNum) + html);
},
complete: function() {
element.html(this.countNum + html);
}
});
}
}
//When the document is ready
$(function() {
//This is triggered when the
//user scrolls the page
$(window).scroll(function() {
//Checking if each items to animate are
//visible in the viewport
$("h2[data-max]").each(function() {
inVisible($(this));
});
})
});
</script>
</body>
</html>