Description:
while playing this game I discovered a bunch of cool methods and functions to create an awesome website,
then i decided to make it open source to allow other players to create awesome websites.
a tutorial for web development in a single html file, including javascript and css. this tutorial is for grey hack the game but could also be applied to real html web development
- The basics
- Cheat Sheet
- Examples
- Cascade Style Sheets
- Creating shops
- ID cheatsheet
- Load images
- Javascript
- Mouse whell scrolling
- Pop ups
- Custom Pages
HTML works in a simple way,
you have built-in "classes", some example ones are:
- Paragraph
- Headline
- Bold
Those are pretty straightforward,
To set up a starting point, every "object" is surrounded by angle brackets,
or <>, so for example:
<Start-paragraph>Hello!<end-paragraph>
Note: this isnt actual syntax, its just an example.
how you would actually proceed would be like so:
<p>Hello world!</p>Note: <p> is for paragraph
Now, you could see you start by doing <p>, to indicate you want a paragraph.
and </p>, notice the slash P, indicating to end the paragraph.
| Type | Description |
|---|---|
<p> |
Paragraph |
<b> |
Bold |
<br> |
Newline |
<h> |
Header |
<i> |
Italic |
<button> |
Button class |
<div> |
generic container |
Notice: a lot of real life html types don't work inside grey hack.
but search actual html on google and try things out, thats how you find out new things!.
Fun fact: <br> doesnt need closing, its basically like using \n in coding
just do <br> without </br> and it will go down a line without causing problems!
Alright, so cascade style sheets.
lets start simple, cascade styling sheets, or css, is "kinda" a programming language
since it is inside of html but people usually choose to add an additional file called style.css.
Now, its important to know some of css' features in real html don't apply to grey hack.
BUT, unlike html & javascript, css is probably the most similar to real life css, which is great news.
in a nutshell, css makes everything beautiful
remember those classes?, paragraphs & headlines?, then cascade is basically what Defines
those classes & types and how they look, it's syntax is like so:
h1 {
color: #ffffff;
}
.customclass {
color: #ffffff;
}NOTE: WHEN USING 'CSS' IN THE SAME FILE AS HTML, YOULL NEED TO SURROUND IT WITH A <style></stlye>
Now, you might ask, why does customclass have a dot behind it?
great question, customclass is an ACTUAL class, while h1 is more of a "Type"
so if you would want a header that is customclass you would do like so:
<h1 class="customclass">Cool White header</h1>now, this doesnt do anything because both do the same but you could make your life easier with cascade style sheets!
dont worry if you didnt understand it i will continue to talk about it, this is just an introduction
Note that at the end of a setting in css you should put a ";" to end the line, similar to csharp.
Most css settings are pretty straightforward, but i suggest using google to learn more advanced methods
Grey hack has built in IDs for shops, and more websites.
you might be familiar with the hackshop or shop or the bank website
all of these are easily summonable using their ID
<h>My Shop</h>
<p>Buy anything you want, feel free to look into our stock!</p>
<button class="btn btn-primary" id="InformaticaShop">Shop</button>Note: keep in mind the uppercase letters
So, InformaticaShop is calling for the normal shop,
cool thing is, you can actually run this 3 liner and have a shop up and running
not very good looking, but a shop, so you may ask, where are the files, since you dont see the files in the shop.
quick tutorial time!
- now find the
/Public/htdocs/downloads/folder. - put the downloadable files there - text files, binaries, logs, everything.
- Find the
/server/httpd.conffile, now a sample description is there, with the classic JSON format, pretty intuitive. - set the name, price and description to your likings accordingly to the httpd.conf.
- BOOM you have a full shop with an HTML page.
easy peasy
now all we have to do is decorate the website and we are good to go!
Remember, IDs are set after the type like so:
<type class="classname" id="ID">
| ID | Description |
|---|---|
| InformaticaShop | The classic green shop |
| RegisterBank | Register Page to a bank |
| LoginBank | Bank login page |
| ISPConfig | Internet service provider page |
| CreateCurrency | coin creation page |
| FindDeviceManual | Device manual finding page |
| JobsPolice | Police jobs page |
| Report | Police report suspect page |
| HackShopTools | Hackshop downloads page |
| HackShopExploits | Hackshop exploits page |
| Jobs | Hackshop jobs page |
| CTF | Hackshop CTF page |
Note: IDs should only belong to one object, it will be cleaner that way.
lets start off, by saying images are loadable by default in grey hack, but only a few. you can see how to load images in Default Templates
there is a custom way to upload your own images and that i wont cover because i am not that good at it and its messy
but simple image loading
<img src="bank.png" width="120" height="120" align="center">yep, thats it, only src can equal whatever you want, go hunt the web for available pictures, and you can also see them in Default Templates
where almost every page has its own image
okay, so javascript is VERY similar to css, in terms of how it works within the confines of grey hack.
lets start by saying that still, the javascript & html & css are in the same file,
javascript, needs a ";" aswell on most of the line ends.
also needs to be surrounded by a <script></script>.
simple variable managment include:
var _str = "Javascript";
var _num = 99;var & const and let can both be used for string & integers.
i 99% use var since i dont use variable that much but when i do, i use var
the differences are minor between the three, but i encourage you to play with them and see what fits you best.
functions are one of the best things in grey hack's web development.
all because of: onclick()
this allows you to create basically everything, your own pages, retractable articles,
one of the classiest examples of all the principles learned here is the website:
which i designed their webpage.
Now lets get to work on functions!
<button class="accordion" onclick="togglePanel('panel1')">Coolest thing ever</button>
<div id="panel1" class="panel">
<p>This is toggleable and you can change to your liking, enjoy!</p>
</div>
<script>
function togglePanel(panelId) {
var panel = document.getElementById(panelId);
if(panel.style.display == "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
</script>WE HAVE A WORKING TOGGLEABLE PARAGRAPH!
straight taken out of the gbi website, but wait, why does this look so funky in grey hack?
easy answer: cascade style sheets, we didnt include the css in this code snippet, which causes all of the objects to look like the default look
if you would have added a simple snippet like this above:
<style>
.accordion {
background-color: #1a2f4f;
color: #e3e3e3;
cursor: pointer;
padding: 12px;
width: 100%;
text-align: left;
border: none;
font-size: 15px;
margin-top: 10px;
}
.accordion:hover{
background-color: #2b4d77;
}
.panel {
background-color: #102033;
display: none;
padding: 10px;
border-left: 3px solid #2b4d77;
border-right: 3px solid #2b4d77;
border-bottom: 3px solid #2b4d77;
}
</style>look familiar? cause it is!! its literally the GBI code!
Notice that .accordion has a dot behind it! its a class!!
and in the code we have <button class="accordion"..., we set the class to accordion! and we put a dot behind it!
now play with this by youself, check out the source files i put in Example Sources
lets get started!
first of all, i left a template project with scrolling here -> Source code
check out Examples to see all templates i left in the project!.
now for coding!
alright so lets start by logic, we want the javascript to listen to mouse wheel scrolling and then act accordingly,
so lets start, by writing our <script>
and setting our scroll speed, basically how fast we travel using the mouse wheel,
an ideal speed would be 0.1, but since its grey hack we need people to appreciate the scroll wheel, and the page is tiny so we need it to not jump.
the best outcome ive seen is 0.05, do you remember how to set variable?
<script>
var scrollSpeedFactor = 0.05;
</script>thats right!, we use var, lets pace things up.
so we want to get where to scroll, simple
var scrollDiv = document.getElementById("scrollArea");
this line sets a variable, this is exactly the reason why you should only use ID for 1 object,
get element, and scrollArea is where you put all the content like so:
<div id="scrollArea"> // set where to scroll
<div class="content">
<h>Title</h>
<p>Line 1</p>
<p>Line 2</p><br>
</div>
</div>so, we have scrollArea set up as the ID for the container
scrollDiv will be set to this element. now lets listen for scrolling,
we call for scrollDiv the variable that we just set, and we add listener.
scrollDiv.addEventListener("wheel", handleScroll);HOLD UP! not so fast, lets go one by one, so scrollDiv.addEventListener, is pretty straightforward, now "wheel", is simply the mouse wheel
but what is handleScroll? answer: nothing.
its a function which we have yet to create, so lets do!
function handleScroll(event) {
// nothing yet
}
scrollDiv.addEventListener("wheel", handleScroll);alright, looking promising, lets continue,
time for some math - if you dont understand, thats 100% alright, its complicated.
however, i will add comments.
<script>
var scrollDiv = document.getElementById("scrollArea");
var scrollSpeedFactor = 0.05;
function handleScroll(event) {
var delta = event.deltaY; // built in function
var scrollAmount = delta * scrollSpeedFactor; // we set scrollspeedfactor before.
var newScrollTop = scrollDiv.scrollTop + scrollAmount; // current scroll position
var maxScrollTop = 440; // how down you can scroll, adjustable
if (newScrollTop < 0) newScrollTop = 0; // restrict from going too much up
if (maxScrollTop > 0 && newScrollTop > maxScrollTop) newScrollTop = maxScrollTop; // restrict from going too much down
scrollDiv.scrollTop = newScrollTop; // scroll position
}
scrollDiv.addEventListener("wheel", handleScroll); // lastly, listen and call handleScroll
</script>a-w-e-s-o-m-e.
so a few things, first of all, maxScrollTop is adjustable, this means youll need to adjust it to the needs of your page, second
you should probably use overflow: hidden; on body like so:
html, body {
overflow: hidden;
}that way the normal scroll bar wont appear and cause problems.
Thats about it for mouse wheel scrolling! enjoy this feature!
a cool feature, pop ups, can be seen in the gbi website, in the trusted section,
this feature also works with javascript, so lets get to coding this amazing feature!
<style>
.popup-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: none;
z-index: 1000;
}
.popup-box {
position: fixed;
width: 500px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -250px; /* half width */
margin-top: -100px; /* half height */
background-color: #1a2f4f;
border: 2px solid #2b4d77;
color: #e3e3e3;
padding: 20px;
box-sizing: border-box;
border-radius: 0;
text-align: center;
}
.link {
font-size: 14px;
color: #00bde3;
background: transparent;
border: none;
}
.link:hover{
cursor: pointer;
color: #0088da;
}
</style>
<button class="link" onclick="openPopup('popupOverlay')">link name</button><br>
<div id="popupOverlay" class="popup-overlay">
<div class="popup-box">
<h2>Header</h2>
<p>Cool paragraph and text goes into the pop up, pretty simple, dont forget the css</p>
<button class="btn" onclick="closePopup('popupOverlay')">Close</button>
</div>
</div>
</div>
<script>
function openPopup(popupId) {
var overlay = document.getElementById(popupId);
if(overlay){
overlay.style.display = "block";
}
}
function closePopup(popupId) {
var overlay = document.getElementById(popupId);
if(overlay){
overlay.style.display = "none";
}
}
</script>Youll notice, the close button is not an "X" because it gives a really messy hitbox and it doesnt matter that much,
that being said, lets explore the code!
first off, the css here is crucial, since it defines how to popup looks and the link itself look and makes it so the popup is centered.
then, the html, is just a button to link to a hidden divider, named "popupOverlay", if youd want another popup youd just need another button to link to another ID
and then create that ID e.g. "popupOverlay1" and so forth,
then, the javascript simply opens and closes the popup by it's ID.
<style>
.page {
display: none;
padding: 20px;
width: 100vw;
height: 100vh;
}
.page.active {
display: block;
}
</style>
<button onclick="showPage('Page1')">Page One</button>
<button onclick="showPage('Page2')">Page Two</button>
<div class="page active" id="Page1">
<h2>Page One for the win</h2>
<p>some crappy paragraph no one cares page one is best shit in town</p>
</div>
<div class="page" id="Page2">
<h2>Im on team page two</h2>
<p>whoever thinks page 1 is better should be arrested for 1% brain usage!!</p>
</div>
<script>
function showPage(pageId) {
var pages = document.getElementsByClassName("page");
for (var i = 0; i < pages.length; i++) {
pages[i].className = "page";
}
var activePage = document.getElementById(pageId);
if (activePage) {
activePage.className = "page active";
}
}
</script>again, pretty intuitive, but notice page1 is marked as class active,
actually, is page active notice the space, this means that it belongs to two classes, page and active
active is simply the main page, the one that loads in the beginning.
this is very similar to the popup, you get an object by ID and show it,