File size: 7,251 Bytes
7c018af
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analysis - ProfitPulse AI Trader</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body class="min-h-screen bg-gray-900 text-white">
    <!-- Navigation -->
    <nav class="glass-effect fixed w-full z-50">
        <div class="container mx-auto px-6 py-4">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 bg-gradient-to-r from-green-400 to-blue-500 rounded-full"></div>
                    <span class="text-xl font-bold">ProfitPulse</span>
                </div>
                <div class="hidden md:flex space-x-8">
                    <a href="dashboard.html" class="hover:text-blue-300 transition-colors">Dashboard</a>
                    <a href="analysis.html" class="hover:text-blue-300 transition-colors">Analysis</a>
                    <a href="portfolio.html" class="hover:text-blue-300 transition-colors">Portfolio</a>
                    <a href="settings.html" class="hover:text-blue-300 transition-colors">Settings</a>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="index.html" class="bg-gradient-to-r from-green-500 to-blue-600 px-6 py-2 rounded-full font-semibold hover:shadow-lg transition-all">
                        Back to Home
                    </a>
                    <button class="md:hidden">
                        <i data-feather="menu"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Analysis Content -->
    <section class="pt-32 pb-20">
        <div class="container mx-auto px-6">
            <h1 class="text-4xl font-bold text-center mb-8">AI Market Analysis</h1>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
                <!-- Beginner Analysis -->
                <div class="glass-effect rounded-2xl p-6">
                    <div class="flex items-center mb-6">
                        <i data-feather="graduation-cap" class="w-8 h-8 text-blue-400 mr-3"></i>
                        <h3 class="text-xl font-semibold">Beginner-Friendly Analysis</h3>
                    </div>
                    <div class="space-y-4">
                        <div class="p-4 bg-blue-500 bg-opacity-20 rounded-xl">
                            <h4 class="font-semibold mb-2">Market Sentiment: Positive</h4>
                            <p class="text-sm">Great time for beginners to start learning with small investments</p>
                        </div>
                        <div class="p-4 bg-green-500 bg-opacity-20 rounded-xl">
                            <h4 class="font-semibold mb-2">Recommended Start: $100-500</h4>
                            <p class="text-sm">Low-risk amount perfect for learning the basics</p>
                        </div>
                        <div class="p-4 bg-yellow-500 bg-opacity-20 rounded-xl">
                            <h4 class="font-semibold mb-2">Learning Focus: ETFs</h4>
                            <p class="text-sm">Diversified funds are safer for beginners than individual stocks</p>
                        </div>
                    </div>
                </div>

                <!-- Risk Assessment -->
                <div class="glass-effect rounded-2xl p-6">
                    <div class="flex items-center mb-6">
                        <i data-feather="shield" class="w-8 h-8 text-yellow-400 mr-3"></i>
                        <h3 class="text-xl font-semibold">Risk Assessment</h3>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <div class="flex justify-between mb-2">
                                <span>Market Volatility</span>
                                <span>65%</span>
                            </div>
                            <div class="w-full bg-gray-600 rounded-full h-2">
                                <div class="bg-yellow-400 h-2 rounded-full" style="width: 65%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-2">
                                <span>Beginner Risk Level</span>
                                <span>Low</span>
                            </div>
                            <div class="w-full bg-gray-600 rounded-full h-2">
                                <div class="bg-green-400 h-2 rounded-full" style="width: 30%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-2">
                                <span>Learning Curve</span>
                                <span>Medium</span>
                            </div>
                            <div class="w-full bg-gray-600 rounded-full h-2">
                                <div class="bg-blue-400 h-2 rounded-full" style="width: 50%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Plan -->
            <div class="glass-effect rounded-2xl p-6">
                <div class="flex items-center mb-6">
                    <i data-feather="calendar" class="w-8 h-8 text-green-400 mr-3"></i>
                    <h3 class="text-xl font-semibold">Week 1 Action Plan</h3>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="p-4 bg-green-500 bg-opacity-20 rounded-xl">
                        <h4 class="font-semibold mb-2">Monday</h4>
                        <p class="text-sm">Watch beginner trading videos (30 min)</p>
                    </div>
                    <div class="p-4 bg-blue-500 bg-opacity-20 rounded-xl">
                        <h4 class="font-semibold mb-2">Tuesday</h4>
                        <p class="text-sm">Practice paper trading with $10k virtual</p>
                    </div>
                    <div class="p-4 bg-purple-500 bg-opacity-20 rounded-xl">
                        <h4 class="font-semibold mb-2">Wednesday</h4>
                        <p class="text-sm">Review basic terminology and concepts</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            feather.replace();
        });
    </script>
</body>
</html>