-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
221 lines (186 loc) · 12.5 KB
/
Copy pathcontact.html
File metadata and controls
221 lines (186 loc) · 12.5 KB
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
218
219
220
221
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Siva's DevOps Website – Contact</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/styles.css" />
<!-- Keep your site JS; we also add a small inline handler for the form -->
<script src="assets/app.js" defer></script>
<!-- Favicon & App Icons -->
<link rel="icon" type="image/x-icon" href="favicon_io/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
<link rel="manifest" href="favicon_io/site.webmanifest">
</head>
<body class="theme-light">
<header class="nav">
<div class="nav__brand">Siva's DevOps</div>
<nav class="nav__links">
<a href="index.html">Home</a>
<a href="features.html">Features</a>
<a href="contact.html" class="active">Contact</a>
</nav>
<button id="themeToggle" class="btn btn--ghost">🌙 Dark Mode</button>
</header>
<main class="content">
<h1 class="hero__title" style="color: #333333; margin-bottom: 12px;">Explore Our Profiles</h1>
<section id="action-buttons">
<div class="button-container">
<!-- GitHub: icon only -->
<a href="https://github.com/iam-siva-prasad/" target="_blank" rel="noopener" class="btn btn--github" aria-label="GitHub">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="25" height="25" aria-hidden="true" focusable="false">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.65 7.65 0 0 1 4 0c1.53-1.03 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.28.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
<!-- LinkedIn: icon only -->
<a href="https://www.linkedin.com/in/iam-siva-prasad/" target="_blank" rel="noopener" class="btn btn--linkedin" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM.5 8h4V24h-4V8zm7.5 0h3.8v2.2h.05c.53-1 1.83-2.2 3.77-2.2 4.03 0 4.78 2.65 4.78 6.1V24h-4v-7.6c0-1.8-.03-4.1-2.5-4.1-2.5 0-2.88 1.95-2.88 4v7.7h-4V8z"/>
</svg>
</a>
<!-- WhatsApp: icon only -->
<a href="https://wa.me/919110398220" target="_blank" rel="noopener" class="btn btn--whatsapp" aria-label="WhatsApp">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<!-- Monochrome WhatsApp mark; inherits color via currentColor -->
<path d="M20.52 3.48A11.94 11.94 0 0 0 12.01 0C5.4 0 .05 5.35.05 11.96c0 2.1.55 4.08 1.6 5.84L0 24l6.36-1.65a12 12 0 0 0 5.65 1.43h.01c6.62 0 11.96-5.35 11.96-11.96a11.9 11.9 0 0 0-3.46-8.34zM12.02 21.3h-.01a9.3 9.3 0 0 1-4.74-1.29l-.34-.2-3.77.98 1.01-3.65-.22-.36a9.34 9.34 0 1 1 8.07 4.52zm5.3-6.96c-.29-.15-1.7-.84-1.96-.94-.26-.1-.45-.15-.64.15-.19.29-.75 1.03-.92 1.24-.17.2-.34.22-.63.08-.29-.15-1.21-.45-2.3-1.41-.86-.76-1.44-1.7-1.61-1.99-.17-.29-.02-.45.13-.62.14-.14.29-.36.43-.54.14-.19.19-.34.29-.55.1-.22.05-.41-.03-.6-.08-.18-.66-1.61-.91-2.2-.24-.58-.48-.5-.64-.51h-.54c-.19 0-.5.08-.77.35-.27.28-1.01 1-1.01 2.43s1.04 2.83 1.19 3.03c.15.2 2.06 3.13 5 4.26.7.3 1.25.49 1.68.6.7.21 1.32.18 1.82.11.55-.09 1.72-.7 1.97-1.37.24-.67.24-1.24.16-1.36-.08-.11-.27-.19-.56-.34z"/>
</svg>
</a>
<!-- Email: icon only (Gmail-style envelope) -->
<a href="mailto:golisiva50@gmail.com?subject=Support%20Request&body=Dear%20Sir%0A%0A" class="btn btn--email" aria-label="Email">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4.5-8 5.2-8-5.2V6l8 5 8-5v2.5zM4 20h16V10.3l-8 5.2-8-5.2V20z"/>
</svg>
</a>
<!-- Instagram: icon only (moved inside the same row) -->
<a href="https://www.instagram.com/iam_siva_prasad/" target="_blank" rel="noopener" class="btn btn--instagram" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-5 3.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11zm0 2a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zM17.75 6a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z"/>
</svg>
</a>
</div>
</section>
<h1 class="hero__title" style="color: #333333; margin-top: 16px;">
Contact us
</h1>
<!-- <h1 class="animate-gradient">Contact</h1> -->
<!-- <p>Send us a message—we’ll receive it by email instantly.</p> -->
<!-- FormSubmit integration: we will POST via fetch() (AJAX) -->
<form id="contactForm" action="https://formsubmit.co/550759a14c30bb54be706e959e6c042b" method="POST" class="form card" novalidate>
<!-- Form fields MUST have name attributes -->
<label>
First Name
<input type="text" First name="Name" placeholder="Your First Name" required />
</label>
Last Name
<input type="text" Last name="Name" placeholder="Your Last Name" required />
</label>
Your Company Name
<input type="text" Your Company Name="Name" placeholder="Your Company Name" required />
</label>
<label>
Phone Number
<input type="phone" name="phone" placeholder="Your Mobile Number" required />
</label>
<label>
Email Address
<input type="email" name="email" placeholder="you@yourdomain.com" required />
</label>
<label>
Message
<textarea name="message" rows="5" placeholder="Type your message... so we will understand your Requirements!!" required></textarea>
</label>
<!-- Hidden fields for customization -->
<input type="hidden" name="_subject" value="New message from Siva's DevOps Contact Form">
<!-- IMPORTANT for AJAX: either disable FormSubmit reCAPTCHA or provide your own keys -->
<input type="hidden" name="_captcha" value="false">
<!-- Honeypot anti-spam -->
<input type="text" name="_honey" style="display:none">
<button type="submit" class="btn btn--primary">Send</button>
<!-- Status area (we will show success message here) -->
<div id="formStatus" class="form__status" aria-live="polite"></div>
</form>
<div class="cta">
<a href="index.html" class="btn btn--ghost">← Back to Home</a>
</div>
</main>
<footer class="footer">
<small>| Golisiva50@gmail.com |</small>
<small> Sivaprasad.xyz | 2026 © All Rights Reserved | </small>
<small>
<section id="action-buttons">
<div class="button-container">
<!-- GitHub: icon only -->
<a href="https://github.com/iam-siva-prasad/" target="_blank" rel="noopener" class="btn btn--github" aria-label="GitHub">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="15" height="15" aria-hidden="true" focusable="false">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.65 7.65 0 0 1 4 0c1.53-1.03 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.28.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
<!-- LinkedIn: icon only -->
<a href="https://www.linkedin.com/in/iam-siva-prasad/" target="_blank" rel="noopener" class="btn btn--linkedin" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM.5 8h4V24h-4V8zm7.5 0h3.8v2.2h.05c.53-1 1.83-2.2 3.77-2.2 4.03 0 4.78 2.65 4.78 6.1V24h-4v-7.6c0-1.8-.03-4.1-2.5-4.1-2.5 0-2.88 1.95-2.88 4v7.7h-4V8z"/>
</svg>
</a>
<!-- WhatsApp: icon only -->
<a href="https://wa.me/919110398220" target="_blank" rel="noopener" class="btn btn--whatsapp" aria-label="WhatsApp">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<!-- Monochrome WhatsApp mark; inherits color via currentColor -->
<path d="M20.52 3.48A11.94 11.94 0 0 0 12.01 0C5.4 0 .05 5.35.05 11.96c0 2.1.55 4.08 1.6 5.84L0 24l6.36-1.65a12 12 0 0 0 5.65 1.43h.01c6.62 0 11.96-5.35 11.96-11.96a11.9 11.9 0 0 0-3.46-8.34zM12.02 21.3h-.01a9.3 9.3 0 0 1-4.74-1.29l-.34-.2-3.77.98 1.01-3.65-.22-.36a9.34 9.34 0 1 1 8.07 4.52zm5.3-6.96c-.29-.15-1.7-.84-1.96-.94-.26-.1-.45-.15-.64.15-.19.29-.75 1.03-.92 1.24-.17.2-.34.22-.63.08-.29-.15-1.21-.45-2.3-1.41-.86-.76-1.44-1.7-1.61-1.99-.17-.29-.02-.45.13-.62.14-.14.29-.36.43-.54.14-.19.19-.34.29-.55.1-.22.05-.41-.03-.6-.08-.18-.66-1.61-.91-2.2-.24-.58-.48-.5-.64-.51h-.54c-.19 0-.5.08-.77.35-.27.28-1.01 1-1.01 2.43s1.04 2.83 1.19 3.03c.15.2 2.06 3.13 5 4.26.7.3 1.25.49 1.68.6.7.21 1.32.18 1.82.11.55-.09 1.72-.7 1.97-1.37.24-.67.24-1.24.16-1.36-.08-.11-.27-.19-.56-.34z"/>
</svg>
</a>
<!-- Email: icon only (Gmail-style envelope) -->
<a href="mailto:golisiva50@gmail.com?subject=Support%20Request&body=Dear%20Sir%0A%0A" class="btn btn--email" aria-label="Email">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4.5-8 5.2-8-5.2V6l8 5 8-5v2.5zM4 20h16V10.3l-8 5.2-8-5.2V20z"/>
</svg>
</a>
<!-- Instagram: icon only (moved inside the same row) -->
<a href="https://www.instagram.com/iam_siva_prasad/" target="_blank" rel="noopener" class="btn btn--instagram" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-5 3.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11zm0 2a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zM17.75 6a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z"/>
</svg>
</a>
</div>
</section>
</small>
</footer>
<!-- Inline script to handle AJAX submit, show message, and redirect -->
<script>
(function () {
const form = document.getElementById('contactForm');
const statusEl = document.getElementById('formStatus');
const redirectUrl = 'index.html'; // <-- Redirect destination (home page)
const successMsg = 'Your response has been successfully submitted.'; // Message
form.addEventListener('submit', async (e) => {
e.preventDefault(); // prevent full page navigation
statusEl.textContent = 'Sending...';
try {
const formData = new FormData(form);
// Submit via fetch (AJAX) to FormSubmit endpoint
const res = await fetch(form.action, {
method: 'POST',
body: formData,
headers: { 'Accept': 'application/json' } // Ask for JSON response
});
if (res.ok) {
// Show success message and clear the form
statusEl.textContent = successMsg;
form.reset();
// Redirect after 2.5 seconds (adjust as you like)
setTimeout(() => {
window.location.href = redirectUrl;
}, 2500);
} else {
// If FormSubmit returns non-200, show a fallback message
statusEl.textContent = 'There was a problem submitting the form. Please try again.';
}
} catch (err) {
statusEl.textContent = 'Network error. Please check your connection and try again.';
}
});
})();
</script>
</body>
</html>