Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Four-Phase Governance Framework for Anchored Digital Assets in AR</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script> | |
| <style> | |
| .phase-box { | |
| transition: all 0.3s ease; | |
| } | |
| .phase-box:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .connector-line { | |
| position: relative; | |
| } | |
| .connector-line::after { | |
| content: ''; | |
| position: absolute; | |
| width: 2px; | |
| background-color: #3b82f6; | |
| top: 0; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .feedback-arrow { | |
| stroke-dasharray: 5,5; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="container mx-auto px-4 py-12 max-w-7xl"> | |
| <h1 class="text-3xl font-bold text-center text-gray-800 mb-2">Four-Phase Governance Framework</h1> | |
| <h2 class="text-xl text-center text-gray-600 mb-12">for Anchored Digital Assets in AR</h2> | |
| <!-- Main Diagram Container --> | |
| <div class="relative bg-white rounded-xl shadow-lg p-8 mb-12 overflow-hidden"> | |
| <!-- Swimlanes --> | |
| <div class="absolute left-0 top-0 h-full w-32 border-r-2 border-gray-100"> | |
| <div class="h-1/6 flex items-center justify-center rotate-90 transform origin-left pl-8 text-sm font-medium text-gray-500"> | |
| Creators | |
| </div> | |
| <div class="h-1/6 flex items-center justify-center rotate-90 transform origin-left pl-8 text-sm font-medium text-gray-500"> | |
| Platform Governance | |
| </div> | |
| <div class="h-1/6 flex items-center justify-center rotate-90 transform origin-left pl-8 text-sm font-medium text-gray-500"> | |
| AR Engineering | |
| </div> | |
| <div class="h-1/6 flex items-center justify-center rotate-90 transform origin-left pl-8 text-sm font-medium text-gray-500"> | |
| Local Authorities | |
| </div> | |
| <div class="h-1/6 flex items-center justify-center rotate-90 transform origin-left pl-8 text-sm font-medium text-gray-500"> | |
| Payment/Compliance | |
| </div> | |
| <div class="h-1/6 flex items-center justify-center rotate-90 transform origin-left pl-8 text-sm font-medium text-gray-500"> | |
| End Users | |
| </div> | |
| </div> | |
| <!-- Core Phases --> | |
| <div class="ml-32 grid grid-cols-4 gap-6"> | |
| <!-- P1: Content Appropriateness --> | |
| <div class="phase-box bg-blue-50 border border-blue-200 rounded-2xl p-6 col-span-1" data-aos="fade-up"> | |
| <h3 class="text-lg font-bold text-blue-800 mb-2">P1. Content Appropriateness</h3> | |
| <p class="text-sm text-gray-700 mb-4">Assess fit with legal, social, cultural standards. Tools: policy rules, classifiers, human review.</p> | |
| <div class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full inline-block font-medium"> | |
| Platform Governance | |
| </div> | |
| </div> | |
| <!-- P2: Carrier of Delivery --> | |
| <div class="phase-box bg-purple-50 border border-purple-200 rounded-2xl p-6 col-span-1" data-aos="fade-up" data-aos-delay="100"> | |
| <h3 class="text-lg font-bold text-purple-800 mb-2">P2. Carrier of Delivery</h3> | |
| <p class="text-sm text-gray-700 mb-4">Select anchoring method and delivery channel. Options: GPS anchoring, marker-based, vision-based; privacy/security checks.</p> | |
| <div class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full inline-block font-medium"> | |
| AR Engineering | |
| </div> | |
| </div> | |
| <!-- P3: Location-Based Constraint --> | |
| <div class="phase-box bg-green-50 border border-green-200 rounded-2xl p-6 col-span-1" data-aos="fade-up" data-aos-delay="200"> | |
| <h3 class="text-lg font-bold text-green-800 mb-2">P3. Location-Based Constraint</h3> | |
| <p class="text-sm text-gray-700 mb-4">Evaluate spatial permissions. Inputs: municipal zoning, sensitive-area lists, owner consent registry.</p> | |
| <div class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full inline-block font-medium"> | |
| Platform + Local Authorities | |
| </div> | |
| </div> | |
| <!-- P4: Viewer Access Control --> | |
| <div class="phase-box bg-yellow-50 border border-yellow-200 rounded-2xl p-6 col-span-1" data-aos="fade-up" data-aos-delay="300"> | |
| <h3 class="text-lg font-bold text-yellow-800 mb-2">P4. Viewer Access Control</h3> | |
| <p class="text-sm text-gray-700 mb-4">Regulate visibility conditions. Controls: age/region gates, parental controls, KYC where required.</p> | |
| <div class="bg-yellow-100 text-yellow-800 text-xs px-3 py-1 rounded-full inline-block font-medium"> | |
| Platform + Payment/Compliance | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Connectors and Relationships --> | |
| <svg class="absolute inset-0 w-full h-full pointer-events-none" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- Primary Flow Arrows --> | |
| <path d="M25% 50% H 40%" stroke="#3b82f6" stroke-width="2" fill="none" marker-end="url(#arrowhead)" /> | |
| <path d="M50% 50% H 65%" stroke="#3b82f6" stroke-width="2" fill="none" marker-end="url(#arrowhead)" /> | |
| <path d="M75% 50% H 90%" stroke="#3b82f6" stroke-width="2" fill="none" marker-end="url(#arrowhead)" /> | |
| <!-- Feedback Loops --> | |
| <path d="M90% 60% Q 80% 80%, 60% 80% L 40% 80% Q 20% 80%, 25% 60%" stroke="#3b82f6" stroke-width="2" stroke-dasharray="5,5" fill="none" /> | |
| <!-- Data Store Connections --> | |
| <path d="M75% 70% L 70% 85%" stroke="#888" stroke-width="1" fill="none" /> | |
| <path d="M50% 70% L 60% 85%" stroke="#888" stroke-width="1" fill="none" /> | |
| <path d="M25% 70% L 30% 85%" stroke="#888" stroke-width="1" fill="none" /> | |
| <defs> | |
| <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> | |
| <polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6" /> | |
| </marker> | |
| </defs> | |
| </svg> | |
| <!-- Data Stores --> | |
| <div class="ml-32 mt-8 flex justify-between"> | |
| <div class="bg-gray-100 rounded-lg p-4 w-20 h-20 flex flex-col items-center justify-center"> | |
| <i data-feather="database" class="text-gray-500"></i> | |
| <span class="text-xs text-gray-700 mt-2 text-center">Municipal Zoning Rules</span> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-4 w-20 h-20 flex flex-col items-center justify-center"> | |
| <i data-feather="database" class="text-gray-500"></i> | |
| <span class="text-xs text-gray-700 mt-2 text-center">Owner Consent Registry</span> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-4 w-20 h-20 flex flex-col items-center justify-center"> | |
| <i data-feather="database" class="text-gray-500"></i> | |
| <span class="text-xs text-gray-700 mt-2 text-center">Compliance Log</span> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-4 w-20 h-20 flex flex-col items-center justify-center"> | |
| <i data-feather="database" class="text-gray-500"></i> | |
| <span class="text-xs text-gray-700 mt-2 text-center">Anchoring Method Catalog</span> | |
| </div> | |
| </div> | |
| <!-- Measurement Indicators --> | |
| <div class="ml-32 mt-12 grid grid-cols-4 gap-6"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <h4 class="font-medium text-sm text-blue-800 mb-2">P1 Indicators</h4> | |
| <ul class="text-xs text-gray-700 space-y-1"> | |
| <li>Policy-violation rate</li> | |
| <li>Average review time</li> | |
| <li>Appeal reversal rate</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <h4 class="font-medium text-sm text-purple-800 mb-2">P2 Indicators</h4> | |
| <ul class="text-xs text-gray-700 space-y-1"> | |
| <li>Anchoring accuracy</li> | |
| <li>Latency</li> | |
| <li>Privacy incidents</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <h4 class="font-medium text-sm text-green-800 mb-2">P3 Indicators</h4> | |
| <ul class="text-xs text-gray-700 space-y-1"> | |
| <li>Placements requiring revision</li> | |
| <li>Takedown response time</li> | |
| <li>Owner-consent coverage</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <h4 class="font-medium text-sm text-yellow-800 mb-2">P4 Indicators</h4> | |
| <ul class="text-xs text-gray-700 space-y-1"> | |
| <li>Successful gate passes</li> | |
| <li>Exposure complaints</li> | |
| <li>Payment refusal rate</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Legend --> | |
| <div class="bg-gray-100 rounded-lg p-6 max-w-2xl mx-auto"> | |
| <h3 class="font-bold text-gray-800 mb-4">Diagram Legend</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="bg-blue-50 border border-blue-200 rounded-xl w-8 h-8 mt-1"></div> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-800">Rounded Rectangle</h4> | |
| <p class="text-xs text-gray-600">Activity/phase</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <svg width="30" height="30"> | |
| <path d="M15 5 L25 15 L15 25 L5 15 Z" stroke="#888" stroke-width="2" fill="none" /> | |
| </svg> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-800">Diamond</h4> | |
| <p class="text-xs text-gray-600">Optional decision</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="bg-gray-200 rounded-lg w-8 h-8 flex items-center justify-center mt-1"> | |
| <i data-feather="database" class="w-4 h-4 text-gray-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-800">Cylinder</h4> | |
| <p class="text-xs text-gray-600">Data store</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <svg width="30" height="30"> | |
| <path d="M5 15 H25" stroke="#3b82f6" stroke-width="2" stroke-dasharray="5,5" /> | |
| </svg> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-800">Dotted Arrow</h4> | |
| <p class="text-xs text-gray-600">Feedback/iteration</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <svg width="30" height="30"> | |
| <path d="M5 15 H25" stroke="#3b82f6" stroke-width="2" /> | |
| <polygon points="25,12 30,15 25,18" fill="#3b82f6" /> | |
| </svg> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-800">Solid Arrow</h4> | |
| <p class="text-xs text-gray-600">Primary flow</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Caption --> | |
| <div class="mt-8 text-center text-sm text-gray-600 max-w-3xl mx-auto"> | |
| <p>Figure 1. Four-Phase Governance Framework for Anchored Digital Assets in AR. The model organizes governance into normative (P1), technical (P2), spatial (P3), and user-access (P4) layers across responsible actors. It emphasizes continuous feedback, auditable decisions, and measurable indicators without terminal outcomes.</p> | |
| </div> | |
| </div> | |
| <script> | |
| AOS.init(); | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |