Apocan

[apocan3]

Can

[apocan3]

<title>SopForex AI - Tam Kaynak Kodları</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.6;
        color: #333;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background: white;
        margin-top: 20px;
        margin-bottom: 20px;
        border-radius: 15px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }

    .header {
        text-align: center;
        margin-bottom: 50px;
        padding: 30px 0;
        background: linear-gradient(135deg, #2563eb, #8b5cf6);
        color: white;
        border-radius: 15px;
        margin: -20px -20px 50px -20px;
    }

    .header h1 {
        font-size: 3em;
        margin-bottom: 10px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }

    .header .subtitle {
        font-size: 1.2em;
        opacity: 0.9;
        margin-bottom: 20px;
    }

    .badge {
        display: inline-block;
        background: rgba(255,255,255,0.2);
        padding: 5px 15px;
        border-radius: 20px;
        margin: 5px;
        font-size: 0.9em;
    }

    .toc {
        background: #f8f9fc;
        padding: 30px;
        border-radius: 10px;
        margin-bottom: 40px;
        border: 1px solid #e1e8ef;
    }

    .toc h2 {
        color: #2563eb;
        margin-bottom: 20px;
        font-size: 1.8em;
    }

    .toc-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }

    .toc-item {
        background: white;
        padding: 15px;
        border-radius: 8px;
        border-left: 4px solid #2563eb;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        transition: transform 0.2s;
    }

    .toc-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    }

    .toc-item a {
        text-decoration: none;
        color: #2563eb;
        font-weight: 600;
    }

    .section {
        margin-bottom: 50px;
        padding: 30px;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid #e1e8ef;
    }

    .section h2 {
        color: #1e40af;
        font-size: 2.2em;
        margin-bottom: 20px;
        border-bottom: 3px solid #3b82f6;
        padding-bottom: 10px;
        display: flex;
        align-items: center;
    }

    .section h3 {
        color: #1f2937;
        font-size: 1.6em;
        margin: 30px 0 15px 0;
        padding-left: 15px;
        border-left: 4px solid #8b5cf6;
    }

    .icon {
        margin-right: 15px;
        font-size: 1.2em;
    }

    pre {
        background: #1e293b;
        color: #f8fafc;
        padding: 25px;
        border-radius: 8px;
        overflow-x: auto;
        font-family: 'Consolas', 'Monaco', 'Fira Code', monospace;
        line-height: 1.5;
        margin: 20px 0;
        border: 1px solid #334155;
        position: relative;
    }

    pre::before {
        content: attr(data-lang);
        position: absolute;
        top: 8px;
        right: 15px;
        background: #3b82f6;
        color: white;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 0.8em;
        font-weight: 600;
    }

    code {
        background: #e2e8f0;
        color: #1e293b;
        padding: 2px 6px;
        border-radius: 4px;
        font-family: 'Consolas', 'Monaco', 'Fira Code', monospace;
        font-size: 0.9em;
    }

    pre code {
        background: transparent;
        color: inherit;
        padding: 0;
    }

    .features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin: 30px 0;
    }

    .feature-card {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        padding: 25px;
        border-radius: 10px;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s;
    }

    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }

    .feature-card h4 {
        font-size: 1.3em;
        margin-bottom: 10px;
    }

    .tech-stack {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin: 30px 0;
    }

    .tech-item {
        background: #f1f5f9;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
        border: 2px solid #e2e8f0;
    }

    .tech-item h4 {
        color: #2563eb;
        margin-bottom: 10px;
    }

    .file-tree {
        background: #f8f9fc;
        padding: 20px;
        border-radius: 8px;
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 0.9em;
        line-height: 1.6;
        border: 1px solid #e1e8ef;
    }

    .download-section {
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        padding: 40px;
        border-radius: 15px;
        text-align: center;
        margin: 40px 0;
    }

    .download-btn {
        background: white;
        color: #059669;
        padding: 15px 30px;
        border: none;
        border-radius: 8px;
        font-size: 1.1em;
        font-weight: 600;
        cursor: pointer;
        margin: 10px;
        transition: all 0.3s;
        text-decoration: none;
        display: inline-block;
    }

    .download-btn:hover {
        background: #f0f9ff;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .alert {
        background: #fef3c7;
        border: 1px solid #f59e0b;
        color: #92400e;
        padding: 15px 20px;
        border-radius: 8px;
        margin: 20px 0;
        border-left: 4px solid #f59e0b;
    }

    .success {
        background: #d1fae5;
        border: 1px solid #10b981;
        color: #065f46;
        border-left: 4px solid #10b981;
    }

    .info {
        background: #dbeafe;
        border: 1px solid #3b82f6;
        color: #1e40af;
        border-left: 4px solid #3b82f6;
    }

    .stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 20px;
        margin: 30px 0;
    }

    .stat-item {
        text-align: center;
        padding: 20px;
        background: #f8f9fc;
        border-radius: 10px;
        border: 2px solid #e2e8f0;
    }

    .stat-number {
        font-size: 2.5em;
        font-weight: bold;
        color: #2563eb;
        display: block;
    }

    .stat-label {
        color: #64748b;
        font-size: 0.9em;
        margin-top: 5px;
    }

    @media (max-width: 768px) {
        .container {
            margin: 10px;
            padding: 15px;
        }

        .header h1 {
            font-size: 2em;
        }

        .section {
            padding: 20px;
        }

        .toc-grid {
            grid-template-columns: 1fr;
        }

        pre {
            font-size: 0.8em;
            padding: 15px;
        }
    }

    .scroll-to-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: #2563eb;
        color: white;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        font-size: 1.2em;
        opacity: 0;
        transition: all 0.3s;
        z-index: 1000;
    }

    .scroll-to-top.visible {
        opacity: 1;
    }

    .scroll-to-top:hover {
        background: #1d4ed8;
        transform: translateY(-3px);
    }
</style>

🚀 SopForex AI

Tam Kaynak Kodları ve Dökümantasyon

