Accessible Neon Effects System
Mastodon
Open in New Tab
×
The Kings ark dashboard "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Copy, Check, Download, ExternalLink } from "lucide-react" export function EmbedCode() { const [copied, setCopied] = useState(false) const [copiedAdvanced, setCopiedAdvanced] = useState(false) const embedCode = `\n
\n \n
\n ✕ Close\n
\n
\n\n` const advancedEmbedCode = `\n
\n \n \n
\n
\n

Loading The Kings Ark™...

\n

Your gateway to global connections

\n
\n \n \n \n \n
\n
\n 5:00\n
\n \n
\n \n \n
\n

Tap anywhere to close or wait for auto-redirect

\n \n
\n \n \n
\n

Powered by The Kings Ark™

\n

Kings Idea Connections & Outsourcing

\n
\n
\n\n\n\n` const copyToClipboard = (code: string, isAdvanced = false) => { navigator.clipboard.writeText(code) if (isAdvanced) { setCopiedAdvanced(true) setTimeout(() => setCopiedAdvanced(false), 2000) } else { setCopied(true) setTimeout(() => setCopied(false), 2000) } } const downloadCode = (code: string, filename: string) => { const blob = new Blob([code], { type: "text/html" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = filename document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } return (
{/* Basic Embed Code */}

Basic Embed Code - The Kings Ark™

Simple integration for your website with 5-minute auto-redirect

              {embedCode}
{/* Advanced Embed Code */}

Advanced Embed Code - The Kings Ark™

Full-featured with neon effects, analytics, loading screen, and mobile optimization 

              {advancedEmbedCode}
{/* Instructions */}

Implementation Instructions

Basic Setup

  • Copy either the basic or advanced embed code
  • Paste it just before the closing </body> tag in your HTML
  • Replace 'your-kings-ark-domain.com' with your actual domain
  • The welcome screen shows for 5 minutes or until user interaction
  • Automatically redirects to kingsideaconnections.org after timeout
  • Fully mobile-responsive with touch controls

Advanced Features

  • Loading screen with animated neon spinner
  • Live countdown timer with color changes
  • Mobile-optimized touch controls and bottom bar
  • Google Analytics & Facebook Pixel integration
  • Smooth neon fade transitions and effects
  • Keyboard accessibility (ESC to close)
  • Page visibility handling (pauses when tab hidden)
  • Branded footer with company information

✨ New Features in The Kings Ark™:

  • Enhanced neon visual controls with background mode switching
  • Accessibility mode for users with light sensitivity
  • Multiple background themes (Dark, Light, Green, Water, Cosmic, Sunset)
  • Voice welcome messages with AI-powered greetings
  • Real-time activity tracking and timer reset functionality

Important Notes:

  • Test the embed on both desktop and mobile devices
  • Ensure your domain allows iframe embedding
  • The advanced version includes analytics tracking (requires Google Analytics)
  • Both versions are fully responsive and mobile-friendly
  • The app automatically redirects to kingsideaconnections.org after 5 minutes
  • Users can interact with neon controls and background themes
) }