flitrx's picture
Update index.html
1258116 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TradingView Strategy Generator - AI-Powered PineScript Creator</title>
<meta name="description" content="Convert your trading strategy ideas into PineScript code instantly with our AI-powered TradingView strategy generator. Free, no coding required.">
<meta name="keywords" content="tradingview, pinescript, trading strategy, algo trading, technical analysis, AI trading, strategy generator">
<meta name="author" content="TradingView Strategy Generator">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://flitrx.net/">
<meta property="og:title" content="TradingView Strategy Generator - AI-Powered PineScript Creator">
<meta property="og:description" content="Convert your trading strategy ideas into PineScript code instantly with our AI-powered TradingView strategy generator.">
<meta property="og:image" content="https://placehold.co/1200x630/050510/e0e0ff/png?text=TradingView%20Strategy%20Generator&font=orbitron">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://flitrx.net/">
<meta property="twitter:title" content="TradingView Strategy Generator - AI-Powered PineScript Creator">
<meta property="twitter:description" content="Convert your trading strategy ideas into PineScript code instantly with our AI-powered TradingView strategy generator.">
<meta property="twitter:image" content="https://placehold.co/1200x630/050510/e0e0ff/png?text=TradingView%20Strategy%20Generator&font=orbitron">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="canonical" href="https://flitrx.net/" />
<link rel="alternate" hreflang="en" href="https://flitrx.net/" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Rajdhani:wght@300;400;500;600;700&display=swap');
body {
background-color: #050510;
color: #e0e0ff;
min-height: 100vh;
position: relative;
overflow-x: hidden;
font-family: 'Rajdhani', sans-serif;
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(0, 225, 255, 0.05) 0%, transparent 30%),
radial-gradient(circle at 80% 70%, rgba(255, 54, 252, 0.05) 0%, transparent 30%);
pointer-events: none;
z-index: -1;
}
.ui-panel {
background: rgba(26, 26, 46, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(0, 225, 255, 0.1);
transition: all 0.3s ease;
}
.ui-panel:hover {
border-color: rgba(0, 225, 255, 0.3);
}
.news-card {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.news-card:hover {
transform: translateY(-3px);
}
.news-card::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #00e1ff, #ff36fc);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.news-card:hover::after {
transform: scaleX(1);
}
.gradient-text {
background: linear-gradient(90deg, #00e1ff, #ff36fc);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200% 200%;
animation: gradient 8s ease infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.cyber-button {
position: relative;
overflow: hidden;
transition: all 0.3s;
}
.cyber-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(0, 225, 255, 0.2),
transparent
);
transition: 0.5s;
}
.cyber-button:hover::before {
left: 100%;
}
.grid-pattern {
background-image:
linear-gradient(rgba(0, 225, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 225, 255, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
}
.marquee {
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 25s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
.holographic-effect {
position: relative;
}
.holographic-effect::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(135deg,
rgba(0, 225, 255, 0.03) 0%,
rgba(255, 54, 252, 0.03) 50%,
rgba(0, 255, 157, 0.03) 100%);
pointer-events: none;
z-index: -1;
}
.category-btn {
transition: all 0.3s ease;
}
.category-btn:hover {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(0, 225, 255, 0.5);
}
.loading-spinner {
border: 3px solid rgba(0, 225, 255, 0.3);
border-radius: 50%;
border-top: 3px solid #00e1ff;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.source-tag {
background: rgba(0, 225, 255, 0.1);
border-left: 3px solid #00e1ff;
}
.date-badge {
background: rgba(255, 54, 252, 0.1);
border-left: 3px solid #ff36fc;
}
</style>
</head>
<body class="min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<!-- Header -->
<header class="mb-8">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</div>
<h1 class="text-2xl font-bold text-white">TradingView Strategy Generator</h1>
</div>
<div class="text-sm text-gray-400">
Powered by DeepSeek Chimera
</div>
</div>
<p class="mt-2 text-gray-400">Describe your trading strategy in plain English and get PineScript code</p>
</header>
<!-- Market Data Section -->
<div class="mb-8 rounded-xl overflow-hidden shadow-lg gradient-bg">
<div class="p-4 border-b border-gray-700">
<h2 class="text-lg font-semibold text-white">US Market Update</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 divide-x divide-gray-700">
<div class="p-4">
<h3 class="text-green-400 font-medium mb-2">Top Gainers</h3>
<div id="top-gainers" class="space-y-2"></div>
</div>
<div class="p-4">
<h3 class="text-red-400 font-medium mb-2">Top Losers</h3>
<div id="top-losers" class="space-y-2"></div>
</div>
<div class="p-4">
<h3 class="text-blue-400 font-medium mb-2">Most Active</h3>
<div id="most-active" class="space-y-2"></div>
</div>
</div>
</div>
<!-- Chat Container -->
<div class="rounded-xl overflow-hidden shadow-lg gradient-bg">
<!-- Messages -->
<div id="chat-messages" class="h-96 overflow-y-auto p-4 space-y-4">
<div class="message-ai p-4 rounded-lg">
<div class="flex items-start space-x-3">
<div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">AI</div>
<div class="flex-1">
<p class="text-white">Hello! I'm your TradingView strategy assistant. Describe the trading strategy you'd like me to convert to PineScript (v6). For example:</p>
<ul class="list-disc pl-5 mt-2 text-gray-300 space-y-1">
<li>"Create a strategy that buys when RSI is below 30 and sells when RSI is above 70"</li>
<li>"Make a moving average crossover strategy with 50 and 200 period EMAs"</li>
<li>"Generate a Bollinger Band strategy with exits when price touches the opposite band"</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Input Area -->
<div class="border-t border-gray-700 p-4">
<form id="prompt-form" class="flex space-x-2">
<input
type="text"
id="user-prompt"
placeholder="Describe your trading strategy..."
class="flex-1 bg-gray-700 text-white rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
autocomplete="off"
required
>
<button
type="submit"
id="submit-btn"
class="bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg px-6 py-3 transition-colors duration-200 flex items-center justify-center"
>
<span>Generate</span>
<svg id="submit-icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
<svg id="loading-icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 hidden animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</button>
</form>
<p class="text-xs text-gray-400 mt-2">Note: This is a demo using the free DeepSeek Chimera model. For complex strategies, results may vary.</p>
</div>
</div>
<!-- Features Section -->
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-gray-800 rounded-xl p-6">
<div class="text-blue-400 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-white mb-2">AI-Powered</h3>
<p class="text-gray-400">Uses advanced AI to understand your trading strategy description and convert it to PineScript.</p>
</div>
<div class="bg-gray-800 rounded-xl p-6">
<div class="text-green-400 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-white mb-2">PineScript v6</h3>
<p class="text-gray-400">Generates clean, modern PineScript code compatible with TradingView's latest version.</p>
</div>
<div class="bg-gray-800 rounded-xl p-6">
<div class="text-purple-400 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-white mb-2">Secure</h3>
<p class="text-gray-400">Your strategy descriptions are processed securely and not stored permanently.</p>
</div>
</div>
<!-- Footer -->
<footer class="mt-12 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm">
<p>TradingView Strategy Generator - AI-powered PineScript creation</p>
<p class="mt-1">This is a demo application. Always test strategies before using them with real funds.</p>
</footer>
</div>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "TradingView Strategy Generator",
"description": "AI-powered tool that converts trading strategy descriptions into PineScript code for TradingView",
"applicationCategory": "FinanceApplication",
"operatingSystem": "Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"creator": {
"@type": "Organization",
"name": "TradingView Strategy Generator"
}
}
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Fetch market data
async function fetchMarketData() {
try {
const response = await fetch('https://www.alphavantage.co/query?function=TOP_GAINERS_LOSERS&apikey=4YX0Z4H6V4PG6FAG');
if (!response.ok) {
throw new Error('Failed to fetch market data');
}
const data = await response.json();
// Display data
displayMarketData(data);
} catch (error) {
console.error('Error fetching market data:', error);
document.getElementById('top-gainers').innerHTML = '<p class="text-gray-400">Data unavailable</p>';
document.getElementById('top-losers').innerHTML = '<p class="text-gray-400">Data unavailable</p>';
document.getElementById('most-active').innerHTML = '<p class="text-gray-400">Data unavailable</p>';
}
}
function displayMarketData(data) {
const formatTicker = (ticker) => {
const changePercent = parseFloat(ticker.change_percentage.replace('%', ''));
return `
<div class="flex justify-between items-center">
<span class="font-medium text-white">${ticker.ticker}</span>
<span class="text-sm ${changePercent >= 0 ? 'text-green-400' : 'text-red-400'}">
${changePercent >= 0 ? '+' : ''}${ticker.change_percentage}
</span>
</div>
<div class="flex justify-between text-xs text-gray-400">
<span>${ticker.price}</span>
<span>Vol: ${ticker.volume}</span>
</div>
`;
};
// Display top gainers
const gainersHtml = data.top_gainers.slice(0, 5).map(ticker =>
`<div class="p-2 bg-gray-800 rounded">${formatTicker(ticker)}</div>`
).join('');
document.getElementById('top-gainers').innerHTML = gainersHtml;
// Display top losers
const losersHtml = data.top_losers.slice(0, 5).map(ticker =>
`<div class="p-2 bg-gray-800 rounded">${formatTicker(ticker)}</div>`
).join('');
document.getElementById('top-losers').innerHTML = losersHtml;
// Display most active
const activeHtml = data.most_actively_traded.slice(0, 5).map(ticker =>
`<div class="p-2 bg-gray-800 rounded">${formatTicker(ticker)}</div>`
).join('');
document.getElementById('most-active').innerHTML = activeHtml;
}
// Initialize market data
fetchMarketData();
const form = document.getElementById('prompt-form');
const input = document.getElementById('user-prompt');
const chatMessages = document.getElementById('chat-messages');
const submitBtn = document.getElementById('submit-btn');
const submitIcon = document.getElementById('submit-icon');
const loadingIcon = document.getElementById('loading-icon');
form.addEventListener('submit', async function(e) {
e.preventDefault();
const userMessage = input.value.trim();
if (!userMessage) return;
// Add user message to chat
addMessage('user', userMessage);
input.value = '';
// Show loading state
submitBtn.disabled = true;
submitIcon.classList.add('hidden');
loadingIcon.classList.remove('hidden');
try {
// Add AI "thinking" message
const thinkingDiv = document.createElement('div');
thinkingDiv.className = 'message-ai p-4 rounded-lg';
thinkingDiv.innerHTML = `
<div class="flex items-start space-x-3">
<div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">AI</div>
<div class="flex-1">
<div class="flex items-center space-x-2">
<span class="text-white">Generating strategy...</span>
<div class="w-2 h-2 rounded-full bg-green-400 pulse"></div>
</div>
</div>
</div>
`;
chatMessages.appendChild(thinkingDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
// Call API
const response = await callAI(userMessage);
// Remove thinking message
chatMessages.removeChild(thinkingDiv);
// Add AI response
addMessage('ai', response);
} catch (error) {
console.error('Error:', error);
addMessage('ai', 'Sorry, there was an error generating your strategy. Please try again.');
} finally {
// Reset loading state
submitBtn.disabled = false;
submitIcon.classList.remove('hidden');
loadingIcon.classList.add('hidden');
}
});
function addMessage(role, content) {
const messageDiv = document.createElement('div');
messageDiv.className = role === 'user' ? 'message-user p-4 rounded-lg' : 'message-ai p-4 rounded-lg';
const formattedContent = marked.parse(content);
messageDiv.innerHTML = `
<div class="flex items-start space-x-3">
<div class="w-8 h-8 rounded-full ${role === 'user' ? 'bg-blue-500' : 'bg-green-500'} flex items-center justify-center text-white font-bold">${role === 'user' ? 'You' : 'AI'}</div>
<div class="flex-1">
${formattedContent}
</div>
</div>
`;
chatMessages.appendChild(messageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
async function callAI(prompt) {
const apiKey = "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";
const baseUrl = "https://openrouter.ai/api/v1";
const model = "deepseek/deepseek-chat-v3-0324:free";
const response = await fetch(`${baseUrl}/chat/completions`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${apiKey}`,
'Content-Type': 'application/json',
'HTTP-Referer': window.location.href,
'X-Title': 'TradingView Strategy Generator'
},
body: JSON.stringify({
model: model,
messages: [
{
role: "system",
content: "You are an expert TradingView PineScript (v6) developer. The user will describe a trading strategy in plain English and you will convert it to clean, functional PineScript code. Always include comments explaining each part of the code. Use proper PineScript syntax and best practices. Only respond with the PineScript code wrapped in ```pine for code blocks, preceded by a brief explanation of the strategy."
},
{
role: "user",
content: prompt
}
],
temperature: 0.3
})
});
if (!response.ok) {
throw new Error(`API request failed with status ${response.status}`);
}
const data = await response.json();
return data.choices[0].message.content;
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=flitrx/tradingview-strategy-gen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>