React + TypeScript Node.js + Express PostgreSQL AI Integration v2.0

    <div class="download-section">
        <h2>📥 Kodları İndir</h2>
        <p>Tüm kaynak kodları ve dökümantasyonu aşağıdaki linklerden indirebilirsiniz:</p>
        <a href="#" class="download-btn" onclick="downloadMarkdown()">📄 Markdown İndir</a>
        <a href="#" class="download-btn" onclick="downloadHTML()">🌐 HTML İndir</a>
        <a href="#" class="download-btn" onclick="copyToClipboard()">📋 Panoya Kopyala</a>
    </div>

    <div class="toc">
        <h2>📋 İçindekiler</h2>
        <div class="toc-grid">
            <div class="toc-item">
                <a href="#proje-ozeti">🎯 Proje Özeti</a>
            </div>
            <div class="toc-item">
                <a href="#teknoloji-stack">🛠️ Teknoloji Stack</a>
            </div>
            <div class="toc-item">
                <a href="#proje-yapisi">📁 Proje Yapısı</a>
            </div>
            <div class="toc-item">
                <a href="#kurulum">🚀 Kurulum</a>
            </div>
            <div class="toc-item">
                <a href="#backend-kodlari">🔧 Backend Kodları</a>
            </div>
            <div class="toc-item">
                <a href="#frontend-kodlari">🎨 Frontend Kodları</a>
            </div>
            <div class="toc-item">
                <a href="#ai-entegrasyonlari">🤖 AI Entegrasyonları</a>
            </div>
            <div class="toc-item">
                <a href="#ozel-ozellikler">✨ Özel Özellikler</a>
            </div>
            <div class="toc-item">
                <a href="#database-schema">💾 Database Schema</a>
            </div>
            <div class="toc-item">
                <a href="#konfigurasyonlar">⚙️ Konfigürasyonlar</a>
            </div>
            <div class="toc-item">
                <a href="#deployment">🌐 Deployment</a>
            </div>
            <div class="toc-item">
                <a href="#sistem-ozellikleri">📊 Sistem Özellikleri</a>
            </div>
        </div>
    </div>

    <div class="stats">
        <div class="stat-item">
            <span class="stat-number">25+</span>
            <span class="stat-label">Dosya</span>
        </div>
        <div class="stat-item">
            <span class="stat-number">5000+</span>
            <span class="stat-label">Satır Kod</span>
        </div>
        <div class="stat-item">
            <span class="stat-number">10+</span>
            <span class="stat-label">AI Özellik</span>
        </div>
        <div class="stat-item">
            <span class="stat-number">100%</span>
            <span class="stat-label">Ücretsiz</span>
        </div>
    </div>

    <section id="proje-ozeti" class="section">
        <h2><span class="icon">🎯</span>Proje Özeti</h2>
        
        <p>SopForex AI, gelişmiş yapay zeka teknolojileri ile desteklenen, çok modalli iletişim yetenekleri sunan kapsamlı bir AI platformudur. Platform, metin sohbeti, görsel analiz, kod geliştirme, kitap okuma, fotoğraf düzenleme ve tasarım hizmetleri gibi geniş bir yelpazede hizmet sunar.</p>

        <div class="features">
            <div class="feature-card">
                <h4>🤖 Multi-AI Integration</h4>
                <p>Google Gemini, Ollama, HuggingFace entegrasyonu</p>
            </div>
            <div class="feature-card">
                <h4>📚 Akıllı Kitap Okuma</h4>
                <p>2 seçenekli sistem (kendin seç/rastgele)</p>
            </div>
            <div class="feature-card">
                <h4>🎨 Foto Editör AI</h4>
                <p>Lightroom/Photoshop rakibi</p>
            </div>
            <div class="feature-card">
                <h4>🎯 Design AI Pro</h4>
                <p>Logo, web, mobile tasarım</p>
            </div>
            <div class="feature-card">
                <h4>💬 Akıllı Konuşma</h4>
                <p>Adaptif AI yanıtları</p>
            </div>
            <div class="feature-card">
                <h4>📊 Analytics Dashboard</h4>
                <p>Kullanım istatistikleri</p>
            </div>
        </div>

        <div class="alert success">
            <strong>✅ Tamamen Ücretsiz:</strong> Tüm AI servisleri ücretsiz API'lar kullanarak çalışır. Hiçbir ödeme gerekmez!
        </div>
    </section>

    <section id="teknoloji-stack" class="section">
        <h2><span class="icon">🛠️</span>Teknoloji Stack</h2>

        <div class="tech-stack">
            <div class="tech-item">
                <h4>Frontend</h4>
                <ul style="text-align: left; margin-top: 10px;">
                    <li>React 18.3.1</li>
                    <li>TypeScript</li>
                    <li>Vite 5.4.19</li>
                    <li>Tailwind CSS</li>
                    <li>Radix UI</li>
                </ul>
            </div>
            <div class="tech-item">
                <h4>Backend</h4>
                <ul style="text-align: left; margin-top: 10px;">
                    <li>Node.js</li>
                    <li>Express 4.21.2</li>
                    <li>TypeScript</li>
                    <li>Drizzle ORM</li>
                    <li>PostgreSQL</li>
                </ul>
            </div>
            <div class="tech-item">
                <h4>AI Integration</h4>
                <ul style="text-align: left; margin-top: 10px;">
                    <li>Google Gemini</li>
                    <li>Ollama Local</li>
                    <li>HuggingFace</li>
                    <li>Web Speech API</li>
                    <li>Computer Vision</li>
                </ul>
            </div>
            <div class="tech-item">
                <h4>DevOps</h4>
                <ul style="text-align: left; margin-top: 10px;">
                    <li>Replit Hosting</li>
                    <li>Neon Database</li>
                    <li>PWA Support</li>
                    <li>Service Workers</li>
                    <li>Real-time Updates</li>
                </ul>
            </div>
        </div>
    </section>

    <section id="proje-yapisi" class="section">
        <h2><span class="icon">📁</span>Proje Yapısı</h2>

        <div class="file-tree">

