Hugging Face's logo

Spaces:
andyeick
/
securedoc-builder
Running

App Files Community
securedoc-builder
File size: 8,067 Bytes
1979bf2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a33cc5f
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SecureDoc Builder</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
        }
        .code-block {
            font-family: 'Courier New', monospace;
            background-color: #1e293b;
            color: #f8fafc;
            border-radius: 0.5rem;
            padding: 1.5rem;
            overflow-x: auto;
        }
        .step-card {
            transition: all 0.3s ease;
        }
        .step-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <div class="gradient-bg text-white">
        <div class="container mx-auto px-6 py-24">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-6xl font-bold mb-6">SecureDoc Builder 🛡️</h1>
                    <p class="text-xl md:text-2xl mb-8">Automated security patching for your document processing API</p>
                    <div class="flex space-x-4">
                        <button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">Get Started</button>
                        <button class="border border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">Learn More</button>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="code-block">
                        <span class="text-green-400"># Clone the repository</span><br>
                        <span class="text-white">!git clone https://github.com/olwordeaux/document-processor.git</span><br><br>
                        <span class="text-green-400"># Generate secure lock file</span><br>
                        <span class="text-white">!uv lock</span><br><br>
                        <span class="text-green-400"># Build secure container</span><br>
                        <span class="text-white">!gcloud builds submit --tag $TAG</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Steps Section -->
    <div class="container mx-auto px-6 py-20">
        <h2 class="text-3xl font-bold text-center mb-16">Secure Build Process</h2>
        <div class="grid md:grid-cols-3 gap-8">
            <!-- Step 1 -->
            <div class="step-card bg-white p-8 rounded-xl shadow-lg">
                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
                    <span class="text-blue-600 text-2xl font-bold">1</span>
                </div>
                <h3 class="text-xl font-bold mb-4">Vulnerability Analysis</h3>
                <p class="text-gray-600 mb-4">Identify critical security issues in dependencies like h11, transformers, and setuptools.</p>
                <div class="flex items-center text-blue-600">
                    <i data-feather="alert-triangle" class="mr-2"></i>
                    <span>3 Critical Patches</span>
                </div>
            </div>

            <!-- Step 2 -->
            <div class="step-card bg-white p-8 rounded-xl shadow-lg">
                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
                    <span class="text-blue-600 text-2xl font-bold">2</span>
                </div>
                <h3 class="text-xl font-bold mb-4">Dependency Patching</h3>
                <p class="text-gray-600 mb-4">Automatically update pyproject.toml with secure versions and generate lock file.</p>
                <div class="flex items-center text-blue-600">
                    <i data-feather="lock" class="mr-2"></i>
                    <span>Secure Versions</span>
                </div>
            </div>

            <!-- Step 3 -->
            <div class="step-card bg-white p-8 rounded-xl shadow-lg">
                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
                    <span class="text-blue-600 text-2xl font-bold">3</span>
                </div>
                <h3 class="text-xl font-bold mb-4">Secure Container Build</h3>
                <p class="text-gray-600 mb-4">Build and deploy a hardened container image with Google Cloud Build.</p>
                <div class="flex items-center text-blue-600">
                    <i data-feather="package" class="mr-2"></i>
                    <span>Production Ready</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Code Example Section -->
    <div class="bg-gray-100 py-20">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-12">Secure Configuration</h2>
            <div class="max-w-4xl mx-auto">
                <div class="code-block mb-8">
                    <span class="text-green-400"># Patched pyproject.toml</span><br>
                    <span class="text-purple-400">[tool.poetry.dependencies]</span><br>
                    <span class="text-white">python = "^3.12"</span><br>
                    <span class="text-white">fastapi = "^0.111.0"</span><br>
                    <span class="text-yellow-400"># CRITICAL-SEVERITY PATCH</span><br>
                    <span class="text-white">h11 = "^0.16.0"</span><br>
                    <span class="text-yellow-400"># HIGH-SEVERITY PATCH</span><br>
                    <span class="text-white">transformers = "^4.53.0"</span><br>
                    <span class="text-white">setuptools = "^78.1.1"</span><br>
                </div>
                <p class="text-gray-600 text-center max-w-2xl mx-auto">
                    Our automated process ensures all dependencies are pinned to secure versions, preventing known vulnerabilities from reaching production.
                </p>
            </div>
        </div>
    </div>

    <!-- CTA Section -->
    <div class="gradient-bg text-white py-20">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Secure Your API?</h2>
            <p class="text-xl mb-8 max-w-2xl mx-auto">Automate your security patches and build process with SecureDoc Builder today.</p>
            <button class="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition">Start Free Trial</button>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <h3 class="text-2xl font-bold">SecureDoc Builder 🛡️</h3>
                    <p class="text-gray-400 mt-2">Automated security for your document processing</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="hover:text-blue-400 transition"><i data-feather="github"></i></a>
                    <a href="#" class="hover:text-blue-400 transition"><i data-feather="twitter"></i></a>
                    <a href="#" class="hover:text-blue-400 transition"><i data-feather="linkedin"></i></a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
                <p>© 2023 SecureDoc Builder. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        feather.replace();
    </script>
</body>
</html>