Embed

<div class="flipbook">
  <div class="text-area" id="flipText"></div>
  
  <div class="nav-buttons">
    <button onclick="prevPage()" id="prevBtn" disabled>Previous</button>
    <button onclick="nextPage()" id="nextBtn">Next</button>
  </div>

  <div class="read-editions-container">
    <button onclick="window.open('https://oxiaai.com/editions', '_blank')">Read Editions</button>
  </div>
</div>

<style>
  .flipbook {
    width: 100%;
    max-width: 600px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    padding: 25px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: "Segoe UI", Arial, sans-serif;
  }

  .text-area {
    min-height: 240px;
    font-size: 16px;
    line-height: 1.6;
    color: #1a1a1a;
    white-space: pre-wrap;
    margin-bottom: 20px;
    transition: opacity 0.4s ease;
  }

  .nav-buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  .nav-buttons button {
    background: #111;
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 15px;
    border-radius: 8px;
    cursor: pointer;
    flex: 1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
    font-weight: 600;
  }

  .nav-buttons button:hover:not(:disabled) {
    background: #333;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  }

  .nav-buttons button:disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
    box-shadow: none;
  }

  .read-editions-container {
    margin-top: 25px;
    text-align: center;
  }

  .read-editions-container button {
    background: #000;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    min-width: 180px;
    font-weight: 600;
  }

  .read-editions-container button:hover {
    background: #222;
    transform: scale(1.05);
  }

  @media (max-width: 480px) {
    .text-area {
      font-size: 14px;
    }

    .nav-buttons button,
    .read-editions-container button {
      font-size: 14px;
      padding: 10px 16px;
    }
  }
</style>

<script>
  (function() {
    const pages = [
      `OXIAAI EDITION

Welcome to OxiaAI.
A modular showcase where Artificial Intelligence meets culture, design, and storytelling.
Every release transforms raw ideas into curated, intelligent experiences.`,
      `WHAT YOU’LL EXPLORE
• Travel — Smart itineraries & predictive destinations
• Technology — AI platforms & creative digital systems
• Fashion & Jewellery — Heritage with algorithmic foresight
• Food & Dining — Fusion cuisines & taste intelligence
• Lifestyle & Wellness — Balance in the age of automation
• Voices — Perspectives from global innovators`,
      `GLOBAL DESTINATIONS 2025

Where to Travel Next:
• Kyoto, Japan — Blossoms + tradition
• Amalfi Coast, Italy — Timeless coastlines
• Santorini, Greece — Iconic sunsets, elevated`,
      `OUR PHILOSOPHY

OxiaAI believes intelligence is more than data —
it’s rhythm, perception, and resonance.
We curate content that doesn’t just inform,
it transforms how culture is experienced.`,
      `JOIN THE NETWORK

Explore more editions and sequences at OxiaAI.
Stay connected, stay adaptive,
and discover a new layer of global intelligence.`
    ];

    let currentPage = 0;
    let typingInterval;
    let charIndex = 0;

    const flipText = document.getElementById('flipText');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    function typePageText(text) {
      clearInterval(typingInterval);
      flipText.style.opacity = 0;

      setTimeout(() => {
        flipText.textContent = '';
        charIndex = 0;
        flipText.style.opacity = 1;

        typingInterval = setInterval(() => {
          if (charIndex < text.length) {
            flipText.textContent += text.charAt(charIndex);
            charIndex++;
          } else {
            clearInterval(typingInterval);
          }
        }, 22); // typing speed
      }, 280);
    }

    function updateButtons() {
      prevBtn.disabled = currentPage === 0;
      nextBtn.disabled = currentPage === pages.length - 1;
    }

    window.prevPage = function() {
      if (currentPage > 0) {
        currentPage--;
        typePageText(pages[currentPage]);
        updateButtons();
      }
    };

    window.nextPage = function() {
      if (currentPage < pages.length - 1) {
        currentPage++;
        typePageText(pages[currentPage]);
        updateButtons();
      }
    };

    window.initFlipbook = function() {
      currentPage = 0;
      typePageText(pages[currentPage]);
      updateButtons();
    };
  })();

  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    initFlipbook();
  } else {
    document.addEventListener('DOMContentLoaded', initFlipbook);
  }