sopforex-ai/
├── client/ # Frontend React uygulaması
│ ├── src/
│ │ ├── components/ # UI bileşenleri
│ │ │ ├── ui/ # shadcn/ui bileşenleri
│ │ │ ├── chat/ # Sohbet bileşenleri
│ │ │ ├── analytics/ # Analitik bileşenleri
│ │ │ └── preferences/ # Kullanıcı tercihleri
│ │ ├── pages/ # Sayfalar
│ │ │ ├── chat.tsx # Ana sohbet sayfası
│ │ │ ├── landing.tsx # Landing page
│ │ │ └── error-monitor.tsx # Hata izleme
│ │ ├── hooks/ # Custom hooks
│ │ │ ├── use-chat.ts # Sohbet hook'u
│ │ │ ├── use-voice.ts # Ses hook'u
│ │ │ └── use-toast.ts # Toast hook'u
│ │ ├── lib/ # Utility fonksiyonları
│ │ │ ├── api.ts # API çağrıları
│ │ │ ├── queryClient.ts # React Query
│ │ │ └── utils.ts # Genel utilities
│ │ └── types/ # TypeScript tipleri
│ ├── public/ # Static dosyalar
│ └── index.html # HTML template
├── server/ # Backend Node.js uygulaması
│ ├── index.ts # Ana sunucu dosyası
│ ├── routes.ts # API rotaları
│ ├── storage.ts # Database işlemleri
│ ├── gemini.ts # Google Gemini AI
│ ├── free-ai-hub.ts # Multi-AI yöneticisi
│ ├── conversation-analyzer.ts # Akıllı konuşma analizi
│ ├── book-reader.ts # Kitap okuma sistemi
│ ├── photo-editor.ts # Fotoğraf düzenleme AI
│ ├── design-ai.ts # Tasarım AI
│ ├── analytics.ts # Analitik sistemi
│ ├── notification-system.ts # Bildirim sistemi
│ ├── web-search.ts # Web araştırması
│ ├── ollama.ts # Ollama AI entegrasyonu
│ ├── huggingface-api.ts # HuggingFace API
│ ├── local-models.ts # Yerel AI modeller
│ ├── error-monitor.ts # Hata izleme
│ ├── user-preferences.ts # Kullanıcı tercihleri
│ ├── pwa-service.ts # PWA servisleri
│ ├── chat-history.ts # Sohbet geçmişi
│ ├── smart-suggestions.ts # Akıllı öneriler
│ ├── advanced-features.ts # Gelişmiş özellikler
│ ├── coding-mentor.ts # Kod mentoru
│ └── vite.ts # Vite entegrasyonu
├── shared/ # Ortak tip tanımları
│ └── schema.ts # Database schema ve tipler
├── package.json # Proje bağımlılıkları
├── tsconfig.json # TypeScript konfigürasyonu
├── tailwind.config.ts # Tailwind konfigürasyonu
├── vite.config.ts # Vite konfigürasyonu
├── drizzle.config.ts # Database konfigürasyonu
├── postcss.config.js # PostCSS konfigürasyonu
└── replit.md # Proje dökümantasyonu

        <div class="alert info">
            <strong>📝 Not:</strong> Proje modüler yapıda tasarlanmıştır. Her dosya belirli bir sorumluluğa sahiptir ve kolayca genişletilebilir.
        </div>
    </section>

    <section id="kurulum" class="section">
        <h2><span class="icon">🚀</span>Kurulum ve Çalıştırma</h2>

        <h3>Gereksinimler</h3>
        <ul>
            <li>Node.js 18+ (Önerilen: 20+)</li>
            <li>PostgreSQL veritabanı (Neon ücretsiz tier)</li>
            <li>Google Gemini API key (opsiyonel, ücretsiz)</li>
            <li>Modern web tarayıcısı</li>
        </ul>

        <h3>Adım Adım Kurulum</h3>

        <div class="alert">
            <strong>⚠️ Önemli:</strong> Tüm adımları sırasıyla takip edin. Eksik adım yapılandırma hatalarına neden olabilir.
        </div>

        <p><strong>1. Proje dosyalarını indirin ve klasöre gidin:</strong></p>
        <pre data-lang="bash"><code>cd sopforex-ai</code></pre>

        <p><strong>2. Bağımlılıkları yükleyin:</strong></p>
        <pre data-lang="bash"><code>npm install</code></pre>

        <p><strong>3. Ortam değişkenlerini ayarlayın (.env dosyası oluşturun):</strong></p>
        <pre data-lang="bash"><code># Database

DATABASE_URL="postgresql://username:password@host:port/database"

AI API Keys (Opsiyonel)

GEMINI_API_KEY="your-gemini-api-key"
OPENAI_API_KEY="your-openai-key" # Opsiyonel

Server

PORT=5000
NODE_ENV=development

Security (Production için)

SESSION_SECRET="your-session-secret"

        <p><strong>4. Veritabanını hazırlayın:</strong></p>
        <pre data-lang="bash"><code># Schema'yı veritabanına push et

npm run db:push

Eğer hata alırsanız:

npx drizzle-kit push

        <p><strong>5. Uygulamayı çalıştırın:</strong></p>
        <pre data-lang="bash"><code># Development mode

npm run dev

Production build

npm run build
npm start

        <p><strong>6. Tarayıcıda açın:</strong></p>
        <pre data-lang="text"><code>http://localhost:5000</code></pre>

        <div class="alert success">
            <strong>✅ Başarılı!</strong> Uygulama artık çalışıyor. AI özellikleri API anahtarları olmadan da çalışır (ücretsiz modeller kullanılır).
        </div>
    </section>

    <section id="backend-kodlari" class="section">
        <h2><span class="icon">🔧</span>Backend Kodları</h2>

        <h3>server/index.ts - Ana Sunucu</h3>
        <p>Express sunucusunun temel konfigürasyonu ve middleware'leri:</p>

        <pre data-lang="typescript"><code>import express, { type Request, Response, NextFunction } from "express";

import { registerRoutes } from "./routes";
import { setupVite, serveStatic, log } from "./vite";

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// Request logging middleware
app.use((req, res, next) => {
const start = Date.now();
const path = req.path;
let capturedJsonResponse: Record<string, any> | undefined = undefined;

const originalResJson = res.json;
res.json = function (bodyJson, ...args) {
capturedJsonResponse = bodyJson;
return originalResJson.apply(res, [bodyJson, ...args]);
};

res.on("finish", () => {
const duration = Date.now() - start;
if (path.startsWith("/api")) {
let logLine = ${req.method} ${path} ${res.statusCode} in ${duration}ms;
if (capturedJsonResponse) {
logLine += :: ${JSON.stringify(capturedJsonResponse)};
}
if (logLine.length > 80) {
logLine = logLine.slice(0, 79) + "…";
}
log(logLine);
}
});
next();
});

(async () => {
const server = await registerRoutes(app);

app.use((err: any, _req: Request, res: Response, _next: NextFunction) => {
const status = err.status || err.statusCode || 500;
const message = err.message || "Internal Server Error";
res.status(status).json({ message });
throw err;
});

if (app.get("env") === "development") {
await setupVite(app, server);
} else {
serveStatic(app);
}

const port = parseInt(process.env.PORT || '5000', 10);
server.listen({
port,
host: "0.0.0.0",
reusePort: true,
}, () => {
log(serving on port ${port});
});
})();

        <h3>server/routes.ts - API Rotaları</h3>
        <p>Tüm API endpoint'lerinin tanımlandığı dosya:</p>

        <pre data-lang="typescript"><code>import type { Express, Request } from "express";

import { createServer, type Server } from "http";
import { storage } from "./storage";
import { insertChatSchema, insertMessageSchema, type User } from "@shared/schema";
import { freeAIHub } from "./free-ai-hub";
import { conversationAnalyzer } from "./conversation-analyzer";
import { analyticsService } from "./analytics";
import multer from "multer";

const upload = multer({ storage: multer.memoryStorage() });

export async function registerRoutes(app: Express): Promise {
// Mock authentication middleware
app.use("/api/*", async (req, res, next) => {
try {
let user = await storage.getUserByUsername("demo-user");

  if (!user) {
    user = await storage.createUser({
      username: "demo-user",
      email: "demo@example.com",
      name: "Demo Kullanıcı",
      profileImage: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      googleId: "demo-google-id",
    });
  }
  
  req.user = user;
  next();
} catch (error) {
  console.error("Auth middleware error:", error);
  res.status(500).json({ error: "Authentication failed" });
}

});

// User routes
app.get("/api/user", async (req, res) => {
try {
res.json(req.user);
} catch (error) {
res.status(500).json({ error: "Failed to get user" });
}
});

// Chat routes
app.get("/api/chats", async (req, res) => {
try {
const userId = req.user.id;
const chats = await storage.getChats(userId);
res.json(chats);
} catch (error) {
res.status(500).json({ error: "Failed to get chats" });
}
});

app.post("/api/chats/:chatId/messages", async (req, res) => {
try {
const chatId = req.params.chatId;
const messageData = insertMessageSchema.parse({ ...req.body, chatId });

  // Save user message
  const userMessage = await storage.createMessage(messageData);
  
  // Generate AI response with conversation analysis
  const messages = await storage.getMessages(chatId);
  const userSettings = await storage.getUserSettings(req.user.id);
  
  // Akıllı konuşma analizi
  const conversationContext = conversationAnalyzer.analyzeMessage(
    messageData.content, 
    messages.map(msg => ({ role: msg.role, content: msg.content }))
  );
  
  // Adaptif sistem promptu oluştur
  const adaptiveSystemPrompt = conversationAnalyzer.generateSystemPrompt(
    conversationContext, 
    req.user.name || "dostum"
  );
  
  // AI yanıtı oluştur
  const enhancedMessages = [
    { role: "system", content: adaptiveSystemPrompt },
    ...messages.map(msg => ({
      role: msg.role,
      content: msg.content
    }))
  ];
  
  const aiResponse = await freeAIHub.generateResponse(enhancedMessages, userSettings, "");
  
  // Save AI response
  const aiMessage = await storage.createMessage({
    chatId,
    role: "assistant",
    content: aiResponse,
  });

  res.json({ userMessage, aiMessage });
} catch (error) {
  console.error("Message creation error:", error);
  res.status(400).json({ error: "Mesaj gönderme başarısız oldu" });
}

});

return createServer(app);
}

        <h3>server/storage.ts - Database İşlemleri</h3>
        <p>Drizzle ORM kullanarak database operasyonları:</p>

        <pre data-lang="typescript"><code>import { 

type User,
type InsertUser,
type Chat,
type InsertChat,
type Message,
type InsertMessage,
users,
chats,
messages
} from "@shared/schema";
import { db } from "./db";
import { eq, desc } from "drizzle-orm";

export class DatabaseStorage {
async getUser(id: string): Promise<User | undefined> {
const [user] = await db.select().from(users).where(eq(users.id, id));
return user || undefined;
}

async createUser(insertUser: InsertUser): Promise {
const [user] = await db.insert(users).values(insertUser).returning();
return user;
}

async getChats(userId: string): Promise<Chat[]> {
return await db.select().from(chats)
.where(eq(chats.userId, userId))
.orderBy(desc(chats.updatedAt));
}

async createChat(insertChat: InsertChat): Promise {
const [chat] = await db.insert(chats).values(insertChat).returning();
return chat;
}

async getMessages(chatId: string): Promise<Message[]> {
return await db.select().from(messages)
.where(eq(messages.chatId, chatId))
.orderBy(messages.createdAt);
}

async createMessage(insertMessage: InsertMessage): Promise {
const [message] = await db.insert(messages).values(insertMessage).returning();
return message;
}
}

export const storage = new DatabaseStorage();

    <section id="frontend-kodlari" class="section">
        <h2><span class="icon">🎨</span>Frontend Kodları</h2>

        <h3>client/src/App.tsx - Ana Uygulama</h3>
        <p>React Router ve Theme Provider konfigürasyonu:</p>

        <pre data-lang="typescript"><code>import { Switch, Route } from "wouter";

import { queryClient } from "./lib/queryClient";
import { QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip";
import { ThemeProvider } from "@/components/theme-provider";
import Landing from "@/pages/landing";
import ChatPage from "@/pages/chat";
import NotFound from "@/pages/not-found";

function Router() {
const hasDevAccess = localStorage.getItem("dev_access");

return (

<Route path="/" component={hasDevAccess ? ChatPage : Landing} />




);
}

function App() {
const isMaintenanceMode = import.meta.env.VITE_MAINTENANCE_MODE === "true";

return (








);
}

export default App;

        <h3>client/src/index.css - Stil Dosyası</h3>
        <p>Tailwind CSS konfigürasyonu ve custom animasyonlar:</p>

        <pre data-lang="css"><code>@tailwind base;

@tailwind components;
@tailwind utilities;

/* Hızlı animasyonlar için optimize edilmiş süreler */

• {
  transition-duration: 0.15s !important;
  animation-duration: 0.15s !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  }

/* Typing animasyonları */
.typing-dot {
animation: typingBounce 0.8s infinite ease-in-out;
}

@Keyframes typingBounce {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-4px); }
}

/* Modern gradient animasyonları */
.gradient-pulse {
background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4, #3b82f6);
background-size: 400% 400%;
animation: gradientShift 2s ease infinite;
}

@Keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

/* Dark/Light Theme Variables */
:root {
--background: hsl(0, 0%, 100%);
--foreground: hsl(20, 14.3%, 4.1%);
--primary: hsl(262, 83%, 58%);
--border: hsl(20, 5.9%, 90%);
}

