Update index.html

index.html

@@ -7,22 +7,7 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
     <script src="https://unpkg.com/[email protected]/dist/mermaid.min.js"></script>
-    <style>
-        body { font-family: 'Inter', sans-serif; background-color: #111827; color: #f3f4f6; }
-        .hero-bg { background: linear-gradient(to right, #1f2937, #374151); }
-        .accent-color { color: #3b82f6; }
-        .shadow-hover { transition: box-shadow 0.3s ease; }
-        .shadow-hover:hover { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5); }
-        .icon { width: 1.5rem; height: 1.5rem; }
-        #cusdis_thread { margin-top: 2rem; padding: 1.5rem; padding-bottom: 30px; background-color: #1f2937; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); min-height: 200px; overflow: auto; }
-        .mermaid { text-align: center; background-color: #1f2937; padding: 1rem; border-radius: 0.5rem; margin-top: 1rem; }
-        .colored-bullet::before { content: '•'; font-size: 1.5rem; margin-right: 0.5rem; }
-        .blue-circle::before { color: #3b82f6; }
-        .green-circle::before { color: #10b981; }
-        .purple-circle::before { color: #a855f7; }
-        .yellow-circle::before { color: #eab308; }
-        .red-circle::before { color: #ef4444; }
-    </style>
+    <link rel="stylesheet" href="style.css">
     <script>
         mermaid.initialize({ startOnLoad: true, theme: 'dark' });
     </script>
@@ -93,7 +78,7 @@
             </div>
             <div class="bg-gray-800 p-6 rounded-lg shadow-hover">
                 <h3 class="text-xl font-bold mb-2">Web3 Payments 💸</h3>
-                <p>Blockonomics API for fast, secure, decentralized cryptocurrency transactions (starting with Bitcoin, expanding to Solana), ensuring direct payments.</p>
+                <p>Blockonomics API for Bitcoin and Solana for fast, secure, decentralized transactions, with additional payment gateways for fiat/crypto conversion.</p>
             </div>
             <div class="bg-gray-800 p-6 rounded-lg shadow-hover">
                 <h3 class="text-xl font-bold mb-2">Key Management 🔑</h3>
@@ -101,27 +86,27 @@
             </div>
             <div class="bg-gray-800 p-6 rounded-lg shadow-hover">
                 <h3 class="text-xl font-bold mb-2">Backend ⚙️</h3>
-                <p>FastAPI for a scalable, high-performance backend supporting rapid transactions and payment gateway integration.</p>
+                <p>FastAPI for a scalable, high-performance backend supporting rapid transactions and gateway integration.</p>
             </div>
         </section>
 
         <section class="mb-16">
             <h2 class="text-3xl font-bold mb-6 accent-color">Workflow and Key System 🔒</h2>
             <p class="text-lg leading-relaxed mb-4">
-                Our platform’s secure build process and key system ensure seamless, protected transactions for buyers and developers. Starting with Blockonomics for Bitcoin payments and expanding to Solana for faster, low-cost transactions, we integrate multiple payment gateways for accessibility. The Fastly API generates secure access keys for buyers, ensuring safe content delivery. The workflow is designed for efficiency and security, as illustrated below:
+                Our platform ensures secure transactions and content access through a robust workflow. Buyers select games and choose between Blockonomics (Bitcoin) or Solana payments, with plans to integrate additional payment gateways for fiat and other cryptocurrencies. Upon confirmation, the secure build validates transactions, and the Fastly API generates unique access keys for buyers, delivered securely. This process ensures seamless, censorship-resistant access to 18+ content.
             </p>
             <div class="mermaid">
                 graph TD
-                    A[Buyer Selects Game] --> B[Choose Payment Method]
+                    A[Buyer Selects Game 🎮] --> B[Choose Payment Method 💰]
                     B --> C[Blockonomics: Bitcoin Payment]
                     B --> D[Solana Wallet Transaction]
-                    C --> E[Payment Confirmation]
+                    C --> E[Payment Confirmation ✅]
                     D --> E
-                    E --> F[Secure Build: Validate Transaction]
-                    F --> G[Generate Access Key with Fastly API]
-                    G --> H[Deliver Key via Secure Channel]
-                    H --> I[Buyer Accesses 18+ Content]
-                    I --> J[Payment Gateway Integration for Fiat/Crypto]
+                    E --> F[Secure Build: Validate Transaction 🔒]
+                    F --> G[Generate Access Key with Fastly API 🔑]
+                    G --> H[Deliver Key via Secure Channel 📧]
+                    H --> I[Buyer Accesses 18+ Content 🎲]
+                    I --> J[Payment Gateway Integration for Fiat/Crypto 🌐]
                     style A fill:#3b82f6,stroke:#ffffff
                     style E fill:#10b981,stroke:#ffffff
                     style G fill:#a855f7,stroke:#ffffff
@@ -129,14 +114,72 @@
             </div>
         </section>
 
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold mb-6 accent-color">API Examples for Developers 🖥️</h2>
+            <p class="text-lg leading-relaxed mb-4">
+                Our platform provides robust APIs for payment processing and user profile management, enabling developers to integrate seamlessly. Below are example API calls for key functionalities, starting with Blockonomics and Solana, with plans for additional gateways.
+            </p>
+            <h3 class="text-xl font-bold mb-2">Payment Processing (Blockonomics)</h3>
+            <pre class="bg-gray-900 p-4 rounded-lg"><code>
+# Initiate Bitcoin payment with Blockonomics
+curl -X POST https://api.blockonomics.co/api/new_address \
+  -H "Authorization: Bearer YOUR_API_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{"callback_url": "https://your-platform.com/callback"}'
+
+# Response
+{
+  "address": "3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy",
+  "status": "success"
+}
+            </code></pre>
+            <h3 class="text-xl font-bold mb-2 mt-4">Payment Processing (Solana)</h3>
+            <pre class="bg-gray-900 p-4 rounded-lg"><code>
+# Initiate Solana payment
+const { Connection, PublicKey, Transaction, SystemProgram } = require('@solana/web3.js');
+
+async function initiateSolanaPayment(senderKeypair, receiverPublicKey, amount) {
+    const connection = new Connection("https://api.mainnet-beta.solana.com");
+    const transaction = new Transaction().add(
+        SystemProgram.transfer({
+            fromPublicKey: senderKeypair.publicKey,
+            toPublicKey: new PublicKey(receiverPublicKey),
+            lamports: amount * 1000000000 // Convert SOL to lamports
+        })
+    );
+    const signature = await connection.sendTransaction(transaction, [senderKeypair]);
+    await connection.confirmTransaction(signature);
+    return signature;
+}
+            </code></pre>
+            <h3 class="text-xl font-bold mb-2 mt-4">User Profile Creation</h3>
+            <pre class="bg-gray-900 p-4 rounded-lg"><code>
+# Create user profile via FastAPI endpoint
+curl -X POST https://your-platform.com/api/users \
+  -H "Content-Type: application/json" \
+  -d '{
+    "username": "gamer123",
+    "email": "[email protected]",
+    "wallet_address": "3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy"
+  }'
+
+# Response
+{
+  "user_id": "12345",
+  "status": "created",
+  "access_key": "generated_key_abc123"
+}
+            </code></pre>
+        </section>
+
         <section class="mb-16">
             <h2 class="text-3xl font-bold mb-6 accent-color">GhostAI Expertise 🤖</h2>
             <p class="text-lg leading-relaxed mb-4">
-                GhostAI is a leader in AI, blockchain, and payment systems, with a proven track record. See our recent AI models like internalRAGCX and ccengine1 at <a href="https://huggingface.co/ghostai1" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:underline">Hugging Face profile</a>.
+                GhostAI is a leader in AI, blockchain, and payment systems, with a proven track record. Our expertise is showcased through projects like the GhostAI Music Generator at <a href="https://huggingface.co/ghostai1/GHOSTSONAFB" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:underline">GHOSTSONAFB</a> and our GhostPack at <a href="https://huggingface.co/spaces/ghostai1/GhostPack" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:underline">GhostPack</a>. My CV, built with Veo3, highlights my extensive experience in AI, blockchain, and Web3 development, available upon request via <a href="https://huggingface.co/ghostai1" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:underline">Hugging Face profile</a>.
             </p>
             <ul class="list-none space-y-4">
                 <li class="bg-gray-800 p-6 rounded-lg shadow-hover blue-circle colored-bullet">
-                    <strong>Payment Systems 💳</strong>: Developed multiple fast, secure payment systems, including automated flows and cryptocurrency integrations for platforms like ours.
+                    <strong>Payment Systems 💳</strong>: Developed multiple fast, secure payment systems, including automated flows and cryptocurrency integrations.
                 </li>
                 <li class="bg-gray-800 p-6 rounded-lg shadow-hover green-circle colored-bullet">
                     <strong>AI & Machine Learning 🤖</strong>: Built solutions in NLP, RAG, and CAG, including the GhostAI Music Generator and Arabic law AI application.
@@ -157,7 +200,7 @@
             <h2 class="text-3xl font-bold mb-6 accent-color">Proven Builds 🏗️</h2>
             <ul class="list-none space-y-4">
                 <li class="bg-gray-800 p-6 rounded-lg shadow-hover blue-circle colored-bullet">
-                    <strong>GhostAI Music Generator 🎵</strong>: An AI-powered tool for music creation using NLP and RAG.
+                    <strong>GhostAI Music Generator ���</strong>: An AI-powered tool for music creation using NLP and RAG, hosted at <a href="https://huggingface.co/ghostai1/GHOSTSONAFB" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:underline">GHOSTSONAFB</a>.
                 </li>
                 <li class="bg-gray-800 p-6 rounded-lg shadow-hover green-circle colored-bullet">
                     <strong>Arabic Law AI Application ⚖️</strong>: A system for analyzing legal texts, leveraging advanced machine learning.
@@ -171,9 +214,22 @@
                 <li class="bg-gray-800 p-6 rounded-lg shadow-hover red-circle colored-bullet">
                     <strong>Beta Payment Platform 🚀</strong>: Live beta at <a href="https://huggingface.co/spaces/ghostai1/savegaming" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:underline">our Space</a> for 18+ gaming transactions.
                 </li>
+                <li class="bg-gray-800 p-6 rounded-lg shadow-hover blue-circle colored-bullet">
+                    <strong>GhostPack 🛠️</strong>: A collection of AI and Web3 tools, available at <a href="https://huggingface.co/spaces/ghostai1/GhostPack" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:underline">GhostPack</a>.
+                </li>
             </ul>
         </section>
 
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold mb-6 accent-color">Join Our Community 🎮</h2>
+            <p class="text-lg leading-relaxed mb-4">
+                Engage with our mission through our Steam group, saveadultgaming (SAGHOST), where we discuss creative freedom and the future of 18+ gaming. Join us at <a href="https://steamcommunity.com/groups/saveadultgaming" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:underline">Steam Community</a>.
+            </p>
+            <div class="embed-container">
+                <iframe src="https://steamcommunity.com/groups/saveadultgaming/discussions/0/" title="Steam Group Discussion" loading="lazy" aria-label="Embedded Steam Group Discussion"></iframe>
+            </div>
+        </section>
+
         <section class="mb-16">
             <h2 class="text-3xl font-bold mb-6 accent-color">Support Our Vision 🤝</h2>
             <p class="text-lg leading-relaxed mb-4">