</script>

<section id="oxiaai-automation" style="max-width:600px;margin:30px auto;padding:20px;background:#fff;border-radius:10px;font-family:'Segoe UI',sans-serif;box-shadow:0 0 10px rgba(0,0,0,0.04);text-align:center;position:relative;">
  <h2 style="color:#000;font-weight:500;font-size:18px;margin-bottom:8px;">OxiaAI Live Automation</h2>
  <p style="color:#555;font-weight:300;font-size:13px;margin-top:0;">Enter your brand name to simulate real-time AI audience engagement</p>

  <input id="brandInput" type="text" placeholder="Your Brand Name" style="width:90%;max-width:360px;padding:8px;font-size:13px;margin-top:10px;border-radius:6px;border:1px solid #ccc;outline:none;">
  
  <button onclick="startAutomation()" style="margin-top:12px;padding:8px 16px;background:#111;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;font-size:13px;">Run Simulation</button>
  
  <div id="automationOutput" style="margin-top:25px;min-height:150px;font-size:13px;color:#333;font-weight:300;"></div>
  <div id="facesContainer" style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;"></div>
  <div id="finalMsg" style="display:none;margin-top:20px;color:#000;font-weight:400;font-size:13px;"></div>
</section>

<script>
const faces = [
  "https://randomuser.me/api/portraits/women/44.jpg",
  "https://randomuser.me/api/portraits/men/32.jpg",
  "https://randomuser.me/api/portraits/women/65.jpg",
  "https://randomuser.me/api/portraits/men/22.jpg"
];

function startAutomation() {
  const brand = document.getElementById('brandInput').value.trim();
  const output = document.getElementById('automationOutput');
  const finalMsg = document.getElementById('finalMsg');
  const facesContainer = document.getElementById('facesContainer');

  if (!brand) {
    output.innerHTML = "<p style='color:red;'>⚠ Please enter a brand name.</p>";
    return;
  }

  output.innerHTML = '';
  finalMsg.style.display = 'none';
  facesContainer.innerHTML = '';

  const messages = [
    `Connecting OxiaAI intelligence to <strong>${brand}</strong>...`,
    "Scanning live cultural signals...",
    "Mapping influence networks...",
    "Engaging adaptive interest clusters...",
    "Generating predictive insights..."
  ];

  let i = 0;

  const interval = setInterval(() => {
    if (i < messages.length) {
      output.innerHTML += `<p>${messages[i]}</p>`;
      showRandomFace();
      i++;
    } else {
      clearInterval(interval);
      finalMsg.innerHTML = "✅ Audience signals detected. <strong>Contact OxiaAI to activate full automation.</strong>";
      finalMsg.style.display = 'block';
    }
  }, 1200);
}

function showRandomFace() {
  const facesContainer = document.getElementById('facesContainer');
  const faceURL = faces[Math.floor(Math.random() * faces.length)];
  const faceImg = document.createElement('img');

  const positions = ['top', 'left', 'right', 'bottom'];
  const randomPos = positions[Math.floor(Math.random() * positions.length)];

  faceImg.src = faceURL;
  faceImg.style.position = 'absolute';
  faceImg.style.width = '30px';
  faceImg.style.height = '30px';
  faceImg.style.borderRadius = '50%';
  faceImg.style.transition = 'all 1s ease-in-out';
  faceImg.style.opacity = 0.85;

  if (randomPos === 'top') {
    faceImg.style.top = '0';
    faceImg.style.left = `${Math.random() * 90}%`;
  } else if (randomPos === 'bottom') {
    faceImg.style.bottom = '0';
    faceImg.style.left = `${Math.random() * 90}%`;
  } else if (randomPos === 'left') {
    faceImg.style.top = `${Math.random() * 90}%`;
    faceImg.style.left = '0';
  } else {
    faceImg.style.top = `${Math.random() * 90}%`;
    faceImg.style.right = '0';
  }

  facesContainer.appendChild(faceImg);
  setTimeout(() => {
    facesContainer.removeChild(faceImg);
  }, 2000);
}
</script>

OxiaAI Live Automation

Discover with OxiaAI