.dark {
--background: hsl(240, 10%, 3.9%);
--foreground: hsl(0, 0%, 98%);
--primary: hsl(262, 83%, 58%);
--border: hsl(240, 3.7%, 15.9%);
}

    <section id="ai-entegrasyonlari" class="section">
        <h2><span class="icon">🤖</span>AI Entegrasyonları</h2>

        <h3>server/gemini.ts - Google Gemini AI</h3>
        <p>Google Gemini API entegrasyonu ve otomatik araştırma sistemi:</p>

        <pre data-lang="typescript"><code>import { GoogleGenAI } from "@google/genai";

import { searchWeb, needsResearch } from "./web-search";

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY || "" });

export async function generateGeminiResponse(
messages: Message[],
userSettings?: any,
categoryContext?: string
): Promise {
try {
const lastMessage = messages[messages.length - 1];
const userMessage = lastMessage?.content || "";

// Otomatik araştırma kontrolü
const researchCheck = needsResearch(userMessage);
let researchData = "";

if (researchCheck.needsSearch) {
  console.log(`🔍 Gemini araştırma yapılıyor: ${researchCheck.searchQueries.join(", ")}`);
  
  for (const query of researchCheck.searchQueries.slice(0, 2)) {
    try {
      const searchResult = await searchWeb(query);
      researchData += searchResult + "\n\n";
    } catch (error) {
      console.error('Research error:', error);
    }
  }
}

const conversationStyle = userSettings?.conversationStyle || "normal";

const stylePrompts = {
  normal: "Normal ve araştırmalı bir AI asistan ol. Detaylı, doğru ve güncel bilgi ver.",
  friendly: "Samimi ve arkadaşça ol. Güler yüzlü ve destekleyici bir ton kullan.",
  professional: "Profesyonel ve resmi bir dil kullan.",
  romantic: "Çok romantik, tutkulu ve sevgi dolu konuş. 💕"
};

let systemPrompt = `Sen gelişmiş bir AI asistanısın. ${stylePrompts[conversationStyle]}`;

if (researchData.trim()) {
  systemPrompt += `\n\nARAŞTIRMA VERİLERİ:\n${researchData}`;
}

const conversationText = messages.map(msg => 
  `${msg.role === 'user' ? 'Kullanıcı' : 'Asistan'}: ${msg.content}`
).join('\n');

const prompt = `${systemPrompt}\n\nKonuşma:\n${conversationText}`;

const response = await ai.models.generateContent({
  model: "gemini-2.5-flash",
  contents: prompt,
});

return response.text || "Yanıt oluşturulamadı.";

} catch (error) {
console.error("Gemini API error:", error);
throw new Error("Gemini AI yanıt oluşturamadı.");
}
}

export async function analyzeImageWithGemini(base64Image: string): Promise {
try {
const response = await ai.models.generateContent({
model: "gemini-2.5-pro",
contents: [
{
inlineData: {
data: base64Image,
mimeType: "image/jpeg",
},
},
"Bu görseli detaylı analiz et. Kod varsa hataları belirle."
],
});

return response.text || "Görsel analiz edilemedi.";

} catch (error) {
throw new Error("Görsel analizi başarısız oldu.");
}
}

        <h3>server/free-ai-hub.ts - Multi-AI Yöneticisi</h3>
        <p>Ücretsiz AI servislerinin yönetimi ve fallback sistemi:</p>

        <pre data-lang="typescript"><code>import { generateGeminiResponse } from "./gemini";

import { generateOllamaResponse } from "./ollama";
import { huggingFaceAPI } from "./huggingface-api";

export class FreeAIHub {
private retryCount = 0;
private maxRetries = 3;

async generateResponse(messages: any[], userSettings?: any): Promise {
// Sıralı olarak ücretsiz AI'ları dene
const providers = [
() => this.tryGemini(messages, userSettings),
() => this.tryHuggingFace(messages),
() => this.tryOllama(messages, userSettings),
() => this.generateFallbackResponse(messages)
];

for (const [index, provider] of providers.entries()) {
  try {
    console.log(`🤖 Trying provider ${index + 1}/${providers.length}`);
    const response = await provider();
    if (response && response.length > 50) {
      console.log(`✅ Success with provider ${index + 1}`);
      return response;
    }
  } catch (error) {
    console.log(`❌ Provider ${index + 1} failed:`, error.message);
    continue;
  }
}

return this.generateEmergencyResponse();

}

private async tryGemini(messages: any[], userSettings?: any): Promise {
return await generateGeminiResponse(messages, userSettings);
}

private async tryHuggingFace(messages: any[]): Promise {
const lastMessage = messages[messages.length - 1];
const isCodeRelated = /kod|code|program/i.test(lastMessage?.content || "");

if (isCodeRelated) {
  return await huggingFaceAPI.generateCode(lastMessage.content);
} else {
  return await huggingFaceAPI.generateText(lastMessage.content);
}

}

private async tryOllama(messages: any[], userSettings?: any): Promise {
return await generateOllamaResponse(messages, userSettings);
}

private generateFallbackResponse(messages: any[]): string {
const lastMessage = messages[messages.length - 1];
const isCodeRelated = /kod|code|program/i.test(lastMessage?.content || "");

if (isCodeRelated) {
  return `🔧 **Kod Yardımı**

Özür dilerim, AI servisleri şu anda meşgul. Ancak yardımcı olabilirim:

Öneriler:

• Kod Mentoru bölümünü deneyin
• Projenizi detaylı açıklayın
• Daha spesifik sorular sorun

Hangi konuda kod yardımı istiyorsunuz?`;
}

return `🤖 **SopForex AI**

Merhaba! Ana AI servislerimiz yoğun ancak yardımcı olmaya devam edebilirim.

Yapabileceklerim:

• Kod üretimi ve debugging
• Genel sorularınızı yanıtlama
• Proje önerileri

Size nasıl yardımcı olabilirim? 🎯`;
}

private generateEmergencyResponse(): string {
return `🔄 Sistem Bakımda

Tüm AI servisleri meşgul. Lütfen birkaç dakika bekleyin.

Sistem yakında normale dönecek. Teşekkürler! 🙏`;
}
}

