Hugging Face's logo

Spaces:
UnSinnlos
/
sketchmaster-pro
Running

App Files Community
sketchmaster-pro
File size: 7,891 Bytes 
50482a0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About SketchMaster Pro</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>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
    <style>
        .feature-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">
    <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div>
    
    <!-- Navigation -->
    <nav class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <a href="index.html" class="text-2xl font-bold text-indigo-600 flex items-center">
                <i data-feather="pen-tool" class="w-6 h-6 mr-2"></i>
                SketchMaster Pro
            </a>
            <div class="flex space-x-6">
                <a href="index.html" class="text-gray-600 hover:text-indigo-600 transition">Home</a>
                <a href="about.html" class="text-indigo-600 font-medium">About</a>
            </div>
        </div>
    </nav>

    <div class="container mx-auto px-4 py-12 max-w-4xl">
        <!-- Hero Section -->
        <div class="text-center mb-16">
            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">About SketchMaster Pro</h1>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto">Transforming ordinary photos into extraordinary hand-drawn sketches with advanced image processing techniques.</p>
        </div>

        <!-- Features Section -->
        <div class="mb-16">
            <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Key Features</h2>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
                    <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="zap" class="w-6 h-6 text-indigo-600"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Multiple Edge Detection</h3>
                    <p class="text-gray-600">Choose between Canny, Sobel, or Laplace edge detection algorithms to achieve different artistic effects.</p>
                </div>
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
                    <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="sliders" class="w-6 h-6 text-indigo-600"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Customizable Parameters</h3>
                    <p class="text-gray-600">Fine-tune every aspect of your sketch with precise control over blur, thresholds, line thickness, and more.</p>
                </div>
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
                    <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="grid" class="w-6 h-6 text-indigo-600"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Hatching Effects</h3>
                    <p class="text-gray-600">Add realistic hatching patterns with adjustable angle, spacing, and thickness for authentic hand-drawn look.</p>
                </div>
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
                    <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="download" class="w-6 h-6 text-indigo-600"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">High-Quality Output</h3>
                    <p class="text-gray-600">Download your sketches in high resolution PNG format for printing or digital use.</p>
                </div>
            </div>
        </div>

        <!-- How It Works -->
        <div class="mb-16">
            <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">How It Works</h2>
            <div class="bg-white rounded-xl shadow-md p-6">
                <div class="space-y-8">
                    <div class="flex">
                        <div class="flex-shrink-0 mr-4">
                            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 font-bold">1</div>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">Upload Your Image</h3>
                            <p class="text-gray-600">Drag and drop or select an image file from your device. We support JPG, PNG, and other common formats.</p>
                        </div>
                    </div>
                    <div class="flex">
                        <div class="flex-shrink-0 mr-4">
                            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 font-bold">2</div>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">Adjust Parameters</h3>
                            <p class="text-gray-600">Customize the sketch effect using our intuitive controls for edge detection, thresholds, line styles, and hatching.</p>
                        </div>
                    </div>
                    <div class="flex">
                        <div class="flex-shrink-0 mr-4">
                            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 font-bold">3</div>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">Generate & Download</h3>
                            <p class="text-gray-600">Process your image instantly and download the high-quality sketch result with a single click.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Call to Action -->
        <div class="text-center">
            <a href="index.html" class="inline-flex items-center px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition shadow-md">
                <i data-feather="pen-tool" class="w-5 h-5 mr-2"></i>
                Try SketchMaster Pro Now
            </a>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-white border-t border-gray-200 py-8">
        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
            <p>© 2023 SketchMaster Pro. All rights reserved.</p>
        </div>
    </footer>

    <script>
        // Initialize Vanta.js background
        VANTA.GLOBE({
            el: "#vanta-bg",
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color: 0x4f46e5,
            backgroundColor: 0xf8fafc,
            size: 0.7
        });

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