ICBTIALS (I Can't Believe That's A Loading Screen!) - Dynamic Loading Screen (PHP/HTML)

ICBTALS (I Can’t Believe That’s A Loading Screen!)
A dynamic loading screen for sever operators.

Disclaimer: The code isn’t beautiful but I also didn’t write this expecting to make a huge content management system out of it. Please post here any changes that you’d like to see or just give me a shout-out and let me know if you liked it or hated it (and why). That’s all I really ask for. :slight_smile:

** Download **

Demo / Preview
Random Wallpaper Background: http://xonos.net/gmod/index.php
Youtube Video Background: http://xonos.net/gmod/index2.php

What is ICBTALS?
ICBTALS (I Can’t Believe That’s A Loading Screen) is a dynamic web-based server loading screen that utilizes php as well as the built-in gmod javascript functions to display a clean, responsive, informational and neatly formatted loading screen that’s visible to players joining your server. It comes with bootstrap for simplicity, font-awesome, animate.css and two index.php versions that effect the background (random interchangeable wallpaper or youtube video backgrounds). For more information, read below. The setup process is very simple but it is not automated. You will need to have some knowledge of how to host files through a webhost. Google is your friend.

What’s Included:
1.) Two index files that you can swap out. One plays a youtube video in the background and another picks random wallpapers from the wallpaper folder. You can place as many wallpapers that you want for the random wallpaper feature.

3.) 74 HD Wallpapers which are randomly selected every time you refresh the page (or a player joins).

2.) Nicely formatted server information + Updates section that you can modify and even hook into your forums (if you know how - it isn’t hard for php devs).

3.) Loading Bar + Currently Downloading Information

4.) Workshop Items Scrolling Addon List (Requires you to change 1 line of code to match the workshop collection id that your server uses.) Displays addon thumbnail and name.

5.) Logo Source File (It’s not that cool but in case you want to see how I made it.)

What you will need:
1.) A webserver (you can even use local webserver) that supports php.
Note: If you don’t have php but know html, simply remove all the <?php ?> tags and replace the 3 lines of html parameters that are echoed through php.

How to make some changes:

How To Install:
1.) Upload the files via ftp to your webhost into any directory. Don’t have a webhost?
a. Don’t have a webhost? Rent one or host the files yourself by downloading and installing XAMPP (or IIS). (Setup Tutorial Here)
2.) Now that the files are uploaded, you should now be able to view the loading screen like this: http://www.yourdomain.com/folder/
3.) If you do not know how to add your URL (the link) to the sv_loadingurl param, go here: https://wiki.garrysmod.com/page/Loading_URL

How To Display Scrolling Workshop Collection Addons:
1.) Open index.php with your preferred text editor.
2.) On Line 264, you will find the following variable declaration:

$url = 'http://steamcommunity.com/sharedfiles/filedetails/?&format=json&id=124102726';

3.) Change the id= at the end to reflect the id of your workshop collection. You can find this by going to the workshop in your normal web browser and looking at the link.

How to add my own logo:
1.) Replace logo.png in the root directory with your own logo image. Transparent backgrounds look better because they overlay the background.
2.) You may also alternatively modify the index.php file on line 143.

<img src="your_logo.jpg" style="max-width:30%;"/></br>

  • or -

<img src="http://i.imgur.com/your_file_link.gif" style="max-width:30%;"/></br>

How to add more wallpapers:
1.) Simply copy images into /assets/wallpapers/ and the* module.wallpapers.php* file will automatically pick them up when randomly choosing a background. :wink:

How to change the video that is played:
1.)Edit the index file on line: 137

 <?php $videolink = 'Jz-7Di2s4yY'; ?> 

Put in the youtube video id inbetween the single quotes.

How to change the text and icons:
1.)You will need a text editor. Please don’t use notepad because there is a much better free alternative. Get Notepad++ if you don’t already have another IDE or Textpad.
2.)Open Index.php and go to Line 146.

  • You will begin seeing all of the text typted out inbetween <> tags. Change the text there. The icons are located in the tags.
    It looks something like this:

 <i class="fa **fa-legal**" style="color:#D31E1B;"></i>

3.)The fa-legal part is what you will want to change. Go to this link to get a full list of supported icons that you can use: https://fortawesome.github.io/Font-Awesome/icons/

** Additional Notes: **

the gay porn rule is a nice touch

Thanks. Lol

God damn, This looks better than any loading screens I’ve seen these days

[editline]20th January 2016[/editline]

What I do dislike is how there is no extra spacing between the wording and the bottom of the box for “How to become an admin”

Nice work mate :goodjob:

“Man I have this great web icon font collection but they don’t really fit Garry’s Mod at all… ah fuck it.”

A bit of “padding-bottom” on the information boxes would be a nice touch
Everything else looks really nice though.

Both of you are absolutely right. What I think will look best is if I go ahead and combine the “Server Operators” box and the “Server Admin” box into one. Then I’ll shift down the loading bar to the bottom and add a margin to the bottom of each box. I’ll provide another index for each that offer some style variants as well. I’ll have this done in a couple hours when I get home from work. :slight_smile:

They can both be seperate and look great… It’s just there is no spacing and it’s annoying to see

Woah! Pretty!
Good job.

There is links to addons authors workshop… But there is no feature in GMod to click links on loading screen… http://i.imgur.com/WMolK7Y.png

Yeah… It was just meant to be a flashy way to show the addons that are installed. I am working on a major renovation to this as I have realized how clunky it really is. I’m also thinking of providing a way for people without hosting to use my webhost considering I have unlimited bandwidth and storage space. So, i’ll build a front-end for people to register and create their own link with a front-end editor so that they don’t have to modify the original scripts. I’ll still offer the original files of course if anyone cares. I’ll have this done in the next week or so.

And don’t worry, I’ll never not host it. I’ve had this web server since 2003. :stuck_out_tongue:



Any idea why this error is displayed on my site?

Ok I see why and I will release an update for this. Open “index.php” and go to this part of the code:

		include 'simple_html_dom.php';
		$url = 'http://steamcommunity.com/sharedfiles/filedetails/?&format=json&id=124102726';
		$html = file_get_html($url);

Add this below $html = file_get_html($url); -> $workshop = NULL;

It should look like this:

		include 'simple_html_dom.php';
		$url = 'http://steamcommunity.com/sharedfiles/filedetails/?&format=json&id=124102726';
		$html = file_get_html($url);
		$workshop = NULL;

This is a fantastic loading screen goodjob!

Hmm it won’t show the numbers of downloads left and total downloads. Disabling one function and enabling the other 2 lines below however fixes the problem, but some error message about a missing function is showing up. Any fixes?

Pretty loadingscreen, surely will use this!

Never mind this post. I was just dumb thinking that google chrome could load all of the info raw without using a host.