Hugging Face's logo

Spaces:
nazigermany
/
blitzcrew-mastermind
Running

App Files Community
blitzcrew-mastermind
File size: 9,171 Bytes
8fadc60
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
 
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Crew Analysis - BlitzCrew Mastermind</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="components/navbar.js"></script>
    <script src="components/crew-card.js"></script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
    <custom-navbar></custom-navbar>
    
    <main class="container mx-auto px-4 py-8">
        <section class="text-center mb-12">
            <h1 class="text-4xl font-bold mb-4 bg-gradient-to-r from-purple-500 to-blue-500 bg-clip-text text-transparent">AI Crew Analysis</h1>
            <p class="text-xl text-gray-400 max-w-2xl mx-auto">Get AI-powered recommendations for optimizing your crew configurations</p>
        </section>

        <section class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
            <div class="bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow">
                <div class="flex items-center mb-4">
                    <div class="bg-purple-500 rounded-full p-3 mr-4">
                        <i data-feather="cpu" class="text-white"></i>
                    </div>
                    <h2 class="text-xl font-semibold">Analyze Your Crew</h2>
                </div>
                <p class="text-gray-400 mb-4">Upload your crew configuration or paste your current setup for AI analysis</p>
                <div id="upload-container" class="mb-4 p-4 border-2 border-dashed border-gray-600 rounded-lg text-center cursor-pointer hover:border-purple-400 transition-colors">
                    <i data-feather="upload" class="w-8 h-8 mb-2 mx-auto text-gray-400"></i>
                    <p class="text-gray-400">Click to upload or drag & drop</p>
                    <input type="file" id="crew-upload" class="hidden" accept=".json,.txt">
                </div>
                <button id="analyze-btn" class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg flex items-center justify-center">
                    <i data-feather="activity" class="mr-2"></i> Analyze Crew
                </button>
            </div>

            <div class="bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow">
                <div class="flex items-center mb-4">
                    <div class="bg-blue-500 rounded-full p-3 mr-4">
                        <i data-feather="bar-chart-2" class="text-white"></i>
                    </div>
                    <h2 class="text-xl font-semibold">Results Dashboard</h2>
                </div>
                <div id="results-container" class="min-h-[300px] flex items-center justify-center text-gray-500">
                    <div class="text-center">
                        <i data-feather="alert-circle" class="w-10 h-10 mx-auto mb-2"></i>
                        <p>Your analysis results will appear here</p>
                    </div>
                </div>
                <div id="recommendations" class="hidden mt-4 space-y-3"></div>
            </div>
        </section>

        <section class="bg-gray-800 rounded-xl p-8 shadow-lg mb-12">
            <h2 class="text-2xl font-bold mb-6 flex items-center">
                <i data-feather="info" class="mr-2"></i> How It Works
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-gray-700 p-6 rounded-lg">
                    <div class="bg-indigo-500 rounded-full w-12 h-12 flex items-center justify-center mb-4">
                        <i data-feather="upload" class="text-white w-6 h-6"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Upload Your Crew</h3>
                    <p class="text-gray-400">Provide your current crew configuration in JSON format or paste the details</p>
                </div>
                <div class="bg-gray-700 p-6 rounded-lg">
                    <div class="bg-indigo-500 rounded-full w-12 h-12 flex items-center justify-center mb-4">
                        <i data-feather="cpu" class="text-white w-6 h-6"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">AI Analysis</h3>
                    <p class="text-gray-400">Our Hugging Face model analyzes your crew and identifies optimization opportunities</p>
                </div>
                <div class="bg-gray-700 p-6 rounded-lg">
                    <div class="bg-indigo-500 rounded-full w-12 h-12 flex items-center justify-center mb-4">
                        <i data-feather="award" class="text-white w-6 h-6"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Get Recommendations</h3>
                    <p class="text-gray-400">Receive personalized suggestions to improve your crew's performance</p>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-gray-800 py-8">
        <div class="container mx-auto px-4 text-center text-gray-400">
            <p>© 2023 BlitzCrew Mastermind. Not affiliated with Wargaming or World of Tanks Blitz.</p>
        </div>
    </footer>

    <script>
        feather.replace();
    </script>
    <script src="script.js"></script>
    <script>
        document.getElementById('upload-container').addEventListener('click', function() {
            document.getElementById('crew-upload').click();
        });

        document.getElementById('analyze-btn').addEventListener('click', function() {
            // Simulate analysis (would be replaced with actual Hugging Face API call)
            const resultsContainer = document.getElementById('results-container');
            resultsContainer.innerHTML = `
                <div class="w-full text-center">
                    <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500 mx-auto mb-4"></div>
                    <p>Analyzing your crew configuration...</p>
                </div>
            `;

            setTimeout(() => {
                resultsContainer.innerHTML = `
                    <div class="w-full">
                        <h3 class="text-xl font-semibold mb-4 text-center">Analysis Complete</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-gray-700 p-4 rounded-lg">
                                <h4 class="font-medium mb-2">Current Rating</h4>
                                <div class="flex items-center">
                                    ${Array(4).fill('<i data-feather="star" class="w-4 h-4 text-yellow-500"></i>').join('')}
                                    ${Array(1).fill('<i data-feather="star" class="w-4 h-4 text-gray-500"></i>').join('')}
                                    <span class="ml-2 text-sm">4.0/5.0</span>
                                </div>
                            </div>
                            <div class="bg-gray-700 p-4 rounded-lg">
                                <h4 class="font-medium mb-2">Potential Rating</h4>
                                <div class="flex items-center">
                                    ${Array(5).fill('<i data-feather="star" class="w-4 h-4 text-yellow-500"></i>').join('')}
                                    <span class="ml-2 text-sm">5.0/5.0</span>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                feather.replace();

                const recommendations = document.getElementById('recommendations');
                recommendations.classList.remove('hidden');
                recommendations.innerHTML = `
                    <h4 class="font-semibold mb-2">AI Recommendations:</h4>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i data-feather="check-circle" class="text-green-500 w-4 h-4 mt-1 mr-2 flex-shrink-0"></i>
                            <span>Replace "Repairs" with "Sixth Sense" for better battle awareness</span>
                        </li>
                        <li class="flex items-start">
                            <i data-feather="check-circle" class="text-green-500 w-4 h-4 mt-1 mr-2 flex-shrink-0"></i>
                            <span>Consider adding "Brothers in Arms" to improve all crew skills by 5%</span>
                        </li>
                        <li class="flex items-start">
                            <i data-feather="check-circle" class="text-green-500 w-4 h-4 mt-1 mr-2 flex-shrink-0"></i>
                            <span>Focus on "Smooth Ride" and "Snapshot" for better accuracy while moving</span>
                        </li>
                    </ul>
                `;
                feather.replace();
            }, 2500);
        });
    </script>
</body>
</html>