
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trade Details</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <style>
        :root {
            --background: #0B0E14;
            --card-bg: #1A1F2C;
            --text-primary: #eab308;
            --text-secondary: #8E9196;
            --accent-gold: #FFB800;
            --accent-green: #00C48C;
            --accent-red: #FF3B3B;
            --border-color: rgba(255, 255, 255, 0.1);
        }

        body {
            background: var(--background);
            color: var(--text-primary);
            font-family: system-ui, -apple-system, sans-serif;
        }

        .trade-card {
            background: var(--card-bg);
            border-radius: 1rem;
            border: 1px solid var(--border-color);
        }

        .profit { color: var(--accent-green); }
        .loss { color: var(--accent-red); }

        .status-chip {
            padding: 0.25rem 0.75rem;
            border-radius: 1rem;
            font-size: 0.875rem;
        }

        .status-completed {
            background: rgba(0, 196, 140, 0.1);
            color: var(--accent-green);
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1rem;
        }

        .chart-container {
            height: 300px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .fade-in {
            animation: fadeIn 0.3s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .action-button {
            transition: all 0.3s ease;
        }

        .action-button:hover {
            transform: translateY(-2px);
        }
        
:root {
    --background: #0B0E14;
    --card-bg: #1A1F2C;
    --text-primary: #eab308;
    --text-secondary: #8E9196;
    --accent-gold: #FFB800;
    --accent-green: #00C48C;
    --accent-red: #FF3B3B;
    --border-color: rgba(255, 255, 255, 0.1);
}

.chart-container {
    min-height: 300px;
    height: calc(40vh - 100px);
    max-height: 500px;
    width: 100%;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 1rem;
    padding: 0.5rem;
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .chart-container {
        height: 300px;
        padding: 0.25rem;
    }
    
    .chart-controls {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
    
    .chart-buttons {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.25rem;
    }
    
    .export-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.25rem;
    }
}

.chart-button {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    transition: all 0.2s;
}

.chart-button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.chart-button.active {
    background: var(--accent-gold);
    color: var(--background);
}



        /* Overlay for loader */
        .overlay1 {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #111422; /* Overlay background color */
            opacity: 1; /* Full opacity */
            z-index: 9999; /* Above all content */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Loader image with animation */
        .overlay1 img {
            width: 100px;
            height: 100px;
            animation: pulse 1.5s infinite ease-in-out;
        }

        /* Keyframes for pulse animation */
        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.2);
                opacity: 0.8;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* Keyframes for fade-out effect */
        @keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        
    </style>
</head>
<body class="min-h-screen p-4 md:p-6 lg:p-8">
    
    <div class="overlay1" id="overlay">
        <img src="images/loader.png" alt="Loading...">
    </div>
    <div class="max-w-6xl mx-auto" id="main">
        <!-- Header with Back Button -->
        <div class="flex items-center gap-2 mb-4 md:mb-6 fade-in">
            <a href="javascript:history.back()" class="p-2 hover:bg-white/5 rounded-full transition-colors">
                <i data-lucide="arrow-left" class="w-5 h-5 md:w-6 md:h-6"></i>
            </a>
            <h1 class="text-lg md:text-xl lg:text-2xl font-semibold">Trade Details</h1>
        </div>

        <!-- Main Trade Info Card -->
        <div class="trade-card p-4 md:p-6 mb-4 md:mb-6 fade-in">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 md:gap-6 mb-4 md:mb-6">
                <div class="space-y-2 w-full md:w-auto">
                    <div class="flex items-center gap-2 flex-wrap">
                        <span class="text-xl md:text-2xl font-bold">OCT</span>
                        <span class="text-[var(--text-secondary)] text-sm md:text-base"> 
                            December 18, 2024 09:50 PM                        </span>
                    </div>
                    <div class="status-chip status-completed inline-flex items-center gap-1 text-sm md:text-base">
                        <i data-lucide="check-circle" class="w-4 h-4"></i>
                        Invested
                    </div>
                </div>
                <div class="w-full md:w-auto text-left md:text-right">
                    <div class="text-2xl md:text-3xl font-bold profit">+$0.0000</div>
                    <div class="text-sm md:text-base text-[var(--text-secondary)]">
                        0.00%                    </div>
                </div>
            </div>

            <!-- Trade Details Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4 mb-6">
                <div class="trade-card p-3 md:p-4">
                    <div class="text-[var(--text-secondary)] text-sm mb-1">Invest amount</div>
                    <div class="text-base md:text-xl font-semibold">
                        ₹0.00                    </div>
                </div>
                <div class="trade-card p-3 md:p-4">
                    <div class="text-[var(--text-secondary)] text-sm mb-1">After portal charge</div>
                    <div class="text-base md:text-xl font-semibold">
                        ₹0.00                    </div>
                </div>
                <div class="trade-card p-3 md:p-4">
                    <div class="text-[var(--text-secondary)] text-sm mb-1">Total share</div>
                    <div class="text-base md:text-xl font-semibold">
                        81                    </div>
                </div>
                <div class="trade-card p-3 md:p-4">
                    <div class="text-[var(--text-secondary)] text-sm mb-1">Portal Charge</div>
                    <div class="text-base md:text-xl font-semibold">
                        ₹0.00                    </div>
                </div>
            </div>

            <!-- Trade Timeline -->
            <div class="space-y-4">
                <h3 class="text-base md:text-lg font-semibold">Trade Timeline</h3>
                <div class="space-y-3 md:space-y-4">
                    <div class="flex items-start gap-3 md:gap-4">
                        <div class="p-2 rounded-lg bg-green-500/20 shrink-0">
                            <i data-lucide="arrow-right" class="w-4 h-4 md:w-5 md:h-5 text-green-500"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex justify-between items-start gap-2">
                                <div class="min-w-0">
                                    <div class="font-semibold text-sm md:text-base truncate">You Invested</div>
                                    <div class="text-xs md:text-sm text-[var(--text-secondary)] truncate">
                                        ₹0.00                                    </div>
                                </div>
                                <div class="text-xs md:text-sm text-[var(--text-secondary)] whitespace-nowrap">
                                                                    </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-start gap-3 md:gap-4">
                        <div class="p-2 rounded-lg bg-blue-500/20 shrink-0">
                            <i data-lucide="check" class="w-4 h-4 md:w-5 md:h-5 text-blue-500"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex justify-between items-start gap-2">
                                <div class="min-w-0">
                                    <div class="font-semibold text-sm md:text-base truncate">Amount after portal charge</div>
                                    <div class="text-xs md:text-sm text-[var(--text-secondary)] truncate">
                                        ₹0.00                                    </div>
                                </div>
                                <div class="text-xs md:text-sm text-[var(--text-secondary)] whitespace-nowrap">
                                                                    </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-start gap-3 md:gap-4">
                        <div class="p-2 rounded-lg bg-red-500/20 shrink-0">
                            <i data-lucide="arrow-left" class="w-4 h-4 md:w-5 md:h-5 text-red-500"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex justify-between items-start gap-2">
                                <div class="min-w-0">
                                    <div class="font-semibold text-sm md:text-base truncate">Current selling price of your shares</div>
                                    <div class="text-xs md:text-sm text-[var(--text-secondary)] truncate">
                                        +$0.0000                                    </div>
                                </div>
                                <div class="text-xs md:text-sm text-[var(--text-secondary)] whitespace-nowrap">
                                                                    </div>
                            </div>
                        </div>
                    </div>
                    
<!-- New Total Profit section -->
<div class="flex items-start gap-3 md:gap-4">
    <div class="p-2 rounded-lg bg-yellow-500/20 shrink-0">
        <i data-lucide="trending-up" class="w-4 h-4 md:w-5 md:h-5 text-yellow-500"></i>
    </div>
    <div class="flex-1 min-w-0">
        <div class="flex justify-between items-start gap-2">
            <div class="min-w-0">
                <div class="font-semibold text-sm md:text-base truncate">Total Profit</div>
                <div class="text-xs md:text-sm text-[var(--text-secondary)] truncate">
                    ₹+$0.0000                </div>
            </div>
        </div>
    </div>
</div>



                </div>
            </div>
        </div>





        <!-- Action Buttons -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 fade-in">
<button class="trade-card p-4 text-center action-button hover:bg-green-500/10" onclick="window.location.href='support.php';">
    <i data-lucide="message-circle-question" class="w-6 h-6 mx-auto mb-2 text-[var(--accent-green)]"></i>
    <span class="block font-semibold text-[var(--accent-green)]">Support Team</span>
</button>

            <button class="trade-card p-4 text-center action-button hover:bg-blue-500/10">
                <i data-lucide="share" class="w-6 h-6 mx-auto mb-2 text-[var(--accent-gold)]"></i>
                <span class="block font-semibold">Share Trade</span>
            </button>
        </div>
    </div>

    <script>
        // Initialize Lucide icons
        lucide.createIcons();

      
        
        

        // Function to show content after loader disappears
        function showContent() {
            setTimeout(function() {
                // Apply fade-out effect to loader
                document.getElementById('overlay').style.animation = 'fadeOut 2s ease-in-out'; 

                // After fade-out, hide the loader and show the content
                setTimeout(function() {
                    document.getElementById('overlay').style.display = 'none';  // Hide loader
                    document.querySelector('.content').style.display = 'block';  // Show content
                }, 1000); // Wait for fade-out animation to complete (2 seconds)
            }, 3000); // Loader stays for 3 seconds
        }

        // Wait for the entire page to load
        window.addEventListener('load', function() {
            // Display content after 3 seconds of loading
            showContent();
        });

    </script>
</body>
</html>