Alphaomegallc.: Viral https://claude.ai/public/artifacts/bd015265-6bdb-442c-822a-ba110951d959

https://claude.ai/public/artifacts/1be72a85-8fe5-4120-90af-9617fe2880fa,https://claude.ai/public/artifacts/bd015265-6bdb-442c-822a-ba110951d959

import React, { useState, useEffect } from 'react';

import { Sparkles, TrendingUp, Download, Share2, Crown, Zap, DollarSign, Users } from 'lucide-react';

export default function ViralAIApp() {

const [credits, setCredits] = useState(3);

const [isPremium, setIsPremium] = useState(false);

const [generating, setGenerating] = useState(false);

const [content, setContent] = useState(null);

const [prompt, setPrompt] = useState('');

const [userStats, setUserStats] = useState({ shares: 0, downloads: 0 });

const [showPaywall, setShowPaywall] = useState(false);

const contentTypes = [

{ id: 'meme', name: 'Viral Meme', icon: '😂', cost: 1 },

{ id: 'quote', name: 'Quote Card', icon: '💭', cost: 1 },

{ id: 'story', name: 'Mini Story', icon: '📖', cost: 2 },

{ id: 'hook', name: 'Viral Hook', icon: '🎣', cost: 1 }

];

const [selectedType, setSelectedType] = useState(contentTypes[0]);

const generateContent = async () => {

if (credits < selectedType.cost && !isPremium) {

setShowPaywall(true);

return;

}

setGenerating(true);

// Simulate AI generation

setTimeout(() => {

const mockContent = {

meme: {

title: "When you realize it's already December",

image: "🎄",

text: "Me: Just got through January\nAlso me: It's almost 2026"

quote: {

title: "Daily Motivation",

quote: "Your future is created by what you do today, not tomorrow.",

author: "- Unknown"

story: {

title: "The Last Message",

text: "She checked her phone one last time. 'I'm sorry' - sent 3 years ago, never delivered. The wifi finally connected."

hook: {

title: "Viral Hook Generator",

hooks: [

"Nobody talks about this, but...",

"I lost $50k learning this lesson:",

"Here's what they don't tell you about success:",

"This changed everything for me:"

]

}

};

setContent(mockContent[selectedType.id]);

if (!isPremium) setCredits(prev => prev - selectedType.cost);

setGenerating(false);

}, 2000);

};

const handleShare = () => {

setUserStats(prev => ({ ...prev, shares: prev.shares + 1 }));

// In real app: integrate with Web Share API or social platforms

alert('Share functionality - would integrate with social platforms');

};

const handleDownload = () => {

setUserStats(prev => ({ ...prev, downloads: prev.downloads + 1 }));

// In real app: generate and download image

alert('Download functionality - would generate high-res image');

};

const handleUpgrade = (plan) => {

// In real app: integrate with PayPal SDK

alert(`Payment Integration:\n\nThis would redirect to PayPal checkout for ${plan}\n\nPayPal Email: maroapeebles/paypal\n\nNote: Actual payment processing requires:\n- PayPal Business Account\n- Server-side integration\n- Secure API keys\n- PCI compliance`);

// Demo: simulate upgrade

if (plan === 'premium') {

setIsPremium(true);

setCredits(999);

setShowPaywall(false);

}

};

return (

{/* Header */}

<h1 className="text-2xl font-bold">ViralAI</h1>

</div>

<span className="font-semibold">{isPremium ? '∞' : credits} credits</span>

</div>

{!isPremium && (

<button

onClick={() => setShowPaywall(true)}

className="flex items-center gap-2 bg-gradient-to-r from-yellow-400 to-orange-500 text-black px-4 py-2 rounded-full font-bold hover:scale-105 transition"

Go Premium

</button>

)}

</div>

{/* Stats Bar */}

<span className="text-sm opacity-75">Viral Score</span>

</div>

{userStats.shares * 10 + userStats.downloads * 5}

</div>

<span className="text-sm opacity-75">Shares</span>

</div>

<div className="text-3xl font-bold">{userStats.shares}</div>

</div>

<span className="text-sm opacity-75">Downloads</span>

</div>

<div className="text-3xl font-bold">{userStats.downloads}</div>

</div>

{/* Content Type Selection */}

<h2 className="text-xl font-bold mb-4">Choose Content Type</h2>

{contentTypes.map((type) => (

<button

key={type.id}

onClick={() => setSelectedType(type)}

className={`p-4 rounded-xl border-2 transition ${

selectedType.id === type.id

? 'border-yellow-400 bg-white bg-opacity-20'

: 'border-white border-opacity-20 bg-white bg-opacity-10 hover:bg-opacity-20'

}`}

<div className="text-sm opacity-75">{type.cost} credit{type.cost > 1 ? 's' : ''}</div>

</button>

))}

</div>

{/* Generator */}

<label className="block text-sm font-semibold mb-2">Your Idea (Optional)</label>

<input

type="text"

value={prompt}

onChange={(e) => setPrompt(e.target.value)}

placeholder="e.g., 'motivational fitness quote' or leave blank for random"

className="w-full bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg px-4 py-3 text-white placeholder-white placeholder-opacity-50 focus:outline-none focus:border-yellow-400"

</div>

<button

onClick={generateContent}

disabled={generating || (credits < selectedType.cost && !isPremium)}

className={`w-full py-4 rounded-lg font-bold text-lg transition flex items-center justify-center gap-2 ${

generating || (credits < selectedType.cost && !isPremium)

? 'bg-gray-600 cursor-not-allowed'

: 'bg-gradient-to-r from-pink-500 to-purple-500 hover:scale-105'

}`}

{generating ? (

Generating Magic...

</>

) : (

Generate Viral Content

</>

)}

</button>

</div>

{/* Generated Content */}

{content && (

<h3 className="text-2xl font-bold mb-4">{content.title}</h3>

{content.image && (

<div className="text-8xl text-center mb-4">{content.image}</div>

)}

{content.text && (

<p className="text-lg mb-4 whitespace-pre-line">{content.text}</p>

)}

{content.quote && (

<p className="text-2xl font-serif italic mb-2">"{content.quote}"</p>

<p className="text-lg opacity-75">{content.author}</p>

</div>

)}

{content.hooks && (

{content.hooks.map((hook, idx) => (

{hook}

</div>

))}

</div>

)}

<button

onClick={handleDownload}

className="flex-1 bg-green-600 hover:bg-green-700 py-3 rounded-lg font-semibold flex items-center justify-center gap-2 transition"

Download

</button>

<button

onClick={handleShare}

className="flex-1 bg-blue-600 hover:bg-blue-700 py-3 rounded-lg font-semibold flex items-center justify-center gap-2 transition"

</button>

</div>

)}

</div>

{/* Paywall Modal */}

{showPaywall && (

<h2 className="text-3xl font-bold mb-2">Unlock Unlimited Creativity</h2>

<p className="text-lg opacity-75">Join 50,000+ creators going viral daily</p>

</div>

<div className="text-xl font-bold mb-2">Daily Pass</div>

<li>✓ 50 credits</li>

<li>✓ All content types</li>

<li>✓ HD downloads</li>

<li>✓ 24 hour access</li>

</ul>

<button

onClick={() => handleUpgrade('daily')}

className="w-full bg-blue-600 hover:bg-blue-700 py-3 rounded-lg font-semibold transition"

Get Daily Pass

</button>

</div>

BEST VALUE

</div>

<div className="text-xl font-bold mb-2">Premium</div>

<li>✓ Unlimited credits</li>

<li>✓ Priority generation</li>

<li>✓ Advanced AI models</li>

<li>✓ No watermarks</li>

<li>✓ Early access features</li>

</ul>

<button

onClick={() => handleUpgrade('premium')}

className="w-full bg-black text-white hover:bg-gray-900 py-3 rounded-lg font-semibold transition"

Go Premium

</button>

</div>

<button

onClick={() => setShowPaywall(false)}https://claude.ai/public/artifacts/e4979333-0f7b-4b4b-a43f-2e598b34052eimport React, { useState, useEffect } from 'react';

import { Sparkles, TrendingUp, Download, Share2, Crown, Zap, DollarSign, Users } from 'lucide-react';

export default function ViralAIApp() {

const [credits, setCredits] = useState(3);

const [isPremium, setIsPremium] = useState(false);

const [generating, setGenerating] = useState(false);

const [content, setContent] = useState(null);

const [prompt, setPrompt] = useState('');

const [userStats, setUserStats] = useState({ shares: 0, downloads: 0 });

const [showPaywall, setShowPaywall] = useState(false);

const [searchResults, setSearchResults] = useState(null);

const [searching, setSearching] = useState(false);

const contentTypes = [

{ id: 'meme', name: 'Viral Meme', icon: '😂', cost: 1 },

{ id: 'quote', name: 'Quote Card', icon: '💭', cost: 1 },

{ id: 'story', name: 'Mini Story', icon: '📖', cost: 2 },

{ id: 'hook', name: 'Viral Hook', icon: '🎣', cost: 1 },

{ id: 'trending', name: 'Trending Topic', icon: '🔥', cost: 2 }

];

const [selectedType, setSelectedType] = useState(contentTypes[0]);

const generateContent = async () => {

if (credits < selectedType.cost && !isPremium) {

setShowPaywall(true);

return;

}

setGenerating(true);

setSearchResults(null);

// If trending topic selected, search first

if (selectedType.id === 'trending' && prompt) {

setSearching(true);

try {

const response = await fetch("https://api.anthropic.com/v1/messages", {

method: "POST",

headers: {

"Content-Type": "application/json",

body: JSON.stringify({

model: "claude-sonnet-4-20250514",

max_tokens: 1000,

tools: [{

type: "web_search_20250305",

name: "web_search"

}],

messages: [

{

role: "user",

content: `Search for the latest trending information about: ${prompt}. Give me the top 3 most interesting current facts or news.`

}

})

});

const data = await response.json();

const searchText = data.content

.map(item => item.type === "text" ? item.text : "")

.filter(Boolean)

.join("\n");

setSearchResults(searchText);

setSearching(false);

} catch (error) {

console.error("Search error:", error);

setSearching(false);

}

// Simulate AI generation

setTimeout(() => {

const mockContent = {

meme: {

title: "When you realize it's already December",

image: "🎄",

text: "Me: Just got through January\nAlso me: It's almost 2026"

quote: {

title: "Daily Motivation",

quote: "Your future is created by what you do today, not tomorrow.",

author: "- Unknown"

story: {

title: "The Last Message",

text: "She checked her phone one last time. 'I'm sorry' - sent 3 years ago, never delivered. The wifi finally connected."

hook: {

title: "Viral Hook Generator",

hooks: [

"Nobody talks about this, but...",

"I lost $50k learning this lesson:",

"Here's what they don't tell you about success:",

"This changed everything for me:"

]

trending: {

title: `Trending: ${prompt || 'Latest News'}`,

text: searchResults || "Search for a topic to get real-time trending content!",

trending: true

}

};

setContent(mockContent[selectedType.id]);

if (!isPremium) setCredits(prev => prev - selectedType.cost);

setGenerating(false);

}, selectedType.id === 'trending' ? 3000 : 2000);

};

const handleShare = () => {

setUserStats(prev => ({ ...prev, shares: prev.shares + 1 }));

// In real app: integrate with Web Share API or social platforms

alert('Share functionality - would integrate with social platforms');

};

const handleDownload = () => {

setUserStats(prev => ({ ...prev, downloads: prev.downloads + 1 }));

// In real app: generate and download image

alert('Download functionality - would generate high-res image');

};

const handleUpgrade = (plan) => {

// In real app: integrate with PayPal SDK

// Demo: simulate upgrade

if (plan === 'premium') {

setIsPremium(true);

setCredits(999);

setShowPaywall(false);

}

};

return (

{/* Header */}

<h1 className="text-2xl font-bold">ViralAI</h1>

</div>

<span className="font-semibold">{isPremium ? '∞' : credits} credits</span>

</div>

{!isPremium && (

<button

onClick={() => setShowPaywall(true)}

className="flex items-center gap-2 bg-gradient-to-r from-yellow-400 to-orange-500 text-black px-4 py-2 rounded-full font-bold hover:scale-105 transition"

Go Premium

</button>

)}

</div>

{/* Stats Bar */}

<span className="text-sm opacity-75">Viral Score</span>

</div>

{userStats.shares * 10 + userStats.downloads * 5}

</div>

<span className="text-sm opacity-75">Shares</span>

</div>

<div className="text-3xl font-bold">{userStats.shares}</div>

</div>

<span className="text-sm opacity-75">Downloads</span>

</div>

<div className="text-3xl font-bold">{userStats.downloads}</div>

</div>

{/* Content Type Selection */}

<h2 className="text-xl font-bold mb-4">Choose Content Type</h2>

{contentTypes.map((type) => (

<button

key={type.id}

onClick={() => setSelectedType(type)}

className={`p-4 rounded-xl border-2 transition ${

selectedType.id === type.id

? 'border-yellow-400 bg-white bg-opacity-20'

: 'border-white border-opacity-20 bg-white bg-opacity-10 hover:bg-opacity-20'

}`}

<div className="text-sm opacity-75">{type.cost} credit{type.cost > 1 ? 's' : ''}</div>

</button>

))}

</div>

{/* Generator */}

{selectedType.id === 'trending' && (

<span className="font-semibold">Live Search Feature</span>

</div>

This mode uses real-time web search to find trending topics and create viral content based on current events!

</p>

</div>

)}

{selectedType.id === 'trending' ? 'Search Topic (Required)' : 'Your Idea (Optional)'}

</label>

<input

type="text"

value={prompt}

onChange={(e) => setPrompt(e.target.value)}

placeholder={

selectedType.id === 'trending'

? "e.g., 'AI news', 'tech trends', 'viral challenges'"

: "e.g., 'motivational fitness quote' or leave blank for random"

}

className="w-full bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg px-4 py-3 text-white placeholder-white placeholder-opacity-50 focus:outline-none focus:border-yellow-400"

</div>

{searching && (

<span className="text-sm">Searching the web for latest trends...</span>

</div>

)}

<button

onClick={generateContent}

disabled={generating || (credits < selectedType.cost && !isPremium) || (selectedType.id === 'trending' && !prompt)}

className={`w-full py-4 rounded-lg font-bold text-lg transition flex items-center justify-center gap-2 ${

generating || (credits < selectedType.cost && !isPremium) || (selectedType.id === 'trending' && !prompt)

? 'bg-gray-600 cursor-not-allowed'

: 'bg-gradient-to-r from-pink-500 to-purple-500 hover:scale-105'

}`}

{generating ? (

{searching ? 'Searching Web...' : 'Generating Magic...'}

</>

) : (

{selectedType.id === 'trending' ? 'Search & Generate' : 'Generate Viral Content'}

</>

)}

</button>

</div>

{/* Generated Content */}

{content && (

<h3 className="text-2xl font-bold mb-4">{content.title}</h3>

{content.image && (

<div className="text-8xl text-center mb-4">{content.image}</div>

)}

{content.text && (

<p className="text-lg mb-4 whitespace-pre-line">{content.text}</p>

)}

{content.quote && (

<p className="text-2xl font-serif italic mb-2">"{content.quote}"</p>

<p className="text-lg opacity-75">{content.author}</p>

</div>

)}

{content.hooks && (

{content.hooks.map((hook, idx) => (

{hook}

</div>

))}

</div>

)}

{content.trending && searchResults && (

<span className="font-semibold">Live Search Results</span>

</div>

{searchResults}

</div>

)}

<button

onClick={handleDownload}

className="flex-1 bg-green-600 hover:bg-green-700 py-3 rounded-lg font-semibold flex items-center justify-center gap-2 transition"

Download

</button>

<button

onClick={handleShare}

className="flex-1 bg-blue-600 hover:bg-blue-700 py-3 rounded-lg font-semibold flex items-center justify-center gap-2 transition"

</button>

</div>

)}

</div>

{/* Paywall Modal */}

{showPaywall && (

<h2 className="text-3xl font-bold mb-2">Unlock Unlimited Creativity</h2>

<p className="text-lg opacity-75">Join 50,000+ creators going viral daily</p>

</div>

<div className="text-xl font-bold mb-2">Daily Pass</div>

<li>✓ 50 credits</li>

<li>✓ All content types</li>

<li>✓ HD downloads</li>

<li>✓ 24 hour access</li>

</ul>

<button

onClick={() => handleUpgrade('daily')}

className="w-full bg-blue-600 hover:bg-blue-700 py-3 rounded-lg font-semibold transition"

Get Daily Pass

</button>

</div>

BEST VALUE

</div>

<div className="text-xl font-bold mb-2">Premium</div>

<li>✓ Unlimited credits</li>

<li>✓ Priority generation</li>

<li>✓ Advanced AI models</li>

<li>✓ No watermarks</li>

<li>✓ Early access features</li>

</ul>

<button

onClick={() => handleUpgrade('premium')}

className="w-full bg-black text-white hover:bg-gray-900 py-3 rounded-lg font-semibold transition"

Go Premium

</button>

</div>

<button

onClick={() => setShowPaywall(false)}

className="text-sm opacity-75 hover:opacity-100 transition"

Continue with free credits

</button>

</div>

<strong>Payment Integration Note:</strong> In production, this would process payments through PayPal to maroapeebles/paypal. Requires PayPal Business SDK integration with server-side processing for security.

</p>

</div>https://claude.ai/public/artifacts/7ed04dc9-92e2-42dd-83ea-849c0dd24374

</div>

</div>https://claude.ai/public/artifacts/7ed04dc9-92e2-42dd-83ea-849c0dd24374https://claude.ai/public/artifacts/7ed04dc9-92e2-42dd-83ea-849c0dd24374https://claude.ai/public/artifacts/7ed04dc9-92e2-42dd-83ea-849c0dd24374https://claude.ai/public/artifacts/7ed04dc9-92e2-42dd-83ea-849c0dd24374https://claude.ai/public/artifacts/7ed04dc9-92e2-42dd-83ea-849c0dd24374https://claude.ai/public/artifacts/7ed04dc9-92e2-42dd-83ea-849c0dd24374https://claude.ai/public/artifacts/7ed04dc9-92e2-42dd-83ea-849c0dd24374https://claude.ai/public/artifacts/7ed04dc9-92e2-42dd-83ea-849c0dd24374https://claude.ai/public/artifacts/7ed04dc9-92e2-42dd-83ea-849c0dd24374

</div>

)}

</div>

);

}

className="text-sm opacity-75 hover:opacity-100 transition"

Continue with free credits

</button>

</div>

</p>

</div>

)}

</div>

);

}

Alphaomegallc.

Thursday, December 11, 2025

Viral https://claude.ai/public/artifacts/bd015265-6bdb-442c-822a-ba110951d959

No comments:

Post a Comment

Batman alpha7 protocolhttps://claude.ai/public/artifacts/904390fd-57fd-41d4-b084-8f188e3eb738

Report Abuse

Labels