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

[Xonos]

[B]ICBTALS[/B] ([I]I Can't Believe That's A Loading Screen![/I])
A dynamic loading screen for sever operators.

[QUOTE]So I threw this together for my server ([I]which I am not trying to advertise here considering I do not host my gmod server anymore[/I]). I am releasing this for those that might want to do something similar but not really know where to start in terms of writing out the html/php or aspx to achieve this. I originally posted this in General Chat last year and I updated the project yesterday to include more features. I moved here because it made more sense, since general chat isn't really about releasing content. If I am wrong, let me know and I'll destroy this post. :)[/QUOTE]

[B]Disclaimer[/B]: 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. :)
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

[U][B] Download [/B][/U]
[URL="http://xonos.net/gmod/Xonos_Gmod_Loading_Screen_V2.zip"]http://xonos.net/gmod/Xonos_Gmod_Loading_Screen_V2.zip[/URL]

[B][U]Demo / Preview[/U][/B]
[U]Random Wallpaper Background[/U]: [url]http://xonos.net/gmod/index.php[/url]
[U]Youtube Video Background[/U]: [url]http://xonos.net/gmod/index2.php[/url]

[B][U]What is ICBTALS?[/U][/B]
ICBTALS ([I]I Can't Believe That's A Loading Screen[/I]) 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 ([I]random interchangeable wallpaper or youtube video backgrounds[/I]). 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. [URL="http://lmgtfy.com/?q=How+do+I+host+a+website%3F"]Google is your friend[/URL].

[IMG]http://xonos.net/gmod/ss.png[/IMG]

[QUOTE]
[U][B]Update[/B][/U]: So, I completely forgot that I made this and that I added quite a bit more since its original realse so I figured I would release my latest version for those still trying to find a quick & easy solution for a clean loading screen. I have included 74 wallpapers which look really nice but you can use any youtube video if you prefer ([I]simply replace index.php with index2.php[/I]). Sometimes loud noise is annoying for your community when they have to download a ton of files so consider that. I personally leave the video off but it's up to you.

[B]Note[/B]: [U]You do not [I]have[/I] to have PHP for this to work but if you don't then the random wallpaper loader, video link and the workshop addon scroller will not work. To make the index.php file work without php, you'll need to change its extension to .html + hardcode all of the html & javascript after removing the <?php ?> tags + code.[/U][/QUOTE]
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

[U][B]What's Included:[/B][/U]
[B]1[/B].) 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.

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

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

[B]3[/B].) Loading Bar + Currently Downloading Information

[B]4[/B].) 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.

[B]5[/B].) Logo Source File ([I]It's not that cool but in case you want to see how I made it.[/I])
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

[U][B]What you will need:[/B][/U]
[B]1[/B].) A webserver (you can even use local webserver) that supports php.
[B]Note[/B]: 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.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

[B][U]How to make some changes:[/U][/B]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
[B]How To Install[/B]:
[B]1.[/B]) Upload the files via ftp to your webhost into any directory. Don't have a webhost?
[B]a.[/B] Don't have a webhost? Rent one or host the files yourself by [URL="https://www.apachefriends.org/index.html"]downloading and installing XAMPP[/URL] ([I]or IIS[/I]). ([URL="https://blog.udemy.com/xampp-tutorial/"]Setup Tutorial Here[/URL])
[B]2.[/B]) Now that the files are uploaded, you should now be able to view the loading screen like this: [url]http://www.yourdomain.com/folder/[/url]
[B]3.[/B]) If you do not know how to add your URL ([I]the link[/I]) to the sv_loadingurl param, go here: [url]https://wiki.garrysmod.com/page/Loading_URL[/url]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

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

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

[B]3[/B].) 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.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[B]How to add my own logo[/B]:
[B]1[/B].) Replace logo.png in the root directory with your own logo image. Transparent backgrounds look better because they overlay the background.
[B]2[/B].) 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>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
[B]How to add more wallpapers[/B]:
[B]1[/B].) Simply copy images into [U]/assets/wallpapers/[/U] and the[I] module.wallpapers.php[/I] file will automatically pick them up when randomly choosing a background. ;)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[bitches]

the gay porn rule is a nice touch

[Xonos]

Thanks. Lol

[Micros]

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"

[PolarB]

Nice work mate :goodjob:

[iSchmal]

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

[Potatofactory]

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

[Xonos]

[QUOTE=Potatofactory;49573461]A bit of "padding-bottom" on the information boxes would be a nice touch
Everything else looks really nice though.[/QUOTE]

[QUOTE=BigBadWilly;49572769]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"[/QUOTE]

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. :)

[Micros]

[QUOTE=Xonos;49573765]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. :)[/QUOTE]

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

[IMG]http://www.sacredservers.com/src/3tcl03.png[/IMG]

[makermod1]

Woah! Pretty!
Good job.

[fixator10]

There is links to addons authors workshop... But there is no feature in GMod to click links on loading screen... [URL="http://imgur.com/WMolK7Y"][IMG]http://i.imgur.com/WMolK7Y.png[/IMG][/URL]

[Xonos]

[QUOTE=fixator10;49589077]There is links to addons authors workshop... But there is no feature in GMod to click links on loading screen... [URL="http://imgur.com/WMolK7Y"][IMG]http://i.imgur.com/WMolK7Y.png[/IMG][/URL][/QUOTE]

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. :p

[BatyaMedic]

sweet

[thekiller123]

hot..

[DEAD_HUNTER]

Any idea why this error is displayed on my site?

[url]https://gyazo.com/1b3520d7ee64690d54520c80b4ee9f8a[/url]

[Xonos]

[QUOTE=DEAD_HUNTER;49631416]Any idea why this error is displayed on my site?

[url]https://gyazo.com/1b3520d7ee64690d54520c80b4ee9f8a[/url][/QUOTE]

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 [B]$html = file_get_html($url);[/B] [I]->[/I] $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;

[XxLMM13xXx]

This is a fantastic loading screen goodjob!

[1Day2Die]

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?

[whitestar]

Pretty loadingscreen, surely will use this!

[Darkrium]

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

[Salkio]

This is by far the best loading screen i have ever seen! And its FREE like WTF!
You are a god and thank you very much for providing this content!

[kaiegggy]

if anyone uses this loading screen please dont add music to it
please

[ConnorMcF]

[QUOTE=kaiegggy;51013107]if anyone uses [B]any[/B] loading screen please dont add music to it
please[/QUOTE]

ftfy

[Leo5gg]

Nice work!

[MrTHC]

Thank you. Very kind of you to release this for free. Good man.

[demonekectri]

[QUOTE=Xonos;49571452][B]ICBTALS[/B] ([I]I Can't Believe That's A Loading Screen![/I])
A dynamic loading screen for sever operators.

[B]Disclaimer[/B]: 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. :)
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

[U][B] Download [/B][/U]
[URL="http://xonos.net/gmod/Xonos_Gmod_Loading_Screen_V2.zip"]http://xonos.net/gmod/Xonos_Gmod_Loading_Screen_V2.zip[/URL]

[B][U]Demo / Preview[/U][/B]
[U]Random Wallpaper Background[/U]: [url]http://xonos.net/gmod/index.php[/url]
[U]Youtube Video Background[/U]: [url]http://xonos.net/gmod/index2.php[/url]

[B][U]What is ICBTALS?[/U][/B]
ICBTALS ([I]I Can't Believe That's A Loading Screen[/I]) 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 ([I]random interchangeable wallpaper or youtube video backgrounds[/I]). 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. [URL="http://lmgtfy.com/?q=How+do+I+host+a+website%3F"]Google is your friend[/URL].

[IMG]http://xonos.net/gmod/ss.png[/IMG]

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

[U][B]What's Included:[/B][/U]
[B]1[/B].) 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.

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

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

[B]3[/B].) Loading Bar + Currently Downloading Information

[B]4[/B].) 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.

[B]5[/B].) Logo Source File ([I]It's not that cool but in case you want to see how I made it.[/I])
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

[U][B]What you will need:[/B][/U]
[B]1[/B].) A webserver (you can even use local webserver) that supports php.
[B]Note[/B]: 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.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

[B][U]How to make some changes:[/U][/B]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
[B]How To Install[/B]:
[B]1.[/B]) Upload the files via ftp to your webhost into any directory. Don't have a webhost?
[B]a.[/B] Don't have a webhost? Rent one or host the files yourself by [URL="https://www.apachefriends.org/index.html"]downloading and installing XAMPP[/URL] ([I]or IIS[/I]). ([URL="https://blog.udemy.com/xampp-tutorial/"]Setup Tutorial Here[/URL])
[B]2.[/B]) Now that the files are uploaded, you should now be able to view the loading screen like this: [url]http://www.yourdomain.com/folder/[/url]
[B]3.[/B]) If you do not know how to add your URL ([I]the link[/I]) to the sv_loadingurl param, go here: [url]https://wiki.garrysmod.com/page/Loading_URL[/url]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

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

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

[B]3[/B].) 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.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[B]How to add my own logo[/B]:
[B]1[/B].) Replace logo.png in the root directory with your own logo image. Transparent backgrounds look better because they overlay the background.
[B]2[/B].) 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>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
[B]How to add more wallpapers[/B]:
[B]1[/B].) Simply copy images into [U]/assets/wallpapers/[/U] and the[I] module.wallpapers.php[/I] file will automatically pick them up when randomly choosing a background. ;)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

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

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

[I]Put in the youtube video id inbetween the single quotes.[/I]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[B]How to change the text and icons[/B]:
[B]1[/B].)You will need a text editor. Please don't use notepad because there is a much better free alternative. Get [URL="https://notepad-plus-plus.org/download"]Notepad++[/URL] if you don't already have another IDE or Textpad.
[B]2[/B].)Open Index.php and go to Line 146.
[U]-[/U] You will begin seeing all of the text typted out inbetween <> tags. Change the text there. The icons are located in the <i> tags.
It looks something like this:

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

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

[demonekectri]

ok I found my problème :D

[sayaloli1]

how can i make that only one wallpaper shows up? And i got an error Notice: Undefined variable: workshop in C:\xampp\htdocs\index.php on line 273

line 273 :

Notice: Undefined variable: workshop in C:\xampp\htdocs\index.php on line 274

[basontaylor]

newer issue don't know if this is still being viewed but

Warning: file_get_contents(): stream does not support seeking in /usr/www/ntfg/public/loadprp/simple_html_dom.php on line 75

Warning: file_get_contents(): Failed to seek to position -1 in the stream in /usr/www/ntfg/public/loadprp/simple_html_dom.php on line 75

Fatal error: Uncaught Error: Call to a member function find() on boolean in /usr/www/ntfg/public/loadprp/index.php:264 Stack trace: #0 {main} thrown in /usr/www/ntfg/public/loadprp/index.php on line 264