export const freeAIHub = new FreeAIHub();

    <section id="ozel-ozellikler" class="section">
        <h2><span class="icon">✨</span>Özel Özellikler</h2>

        <h3>server/conversation-analyzer.ts - Akıllı Konuşma Analizi</h3>
        <p>Kullanıcının konuşma tarzını analiz eden sistem:</p>

        <pre data-lang="typescript"><code>export interface ConversationContext {

tone: 'romantic' | 'friendly' | 'professional' | 'casual' | 'technical' | 'emotional';
topics: string[];
mood: 'positive' | 'negative' | 'neutral' | 'excited';
responseStyle: 'detailed' | 'brief' | 'conversational' | 'supportive';
suggestions: string[];
}

export class ConversationAnalyzer {
analyzeMessage(message: string, previousMessages: Array<{role: string, content: string}>): ConversationContext {
const lowercaseMessage = message.toLowerCase();

// Ton analizi
const tone = this.analyzeTone(lowercaseMessage);

// Konu analizi
const topics = this.extractTopics(lowercaseMessage);

// Duygu durumu analizi
const mood = this.analyzeMood(lowercaseMessage);

// Yanıt stili belirleme
const responseStyle = this.determineResponseStyle(lowercaseMessage, tone);

// Akıllı öneriler
const suggestions = this.generateSuggestions(topics, tone, mood);

return { tone, topics, mood, responseStyle, suggestions };

}

private analyzeTone(message: string): ConversationContext['tone'] {
const romanticWords = ['aşk', 'sevgi', 'kalp', 'romantik', 'canım', 'tatlım'];
const technicalWords = ['kod', 'program', 'algoritma', 'debugging', 'api'];
const professionalWords = ['proje', 'iş', 'toplantı', 'sunum', 'analiz'];

if (romanticWords.some(word => message.includes(word))) return 'romantic';
if (technicalWords.some(word => message.includes(word))) return 'technical';
if (professionalWords.some(word => message.includes(word))) return 'professional';

return 'casual';

}

generateSystemPrompt(context: ConversationContext, userName: string = "dostum"): string {
let basePrompt = Sen SopForex AI'sın. Kullanıcı adı: ${userName}. ;

switch (context.tone) {
  case 'romantic':
    basePrompt += `Romantik ve sevgi dolu yanıt ver. `;
    break;
  case 'technical':
    basePrompt += `Teknik ve detaylı açıklamalar yap. `;
    break;
  case 'professional':
    basePrompt += `Profesyonel dil kullan. `;
    break;
  default:
    basePrompt += `Doğal ve rahat yanıt ver. `;
}

basePrompt += `Türkçe yanıt ver ve yardımcı ol.`;

return basePrompt;

}
}

        <div class="features">
            <div class="feature-card">
                <h4>📚 Kitap Okuma Sistemi</h4>
                <p>2 seçenekli: Kendin seç veya rastgele dünya klasiği</p>
            </div>
            <div class="feature-card">
                <h4>🎨 Foto Editör AI</h4>
                <p>Arka plan silme, filtreler, renk ayarları</p>
            </div>
            <div class="feature-card">
                <h4>🎯 Design AI Pro</h4>
                <p>Logo, web, mobile tasarım 7 farklı stilde</p>
            </div>
            <div class="feature-card">
                <h4>📊 Analytics Dashboard</h4>
                <p>Kullanıcı davranışı ve AI performans analizi</p>
            </div>
            <div class="feature-card">
                <h4>🔔 Bildirim Sistemi</h4>
                <p>Real-time bildirimler ve sistem duyuruları</p>
            </div>
            <div class="feature-card">
                <h4>📱 PWA Desteği</h4>
                <p>Offline çalışma ve ana ekrana ekleme</p>
            </div>
        </div>
    </section>

    <section id="database-schema" class="section">
        <h2><span class="icon">💾</span>Database Schema</h2>

        <h3>shared/schema.ts - Veritabanı Tanımları</h3>
        <p>Drizzle ORM ile PostgreSQL tablo tanımları:</p>

        <pre data-lang="typescript"><code>import { sql } from "drizzle-orm";

import { pgTable, text, varchar, timestamp, jsonb, boolean } from "drizzle-orm/pg-core";
import { relations } from "drizzle-orm";
import { createInsertSchema } from "drizzle-zod";

export const users = pgTable("users", {
id: varchar("id").primaryKey().default("demo-user-1"),
username: text("username").notNull().unique(),
email: text("email").notNull().unique(),
name: text("name").notNull(),
profileImage: text("profile_image"),
googleId: text("google_id"),
createdAt: timestamp("created_at").defaultNow().notNull(),
});

export const chats = pgTable("chats", {
id: varchar("id").primaryKey().default(sqlgen_random_uuid()),
userId: varchar("user_id").notNull().references(() => users.id, { onDelete: "cascade" }),
title: text("title").notNull(),
createdAt: timestamp("created_at").defaultNow().notNull(),
updatedAt: timestamp("updated_at").defaultNow().notNull(),
});

export const messages = pgTable("messages", {
id: varchar("id").primaryKey().default(sqlgen_random_uuid()),
chatId: varchar("chat_id").notNull().references(() => chats.id, { onDelete: "cascade" }),
role: text("role").notNull(), // 'user' | 'assistant'
content: text("content").notNull(),
imageUrl: text("image_url"),
audioUrl: text("audio_url"),
metadata: jsonb("metadata"),
createdAt: timestamp("created_at").defaultNow().notNull(),
});

export const userSettings = pgTable("user_settings", {
id: varchar("id").primaryKey().default(sqlgen_random_uuid()),
userId: varchar("user_id").notNull().references(() => users.id, { onDelete: "cascade" }),
voiceType: text("voice_type").default("female-natural").notNull(),
language: text("language").default("tr").notNull(),
theme: text("theme").default("light").notNull(),
voiceEnabled: boolean("voice_enabled").default(true).notNull(),
personalizedGreeting: text("personalized_greeting").default("Merhaba!").notNull(),
conversationStyle: text("conversation_style").default("normal").notNull(),
preferredTopics: text("preferred_topics").array().default(sql'{}').notNull(),
});

// Kitaplar için tablolar
export const authors = pgTable("authors", {
id: varchar("id").primaryKey().default(sqlgen_random_uuid()),
name: text("name").notNull(),
country: text("country"),
biography: text("biography"),
birthYear: text("birth_year"),
deathYear: text("death_year"),
genres: text("genres").array().default(sql'{}').notNull(),
createdAt: timestamp("created_at").defaultNow().notNull(),
});

