Files
GoNetKit/web/landing_page.html

159 lines
8.4 KiB
HTML

{{template "base.html" .}}
{{define "title"}}GoNetKit{{end}}
{{define "head"}}
<style>
/* Additional custom styles for landing page */
.feature-card {
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-4px);
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.category-badge {
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
}
</style>
{{end}}
{{define "content"}}
<div>
<!-- Hero Section -->
<div class="text-center mb-16">
<div class="gradient-bg rounded-3xl p-6 mb-4 shadow-2xl">
<h1 class="text-5xl md:text-6xl font-bold text-white" style="border-bottom: none;">IT & Security Tools</h1>
<!--
<p class="text-xl md:text-2xl text-blue-100 mb-8 max-w-3xl mx-auto">
Your comprehensive toolkit for IT diagnostics and online security
</p>
<div class="flex flex-wrap justify-center gap-4 text-sm text-blue-200">
<span class="bg-white/20 px-4 py-2 rounded-full">Email Security</span>
<span class="bg-white/20 px-4 py-2 rounded-full">Password Security</span>
<span class="bg-white/20 px-4 py-2 rounded-full">Data Protection</span>
</div>
-->
</div>
</div>
<!-- Tools Categories -->
<div class="max-w-6xl mx-auto space-y-12">
<!-- IT Tools Category -->
<div class="category-section">
<div class="flex items-center mb-8">
<div class="category-badge text-white px-4 py-2 rounded-full text-sm font-semibold mr-4">
IT TOOLS
</div>
<div class="flex-1 h-px bg-dark-border"></div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<!-- Email Header Analyzer -->
<a href="/analyze" class="feature-card block group">
<div class="bg-dark-surface border border-dark-border rounded-xl p-6 h-full hover:border-green-500 transition-all duration-300">
<div class="flex items-start space-x-4">
<div class="flex items-center justify-center w-12 h-12 bg-green-600 rounded-xl group-hover:bg-green-700 transition-colors">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
</svg>
</div>
<div class="flex-1">
<h3 class="text-xl font-bold text-dark-text mb-2 group-hover:text-green-400 transition-colors">
Email Header Analyzer
</h3>
<p class="text-dark-muted mb-4">
Analyze email headers to detect security threats, trace origins, and validate email authenticity. Essential for cybersecurity professionals.
</p>
</div>
</div>
</div>
</a>
<!-- DNS Tools -->
<a href="/dns" class="feature-card block group">
<div class="bg-dark-surface border border-dark-border rounded-xl p-6 h-full hover:border-purple-500 transition-all duration-300">
<div class="flex items-start space-x-4">
<div class="flex items-center justify-center w-12 h-12 bg-purple-600 rounded-xl group-hover:bg-purple-700 transition-colors">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
</div>
<div class="flex-1">
<h3 class="text-xl font-bold text-dark-text mb-2 group-hover:text-purple-400 transition-colors">
DNS Tools
</h3>
<p class="text-dark-muted mb-4">
Perform comprehensive DNS lookups, diagnose network issues, and verify domain configurations. Perfect for system administrators.
</p>
</div>
</div>
</div>
</a>
</div>
</div>
<!-- Online Security Category -->
<div class="category-section">
<div class="flex items-center mb-8">
<div class="category-badge text-white px-4 py-2 rounded-full text-sm font-semibold mr-4">
ONLINE SECURITY
</div>
<div class="flex-1 h-px bg-dark-border"></div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<!-- Password Generator -->
<a href="/pwgenerator" class="feature-card block group">
<div class="bg-dark-surface border border-dark-border rounded-xl p-6 h-full hover:border-yellow-500 transition-all duration-300">
<div class="flex items-start space-x-4">
<div class="flex items-center justify-center w-12 h-12 bg-yellow-600 rounded-xl group-hover:bg-yellow-700 transition-colors">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-0.257-.257A6 6 0 1118 8zm-1.5 0a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM10 7a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd"/>
</svg>
</div>
<div class="flex-1">
<h3 class="text-xl font-bold text-dark-text mb-2 group-hover:text-yellow-400 transition-colors">
Password Generator
</h3>
<p class="text-dark-muted mb-4">
Generate cryptographically secure passwords with customizable options. Enhance your digital security with strong, unique passwords.
</p>
</div>
</div>
</div>
</a>
<!-- Password Pusher -->
<a href="/pwpush" class="feature-card block group">
<div class="bg-dark-surface border border-dark-border rounded-xl p-6 h-full hover:border-red-500 transition-all duration-300">
<div class="flex items-start space-x-4">
<div class="flex items-center justify-center w-12 h-12 bg-red-600 rounded-xl group-hover:bg-red-700 transition-colors">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
</svg>
</div>
<div class="flex-1">
<h3 class="text-xl font-bold text-dark-text mb-2 group-hover:text-red-400 transition-colors">
Password Pusher
</h3>
<p class="text-dark-muted mb-4">
Securely share sensitive information with automatic expiration and view limits. Perfect for sharing passwords and confidential data.
</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
{{end}}