Documentations/index.html at main · Syntax-Queen/Documentations · GitHub

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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python Developer Documentation</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.6s ease-out',
                        'slide-up': 'slideUp 0.6s ease-out',
                        'float': 'float 3s ease-in-out infinite',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        },
                        float: {
                            '0%, 100%': { transform: 'translateY(0px)' },
                            '50%': { transform: 'translateY(-10px)' },
                        }
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            background-attachment: fixed;
        }

        .card {
            position: relative;
            overflow: hidden;
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            transition: left 0.5s;
        }

        .card:hover::before {
            left: 100%;
        }

        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .tech-badge {
            display: inline-block;
            font-size: 0.75rem;
            padding: 0.25rem 0.75rem;
            margin: 0.25rem;
            border-radius: 9999px;
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
            font-weight: 600;
        }
    </style>
</head>
<body class="min-h-screen p-4 sm:p-8 font-sans antialiased">

    <div class="max-w-7xl mx-auto py-12 animate-fade-in">

        <!-- Header Section -->
        <header class="text-center mb-16 animate-slide-up">
            <div class="inline-block mb-4">
                <svg class="w-16 h-16 mx-auto text-white animate-float" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                </svg>
            </div>
            <h1 class="text-4xl sm:text-5xl md:text-6xl font-black text-white leading-tight mb-4">
                Python Developer
                <span class="block text-yellow-300">Documentation Hub</span>
            </h1>
            <p class="text-xl text-purple-100 mt-4 max-w-2xl mx-auto">
                Comprehensive documentation for production-ready Python projects, APIs, and tools
            </p>
            <div class="mt-8 flex justify-center gap-4 flex-wrap">
                <span class="tech-badge bg-white bg-opacity-20 text-white">Flask</span>
                <span class="tech-badge bg-white bg-opacity-20 text-white">FastAPI</span>
                <span class="tech-badge bg-white bg-opacity-20 text-white">PostgreSQL</span>
                <span class="tech-badge bg-white bg-opacity-20 text-white">React</span>
                <span class="tech-badge bg-white bg-opacity-20 text-white">Tailwind</span>
            </div>
        </header>

        <!-- Documentation Cards Grid -->
        <main class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">

            <!-- Card 1: Sell Daily -->
            <div class="card bg-white rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 animate-slide-up" style="animation-delay: 0.1s;">
                <div class="h-2 bg-gradient-to-r from-blue-500 to-blue-600 rounded-t-2xl"></div>
                <div class="p-8">
                    <div class="flex items-center justify-center w-16 h-16 mb-6 rounded-xl bg-blue-100">
                        <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900 mb-3">Sell Daily</h2>
                    <p class="text-gray-600 mb-6 leading-relaxed">
                        Full-stack e-commerce platform with secure authentication, real-time inventory management, and seamless payment integration.
                    </p>
                    <div class="mb-6">
                        <div class="tech-badge">Flask</div>
                        <div class="tech-badge">PostgreSQL</div>
                        <div class="tech-badge">React</div>
                        <div class="tech-badge">JWT</div>
                    </div>
                    <a href="sell-daily.html" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl shadow-lg hover:shadow-xl hover:from-blue-600 hover:to-blue-700 transition-all duration-200 group">
                        View Documentation
                        <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </a>
                </div>
            </div>

            <!-- Card 2: Async Web Scraper -->
            <div class="card bg-white rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 animate-slide-up" style="animation-delay: 0.2s;">
                <div class="h-2 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-t-2xl"></div>
                <div class="p-8">
                    <div class="flex items-center justify-center w-16 h-16 mb-6 rounded-xl bg-indigo-100">
                        <svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900 mb-3">Ai Dream Chat</h2>
                    <p class="text-gray-600 mb-6 leading-relaxed">
                        AI Dream Chat: RESTful API using Flask, JWT authentication, AI interpretation, SQLite/PostgreSQL database, group chat, post management system.
                    </p>
                    <div class="mb-6">
                        <div class="tech-badge">Flask</div>
                        <div class="tech-badge">Websocket</div>
                        <div class="tech-badge">Javascript</div>
                    </div>
                    <a href="adc.html" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl shadow-lg hover:shadow-xl hover:from-indigo-600 hover:to-purple-700 transition-all duration-200 group">
                        Explore Guide
                        <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </a>
                </div>
            </div>

            <!-- Card 3: ML Model API -->
            <div class="card bg-white rounded-2xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 animate-slide-up" style="animation-delay: 0.3s;">
                <div class="h-2 bg-gradient-to-r from-green-500 to-emerald-600 rounded-t-2xl"></div>
                <div class="p-8">
                    <div class="flex items-center justify-center w-16 h-16 mb-6 rounded-xl bg-green-100">
                        <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" 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"></path>
                        </svg>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900 mb-3">ML Inference API</h2>
                    <p class="text-gray-600 mb-6 leading-relaxed">
                        Production-ready machine learning inference service with model versioning, batch processing, and comprehensive monitoring.
                    </p>
                    <div class="mb-6">
                        <div class="tech-badge">FastAPI</div>
                        <div class="tech-badge">TensorFlow</div>
                        <div class="tech-badge">Docker</div>
                    </div>
                    <a href="#ml-api" class="inline-flex items-center px-6 py-3 text-sm font-semibold text-white bg-gradient-to-r from-green-500 to-emerald-600 rounded-xl shadow-lg hover:shadow-xl hover:from-green-600 hover:to-emerald-700 transition-all duration-200 group">
                        Read Details
                        <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </a>
                </div>
            </div>

        </main>

        <!-- Stats Section -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12 animate-slide-up" style="animation-delay: 0.4s;">
            <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl p-6 text-center border border-white border-opacity-20">
                <div class="text-4xl font-bold text-white mb-2">3</div>
                <div class="text-purple-100">Active Projects</div>
            </div>
            <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl p-6 text-center border border-white border-opacity-20">
                <div class="text-4xl font-bold text-white mb-2">99.9%</div>
                <div class="text-purple-100">Uptime</div>
            </div>
            <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl p-6 text-center border border-white border-opacity-20">
                <div class="text-4xl font-bold text-white mb-2">24/7</div>
                <div class="text-purple-100">Support</div>
            </div>
        </div>

        <!-- Footer -->
        <footer class="text-center text-white text-opacity-80 py-8 animate-fade-in" style="animation-delay: 0.5s;">
            <p class="text-lg mb-2">Ready to deploy your next Python project?</p>
            <p class="text-sm text-purple-200">Built with passion for robust, scalable solutions</p>
        </footer>

    </div>

</body>
</html>