Changes To Website!

[Christian]

Hey all!

 

I've made additional changes to the website! I've implemented a background image with an overlay. We will be extending this system into a gallery/slideshow via JavaScript animation and such.
 

With that said, I've fixed some formatting issues with code blocks, private DMs, and more. I also reformatted the social media icons at the bottom of the website

I would say things are looking a lot better at this moment!

Also added a feedback forum!

[Christian]

Made more changes to the templates including the main page, profiles, and footer. Changed group colors and completed social media links at bottom of the page.

Next up is implementing a slideshow system with functionality to provide probability chances of getting images along with caching five images at a time for up to five minutes or so. Easter egg images (less likely to occur) can give achievements or XP in the future for users

[Christian]

Added basic rotation of backgrounds! I took the code from my old Browser.TF project.

 

          /**
          *	Name: custom_rotationbackground.js
          *	Author: Christian Deacon (Roy)
          *	Note: Rotates background images.
          *	Date: 7-13-16
          **/

          /* Global variables. */
          var g_bRotateInProgress = false;
          var g_iLastRotateNumber = 0;
          var g_bFirstRotateTime = true;

          /* Configurable variables. */
          var g_iFadeOutTime = 1.2;	/* Seconds. */
          var g_iFadeInTime = 1.2;	/* Seconds. */
          var g_iTimer = 30.0			/* Seconds. */
          
       	  const g_sImages = ["{resource="logos/hl2-bg-small.png" app="core" location="front"}", "{resource="backgrounds/thumb-1920-557525.jpg" app="core" location="front"}", "{resource="backgrounds/Skyrim-mods-Bear-Musician.jpg" app="core" location="front"}"];
          /**
          *	Name: rotateBackground();
          *	Description: Rotates the background.
          *	Sub-functions: callback_FirstFade(), callback_secondFade().
          **/
          function rotateBackground()
          {
              /* A rotation is in progress, set this variable to true! */
              g_bRotateInProgress = true;

              /* First, fade out the background. */
              $('#bgimg').fadeTo((g_bFirstRotateTime) ? 0 : g_iFadeOutTime * 1000, 0.0, callback_FirstFade);
          }

          /**
          *	Name: callback_FirstFade();
          *	Description: Called when the first FadeTo is complete.
          *	@return null
          **/
          function callback_FirstFade()
          {
              /* Get a random number between 0 and max range. */
              var i = Math.floor(Math.random() * g_sImages.length);

              /* Ensure the last number isn't the same as the new number. */
              var iAttempts = 0;

              while (g_iLastRotateNumber == i)
              {
                  i = Math.floor(Math.random() * g_sImages.length);

                  iAttempts++;

                  if (iAttempts > 5)
                      break;
              }

              /* Copy the global rotation number. */
              g_iLastRotateNumber = i;

              /* Set the background image. */
              $('#bgimg').css('background', "url(" + g_sImages[i] + ")  no-repeat center center fixed");
              $('#bgimg').css('background-size', "cover");

              /* Fade back in. */
              $('#bgimg').fadeTo(g_iFadeInTime * 1000, 1.0, callback_SecondFade);
          }

          /**
          *	Name: callback_SecondFade();
          *	Description: Called when the last FadeTo is complete.
          *	@return null
          **/
          function callback_SecondFade()
          {
              if (g_bFirstRotateTime)
              {
                  g_bFirstRotateTime = false;
              }

              /* Rotation is no longer in progress. Set the variable back to false. */
              g_bRotateInProgress = false;
          }

          /* Call the first rotate background. */
          $(document).ready(function()
          {
              if (!g_bRotateInProgress)
              {
                  rotateBackground();
              }
          });

          /* Set timer to rotate between background images. */
          setInterval(rotateBackground, g_iTimer * 1000);

* Will be fixing the formatting above shortly! I also need to implement a more in-depth system that supports caching within IPS 4, etc.