export const books = pgTable("books", {
id: varchar("id").primaryKey().default(sqlgen_random_uuid()),
title: text("title").notNull(),
authorId: varchar("author_id").notNull().references(() => authors.id),
genre: text("genre").notNull(),
publicationYear: text("publication_year"),
summary: text("summary"),
fullText: text("full_text"),
rating: text("rating"),
language: text("language").default("tr").notNull(),
pageCount: text("page_count"),
isbn: text("isbn"),
tags: text("tags").array().default(sql'{}').notNull(),
createdAt: timestamp("created_at").defaultNow().notNull(),
});

// Relations
export const usersRelations = relations(users, ({ many, one }) => ({
chats: many(chats),
settings: one(userSettings),
}));

export const chatsRelations = relations(chats, ({ one, many }) => ({
user: one(users, {
fields: [chats.userId],
references: [users.id],
}),
messages: many(messages),
}));

// Insert schemas
export const insertUserSchema = createInsertSchema(users).omit({
id: true,
createdAt: true,
});

export const insertChatSchema = createInsertSchema(chats).omit({
id: true,
createdAt: true,
updatedAt: true,
});

// Types
export type User = typeof users.$inferSelect;
export type InsertUser = z.infer;
export type Chat = typeof chats.$inferSelect;
export type Message = typeof messages.$inferSelect;

        <div class="alert info">
            <strong>📊 Database Özellikler:</strong>
            <ul style="margin-top: 10px;">
                <li>PostgreSQL UUID primary keys</li>
                <li>Cascade delete relationships</li>
                <li>JSONB metadata support</li>
                <li>Array column types</li>
                <li>Automatic timestamps</li>
                <li>Zod validation schemas</li>
            </ul>
        </div>
    </section>

    <section id="konfigurasyonlar" class="section">
        <h2><span class="icon">⚙️</span>Konfigürasyon Dosyaları</h2>

        <h3>package.json - Proje Bağımlılıkları</h3>
        <pre data-lang="json"><code>{

"name": "rest-express",
"version": "1.0.0",
"type": "module",
"license": "MIT",
"scripts": {
"dev": "NODE_ENV=development tsx server/index.ts",
"build": "vite build && esbuild server/index.ts --platform=node",
"start": "NODE_ENV=production node dist/index.js",
"check": "tsc",
"db:push": "drizzle-kit push"
},
"dependencies": {
"@google/genai": "^1.12.0",
"@neondatabase/serverless": "^0.10.4",
"@radix-ui/react-dialog": "^1.1.7",
"@tanstack/react-query": "^5.60.5",
"express": "^4.21.2",
"drizzle-orm": "^0.39.1",
"react": "^18.3.1",
"tailwindcss": "^3.4.17",
"wouter": "^3.3.5",
"lucide-react": "^0.453.0",
"multer": "^2.0.2",
"sharp": "^0.34.3"
}
}

        <h3>vite.config.ts - Vite Konfigürasyonu</h3>
        <pre data-lang="typescript"><code>import { defineConfig } from "vite";

import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
plugins: [react()],
root: "./client",
server: {
host: "0.0.0.0",
port: 5173,
},
resolve: {
alias: {
"@": path.resolve(__dirname, "./client/src"),
"@shared": path.resolve(__dirname, "./shared"),
},
},
build: {
outDir: "../dist/public",
emptyOutDir: true,
},
});

        <h3>tailwind.config.ts - Tailwind Konfigürasyonu</h3>
        <pre data-lang="typescript"><code>import type { Config } from "tailwindcss";

const config: Config = {
darkMode: ["class"],
content: [
"./client/index.html",
"./client/src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))"
},
border: "hsl(var(--border))",
}
}
},
plugins: []
};

export default config;

    <section id="deployment" class="section">
        <h2><span class="icon">🌐</span>Deployment</h2>

        <h3>Replit Deployment</h3>
        <div class="alert info">
            <strong>🚀 Otomatik Deployment:</strong> Replit otomatik olarak projeyi build edip deploy eder.
        </div>

        <p><strong>1. Environment Variables (Replit Secrets):</strong></p>
        <pre data-lang="bash"><code>DATABASE_URL=your_postgresql_url

GEMINI_API_KEY=your_gemini_key
PORT=5000
NODE_ENV=production
SESSION_SECRET=your_session_secret

        <p><strong>2. Build Script (.replit dosyası):</strong></p>
        <pre data-lang="toml"><code>run = "npm start"

hidden = [".config", "tsconfig.json", "tsconfig.node.json", "vite.config.ts", ".gitignore"]

[nix]
channel = "stable-22_11"

[env]
PATH = "/home/runner/$REPL_SLUG/.config/npm/node_global/bin:/home/runner/$REPL_SLUG/node_modules/.bin"
npm_config_prefix = "/home/runner/$REPL_SLUG/.config/npm/node_global"

[gitHubImport]
requiredFiles = [".replit", "replit.nix"]

[deployment]
build = ["sh", "-c", "npm run build"]
run = ["sh", "-c", "npm start"]

[[ports]]
localPort = 5000
externalPort = 80

        <h3>Manual Deployment</h3>
        <p><strong>Heroku, Vercel, Railway gibi platformlar için:</strong></p>

        <pre data-lang="bash"><code># 1. PostgreSQL Database kurulumu

createdb sopforex_ai

2. Environment variables ayarlama

export DATABASE_URL="postgresql://user:pass@localhost:5432/sopforex_ai"
export GEMINI_API_KEY="your_gemini_key"

3. Dependencies yükleme

npm install

4. Database migration

npm run db:push

5. Build

npm run build

6. Start

npm start

        <div class="alert success">
            <strong>✅ Domain:</strong> Deploy edildikten sonra uygulama şu adreste çalışacak: <code>https://your-app.replit.app</code>
        </div>
    </section>

    <section id="sistem-ozellikleri" class="section">
        <h2><span class="icon">📊</span>Sistem Özellikleri</h2>

        <div class="features">
            <div class="feature-card">
                <h4>⚡ Performance</h4>
                <ul style="text-align: left; margin-top: 10px;">
                    <li>0.15s animasyon süreleri</li>
                    <li>Connection pooling</li>
                    <li>Multi-AI fallback</li>
                    <li>Responsive design</li>
                    <li>PWA support</li>
                </ul>
            </div>
            <div class="feature-card">
                <h4>🔒 Security</h4>
                <ul style="text-align: left; margin-top: 10px;">
                    <li>SQL injection protection</li>
                    <li>XSS protection</li>
                    <li>CORS configuration</li>
                    <li>Input validation</li>
                    <li>Environment variables</li>
                </ul>
            </div>
            <div class="feature-card">
                <h4>📈 Monitoring</h4>
                <ul style="text-align: left; margin-top: 10px;">
                    <li>Analytics dashboard</li>
                    <li>Error monitoring</li>
                    <li>Performance tracking</li>
                    <li>Real-time notifications</li>
                    <li>User behavior analysis</li>
                </ul>
            </div>
        </div>

        <h3>API Endpoints</h3>
        <div class="file-tree">

