Spaces:
Running
Running
File size: 11,373 Bytes
4ae16d5 5520df0 4ae16d5 ae5765e 4ae16d5 ae5765e 5520df0 4ae16d5 ae5765e 4ae16d5 ae5765e 4ae16d5 ae5765e 4ae16d5 ae5765e 4ae16d5 ae5765e 4ae16d5 ae5765e 4ae16d5 ae5765e 4ae16d5 ae5765e 4ae16d5 ae5765e 4ae16d5 ae5765e 4ae16d5 ae5765e | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>That Tech Guy - Tech Solutions</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.8s ease-out forwards;
}
.form-input:focus {
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -10px rgba(99, 102, 241, 0.6);
}
.success-message {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
.success-message.hidden {
display: none;
}
.success-message.active {
max-height: 100px;
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen flex flex-col items-center justify-center p-4 overflow-hidden">
<div class="max-w-2xl w-full mx-auto text-center">
<div class="animate-fade-in mb-12">
<h1 class="text-5xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-500 mb-4">
That Tech Guy
</h1>
<p class="text-gray-400 text-lg">Tech solutions tailored just for you</p>
</div>
<div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-8 shadow-2xl border border-gray-700 animate-fade-in" style="animation-delay: 0.2s;">
<h2 class="text-2xl font-semibold text-white mb-6">How can I help you today?</h2>
<!-- Success message if redirected from Formspree -->
<div id="successMessage" class="success-message hidden bg-green-900 bg-opacity-30 text-green-300 rounded-lg p-4 mb-6 border border-green-700">
<div class="flex items-center justify-center">
<i class="fas fa-check-circle mr-2 text-xl"></i>
<span>Thank you! Your message has been sent. I'll get back to you soon.</span>
</div>
</div>
<!-- ✅ Updated form for Formspree -->
<form action="https://formspree.io/f/xblkbypd" method="POST" class="space-y-6">
<div>
<label for="name" class="block text-left text-gray-300 mb-2">Full Name</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-user text-gray-500"></i>
</div>
<input type="text" id="name" name="name" required
class="form-input w-full pl-10 pr-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:border-indigo-500 focus:ring-0"
placeholder="John Doe">
</div>
</div>
<div>
<label for="email" class="block text-left text-gray-300 mb-2">Email</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-envelope text-gray-500"></i>
</div>
<input type="email" id="email" name="email" required
class="form-input w-full pl-10 pr-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:border-indigo-500 focus:ring-0"
placeholder="email@example.com">
</div>
</div>
<div>
<label for="message" class="block text-left text-gray-300 mb-2">How can I help?</label>
<textarea id="message" name="message" rows="4" required
class="form-input w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:border-indigo-500 focus:ring-0"
placeholder="Brief description of what you need help with..."></textarea>
</div>
<button type="submit"
class="submit-btn w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105">
Send Message <i class="fas fa-paper-plane ml-2"></i>
</button>
</form>
</div>
<!-- Footer -->
<div class="mt-12 text-gray-500 text-sm animate-fade-in" style="animation-delay: 0.4s;">
<p>© <span id="year"></span> That Tech Guy. All rights reserved.</p>
</div>
</div>
<script>
// Set current year in footer
document.getElementById('year').textContent = new Date().getFullYear();
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=TheOrangeSplat/that-tech-guy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>That Tech Guy - Tech Solutions</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.8s ease-out forwards;
}
.form-input:focus {
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -10px rgba(99, 102, 241, 0.6);
}
.success-message {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
.success-message.hidden {
display: none;
}
.success-message.active {
max-height: 100px;
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen flex flex-col items-center justify-center p-4 overflow-hidden">
<div class="max-w-2xl w-full mx-auto text-center">
<div class="animate-fade-in mb-12">
<h1 class="text-5xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-500 mb-4">
That Tech Guy
</h1>
<p class="text-gray-400 text-lg">Tech solutions tailored just for you</p>
</div>
<div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-8 shadow-2xl border border-gray-700 animate-fade-in" style="animation-delay: 0.2s;">
<h2 class="text-2xl font-semibold text-white mb-6">How can I help you today?</h2>
<!-- Success message if redirected from Formspree -->
<div id="successMessage" class="success-message hidden bg-green-900 bg-opacity-30 text-green-300 rounded-lg p-4 mb-6 border border-green-700">
<div class="flex items-center justify-center">
<i class="fas fa-check-circle mr-2 text-xl"></i>
<span>Thank you! Your message has been sent. I'll get back to you soon.</span>
</div>
</div>
<!-- ✅ Updated form for Formspree -->
<form action="https://formspree.io/f/xblkbypd" method="POST" class="space-y-6">
<div>
<label for="name" class="block text-left text-gray-300 mb-2">Full Name</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-user text-gray-500"></i>
</div>
<input type="text" id="name" name="name" required
class="form-input w-full pl-10 pr-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:border-indigo-500 focus:ring-0"
placeholder="John Doe">
</div>
</div>
<div>
<label for="email" class="block text-left text-gray-300 mb-2">Email</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-envelope text-gray-500"></i>
</div>
<input type="email" id="email" name="email" required
class="form-input w-full pl-10 pr-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:border-indigo-500 focus:ring-0"
placeholder="email@example.com">
</div>
</div>
<div>
<label for="message" class="block text-left text-gray-300 mb-2">How can I help?</label>
<textarea id="message" name="message" rows="4" required
class="form-input w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:border-indigo-500 focus:ring-0"
placeholder="Brief description of what you need help with..."></textarea>
</div>
<button type="submit"
class="submit-btn w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105">
Send Message <i class="fas fa-paper-plane ml-2"></i>
</button>
</form>
</div>
<!-- Footer -->
<div class="mt-12 text-gray-500 text-sm animate-fade-in" style="animation-delay: 0.4s;">
<p>© <span id="year"></span> That Tech Guy. All rights reserved.</p>
</div>
</div>
<script>
// Set current year in footer
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>
|