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>

AI, Surreal landscape for innovation and technology, conceptual futuristic abstract background

Point Preserve

Point Preserve is an AI-focused community located in Santa Rosa Beach, Florida, dedicated to integrating artificial intelligence innovations with natural inspirations. Their team collaborates closely with clients to develop tailored technological solutions. Emphasizing sustainability, Point Preserve aims to harmonize technological advancements with the natural environment.