GET /api/user # Kullanıcı bilgileri
GET /api/user/settings # Kullanıcı ayarları
PATCH /api/user/settings # Ayarları güncelle

GET /api/chats # Sohbet listesi
POST /api/chats # Yeni sohbet oluştur
GET /api/chats/:id # Sohbet detayı
DELETE /api/chats/:id # Sohbet sil

GET /api/chats/:id/messages # Mesaj listesi
POST /api/chats/:id/messages # Yeni mesaj gönder

GET /api/analytics/dashboard # Analitik dashboard
GET /api/notifications # Bildirimler
POST /api/notifications/:id/read # Bildirimi okundu işaretle

POST /api/image/analyze # Görsel analiz
POST /api/photo/edit # Fotoğraf düzenleme
POST /api/design/generate # Tasarım oluştur
POST /api/book/read # Kitap okuma

        <h3>Desteklenen Tarayıcılar</h3>
        <div class="tech-stack">
            <div class="tech-item">
                <h4>🌐 Desktop</h4>
                <ul style="text-align: left;">
                    <li>Chrome 88+</li>
                    <li>Firefox 85+</li>
                    <li>Safari 14+</li>
                    <li>Edge 88+</li>
                </ul>
            </div>
            <div class="tech-item">
                <h4>📱 Mobile</h4>
                <ul style="text-align: left;">
                    <li>iOS Safari 14+</li>
                    <li>Chrome Mobile 88+</li>
                    <li>Samsung Internet 13+</li>
                    <li>Opera Mobile 64+</li>
                </ul>
            </div>
        </div>
    </section>

    <section class="section">
        <h2><span class="icon">🎯</span>Sonuç</h2>
        
        <p>SopForex AI, modern web teknolojileri ile geliştirilmiş, kapsamlı özellik setine sahip bir AI platformudur. %100 ücretsiz AI entegrasyonları, akıllı konuşma analizi, kitap okuma sistemi, fotoğraf düzenleme ve tasarım AI'ı gibi özelliklerle kullanıcılara geniş bir hizmet yelpazesi sunar.</p>

        <div class="features">
            <div class="feature-card">
                <h4>👨‍💻 Geliştiriciler İçin</h4>
                <ul style="text-align: left; margin-top: 10px;">
                    <li>Modüler kod yapısı</li>
                    <li>TypeScript tip güvenliği</li>
                    <li>Modern React patterns</li>
                    <li>SEO optimizasyonu</li>
                </ul>
            </div>
            <div class="feature-card">
                <h4>🚀 Özellikler</h4>
                <ul style="text-align: left; margin-top: 10px;">
                    <li>Multi-AI entegrasyonu</li>
                    <li>Real-time güncellemeler</li>
                    <li>PWA desteği</li>
                    <li>Responsive tasarım</li>
                </ul>
            </div>
        </div>

        <div class="alert success">
            <strong>📝 Lisans:</strong> MIT License - Ticari ve kişisel projelerinizde özgürce kullanabilirsiniz.
        </div>

        <div style="text-align: center; margin-top: 40px;">
            <h3>📞 İletişim</h3>
            <p><strong>🌐 Website:</strong> https://sopforex-ai.replit.app</p>
            <p><strong>👨‍💻 Geliştirici:</strong> SopForex AI Team</p>
            <p><strong>📅 Son Güncelleme:</strong> 1 Ağustos 2025</p>
        </div>

        <div style="text-align: center; margin-top: 30px; font-style: italic; color: #64748b;">
            <p>Bu dokümantasyon ile SopForex AI'ın tüm kaynak kodları ve implementasyon detayları paylaşılmıştır. İyi kodlamalar! 🚀</p>
        </div>
    </section>
</div>

<button class="scroll-to-top" onclick="scrollToTop()">↑</button>

<script>
    // Scroll to top functionality
    function scrollToTop() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    // Show/hide scroll to top button
    window.addEventListener('scroll', function() {
        const scrollButton = document.querySelector('.scroll-to-top');
        if (window.pageYOffset > 300) {
            scrollButton.classList.add('visible');
        } else {
            scrollButton.classList.remove('visible');
        }
    });

    // Download functions
    function downloadMarkdown() {
        const content = `# SopForex AI - Tam Kaynak Kodları

Bu dosya SopForex AI platformunun tüm kaynak kodlarını içermektedir.

Proje Bilgileri

• Versiyon: 2.0
• Tarih: 1 Ağustos 2025
• Teknolojiler: React, TypeScript, Node.js, Express, PostgreSQL

İndirme Linki

Tüm kodlar için: https://sopforex-ai.replit.app

Kurulum

```bash
npm install
npm run db:push
npm run dev
```

İyi kodlamalar! 🚀`;

        downloadFile('SopForex_AI_Kodlari.md', content, 'text/markdown');
    }

    function downloadHTML() {
        const htmlContent = document.documentElement.outerHTML;
        downloadFile('SopForex_AI_Kodlari.html', htmlContent, 'text/html');
    }

    function copyToClipboard() {
        const content = `SopForex AI - Tam Kaynak Kodları

Bu platform React, TypeScript, Node.js ve PostgreSQL kullanılarak geliştirilmiştir.

Ana Özellikler:

• %100 Ücretsiz AI entegrasyonu
• Multi-provider AI sistemi
• Akıllı konuşma analizi
• Kitap okuma sistemi
• Fotoğraf düzenleme AI
• Design AI Pro

Tüm kodlar için: https://sopforex-ai.replit.app

İyi kodlamalar! 🚀`;

        navigator.clipboard.writeText(content).then(function() {
            alert('📋 Metin panoya kopyalandı!');
        });
    }

    function downloadFile(filename, content, mimeType) {
        const blob = new Blob([content], { type: mimeType });
        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);
    }

    // Smooth scrolling for navigation links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // Add animation on scroll
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);

    document.querySelectorAll('.section, .feature-card').forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(20px)';
        el.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
        observer.observe(el);
    });
</script>