WordPress Code Playground

/* Full screen styling */
body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4; /* Light gray background */
    overflow: hidden;
    position: relative;
}

/* Particles Container */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1; /* Behind the logo */
}

/* Kali Linux Logo Styling */
.kali-logo img {
    width: 200px; /* Adjust logo size */
    animation: fadeInRotate 3s ease-in-out forwards, pulse 2s ease-in-out infinite 3s;
    filter: drop-shadow(0 0 15px #00bfff); /* Blue glow effect */
    transition: transform 0.5s ease-in-out; /* Smooth transition for hover */
    position: relative;
    z-index: 2; /* Above particles */
}

/* Keyframes for the Spin Animation */
@keyframes fadeInRotate {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 0.7;
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

/* Keyframes for the Pulse Animation */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Hover Interaction */
.kali-logo img:hover {
    transform: scale(1.2) rotate(10deg);
}

// Initialize particles.js
particlesJS("particles-js", {
    particles: {
        number: { value: 80, density: { enable: true, value_area: 800 } },
        color: { value: "#00bfff" }, // Particle color (blue)
        shape: {
            type: "circle",
            stroke: { width: 0, color: "#000" },
        },
        opacity: {
            value: 0.5,
            random: false,
            anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
        },
        size: {
            value: 3,
            random: true,
            anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
        },
        line_linked: {
            enable: true,
            distance: 150,
            color: "#00bfff",
            opacity: 0.4,
            width: 1
        },
        move: {
            enable: true,
            speed: 3,
            direction: "none",
            random: false,
            straight: false,
            out_mode: "out",
            bounce: false,
            attract: { enable: false, rotateX: 600, rotateY: 1200 }
        }
    },
    interactivity: {
        detect_on: "canvas",
        events: {
            onhover: { enable: true, mode: "repulse" },
            onclick: { enable: true, mode: "push" },
            resize: true
        },
        modes: {
            grab: { distance: 400, line_linked: { opacity: 1 } },
            bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },
            repulse: { distance: 100, duration: 0.4 },
            push: { particles_nb: 4 },
            remove: { particles_nb: 2 }
        }
    },
    retina_detect: true
});

/*--------------------
Vars
--------------------*/
const deg = (a) => Math.PI / 180 * a
const rand = (v1, v2) => Math.floor(v1 + Math.random() * (v2 - v1))
const opt = {
  particles: window.width / 500 ? 1000 : 500,
  noiseScale: 0.009,
  angle: Math.PI / 180 * -90,
  h1: rand(0, 360),
  h2: rand(0, 360),
  s1: rand(20, 90),
  s2: rand(20, 90),
  l1: rand(30, 80),
  l2: rand(30, 80),
  strokeWeight: 1.2,
  tail: 82,
}
const Particles = []
let time = 0
document.body.addEventListener('click', () => {
  opt.h1 = rand(0, 360)
  opt.h2 = rand(0, 360)
  opt.s1 = rand(20, 90)
  opt.s2 = rand(20, 90)
  opt.l1 = rand(30, 80)
  opt.l2 = rand(30, 80)
  opt.angle += deg(random(60, 60)) * (Math.random() > .5 ? 1 : -1)
  
  for (let p of Particles) {
    p.randomize()
  }
})

/*--------------------
Particle
--------------------*/
class Particle {
  constructor(x, y) {
    this.x = x
    this.y = y
    this.lx = x
    this.ly = y
    this.vx = 0
    this.vy = 0
    this.ax = 0
    this.ay = 0
    this.hueSemen = Math.random()
    this.hue = this.hueSemen > .5 ? 20 + opt.h1 : 20 + opt.h2
    this.sat = this.hueSemen > .5 ? opt.s1 : opt.s2
    this.light = this.hueSemen > .5 ? opt.l1 : opt.l2
    this.maxSpeed = this.hueSemen > .5 ? 3 : 2
  }
  
  randomize() {
    this.hueSemen = Math.random()
    this.hue = this.hueSemen > .5 ? 20 + opt.h1 : 20 + opt.h2
    this.sat = this.hueSemen > .5 ? opt.s1 : opt.s2
    this.light = this.hueSemen > .5 ? opt.l1 : opt.l2
    this.maxSpeed = this.hueSemen > .5 ? 3 : 2
  }
  
  update() {
    this.follow()
    
    this.vx += this.ax
    this.vy += this.ay
    
    var p = Math.sqrt(this.vx * this.vx + this.vy * this.vy)
    var a = Math.atan2(this.vy, this.vx)
    var m = Math.min(this.maxSpeed, p)
    this.vx = Math.cos(a) * m
    this.vy = Math.sin(a) * m
    
    this.x += this.vx
    this.y += this.vy
    this.ax = 0
    this.ay = 0
    
    this.edges()
  }
  
  follow() {
    let angle = (noise(this.x * opt.noiseScale, this.y * opt.noiseScale, time * opt.noiseScale)) * Math.PI * 0.5 + opt.angle
    
    this.ax += Math.cos(angle)
    this.ay += Math.sin(angle)
    
  }
  
  updatePrev() {
    this.lx = this.x
    this.ly = this.y
  }
  
  edges() {
    if (this.x < 0) {
      this.x = width
      this.updatePrev()
    }
    if (this.x > width) {
      this.x = 0
      this.updatePrev()
    }
    if (this.y < 0) {
      this.y = height
      this.updatePrev()
    }
    if (this.y > height) {
      this.y = 0
      this.updatePrev()
    }
  }
  
  render () {
    stroke(`hsla(${this.hue}, ${this.sat}%, ${this.light}%, .5)`)
    line(this.x, this.y, this.lx, this.ly)
    this.updatePrev()
  }
}

/*--------------------
Setup
--------------------*/
function setup() {
  createCanvas(windowWidth, windowHeight)
  for (let i = 0; i < opt.particles; i++) {
    Particles.push(new Particle(Math.random() * width, Math.random() * height))
  }
  strokeWeight(opt.strokeWeight)
}

/*--------------------
Draw
--------------------*/
function draw() {
  time++
  background(0, 100 - opt.tail)
  
  for (let p of Particles) {
    p.update()
    p.render()
  }
}

/*--------------------
Resize
--------------------*/
function windowResized() {
  resizeCanvas(windowWidth, windowHeight)
}

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var bgg = document.getElementById("bg_glow");
w = ctx.canvas.width = window.innerWidth;
h = ctx.canvas.height = window.innerHeight;

window.onresize = function() {
  w = ctx.canvas.width = window.innerWidth;
  h = ctx.canvas.height = window.innerHeight;
  maxHeight = h*.9
  minHeight = h*.5;
  dots = [];
  pushDots();
  ctx.globalCompositeOperation = "lighter";
};

document.getElementById("overlay").onclick = function(){
  hue = Math.random()*360;
  bgg.style.background = "radial-gradient(ellipse at center, hsla("+hue+",50%,50%,.8) 0%,rgba(0,0,0,0) 100%)";
  dots = [];
  pushDots();
}

dots=[{}];
mx = 0; my = 0;
md = 100;
maxWidth = 15;
minWidth = 2;
maxHeight = h*.9
minHeight = h*.5;
maxSpeed = 35;
minSpeed = 6;
hue = 230;
hueDif = 50; // Hue +/-
glow = 10; // Set to 0 for better performance
ctx.globalCompositeOperation = "lighter";

bgg.style.background = "radial-gradient(ellipse at center, hsla("+hue+",50%,50%,.8) 0%,rgba(0,0,0,0) 100%)";
render();

/* Full screen body reset */
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(to bottom, #1a2a6c, #bde1ff); /* Gradient Background */
    position: relative;
}

/* Subtle glowing background */
body::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200vw;
    height: 200vh;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent);
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* Bubble Container */
.bubbles {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Individual bubble styling */
.bubbles span {
    position: absolute;
    bottom: -50px; /* Start off-screen */
    background: rgba(255, 255, 255, 0.4); /* Soft transparent white */
    border-radius: 50%; /* Circular shape */
    animation: bubble-animation linear infinite;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px var(--bubble-color, #00f); /* Glowing effect */
    animation-delay: calc(var(--i) * -0.2s); /* Staggered animation */
}

/* Randomized glow color for bubbles */
.bubbles span:nth-child(odd) {
    --bubble-color: #ff69b4; /* Pink glow */
}

.bubbles span:nth-child(even) {
    --bubble-color: #00f; /* Blue glow */
}

/* Bubble Animation */
@keyframes bubble-animation {
    0% {
        transform: translate(0, 0);
        opacity: 0.3; /* Start faint */
    }
    50% {
        transform: translate(calc(-30px + var(--i) * 0.5px), -50vh); /* Slight horizontal drift */
        opacity: 0.8;
    }
    100% {
        transform: translate(calc(30px - var(--i) * 0.5px), -100vh); /* Upwards with horizontal drift */
        opacity: 0;
    }
}

/*
* File Name / glitteringSea.js
* Created Date / Aug 14, 2020
* Aurhor / Toshiya Marukubo
* Twitter / https://twitter.com/toshiyamarukubo
*/

(function () {
  'use strict';
  window.addEventListener('load', function () {
    var canvas = document.getElementById('canvas');

if (!canvas || !canvas.getContext) {
      return false;
    }

/********************
      Random Number
    ********************/

function rand(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }
    
    /********************
      Var
    ********************/

var ctx = canvas.getContext('2d');
    var X = canvas.width = window.innerWidth;
    var Y = canvas.height = window.innerHeight;
    var mouseX = null;
    var mouseY = null;
    var shapeNum = 300;
    var shapes = [];
    var style = {
      black: 'black',
      white: 'white',
      lineWidth: 4,
    };

/********************
      Animation
    ********************/

window.requestAnimationFrame =
      window.requestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function(cb) {
        setTimeout(cb, 17);
      };

/********************
      Shape
    ********************/
     
    function Shape(ctx, x, y) {
      this.ctx = ctx;
      this.init(x, y);
    }
    
    Shape.prototype.init = function(x, y) {
      this.x = x;
      this.y = y;
      this.r = rand(10, 25);
      this.ga = Math.random() * Math.random() * Math.random() * Math.random();
      this.v = {
        x: Math.random(),
        y: -1
      };
      this.l = rand(0, 20);
      this.sl = this.l;
    };

Shape.prototype.updateParams = function() {
      var ratio = this.l / this.sl;
      //this.r *= ratio;
      this.l -= 1;
      if (this.l < 0) {
        this.init(X * (Math.random() + Math.random()) / 2, rand(0, Y));
      }
    };

Shape.prototype.updatePosition = function() {
      this.x += Math.random();
      this.y += -Math.random();
    };
    
    Shape.prototype.draw = function() {
      var ctx  = this.ctx;
      ctx.save();
      ctx.globalCompositeOperation = 'lighter';
      ctx.globalAlpha = this.ga;
      //ctx.fillStyle = 'rgb(123, 252, 100)';
      ctx.fillStyle = 'white';
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
      ctx.fill();
      ctx.restore();
    };

Shape.prototype.render = function(i) {
      this.updatePosition();
      this.updateParams();
      this.draw();
    };

for (var i = 0; i < shapeNum; i++) {
      var s = new Shape(ctx, X * (Math.random() + Math.random()) / 2, rand(0, Y));
      shapes.push(s);
    }

/********************
      Render
    ********************/
    
    function render() {
      ctx.clearRect(0, 0, X, Y);
      for (var i = 0; i < shapes.length; i++) {
        shapes[i].render(i);
      }
      requestAnimationFrame(render);
    }

render();

/********************
      Event
    ********************/
    
    function onResize() {
      X = canvas.width = window.innerWidth;
      Y = canvas.height = window.innerHeight;
    }

window.addEventListener('resize', function() {
      onResize();
    });

window.addEventListener('mousemove', function(e) {
      mouseX = e.clientX;
      mouseY = e.clientY;
    }, false);

});
})();

(function () {
  'use strict';
  window.addEventListener('load', function () {
    var canvas = document.getElementById('canvas');

if (!canvas || !canvas.getContext) {
      return false;
    }

/********************
      Random Number
    ********************/

function rand(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

/********************
      Var
    ********************/

var ctx = canvas.getContext('2d');
    var X = canvas.width = window.innerWidth;
    var Y = canvas.height = window.innerHeight;
    var mouseX = null;
    var mouseY = null;
    var dist = 80;
    var lessThan = Math.sqrt(dist * dist + dist * dist);
    var mouseDist = 150;
    var shapeNum;
    var shapes = [];
    var ease = 0.3;
    var friction = 0.9;
    var lineWidth = 5;
    X > Y ? shapeNum = X / dist : shapeNum = Y / dist;

if (X < 768) {
      lineWidth = 2;
      dist = 40;
      lessThan = Math.sqrt(dist * dist + dist * dist);
      mouseDist = 50;
      X > Y ? shapeNum = X / dist : shapeNum = Y / dist;
    }

/********************
      Animation
    ********************/

/********************
      Shape
    ********************/
    
    function Shape(ctx, x, y, i) {
      this.ctx = ctx;
      this.init(x, y, i);
    }
    
    Shape.prototype.init = function(x, y, i) {
      this.x = x;
      this.y = y;
      this.xi = x;
      this.yi = y;
      this.i = i;
      this.r = 1;
      this.v = {
        x: 0,
        y: 0
      };
      this.c = rand(0, 360);
    };

Shape.prototype.draw = function() {
      var ctx  = this.ctx;
      ctx.save();
      ctx.fillStyle = 'hsl(' + this.c + ', ' + '80%, 60%)';
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
      ctx.fill();
      ctx.restore();
    };

Shape.prototype.mouseDist = function() {
      var x = mouseX - this.x;
      var y = mouseY - this.y;
      var d = x * x + y * y;
      var dist = Math.sqrt(d);
      if (dist < mouseDist) {
        this.v.x = +this.v.x;
        this.v.y = +this.v.y;
        var colAngle = Math.atan2(mouseY - this.y, mouseX - this.x);
        this.v.x = -Math.cos(colAngle) * 5;
        this.v.y = -Math.sin(colAngle) * 5;
        this.x += this.v.x;
        this.y += this.v.y;
      } else if (dist > mouseDist && dist < mouseDist + 10) {
        this.v.x = 0;
        this.v.y = 0;
      } else {
        this.v.x += (this.xi - this.x) * ease;
        this.v.y += (this.yi - this.y) * ease;
        this.v.x *= friction;
        this.v.y *= friction;
        this.x += this.v.x;
        this.y += this.v.y;
      }
    };

Shape.prototype.drawLine = function(i) {
      var j = i;
      for (var i = 0; i < shapes.length; i++) {
        if (j !== i) {
          var x = this.x - shapes[i].x;
          var y = this.y - shapes[i].y;
          var d = x * x + y * y;
          var dist = Math.floor(Math.sqrt(d));
          if (dist <= lessThan) {
            ctx.save();
            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = 'hsl(' + this.c + ', ' + '80%, 60%)';
            ctx.beginPath();
            ctx.moveTo(this.x, this.y);
            ctx.lineTo(shapes[i].x, shapes[i].y);
            ctx.stroke();
            ctx.restore();
          }
        }
      }
    };

Shape.prototype.render = function(i) {
      this.drawLine(i);
      if (mouseX !== null) this.mouseDist();
      this.draw();
    };
    
    for (var i = 0; i < shapeNum + 1; i++) {
      for (var j = 0; j < shapeNum + 1; j++) {
        if (j * dist - dist > Y) break;
        var s = new Shape(ctx, i * dist, j * dist, i, j);
        shapes.push(s);
      }
    }
   
    /********************
      Render
    ********************/
    
    function render() {
      ctx.clearRect(0, 0, X, Y);
      for (var i = 0; i < shapes.length; i++) {
        shapes[i].render(i);
      }
      requestAnimationFrame(render);
    }

render();

/********************
      Event
    ********************/
    
    function onResize() {
      X = canvas.width = window.innerWidth;
      Y = canvas.height = window.innerHeight;
      shapes = [];
      if (X < 768) {
        lineWidth = 2;
        dist = 40;
        lessThan = Math.sqrt(dist * dist + dist * dist);
        mouseDist = 50;
        X > Y ? shapeNum = X / dist : shapeNum = Y / dist;
      } else {
        lineWidth = 5;
        dist = 80;
        lessThan = Math.sqrt(dist * dist + dist * dist);
        mouseDist = 150;
        X > Y ? shapeNum = X / dist : shapeNum = Y / dist;
      }
      for (var i = 0; i < shapeNum + 1; i++) {
        for (var j = 0; j < shapeNum + 1; j++) {
          if (j * dist - dist > Y) break;
          var s = new Shape(ctx, i * dist, j * dist, i, j);
          shapes.push(s);
        }
      }
    }

window.addEventListener('resize', function() {
      onResize();
    });

window.addEventListener('mousemove', function(e) {
      mouseX = e.clientX;
      mouseY = e.clientY;
    }, false);

canvas.addEventListener('touchmove', function(e) {
      var touch = e.targetTouches[0];
      mouseX = touch.pageX;
      mouseY = touch.pageY;
    });

});
  // Author
  console.log('File Name / net.js\nCreated Date / July 11, 2020\nAuthor / Toshiya Marukubo\nTwitter / https://twitter.com/toshiyamarukubo');
})();

WP Code Playground

=== WP Code Playground ===
Contributors: Joseph Quintero
Tags: code editor, playground, HTML, CSS, JavaScript, shortcode
Requires at least: 5.0
Tested up to: 6.3
Requires PHP: 7.2
Stable tag: 2.3
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Create and manage multiple HTML/CSS/JavaScript playgrounds, and render them on any page or post using a shortcode.

== Description ==

WP Code Playground allows you to create, edit, and display interactive code playgrounds for HTML, CSS, and JavaScript directly in WordPress. These playgrounds can be embedded on any page or post using a shortcode, enabling dynamic and engaging content for developers, educators, or anyone experimenting with web development.

**Features:**
* Create and manage multiple code playgrounds in the admin dashboard.
* Render playgrounds anywhere using the shortcode `code_playground id=”1″`.
* Real-time code execution for HTML, CSS, and JavaScript.
* Live error reporting for JavaScript code execution.
* Separate tabs for HTML, CSS, and JavaScript inputs.
* Responsive and user-friendly interface.
* Fullscreen preview mode for better code visualization.

Use WP Code Playground for:
* Showcasing live code examples.
* Building interactive tutorials.
* Experimenting with web development directly within WordPress.

== Installation ==

1. Upload the `wp-code-playground` folder to the `/wp-content/plugins/` directory.
2. Activate the plugin through the ‘Plugins’ menu in WordPress.
3. Navigate to “Code Playgrounds” in the admin dashboard to create and manage your playgrounds.
4. Use the shortcode `code_playground id=”1″` (replace `1` with the desired playground ID) to embed the playground on any page or post.

== Frequently Asked Questions ==

= How do I add a playground to my page? =
Use the shortcode `code_playground id=”1″`, replacing `1` with the ID of the playground you’d like to display.

= Why is my playground preview not working? =
Ensure JavaScript is enabled in your browser. If issues persist, check the browser console for error messages or validate your JavaScript code for syntax errors.

= Can I edit or delete playgrounds? =
Yes, you can edit or delete playgrounds through the “Code Playgrounds” admin page.

= Does this plugin support responsive design? =
Yes, WP Code Playground is fully responsive and works on all devices.

= Can users interact with the code live on the frontend? =
Yes, users can modify HTML, CSS, and JavaScript in real-time and see the output instantly in the preview window.

== Screenshots ==

1. Admin dashboard for managing code playgrounds.
2. Add or edit a code playground in the admin dashboard.
3. A code playground displayed on the frontend with tabs and live preview.

== Changelog ==

= 2.3 =
* Improved error handling and frontend script management.
* Added secure iframe template for rendering playground previews.
* Enhanced responsiveness and fullscreen preview feature.

= 2.2 =
* Added live error reporting for JavaScript execution.
* Optimized the UI for better usability on mobile devices.

= 2.1 =
* Enhanced shortcode flexibility and documentation.
* Improved script enqueueing for better performance.

= 2.0 =
* Added tabs for switching between HTML, CSS, and JavaScript inputs.
* Fullscreen preview mode added for better visualization.

= 1.5 =
* Fixed iframe viewport issues.
* Enhanced layout and styling for the code editor.

= 1.0 =
* Initial release.

== Upgrade Notice ==

= 2.3 =
This update includes enhanced error handling, improved responsiveness, and a secure iframe for code previews. Update for a smoother user experience.

== License ==

This plugin is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License, or any later version.

This plugin is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this plugin. If not, see https://www.gnu.org/licenses/gpl-2.0.html.

WordPress Code Playground

WP Code Playground

Quick Links

Useful Info

Subscribe Our Newsletter

WordPress Code Playground

WP Code Playground

Related products

WP Online Users Pro

Simple Translate Plugin

Positive Message of the Day

Nasa WordPress Plugin

Quick Links

Useful Info

Subscribe Our Newsletter

AZ Managed IT Services llc

AZ Managed
IT Services llc