1023 lines
44 KiB
HTML
1023 lines
44 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SecCodeSmith - Contact the Forge</title>
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<!-- DevIcon -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary-dark: #0a0a0a;
|
|
--secondary-dark: #1a1a1a;
|
|
--accent-fire: #ff6400;
|
|
--accent-ember: #ff4500;
|
|
--accent-dragon: #8B0000;
|
|
--text-light: #f5f5f5;
|
|
--text-ash: #aaaaaa;
|
|
--glow-effect: 0 0 10px var(--accent-fire), 0 0 20px rgba(255, 100, 0, 0.4);
|
|
--card-bg: #141414;
|
|
--card-border: #2a2a2a;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--primary-dark);
|
|
color: var(--text-light);
|
|
background-image: url('background.png');
|
|
background-size: 300px;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
font-family: 'Cinzel', serif;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(circle at 50% 50%, rgba(139, 0, 0, 0.08), rgba(10, 10, 10, 0.4));
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Bootstrap Overrides */
|
|
.navbar {
|
|
background-color: rgba(10, 10, 10, 0.95) !important;
|
|
border-bottom: 1px solid rgba(255, 100, 0, 0.3);
|
|
}
|
|
|
|
.navbar-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.navbar-toggler {
|
|
border: 1px solid rgba(255, 100, 0, 0.5);
|
|
color: var(--accent-fire);
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 100, 0, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--text-light) !important;
|
|
position: relative;
|
|
padding: 0.5rem 1rem;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.nav-link:hover, .nav-link.active {
|
|
color: var(--accent-fire) !important;
|
|
}
|
|
|
|
.nav-link::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 0;
|
|
height: 2px;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: linear-gradient(to right, var(--accent-fire), transparent);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.nav-link:hover::after, .nav-link.active::after {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Logo styling */
|
|
.logo-icon {
|
|
font-size: 2rem;
|
|
color: var(--accent-fire);
|
|
text-shadow: var(--glow-effect);
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo-text {
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
background: linear-gradient(to right, var(--accent-fire), var(--text-light));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* Page Header */
|
|
.page-header {
|
|
padding-top: 7rem;
|
|
padding-bottom: 3rem;
|
|
background-color: var(--secondary-dark);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.page-header::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background-image: url('/api/placeholder/1200/400');
|
|
opacity: 0.15;
|
|
filter: brightness(0.3);
|
|
z-index: 0;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.page-title::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 60px;
|
|
height: 3px;
|
|
background: var(--accent-fire);
|
|
bottom: -10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
box-shadow: var(--glow-effect);
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 1.2rem;
|
|
color: var(--text-ash);
|
|
}
|
|
|
|
/* Card styling */
|
|
.card {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-7px);
|
|
border-color: rgba(255, 100, 0, 0.3);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.card::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 5px;
|
|
top: 0;
|
|
left: 0;
|
|
background: linear-gradient(to right, var(--accent-dragon), var(--accent-fire));
|
|
z-index: 1;
|
|
}
|
|
|
|
.contact-card {
|
|
position: relative;
|
|
border-left: 3px solid var(--accent-fire);
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.contact-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background-color: rgba(255, 100, 0, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--accent-fire);
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.contact-title {
|
|
font-size: 1.3rem;
|
|
color: var(--text-light);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.contact-content {
|
|
color: var(--text-ash);
|
|
line-height: 1.6;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.contact-link {
|
|
color: var(--accent-fire);
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.contact-link:hover {
|
|
text-decoration: underline;
|
|
color: var(--accent-ember);
|
|
}
|
|
|
|
/* Form styling */
|
|
.form-control {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--card-border);
|
|
color: var(--text-light);
|
|
padding: 0.75rem 0.9375rem;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.form-control:focus {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
border-color: var(--accent-fire);
|
|
box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25);
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
textarea.form-control {
|
|
min-height: 120px;
|
|
}
|
|
|
|
.form-label {
|
|
color: var(--text-ash);
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.form-text {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.form-select {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--card-border);
|
|
color: var(--text-light);
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff6400' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.form-select:focus {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
border-color: var(--accent-fire);
|
|
box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25);
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.form-select option {
|
|
background-color: var(--card-bg);
|
|
color: var(--text-light);
|
|
}
|
|
|
|
/* Alert styling */
|
|
.alert-success {
|
|
background-color: rgba(25, 135, 84, 0.1);
|
|
border-color: rgba(25, 135, 84, 0.3);
|
|
color: #75b798;
|
|
}
|
|
|
|
.alert-danger {
|
|
background-color: rgba(220, 53, 69, 0.1);
|
|
border-color: rgba(220, 53, 69, 0.3);
|
|
color: #ea868f;
|
|
}
|
|
|
|
/* Button styling */
|
|
.btn-primary {
|
|
background: linear-gradient(45deg, var(--accent-dragon), var(--accent-fire));
|
|
border: none;
|
|
padding: 0.75rem 2rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 7px 25px rgba(139, 0, 0, 0.5);
|
|
background-color: var(--accent-fire);
|
|
background-image: none;
|
|
}
|
|
|
|
.btn-primary:focus {
|
|
box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.4);
|
|
}
|
|
|
|
.btn-primary::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
transition: 0.6s;
|
|
}
|
|
|
|
.btn-primary:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
background: linear-gradient(45deg, rgba(139, 0, 0, 0.5), rgba(255, 100, 0, 0.5));
|
|
transform: none;
|
|
}
|
|
|
|
/* Social links styling */
|
|
.social-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
gap: 15px;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.social-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
gap: 10px;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.social-item:hover {
|
|
background-color: rgba(255, 100, 0, 0.1);
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.social-icon-lg {
|
|
font-size: 1.8rem;
|
|
color: var(--accent-fire);
|
|
}
|
|
|
|
.social-name {
|
|
color: var(--text-ash);
|
|
font-size: 0.9rem;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
/* Map styling */
|
|
.map-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--card-border);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.map-container::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 5px;
|
|
background: linear-gradient(to right, var(--accent-dragon), var(--accent-fire));
|
|
z-index: 1;
|
|
}
|
|
|
|
.map-frame {
|
|
width: 100%;
|
|
height: 400px;
|
|
border: none;
|
|
background-color: var(--card-bg);
|
|
filter: grayscale(90%) invert(92%) hue-rotate(180deg);
|
|
}
|
|
|
|
/* Accordion styling */
|
|
.accordion-button {
|
|
background-color: var(--card-bg) !important;
|
|
color: var(--text-light) !important;
|
|
border-color: var(--card-border) !important;
|
|
box-shadow: none !important;
|
|
padding: 1rem 1.25rem;
|
|
font-family: 'Cinzel', serif;
|
|
}
|
|
|
|
.accordion-button:not(.collapsed) {
|
|
color: var(--accent-fire) !important;
|
|
}
|
|
|
|
.accordion-button:focus {
|
|
border-color: var(--accent-fire) !important;
|
|
box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25) !important;
|
|
}
|
|
|
|
.accordion-button::after {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff6400'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
|
|
}
|
|
|
|
.accordion-item {
|
|
background-color: transparent;
|
|
border: none;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.accordion-body {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-top: none;
|
|
color: var(--text-ash);
|
|
padding: 1.25rem;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
border-bottom-left-radius: 0.375rem;
|
|
border-bottom-right-radius: 0.375rem;
|
|
}
|
|
|
|
/* Binary background effect */
|
|
.binary-line {
|
|
position: absolute;
|
|
font-family: 'Fira Code', monospace;
|
|
color: var(--accent-fire);
|
|
font-size: 0.8rem;
|
|
opacity: 0.15;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Ember effect */
|
|
.ember-particle {
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 3px;
|
|
background-color: var(--accent-fire);
|
|
border-radius: 50%;
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
box-shadow: 0 0 5px var(--accent-fire);
|
|
animation: float 3s linear infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0% {
|
|
transform: translateY(0) rotate(0deg);
|
|
opacity: 0.6;
|
|
}
|
|
100% {
|
|
transform: translateY(-100px) rotate(360deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
background-color: var(--primary-dark);
|
|
padding: 3rem 0;
|
|
border-top: 1px solid rgba(255, 100, 0, 0.2);
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.social-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.social-icon {
|
|
font-size: 1.5rem;
|
|
color: var(--text-ash);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.social-icon:hover {
|
|
color: var(--accent-fire);
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.copyright {
|
|
color: var(--text-ash);
|
|
font-size: 0.9rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Table styling */
|
|
.table {
|
|
color: var(--text-ash);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.table td {
|
|
padding: 0.5rem 0.25rem;
|
|
border-color: rgba(255, 255, 255, 0.05);
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
/* Form validation styling */
|
|
.was-validated .form-control:invalid,
|
|
.form-control.is-invalid {
|
|
border-color: #dc3545;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right calc(0.375em + 0.1875rem) center;
|
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
|
}
|
|
|
|
.was-validated .form-control:valid,
|
|
.form-control.is-valid {
|
|
border-color: #198754;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right calc(0.375em + 0.1875rem) center;
|
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
|
}
|
|
|
|
.invalid-feedback {
|
|
color: #dc3545;
|
|
font-size: 0.875em;
|
|
margin-top: 0.25rem;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 992px) {
|
|
.page-title {
|
|
font-size: 2.5rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.page-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.schedule-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.social-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.map-frame {
|
|
height: 300px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.page-title {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.social-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.form-floating>label {
|
|
padding: 0.75rem 0.75rem;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1.25rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header and Navigation -->
|
|
<nav class="navbar navbar-expand-lg fixed-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="index.html">
|
|
<div class="logo-icon">
|
|
<i class="fas fa-hammer"></i>
|
|
<i class="fas fa-dragon" style="font-size: 1.2rem; position: absolute; top: 0; right: -12px; color: var(--accent-dragon);"></i>
|
|
</div>
|
|
<div class="logo-text">SecCodeSmith</div>
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="index.html">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="blog.html">Blog</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="about.html">About</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="projects.html">Projects</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="contact.html">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Page Header -->
|
|
<section class="page-header text-center">
|
|
<div class="container position-relative">
|
|
<h1 class="page-title">Forge Connection</h1>
|
|
<p class="page-subtitle mt-4">Have a project in mind? Send a message to the forge and let's craft something extraordinary together</p>
|
|
|
|
<!-- Binary background effect -->
|
|
<div class="binary-bg">
|
|
<div class="binary-line" style="top: 20%; left: 10%;">01001100 01101111 01110010 01100101 01101101</div>
|
|
<div class="binary-line" style="bottom: 30%; right: 15%;">01001001 01110000 01110011 01110101 01101101</div>
|
|
<div class="binary-line" style="top: 50%; left: 80%;">01000100 01101111 01101100 01101111 01110010</div>
|
|
<div class="binary-line" style="bottom: 10%; left: 40%;">01010011 01101001 01110100 00100000 01000001 01101101 01100101 01110100</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section class="py-5">
|
|
<div class="container">
|
|
<div class="row g-4">
|
|
<!-- Contact Form Column -->
|
|
<div class="col-lg-7">
|
|
<div class="card h-100">
|
|
<div class="card-header bg-transparent">
|
|
<h2 class="mb-0 py-2">Send a Message to the Forge</h2>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<!-- Success message (hidden by default) -->
|
|
<div class="alert alert-success d-none" id="success-message" role="alert">
|
|
<i class="fas fa-check-circle me-2"></i> Your message has been successfully sent. I'll get back to you soon!
|
|
</div>
|
|
|
|
<!-- Error message (hidden by default) -->
|
|
<div class="alert alert-danger d-none" id="error-message" role="alert">
|
|
<i class="fas fa-exclamation-circle me-2"></i> There was an error sending your message. Please try again later.
|
|
</div>
|
|
|
|
<!-- Contact Form -->
|
|
<form id="contact-form" class="needs-validation" novalidate>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6 mb-3 mb-md-0">
|
|
<label for="name" class="form-label">Your Name</label>
|
|
<input type="text" class="form-control" id="name" name="name" placeholder="Enter your name" required>
|
|
<div class="invalid-feedback">
|
|
Please provide your name.
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="email" class="form-label">Your Email</label>
|
|
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required>
|
|
<div class="invalid-feedback">
|
|
Please provide a valid email address.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="subject" class="form-label">Subject</label>
|
|
<input type="text" class="form-control" id="subject" name="subject" placeholder="What's this regarding?" required>
|
|
<div class="invalid-feedback">
|
|
Please provide a subject for your message.
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="project-type" class="form-label">Project Type</label>
|
|
<select class="form-select" id="project-type" name="project-type" required>
|
|
<option value="" selected disabled>Select a project type</option>
|
|
<option value="embedded">Embedded Systems</option>
|
|
<option value="web">Web Development</option>
|
|
<option value="ml">Machine Learning</option>
|
|
<option value="iot">IoT Solution</option>
|
|
<option value="consulting">Technical Consulting</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
<div class="invalid-feedback">
|
|
Please select a project type.
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="message" class="form-label">Your Message</label>
|
|
<textarea class="form-control" id="message" name="message" rows="5" placeholder="Tell me about your project, requirements, or questions..." required></textarea>
|
|
<div class="invalid-feedback">
|
|
Please provide a message.
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="budget" class="form-label">Budget Range (Optional)</label>
|
|
<select class="form-select" id="budget" name="budget">
|
|
<option value="" selected disabled>Select your budget range</option>
|
|
<option value="small">$1,000 - $5,000</option>
|
|
<option value="medium">$5,000 - $15,000</option>
|
|
<option value="large">$15,000 - $30,000</option>
|
|
<option value="enterprise">$30,000+</option>
|
|
<option value="undecided">Not sure yet</option>
|
|
</select>
|
|
</div>
|
|
<div class="text-center">
|
|
<button type="submit" class="btn btn-primary position-relative" id="submit-button">
|
|
<span id="button-text"><i class="fas fa-paper-plane me-2"></i> Send Message</span>
|
|
<span id="button-loading" class="d-none">
|
|
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Sending...
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Info Column -->
|
|
<div class="col-lg-5">
|
|
<!-- Email Info -->
|
|
<div class="card mb-4">
|
|
<div class="card-body p-4">
|
|
<div class="contact-card">
|
|
<div class="contact-icon">
|
|
<i class="fas fa-envelope"></i>
|
|
</div>
|
|
<h3 class="contact-title">Email</h3>
|
|
<div class="contact-content">
|
|
<p>For project inquiries or questions:</p>
|
|
<p><a href="mailto:forge@seccodesmtih.com" class="contact-link">forge@seccodesmtih.com</a></p>
|
|
<p>For business collaborations:</p>
|
|
<p><a href="mailto:business@seccodesmtih.com" class="contact-link">business@seccodesmtih.com</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Connect Through Socials -->
|
|
<div class="card">
|
|
<div class="card-body p-4">
|
|
<div class="contact-card">
|
|
<div class="contact-icon">
|
|
<i class="fas fa-link"></i>
|
|
</div>
|
|
<h3 class="contact-title">Connect Through the Ether</h3>
|
|
<div class="contact-content">
|
|
<p>You can also reach me through these digital pathways:</p>
|
|
<div class="social-grid">
|
|
<a href="#" class="social-item">
|
|
<i class="fab fa-github social-icon-lg"></i>
|
|
<span class="social-name">GitHub</span>
|
|
</a>
|
|
<a href="#" class="social-item">
|
|
<i class="fab fa-linkedin social-icon-lg"></i>
|
|
<span class="social-name">LinkedIn</span>
|
|
</a>
|
|
<a href="#" class="social-item">
|
|
<i class="fab fa-twitter social-icon-lg"></i>
|
|
<span class="social-name">Twitter</span>
|
|
</a>
|
|
<a href="#" class="social-item">
|
|
<i class="fab fa-discord social-icon-lg"></i>
|
|
<span class="social-name">Discord</span>
|
|
</a>
|
|
<a href="#" class="social-item">
|
|
<i class="fab fa-telegram social-icon-lg"></i>
|
|
<span class="social-name">Telegram</span>
|
|
</a>
|
|
<a href="#" class="social-item">
|
|
<i class="fab fa-stack-overflow social-icon-lg"></i>
|
|
<span class="social-name">Stack Overflow</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ Section -->
|
|
<section class="py-5 bg-dark">
|
|
<div class="container">
|
|
<div class="row mb-4">
|
|
<div class="col-12 text-center">
|
|
<h2 class="mb-3">Frequently Asked Questions</h2>
|
|
<p class="text-muted">Common inquiries about forging digital solutions</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-8 mx-auto">
|
|
<div class="accordion" id="faqAccordion">
|
|
<!-- FAQ Item 1 -->
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="headingOne">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
|
|
What is your typical project timeline?
|
|
</button>
|
|
</h2>
|
|
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">
|
|
Project timelines vary based on complexity and scope. Small projects typically take 2-4 weeks, medium-sized projects 1-2 months, and larger enterprise solutions 3-6 months. I provide detailed timeline estimates during the initial consultation, and maintain transparent communication about progress throughout the development cycle.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ Item 2 -->
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="headingTwo">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
|
How does your collaboration process work?
|
|
</button>
|
|
</h2>
|
|
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">
|
|
My collaboration process consists of five phases: initial consultation, requirements gathering, design and planning, implementation, and testing/deployment. I use agile methodologies with regular check-ins to ensure your vision is being realized. Communication is maintained through your preferred channels (email, Slack, etc.), and you'll have access to development milestones through shared repositories and project management tools.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ Item 3 -->
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="headingThree">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
|
What are your payment terms and methods?
|
|
</button>
|
|
</h2>
|
|
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">
|
|
I typically work with a milestone-based payment structure: 30% upfront to begin work, 30% at the midpoint after key deliverables are approved, and 40% upon project completion. For longer projects, we can establish additional milestones. I accept bank transfers, PayPal, and cryptocurrency payments. All payment terms are clearly outlined in the project contract before work begins.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ Item 4 -->
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="headingFour">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
|
|
Who owns the code and deliverables?
|
|
</button>
|
|
</h2>
|
|
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">
|
|
Upon final payment, you receive full ownership rights to all custom code and deliverables created specifically for your project. I maintain no proprietary claim to custom solutions developed for clients. For projects that incorporate open-source components, those elements remain under their original licenses, and I provide clear documentation of all third-party code used in your project.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ Item 5 -->
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="headingFive">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
|
|
Do you offer support and maintenance?
|
|
</button>
|
|
</h2>
|
|
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">
|
|
Yes, I offer a 30-day warranty period for all projects, during which bug fixes and minor adjustments are covered at no additional cost. For ongoing support, I provide maintenance packages that include regular updates, security patches, and priority response times. These can be tailored to your specific needs and budget, whether you require occasional support or dedicated monthly maintenance.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Map Section -->
|
|
<section class="py-5">
|
|
<div class="container">
|
|
<div class="row mb-4">
|
|
<div class="col-12 text-center">
|
|
<h2 class="mb-3">The Forge Location</h2>
|
|
<p class="text-muted mb-4">Where digital creations are hammered into existence</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="map-container">
|
|
<iframe class="map-frame" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d82077.2903513271!2d21.9433946!3d50.0411861!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x473cfae3cc14d449%3A0xd2240d31b33eb2ed!2zUnplc3rDs3c!5e0!3m2!1sen!2spl!4v1651813309336!5m2!1sen!2spl" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer Section -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="social-links">
|
|
<a href="#" class="social-icon"><i class="fab fa-github"></i></a>
|
|
<a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
|
|
<a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
|
|
<a href="#" class="social-icon"><i class="fab fa-discord"></i></a>
|
|
<a href="#" class="social-icon"><i class="fas fa-envelope"></i></a>
|
|
<a href="#" class="social-icon"><i class="fab fa-hackerrank"></i></a>
|
|
</div>
|
|
<p class="copyright">© 2025 SecCodeSmith. All rights forged in digital fire.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const contactForm = document.getElementById('contact-form');
|
|
const successMessage = document.getElementById('success-message');
|
|
const errorMessage = document.getElementById('error-message');
|
|
const buttonText = document.getElementById('button-text');
|
|
const buttonLoading = document.getElementById('button-loading');
|
|
const submitButton = document.getElementById('submit-button');
|
|
|
|
// Form validation
|
|
contactForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
if (!contactForm.checkValidity()) {
|
|
e.stopPropagation();
|
|
contactForm.classList.add('was-validated');
|
|
return;
|
|
}
|
|
|
|
// Hide any previous messages
|
|
successMessage.classList.add('d-none');
|
|
errorMessage.classList.add('d-none');
|
|
|
|
// Disable button and show loading state
|
|
submitButton.disabled = true;
|
|
buttonText.classList.add('d-none');
|
|
buttonLoading.classList.remove('d-none');
|
|
|
|
// Create ember effect
|
|
createEmbers(submitButton);
|
|
|
|
// Simulate form submission (replace with actual AJAX call in production)
|
|
setTimeout(function() {
|
|
// Show success message
|
|
successMessage.classList.remove('d-none');
|
|
|
|
// Scroll to success message
|
|
successMessage.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
|
|
// Reset form
|
|
contactForm.reset();
|
|
contactForm.classList.remove('was-validated');
|
|
|
|
// Reset button state
|
|
submitButton.disabled = false;
|
|
buttonText.classList.remove('d-none');
|
|
buttonLoading.classList.add('d-none');
|
|
|
|
// Hide success message after 5 seconds
|
|
setTimeout(function() {
|
|
successMessage.classList.add('d-none');
|
|
}, 5000);
|
|
}, 1500);
|
|
});
|
|
|
|
// Add ember effect to submit button on hover
|
|
submitButton.addEventListener('mouseover', function() {
|
|
createEmbers(this);
|
|
});
|
|
|
|
// Create ember particles effect
|
|
function createEmbers(button) {
|
|
for (let i = 0; i < 5; i++) {
|
|
const ember = document.createElement('div');
|
|
ember.className = 'ember-particle';
|
|
|
|
const size = Math.random() * 3 + 2;
|
|
ember.style.width = `${size}px`;
|
|
ember.style.height = `${size}px`;
|
|
|
|
// Position at bottom of button
|
|
ember.style.position = 'absolute';
|
|
ember.style.left = `${Math.random() * button.offsetWidth}px`;
|
|
ember.style.bottom = '0';
|
|
|
|
// Animation
|
|
ember.style.animation = `float ${Math.random() * 2 + 1}s linear`;
|
|
|
|
button.appendChild(ember);
|
|
|
|
// Remove after animation
|
|
setTimeout(() => {
|
|
ember.remove();
|
|
}, 3000);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |