technology software

English

Within the developer-focused generic top-level domain (.dev), 'creative-portovolio-jdz50u3t21.edgeone.dev' is registered and includes subdomain 'creative-portovolio-jdz50u3t21'. The core label 'edgeone' covers 7 characters holding 4 vowels versus 3 consonants. Breaking it apart gives two words: edge, one. The median word length lands at 3.5 characters. No strong language cues emerged from the frequency lists.

html/65/f6/65f640b4-0f84-4ffc-a995-2d8a94b9afde.html.gz

ca330dc6b8e6a0a88a0b707e40a5191110c3e86842c7c6431a7a7a2e972f08f5

b673820981396387b036f655e69bb31cafc8e3a8412da655ca639d5bebae79ed

3af03f4b6224329533fdad476d497c29b0bf3650161186381ebf835a322a8dc1

viewport

width=device-width, initial-scale=1, user-scalable=no

AI-powered interactive UI generation using A2UI protocol

description

theme-color

twitter:card

html/65/f6/65f640b4-0f84-4ffc-a995-2d8a94b9afde_nodriver.html.gz

A2UI - AI-Powered Interactive UI

Prudence Malinki

MarkMonitor Inc.

edgeone.dev


  // JSON character set
  const JSON_CHARS = ['{', '}', '[', ']', '"', ':', ',', 'data', 'type', 'value', 'props'];
  
  // UI component types
  const UIComponentType = {
    INPUT: 'input',
    BUTTON: 'button',
    CARD: 'card',
    CHECKBOX: 'checkbox',
    SLIDER: 'slider'
  };

  // Load Three.js from CDN
  import('https://cdn.jsdelivr.net/npm/three@0.163.0/build/three.module.js').then((THREE) => {

  // Random color pool (rich and colorful)
  const COLORS = [
    '#6432e6', // Purple
    '#e62e8b', // Rose
    '#2e86e6', // Blue
    '#e6962e', // Orange
    '#2ee6a6', // Cyan
    '#e6e62e', // Yellow
    '#8b2ee6', // Deep purple
    '#2ee65a', // Green
    '#e62e5a', // Red
    '#5a2ee6', // Blue-purple
  ];

  class JsonToUIAnimation {
    constructor(canvas) {
      this.canvas = canvas;
      this.particles = [];
      this.particleCount = 50;
      this.uiTextureCache = new Map();
      this.init();
      this.createParticles();
      this.animate();
      
      window.addEventListener('resize', () => this.onResize());
    }

    init() {
      this.scene = new THREE.Scene();

      const wrapper = this.canvas.parentElement;
      const aspect = wrapper.clientWidth / wrapper.clientHeight;
      this.camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
      this.camera.position.z = 400;

      this.renderer = new THREE.WebGLRenderer({
        canvas: this.canvas,
        alpha: true,
        antialias: true
      });
      this.renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
      this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    }

    // Create JSON text texture (neon glow effect)
    createTextTexture(text, color = '#6432e6') {
      const canvas = document.createElement('canvas');
      // Dynamically adjust canvas width based on text length
      const width = text.length > 2 ? 512 : 256;
      canvas.width = width;
      canvas.height = 256;
      const ctx = canvas.getContext('2d');
      
      ctx.font = '120px monospace';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      
      // Use composite mode to create glow effect
      ctx.globalCompositeOperation = 'lighter'; // Key: additive glow
      
      // Outer glow (large blur)
      ctx.fillStyle = color;
      ctx.filter = 'blur(20px)';
      ctx.globalAlpha = 0.3;
      ctx.fillText(text, width / 2, 128);
      ctx.fillText(text, width / 2, 128);
      ctx.fillText(text, width / 2, 128);
      
      // Middle glow
      ctx.filter = 'blur(10px)';
      ctx.globalAlpha = 0.5;
      ctx.fillText(text, width / 2, 128);
      ctx.fillText(text, width / 2, 128);
      
      // Inner glow
      ctx.filter = 'blur(5px)';
      ctx.globalAlpha = 0.7;
      ctx.fillText(text, width / 2, 128);
      
      // Core text (clear, no blur)
      ctx.filter = 'none';
      ctx.globalAlpha = 1.0;
      ctx.fillText(text, width / 2, 128);

      return new THREE.CanvasTexture(canvas);
    }

    // Create UI component icon texture (neon glow effect)
    createUIIconTexture(type, color = '#8a2be2') {
      const canvas = document.createElement('canvas');
      canvas.width = 256;
      canvas.height = 256;
      const ctx = canvas.getContext('2d');
      
      ctx.strokeStyle = color;
      ctx.fillStyle = color;
      ctx.lineWidth = 6;
      
      // Use composite mode to create glow effect
      ctx.globalCompositeOperation = 'lighter';
      
      // Define drawing function
      const drawIcon = () => {
        switch (type) {
          case UIComponentType.INPUT:
            ctx.strokeRect(40, 100, 176, 56);
            ctx.fillRect(50, 116, 40, 24);
            break;
          
          case UIComponentType.BUTTON:
            ctx.beginPath();
            ctx.roundRect(50, 90, 156, 76, 16);
            ctx.fill();
            ctx.stroke();
            break;
          
          case UIComponentType.CARD:
            ctx.strokeRect(40, 60, 176, 136);
            ctx.fillRect(50, 70, 156, 16);
            ctx.fillRect(50, 100, 80, 12);
            ctx.fillRect(50, 124, 100, 12);
            break;
          
          case UIComponentType.CHECKBOX:
            ctx.strokeRect(80, 80, 96, 96);
            ctx.beginPath();
            ctx.moveTo(100, 128);
            ctx.lineTo(120, 148);
            ctx.lineTo(156, 104);
            ctx.stroke();
            break;
          
          case UIComponentType.SLIDER:
            ctx.beginPath();
            ctx.moveTo(40, 128);
            ctx.lineTo(216, 128);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(140, 128, 24, 0, Math.PI * 2);
            ctx.fill();
            ctx.stroke();
            break;
        }
      };
      
      // Outer glow (multiple draws for enhanced effect)
      ctx.filter = 'blur(15px)';
      ctx.globalAlpha = 0.3;
      drawIcon();
      drawIcon();
      drawIcon();
      
      // Middle glow
      ctx.filter = 'blur(8px)';
      ctx.globalAlpha = 0.5;
      drawIcon();
      drawIcon();
      
      // Inner glow
      ctx.filter = 'blur(4px)';
      ctx.globalAlpha = 0.7;
      drawIcon();
      
      // Core icon (clear)
      ctx.filter = 'none';
      ctx.globalAlpha = 1.0;
      drawIcon();

      return new THREE.CanvasTexture(canvas);
    }

    createParticles() {
      const uiTypes = Object.values(UIComponentType);
      const wrapper = this.canvas.parentElement;
      const canvasWidth = wrapper.clientWidth;
      const margin = 150; // Edge margin

      for (let i = 0; i < this.particleCount; i++) {
        // Start position outside left edge (with margin)
        const startX = -canvasWidth / 2 - margin + Math.random() * 200;
        const y = (Math.random() - 0.5) * 400; // Increase vertical range
        const z = (Math.random() - 0.5) * 200;

        // Random color
        const color = COLORS[Math.floor(Math.random() * COLORS.length)];

        // 50% probability to transform into UI icon
        const willTransform = Math.random() > 0.5;
        let texture;
        let targetType;

        // Initially all are JSON symbols
        const char = JSON_CHARS[Math.floor(Math.random() * JSON_CHARS.length)];
        texture = this.createTextTexture(char, color);
        
        // Adjust sprite width based on text length (reduced by 1/4: 16→12, 32→24)
        const spriteWidth = char.length > 2 ? 24 : 12;
        const spriteHeight = 12;
        
        // Only particles with willTransform will become UI icons on the right
        if (willTransform) {
          targetType = uiTypes[Math.floor(Math.random() * uiTypes.length)];
        }

        const material = new THREE.SpriteMaterial({
          map: texture,
          transparent: true,
          opacity: 0, // Initially transparent
          blending: THREE.AdditiveBlending
        });

        const sprite = new THREE.Sprite(material);
        sprite.position.set(startX, y, z);
        sprite.scale.set(spriteWidth, spriteHeight, 1); // Adjust based on text length
        
        this.scene.add(sprite);

        this.particles.push({
          mesh: sprite,
          velocity: new THREE.Vector3(
            Math.random() * 0.4 + 0.25, // x: rightward (half speed)
            (Math.random() - 0.5) * 0.15, // y: slight up/down (half speed)
            (Math.random() - 0.5) * 0.1  // z: slight forward/back (half speed)
          ),
          startX,
          phase: 'json',
          targetType, // If undefined, always stays JSON
          rotationSpeed: (Math.random() - 0.5) * 0.01, // Half rotation speed
          color,
          currentText: char // Record current text
        });
      }
    }

    updateParticle(particle) {
      const pos = particle.mesh.position;
      const wrapper = this.canvas.parentElement;
      const canvasWidth = wrapper.clientWidth;
      const margin = 150; // Edge margin
      const edgeFadeDistance = 100; // Edge fade in/out distance
      const centerFadeDistance = 120; // Center line fade in/out distance
      
      // Update position
      pos.x += particle.velocity.x;
      pos.y += particle.velocity.y;
      pos.z += particle.velocity.z;

      // Rotation effect
      particle.mesh.material.rotation += particle.rotationSpeed;

      // Calculate boundaries (considering margin)
      const leftBoundary = -canvasWidth / 2 + margin;
      const rightBoundary = canvasWidth / 2 - margin;
      const centerLine = 0; // Screen center line
      
      // Determine phase and opacity based on X coordinate
      if (pos.x < centerLine - centerFadeDistance) {
        // Left area: display JSON symbols
        particle.phase = 'json';
        // Set width based on current text length (reduced by 1/4: 32→24, 16→12)
        const spriteWidth = (particle.currentText && particle.currentText.length > 2) ? 24 : 12;
        if (particle.mesh.scale.x !== spriteWidth || particle.mesh.scale.y !== 12) {
          particle.mesh.scale.set(spriteWidth, 12, 1);
        }
        
        // Edge fade-in effect
        if (pos.x < leftBoundary + edgeFadeDistance) {
          const fadeProgress = (pos.x - (leftBoundary - edgeFadeDistance)) / edgeFadeDistance;
          particle.mesh.material.opacity = Math.max(0, Math.min(0.85, fadeProgress * 0.85));
        } else {
          particle.mesh.material.opacity = 0.85;
        }
      } else if (pos.x < centerLine) {
        // Near center line left: JSON fades out and disappears
        particle.phase = 'transition';
        const fadeOutProgress = (centerLine - pos.x) / centerFadeDistance; // 1 → 0
        particle.mesh.material.opacity = Math.max(0, Math.min(0.85, fadeOutProgress * 0.85));
      } else if (particle.targetType && pos.x < centerLine + centerFadeDistance) {
        // Near center line right: only particles with targetType become UI and fade in
        particle.phase = 'ui';
        const fadeInProgress = (pos.x - centerLine) / centerFadeDistance; // 0 → 1
        particle.mesh.material.opacity = Math.max(0, Math.min(0.85, fadeInProgress * 0.85));
        
        // Switch to UI texture and size (reduced by 1/4: 21→16)
        particle.mesh.material.map = this.getUITexture(particle.targetType, particle.color);
        particle.mesh.material.needsUpdate = true;
        if (particle.mesh.scale.x !== 16) {
          particle.mesh.scale.set(16, 16, 1); // UI icon size
        }
      } else if (particle.targetType) {
        // Right area: display UI icons (only particles with targetType)
        particle.phase = 'ui';
        if (particle.mesh.scale.x !== 16) {
          particle.mesh.scale.set(16, 16, 1); // UI icon size
        }
        
        // Edge fade-out effect
        if (pos.x > rightBoundary - edgeFadeDistance) {
          const fadeProgress = (rightBoundary - pos.x) / edgeFadeDistance;
          particle.mesh.material.opacity = Math.max(0, Math.min(0.85, fadeProgress * 0.85));
        } else {
          particle.mesh.material.opacity = 0.85;
        }
      } else {
        // Particles without targetType remain transparent after center line (disappeared state)
        particle.mesh.material.opacity = 0;
      }

      // Loop: reset from right to left
      if (pos.x > rightBoundary + edgeFadeDistance) {
        pos.x = leftBoundary - edgeFadeDistance + Math.random() * 100;
        pos.y = (Math.random() - 0.5) * 400; // Increase vertical range
        pos.z = (Math.random() - 0.5) * 200;
        particle.phase = 'json';
        
        // Re-randomize color
        particle.color = COLORS[Math.floor(Math.random() * COLORS.length)];
        
        // Re-randomize decision to transform to UI
        if (Math.random() > 0.5) {
          const uiTypes = Object.values(UIComponentType);
          particle.targetType = uiTypes[Math.floor(Math.random() * uiTypes.length)];
        } else {
          particle.targetType = undefined; // Keep pure JSON
        }
        
        // Reset to JSON texture
        const char = JSON_CHARS[Math.floor(Math.random() * JSON_CHARS.length)];
        particle.currentText = char; // Update current text
        particle.mesh.material.map = this.createTextTexture(char, particle.color);
        particle.mesh.material.needsUpdate = true;
        // Set size based on text length (reduced by 1/4: 32→24, 16→12)
        const spriteWidth = char.length > 2 ? 24 : 12;
        particle.mesh.scale.set(spriteWidth, 12, 1);
        particle.mesh.material.opacity = 0; // Reset to transparent
      }

      // Y and Z boundaries (increased range)
      if (pos.y > 200) pos.y = -200;
      if (pos.y < -200) pos.y = 200;
      if (pos.z > 100) pos.z = -100;
      if (pos.z < -100) pos.z = 100;
    }

    // Cache UI textures (by type and color)
    getUITexture(type, color) {
      const key = `${type}-${color}`;
      if (!this.uiTextureCache.has(key)) {
        this.uiTextureCache.set(key, this.createUIIconTexture(type, color));
      }
      return this.uiTextureCache.get(key);
    }

    animate = () => {
      requestAnimationFrame(this.animate);

      this.particles.forEach(particle => this.updateParticle(particle));

      this.renderer.render(this.scene, this.camera);
    };

    onResize() {
      const wrapper = this.canvas.parentElement;
      const aspect = wrapper.clientWidth / wrapper.clientHeight;
      this.camera.aspect = aspect;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
    }
  }

    const canvas = document.getElementById('json-to-ui-canvas');
    if (canvas) {
      new JsonToUIAnimation(canvas);
    }
  }).catch(console.error);


const t=document.getElementById("getStartedBtn");t&&t.addEventListener("click",e=>{e.preventDefault(),t.style.transform="scale(0.98)",t.style.transition="transform 0.1s ease",setTimeout(()=>{t.style.transform="",window.location.href="/chat"},100)});

✅ Low Risk - https://creative-portovolio-jdz50u3t21.edgeone.dev/

Requests	IP Address	Location	AS Autonomous System
2	104.16.175.226	United States	AS13335Cloudflare, Inc.
2	43.174.246.29	Singapore	AS139341ACE
4	2	-	-

Security Scan Report: creative-portovolio-jdz50u3t21.edgeone.dev

Summary

AI Security Verdict

Safe Website

Safety Factors

Details

Screenshot

Page Load Overview

Language Analysis

Primary Language

Detection Details

Website Classification

Primary Category

All Detected Categories

Detected Features

Domain & IP Information

Content Similarity HashesFor malware variant detection

TLSH (Trend Micro Locality Sensitive Hash)

ssdeep (Context Triggered Piecewise Hashing)

sdhash (Similarity Digest Hashing)

Image Hashes

Perceptual Hashes

Other Hashes

Scan History