Call to action

Explore Florida's AI innovation hub. Join our community to shape the future with cutting-edge technology and collaboration.

Point Preserve A.I. Campus

Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Santa Rosa Project - Dynamic Ecosystem</title>
  <style>
    /* Basic reset */
    body {
      margin: 0;
      background: #111;
      color: #fff;
      font-family: sans-serif;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 1rem;
    }
    #dynamicContainer {
      position: relative;
      height: 24rem; /* 384px */
      background: #111;
      overflow: hidden;
    }
    /* Info panel styling */
    #infoPanel {
      background: #222;
      border-radius: 0.5rem;
      padding: 1rem;
      transition: all 0.3s ease;
    }
    #panelTitle {
      margin-bottom: 0.5rem;
      font-weight: bold;
      font-size: 1.125rem; /* ~18px */
      color: #4faaff;
    }
    .gradient-text {
      background-clip: text;
      color: transparent;
      /* fallback in case background-clip is not supported */
      background-image: linear-gradient(to right, #60a5fa, #a78bfa);
    }
    #panelContent p {
      margin: 0.25rem 0;
    }
    .text-blue-400 {
      color: #60a5fa;
    }
    .text-purple-400 {
      color: #a78bfa;
    }

    /* Glow filter fallback for older browsers */
    .glow-filter {
      filter: url(#glow);
    }

    /* Hover highlight */
    .section-hover line {
      stroke-width: 2 !important;
      stroke-dasharray: none !important;
      stroke: #a3a3a3 !important;
    }
    .section-hover circle {
      r: 45 !important;
      stroke-width: 3 !important;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2 style="text-align: center; 
               background: linear-gradient(to right, #60a5fa, #a78bfa);
               -webkit-background-clip: text; 
               color: transparent;
               font-size: 1.5rem; 
               font-weight: bold;
               margin-bottom: 1rem;">
      Santa Rosa Project - Dynamic Ecosystem
    </h2>

    
    <div id="dynamicContainer">
      <svg id="dynamicSVG" viewBox="0 0 500 500" width="100%" height="100%">
        
        <defs>
          
          <radialGradient id="gradientOfficeAdmin">
            <stop offset="0%" stop-color="#4f46e599"/>
            <stop offset="100%" stop-color="#4f46e533"/>
          </radialGradient>
          <radialGradient id="gradientAnalysis">
            <stop offset="0%" stop-color="#7c3aed99"/>
            <stop offset="100%" stop-color="#7c3aed33"/>
          </radialGradient>
          <radialGradient id="gradientMarketing">
            <stop offset="0%" stop-color="#2563eb99"/>
            <stop offset="100%" stop-color="#2563eb33"/>
          </radialGradient>
          <radialGradient id="gradientTechnology">
            <stop offset="0%" stop-color="#9333ea99"/>
            <stop offset="100%" stop-color="#9333ea33"/>
          </radialGradient>
          <radialGradient id="gradientOperations">
            <stop offset="0%" stop-color="#06b6d499"/>
            <stop offset="100%" stop-color="#06b6d433"/>
          </radialGradient>
          <radialGradient id="gradientBusinessDev">
            <stop offset="0%" stop-color="#3b82f699"/>
            <stop offset="100%" stop-color="#3b82f633"/>
          </radialGradient>
          <radialGradient id="gradientCommunity">
            <stop offset="0%" stop-color="#6366f199"/>
            <stop offset="100%" stop-color="#6366f133"/>
          </radialGradient>
          <radialGradient id="gradientEthics">
            <stop offset="0%" stop-color="#8b5cf699"/>
            <stop offset="100%" stop-color="#8b5cf633"/>
          </radialGradient>

          
          <filter id="glow">
            <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
            <feMerge>
              <feMergeNode in="coloredBlur"/>
              <feMergeNode in="SourceGraphic"/>
            </feMerge>
          </filter>
        </defs>

        
        <g id="rotatingGroup">
          
          <circle cx="250" cy="250" r="240" fill="none" stroke="#2d2d2d" stroke-width="1" opacity="0.3" />
          <circle cx="250" cy="250" r="180" fill="none" stroke="#3a3a3a" stroke-width="1" opacity="0.4" />
          <circle cx="250" cy="250" r="120" fill="none" stroke="#4f4f4f" stroke-width="1" opacity="0.5" />
        </g>

        
        <circle cx="250" cy="250" r="60" fill="#222" stroke="#9333ea" stroke-width="2" filter="url(#glow)"/>
        <text x="250" y="240" text-anchor="middle" fill="white" font-size="16" font-weight="bold">
          Santa Rosa
        </text>
        <text x="250" y="260" text-anchor="middle" fill="white" font-size="16" font-weight="bold">
          Project
        </text>

        
        <g class="section-node" data-id="1" data-name="Office/Admin"
           data-color="#4f46e5" data-gradient="url(#gradientOfficeAdmin)"
           data-components="IP Compliance, Building & Marketing, Science & Strategy"
           data-revenue="$20,000 balance">
          
          <line x1="250" y1="250" stroke="#52525b" stroke-width="1" stroke-dasharray="4"></line>
          
          <circle r="40" stroke="#4f46e5" stroke-width="1" fill="url(#gradientOfficeAdmin)"></circle>
          
          <text text-anchor="middle" dy=".3em" fill="white" font-size="12" font-weight="600">Office/Admin</text>
        </g>

        <g class="section-node" data-id="2" data-name="Analysis"
           data-color="#7c3aed" data-gradient="url(#gradientAnalysis)"
           data-components="Optimization, MYPL A!, Data Source"
           data-revenue="10% discount/month">
          <line x1="250" y1="250" stroke="#52525b" stroke-width="1" stroke-dasharray="4"></line>
          <circle r="40" stroke="#7c3aed" stroke-width="1" fill="url(#gradientAnalysis)"></circle>
          <text text-anchor="middle" dy=".3em" fill="white" font-size="12" font-weight="600">Analysis</text>
        </g>

        <g class="section-node" data-id="3" data-name="Marketing"
           data-color="#2563eb" data-gradient="url(#gradientMarketing)"
           data-components="Acquisition, Business Lab, MYFL A!"
           data-revenue="PPR Management">
          <line x1="250" y1="250" stroke="#52525b" stroke-width="1" stroke-dasharray="4"></line>
          <circle r="40" stroke="#2563eb" stroke-width="1" fill="url(#gradientMarketing)"></circle>
          <text text-anchor="middle" dy=".3em" fill="white" font-size="12" font-weight="600">Marketing</text>
        </g>

        <g class="section-node" data-id="4" data-name="Technology"
           data-color="#9333ea" data-gradient="url(#gradientTechnology)"
           data-components="Oracle Cloud, CyberCode, Robotics Lab"
           data-revenue="Tech Partnerships">
          <line x1="250" y1="250" stroke="#52525b" stroke-width="1" stroke-dasharray="4"></line>
          <circle r="40" stroke="#9333ea" stroke-width="1" fill="url(#gradientTechnology)"></circle>
          <text text-anchor="middle" dy=".3em" fill="white" font-size="12" font-weight="600">Technology</text>
        </g>

        <g class="section-node" data-id="5" data-name="Operations"
           data-color="#06b6d4" data-gradient="url(#gradientOperations)"
           data-components="Provider Services, Community Mgmt, Certifications"
           data-revenue="JUA $50/month">
          <line x1="250" y1="250" stroke="#52525b" stroke-width="1" stroke-dasharray="4"></line>
          <circle r="40" stroke="#06b6d4" stroke-width="1" fill="url(#gradientOperations)"></circle>
          <text text-anchor="middle" dy=".3em" fill="white" font-size="12" font-weight="600">Operations</text>
        </g>

        <g class="section-node" data-id="6" data-name="Business Dev"
           data-color="#3b82f6" data-gradient="url(#gradientBusinessDev)"
           data-components="Strategic Dev, Asset Management, Tech Space"
           data-revenue="≥ 1M Budget">
          <line x1="250" y1="250" stroke="#52525b" stroke-width="1" stroke-dasharray="4"></line>
          <circle r="40" stroke="#3b82f6" stroke-width="1" fill="url(#gradientBusinessDev)"></circle>
          <text text-anchor="middle" dy=".3em" fill="white" font-size="12" font-weight="600">Business Dev</text>
        </g>

        <g class="section-node" data-id="7" data-name="Community"
           data-color="#6366f1" data-gradient="url(#gradientCommunity)"
           data-components="Facilitation, Amenities, Events"
           data-revenue="Membership Fees">
          <line x1="250" y1="250" stroke="#52525b" stroke-width="1" stroke-dasharray="4"></line>
          <circle r="40" stroke="#6366f1" stroke-width="1" fill="url(#gradientCommunity)"></circle>
          <text text-anchor="middle" dy=".3em" fill="white" font-size="12" font-weight="600">Community</text>
        </g>

        <g class="section-node" data-id="8" data-name="Ethics"
           data-color="#8b5cf6" data-gradient="url(#gradientEthics)"
           data-components="Compliance, Governance, Engineering"
           data-revenue="Council Oversight">
          <line x1="250" y1="250" stroke="#52525b" stroke-width="1" stroke-dasharray="4"></line>
          <circle r="40" stroke="#8b5cf6" stroke-width="1" fill="url(#gradientEthics)"></circle>
          <text text-anchor="middle" dy=".3em" fill="white" font-size="12" font-weight="600">Ethics</text>
        </g>
      </svg>
    </div>

    
    <div id="infoPanel" class="mt-4" style="margin-top: 1rem;">
      <p id="panelTitle">System Overview</p>
      <div id="panelContent">
        <ul style="list-style-type: disc; margin-left: 1.25rem;">
          <li>Multi-tiered equity structure (10% founder stake)</li>
          <li>64 integrated components across 8 domains</li>
          <li>Dynamic revenue sharing model</li>
          <li>Tech-enabled community ecosystem</li>
        </ul>
      </div>
    </div>
  </div>

  <script>
    /******************************************
     * Data Setup
     ******************************************/
    const sections = [
      { id: 1, angle: 0      }, // 0 * (2π/8)
      { id: 2, angle: 0.785  }, // 1 * (π/4)
      { id: 3, angle: 1.57   }, // 2 * (π/2)
      { id: 4, angle: 2.355  }, // 3 * (3π/4)
      { id: 5, angle: 3.14   }, // 4 * (π)
      { id: 6, angle: 3.927  }, // 5 * (5π/4)
      { id: 7, angle: 4.71   }, // 6 * (3π/2)
      { id: 8, angle: 5.497  }  // 7 * (7π/4)
    ];

    const centerX = 250;
    const centerY = 250;
    const radius = 180;

    // Rotation state
    let rotation = 0;
    // Pulse state
    let pulseIndex = 0;

    /******************************************
     * Position Each Section
     ******************************************/
    function positionSections() {
      document.querySelectorAll('.section-node').forEach((node, index) => {
        const angle = sections[index].angle;
        // Compute X/Y
        const x = centerX + Math.cos(angle) * radius;
        const y = centerY + Math.sin(angle) * radius;

        const line = node.querySelector('line');
        line.setAttribute('x2', x);
        line.setAttribute('y2', y);

        const circle = node.querySelector('circle');
        circle.setAttribute('cx', x);
        circle.setAttribute('cy', y);

        const text = node.querySelector('text');
        text.setAttribute('x', x);
        text.setAttribute('y', y);
      });
    }

    /******************************************
     * Animate Rotation
     ******************************************/
    function animateRotation() {
      rotation = (rotation + 0.1) % 360;
      document
        .getElementById('rotatingGroup')
        .setAttribute('transform', `rotate(${rotation}, 250, 250)`);

      requestAnimationFrame(animateRotation);
    }

    /******************************************
     * Pulse Effect
     ******************************************/
    setInterval(() => {
      pulseIndex = (pulseIndex + 1) % 8;
      // Add glow filter to the matching node
      document.querySelectorAll('.section-node circle').forEach((circle, i) => {
        circle.setAttribute('filter', i === pulseIndex ? 'url(#glow)' : 'none');
      });
    }, 2000);

    /******************************************
     * Hover Interactions
     ******************************************/
    document.querySelectorAll('.section-node').forEach(node => {
      node.addEventListener('mouseenter', () => {
        node.classList.add('section-hover');

        // Info panel
        const name = node.dataset.name;
        const components = node.dataset.components;
        const revenue = node.dataset.revenue;

        const panelTitle = document.getElementById('panelTitle');
        const panelContent = document.getElementById('panelContent');

        panelTitle.textContent = name;
        panelTitle.classList.add('gradient-text'); // fancy gradient style

        panelContent.innerHTML = `
          <p><span class="text-blue-400" style="font-weight:bold;">Components:</span> ${components}</p>
          <p><span class="text-purple-400" style="font-weight:bold;">Revenue:</span> ${revenue}</p>
        `;
      });

      node.addEventListener('mouseleave', () => {
        node.classList.remove('section-hover');

        // Reset info panel
        const panelTitle = document.getElementById('panelTitle');
        const panelContent = document.getElementById('panelContent');

        panelTitle.textContent = 'System Overview';
        panelTitle.classList.remove('gradient-text');
        panelTitle.style.color = '#4faaff';

        panelContent.innerHTML = `
          <ul style="list-style-type: disc; margin-left: 1.25rem;">
            <li>Multi-tiered equity structure (10% founder stake)</li>
            <li>64 integrated components across 8 domains</li>
            <li>Dynamic revenue sharing model</li>
            <li>Tech-enabled community ecosystem</li>
          </ul>
        `;
      });
    });

    /******************************************
     * Initialize on Page Load
     ******************************************/
    positionSections();
    requestAnimationFrame(animateRotation);
  </script>
</body>
</html>