Skip to content

Commit 206c493

Browse files
AdityasinghvatsAdityasinghvats
committed
added features section
1 parent 8f2b1c7 commit 206c493

File tree

1 file changed

+198
-37
lines changed

1 file changed

+198
-37
lines changed

‎index.html

Lines changed: 198 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,51 +5,212 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
77
<title>Sankuchit - Image Resizer</title>
8+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9+
<style>
10+
body {
11+
font-family: 'Inter', sans-serif;
12+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
13+
min-height: 100vh;
14+
}
15+
.card-shadow {
16+
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
17+
}
18+
.input-focus:focus {
19+
border-color: #4f46e5;
20+
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
21+
}
22+
.btn-gradient {
23+
background: linear-gradient(to right, #4f46e5, #6366f1);
24+
transition: all 0.3s ease;
25+
}
26+
.btn-gradient:hover {
27+
background: linear-gradient(to right, #4338ca, #4f46e5);
28+
transform: translateY(-1px);
29+
}
30+
.navbar {
31+
backdrop-filter: blur(10px);
32+
background-color: rgba(255, 255, 255, 0.8);
33+
border-bottom: 1px solid rgba(229, 231, 235, 0.7);
34+
}
35+
.nav-link {
36+
position: relative;
37+
transition: all 0.3s ease;
38+
}
39+
.nav-link::after {
40+
content: '';
41+
position: absolute;
42+
width: 0;
43+
height: 2px;
44+
bottom: -2px;
45+
left: 0;
46+
background: linear-gradient(to right, #4f46e5, #6366f1);
47+
transition: width 0.3s ease;
48+
}
49+
.nav-link:hover::after {
50+
width: 100%;
51+
}
52+
</style>
853
</head>
9-
<body class="bg-gray-300 font-sans">
10-
<div class="container mx-auto p-8 max-w-lg">
11-
<header class="text-center mb-12">
12-
<h1 class="text-4xl font-extrabold text-blue-700 tracking-tight">Sankuchit</h1>
13-
<p class="text-gray-600 mt-4 text-lg">The easiest way to resize and optimize your images for the web.</p>
14-
<p class="text-gray-500 mt-2">Free, fast, and secure image resizing. Supports PNG and JPEG formats.</p>
54+
<body class="font-sans">
55+
<!-- Navigation Bar -->
56+
<nav class="navbar sticky top-0 z-50 py-4 px-6 md:px-8">
57+
<div class="container mx-auto flex justify-between items-center">
58+
<div class="flex items-center space-x-2">
59+
<svg class="h-8 w-8 text-indigo-600" fill="currentColor" viewBox="0 0 24 24">
60+
<path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
61+
</svg>
62+
<span class="text-xl font-bold text-indigo-700">Sankuchit</span>
63+
</div>
64+
<div class="hidden md:flex space-x-8">
65+
<a href="#home" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Home</a>
66+
<a href="#features" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Features</a>
67+
<a href="#" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Pricing</a>
68+
<a href="#" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Contact</a>
69+
</div>
70+
</div>
71+
</nav>
72+
73+
<div class="container mx-auto p-4 md:p-8 max-w-xl" id="home">
74+
<header class="text-center mb-10">
75+
<h1 class="text-4xl md:text-5xl font-extrabold text-indigo-700 tracking-tight">Sankuchit</h1>
76+
<div class="h-1 w-20 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto my-4 rounded-full"></div>
77+
<p class="text-gray-700 mt-4 text-lg font-medium">The easiest way to resize and optimize your images for the web.</p>
78+
<p class="text-gray-600 mt-2">Free, fast, and secure image resizing. Supports PNG and JPEG formats.</p>
1579
</header>
1680

17-
<div class="bg-white shadow-md rounded-lg p-8">
18-
<form action="https://sankuchit.onrender.com/resize" method="post" enctype="multipart/form-data" class="space-y-6">
19-
<div>
20-
<label for="width" class="block text-gray-700 text-sm font-bold mb-2">Width (px):</label>
21-
<input step="10" type="number" name="width" id="width" placeholder="Enter width" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
22-
</div>
23-
<div>
24-
<label for="height" class="block text-gray-700 text-sm font-bold mb-2">Height (px):</label>
25-
<input step="10" type="number" name="height" id="height" placeholder="Enter height" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
26-
</div>
27-
<div>
28-
<label for="quality" class="block text-gray-700 text-sm font-bold mb-2">Quality (1-100):</label>
29-
<input type="number" step="5" name="quality" id="quality" placeholder="Enter quality (e.g., 90)" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
30-
</div>
31-
<div>
32-
<label for="format" class="block text-gray-700 text-sm font-bold mb-2">Format:</label>
33-
<select name="format" id="format" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
34-
<option value="png">PNG</option>
35-
<option value="jpeg">JPEG</option>
36-
</select>
37-
</div>
38-
<div>
39-
<label for="file" class="block text-gray-700 text-sm font-bold mb-2">Original File:</label>
40-
<input type="file" name="file" id="file" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
41-
</div>
42-
<div>
43-
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
81+
<div class="bg-white card-shadow rounded-xl p-6 md:p-8 border border-gray-100">
82+
<form action="https://sankuchit-backend.onrender.com/resize" method="post" enctype="multipart/form-data" class="space-y-6">
83+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
84+
<div>
85+
<label for="width" class="block text-gray-700 text-sm font-medium mb-2">Width (px)</label>
86+
<input step="10" type="number" name="width" id="width" placeholder="Enter width"
87+
class="input-focus shadow-sm border border-gray-300 rounded-lg w-full py-2.5 px-4 text-gray-700 leading-tight focus:outline-none transition duration-200">
88+
</div>
89+
<div>
90+
<label for="height" class="block text-gray-700 text-sm font-medium mb-2">Height (px)</label>
91+
<input step="10" type="number" name="height" id="height" placeholder="Enter height"
92+
class="input-focus shadow-sm border border-gray-300 rounded-lg w-full py-2.5 px-4 text-gray-700 leading-tight focus:outline-none transition duration-200">
93+
</div>
94+
</div>
95+
96+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
97+
<div>
98+
<label for="quality" class="block text-gray-700 text-sm font-medium mb-2">Quality (1-100)</label>
99+
<input type="number" step="5" name="quality" id="quality" placeholder="Enter quality (e.g., 90)"
100+
class="input-focus shadow-sm border border-gray-300 rounded-lg w-full py-2.5 px-4 text-gray-700 leading-tight focus:outline-none transition duration-200">
101+
</div>
102+
<div>
103+
<label for="format" class="block text-gray-700 text-sm font-medium mb-2">Format</label>
104+
<select name="format" id="format"
105+
class="input-focus shadow-sm border border-gray-300 rounded-lg w-full py-2.5 px-4 text-gray-700 leading-tight focus:outline-none transition duration-200">
106+
<option value="png">PNG</option>
107+
<option value="jpeg">JPEG</option>
108+
</select>
109+
</div>
110+
</div>
111+
112+
<div class="mt-6">
113+
<label for="file" class="block text-gray-700 text-sm font-medium mb-2">Upload Image</label>
114+
<div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-indigo-500 transition duration-200">
115+
<input type="file" name="file" id="file" class="hidden">
116+
<label for="file" class="cursor-pointer">
117+
<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
118+
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
119+
</svg>
120+
<p class="mt-1 text-sm text-gray-600">Click to upload or drag and drop</p>
121+
<p class="mt-1 text-xs text-gray-500">PNG, JPG up to 10MB</p>
122+
</label>
123+
</div>
124+
</div>
125+
126+
<div class="mt-8">
127+
<button type="submit" class="btn-gradient w-full text-white font-medium py-3 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
44128
Resize Image
45129
</button>
46130
</div>
47131
</form>
48132
</div>
49-
50-
<footer class="text-center mt-12 text-gray-500">
51-
<p>&copy; 2025 Sankuchit. All rights reserved.</p>
52-
</footer>
53133
</div>
134+
<section id="features" class="py-16 bg-gray-50">
135+
<div class="container mx-auto px-4 md:px-8">
136+
<h2 class="text-3xl md:text-4xl font-bold text-center text-indigo-700 mb-12">Why Choose Sankuchit?</h2>
137+
138+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
139+
<!-- Feature 1 -->
140+
<div class="bg-white rounded-xl p-6 card-shadow text-center">
141+
<div class="bg-indigo-100 p-3 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
142+
<svg class="h-8 w-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
143+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
144+
</svg>
145+
</div>
146+
<h3 class="text-xl font-semibold text-gray-800 mb-2">Perfect Quality</h3>
147+
<p class="text-gray-600">The best online image resizer to resize your images at the highest quality.</p>
148+
</div>
149+
150+
<!-- Feature 2 -->
151+
<div class="bg-white rounded-xl p-6 card-shadow text-center">
152+
<div class="bg-indigo-100 p-3 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
153+
<svg class="h-8 w-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
154+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
155+
</svg>
156+
</div>
157+
<h3 class="text-xl font-semibold text-gray-800 mb-2">Lightning Fast</h3>
158+
<p class="text-gray-600">This cloud-hosted, highly scalable tool can resize your images within seconds!</p>
159+
</div>
160+
161+
<!-- Feature 3 -->
162+
<div class="bg-white rounded-xl p-6 card-shadow text-center">
163+
<div class="bg-indigo-100 p-3 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
164+
<svg class="h-8 w-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
165+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
166+
</svg>
167+
</div>
168+
<h3 class="text-xl font-semibold text-gray-800 mb-2">Easy To Use</h3>
169+
<p class="text-gray-600">Simply upload your image and enter a target height and width. It's as easy as that!</p>
170+
</div>
171+
</div>
172+
173+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto mt-8">
174+
<!-- Feature 4 -->
175+
<div class="bg-white rounded-xl p-6 card-shadow text-center">
176+
<div class="bg-indigo-100 p-3 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
177+
<svg class="h-8 w-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
178+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" />
179+
</svg>
180+
</div>
181+
<h3 class="text-xl font-semibold text-gray-800 mb-2">Works Anywhere</h3>
182+
<p class="text-gray-600">Sankuchit is browser-based with no software to install. It works on any platform.</p>
183+
</div>
184+
185+
<!-- Feature 5 -->
186+
<div class="bg-white rounded-xl p-6 card-shadow text-center">
187+
<div class="bg-indigo-100 p-3 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
188+
<svg class="h-8 w-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
189+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
190+
</svg>
191+
</div>
192+
<h3 class="text-xl font-semibold text-gray-800 mb-2">Privacy Guaranteed</h3>
193+
<p class="text-gray-600">Your images are uploaded via a secure 256-bit encrypted SSL connection and deleted automatically within 6 hours.</p>
194+
</div>
195+
196+
<!-- Feature 6 -->
197+
<div class="bg-white rounded-xl p-6 card-shadow text-center">
198+
<div class="bg-indigo-100 p-3 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
199+
<svg class="h-8 w-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
200+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
201+
</svg>
202+
</div>
203+
<h3 class="text-xl font-semibold text-gray-800 mb-2">It's Free</h3>
204+
<p class="text-gray-600">We've resized millions of images for free! There is no software to install, registrations, or watermarks.</p>
205+
</div>
206+
</div>
207+
</div>
208+
</section>
209+
<footer class="text-center m-10 text-gray-500 text-sm">
210+
<p>&copy; 2025 Sankuchit. All rights reserved.</p>
211+
<p class="mt-1">Made with ❤️ for the web</p>
212+
</footer>
213+
214+
54215
</body>
55216
</html>

0 commit comments

Comments
 (0)