11/9/25

My Code Page

4:48 PM

Last Updated

JavaScript Image Rollovers Doomsday Bomb

Crude Oil Truck Calculator

You Tube Video

My Matrix Rain

Hit Counter.

Rollover Button Using Svg Images.

<html>

  <head>

    <title>JavaScript Image Rollovers</title>

  </head>

  <body>

    <a href="http://doomsdaybomb.com/" target="_blank" rel="noopener noreferrer">

  <img src="http://doomsdaybomb.com/Button01.svg"

       onmouseover="this.src='http://doomsdaybomb.com/Button02.svg'"

       onmouseout="this.src='http://doomsdaybomb.com/Button01.svg'"

       alt="Doomsday Bomb">

</a>

</body>

</html>

<script type="text/javascript" src="//counter.websiteout.net/js/2/15/314159265358979/0"></script>

<script>

(function() {

  // Create full-screen canvas

  const canvas = document.createElement('canvas');

  canvas.id = 'matrixCanvas';

  Object.assign(canvas.style, {

    position: 'fixed',

    top: 0,

    left: 0,

    width: '100vw',

    height: '100vh',

    zIndex: '-1',

    background: 'black',

    display: 'block'

  });

  document.body.appendChild(canvas);


  const ctx = canvas.getContext('2d');


  const fontSize = 20;

  const characters = '0123456789';

  const charArray = characters.split('');


  // 🎨 Your base colors

  const colors = ["#A521FF", "#203AFF", "#2AFD2E", "#FDF500", "#FF8E00", "#F41A2F"];


  // Convert hex to RGB object

  function hexToRgb(hex) {

    const bigint = parseInt(hex.slice(1), 16);

    return {

      r: (bigint >> 16) & 255,

      g: (bigint >> 8) & 255,

      b: bigint & 255

    };

  }


  // Convert RGB object to CSS color string

  function rgbToString(rgb) {

    return `rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`;

  }


  // Linear interpolation between two colors

  function lerpColor(c1, c2, t) {

    return {

      r: c1.r + (c2.r - c1.r) * t,

      g: c1.g + (c2.g - c1.g) * t,

      b: c1.b + (c2.b - c1.b) * t

    };

  }


  // Setup variables

  let columns, drops, currentColors, targetColors, colorProgress, speeds;


  function resizeCanvas() {

    canvas.width = window.innerWidth;

    canvas.height = window.innerHeight;

    columns = Math.floor(canvas.width / fontSize);


    drops = Array(columns).fill(1);

    currentColors = [];

    targetColors = [];

    colorProgress = [];

    speeds = Array.from({ length: columns }, () => 0.5 + Math.random() * 0.1);


    for (let i = 0; i < columns; i++) {

      const start = hexToRgb(colors[Math.floor(Math.random() * colors.length)]);

      const target = hexToRgb(colors[Math.floor(Math.random() * colors.length)]);

      currentColors.push(start);

      targetColors.push(target);

      colorProgress.push(Math.random()); // start mid-transition for variation

    }

  }


  window.addEventListener('resize', resizeCanvas);

  resizeCanvas();


  // --- FPS control ---

  let lastTime = 0;

  const fps = 10;

  const frameDuration = 1000 / fps;

  // --------------------


  function draw(timestamp) {

    if (timestamp - lastTime < frameDuration) {

      requestAnimationFrame(draw);

      return;

    }

    lastTime = timestamp;


    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';

    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.font = fontSize + 'px monospace';


    for (let i = 0; i < columns; i++) {

      const text = charArray[Math.floor(Math.random() * charArray.length)];


      // Update color interpolation

      colorProgress[i] += 0.02; // speed of morphing (lower = slower)

      if (colorProgress[i] >= 1) {

        colorProgress[i] = 0;

        currentColors[i] = targetColors[i];

        targetColors[i] = hexToRgb(colors[Math.floor(Math.random() * colors.length)]);

      }


      const lerped = lerpColor(currentColors[i], targetColors[i], colorProgress[i]);

      ctx.fillStyle = rgbToString(lerped);


      ctx.fillText(text, i * fontSize, drops[i] * fontSize);


      // Reset drop

      if (drops[i] * fontSize > canvas.height && Math.random() > 0.975)

        drops[i] = 0;


      drops[i] += speeds[i];

    }


    requestAnimationFrame(draw);

  }


  requestAnimationFrame(draw);

})();

</script>

<iframe

  width="480" height="270"

  src="https://www.youtube.com/embed/2X4l0ID5HiI?wmode=transparent"

  frameborder="0"

  allowfullscreen

  style="display:block; margin:0 auto; z-index:1;">

</iframe>

<div style="font-family:Arial;max-width:400px;background:#111;color:#0f0;padding:15px;border-radius:12px;">

  <h3>Oil Load Calculator</h3>


  <label for="apiGravity">API Gravity:</label><br>

  <input type="number" id="apiGravity" step="0.01" placeholder="Enter API gravity" style="width:100%;margin-bottom:10px;"><br>


  <label for="emptyWeight">Empty Weight (lbs):</label><br>

  <input type="number" id="emptyWeight" step="1" placeholder="Enter empty weight" style="width:100%;margin-bottom:15px;"><br>


  <button onclick="calculateValues()" style="width:100%;padding:6px;background:#0f0;color:#000;font-weight:bold;border:none;border-radius:6px;">Calculate</button>


  <hr style="margin:15px 0;border-color:#333;">


  <div><strong>Pounds Per Barrel:</strong> <span id="poundsPerBarrel">—</span></div>

  <div><strong>Barrels to Load:</strong> <span id="barrelsToLoad">—</span></div>

</div>


<script>

function calculateValues() {

  const apiGravity = parseFloat(document.getElementById('apiGravity').value);

  const emptyWeight = parseFloat(document.getElementById('emptyWeight').value);

  if (isNaN(apiGravity) || isNaN(emptyWeight)) {

    alert("Please enter both values.");

    return;

  }


  // Equation 1: PoundsPerBarrel = 49600.702 / (131.5 + APIgravity)

  const poundsPerBarrel = 49600.702 / (131.5 + apiGravity);


  // Equation 2: BarrelsToLoad = (80000 - EmptyWeight) / PoundsPerBarrel

  const barrelsToLoad = (80000 - emptyWeight) / poundsPerBarrel;


  document.getElementById('poundsPerBarrel').textContent = poundsPerBarrel.toFixed(3) + " lb/bbl";

  document.getElementById('barrelsToLoad').textContent = barrelsToLoad.toFixed(3) + " bbl";

}

</script>