<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
<title>Contact Us — Tribune Voice</title>
<meta name=”description” content=”Contact Tribune Voice — send tips, story ideas, press inquiries, or feedback.”>
<style>
:root{–bg:#0f1724;–card:#0b1220;–accent:#1e90ff;–muted:#9ca3af;–white:#f8fafc}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,”Helvetica Neue”,Arial;background:linear-gradient(180deg,#061226 0%, #071227 100%);color:var(–white);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.container{width:100%;max-width:980px}
header{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.logo{width:56px;height:56px;background:var(–card);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(–accent);font-size:20px}
h1{margin:0;font-size:24px}
p.lead{color:var(–muted);margin:8px 0 24px}
.grid{display:grid;grid-template-columns:1fr 420px;gap:28px}
@media (max-width:880px){.grid{grid-template-columns:1fr;}}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:22px;border-radius:12px;box-shadow:0 6px 18px rgba(2,6,23,0.6)}
.info h2{margin-top:0}
.info p{color:var(–muted);line-height:1.5}
form{display:flex;flex-direction:column;gap:12px}
label{font-size:13px;color:var(–muted)}
input[type=”text”],input[type=”email”],textarea{width:100%;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(–white);resize:vertical}
textarea{min-height:140px}
.row{display:flex;gap:12px}
.row .col{flex:1}
.help{font-size:13px;color:var(–muted)}
.actions{display:flex;gap:8px;align-items:center}
button.primary{background:var(–accent);color:#021027;border:none;padding:10px 16px;border-radius:10px;font-weight:600;cursor:pointer}
button.ghost{background:transparent;color:var(–white);border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:10px;cursor:pointer}
.small{font-size:13px;color:var(–muted)}
.status{margin-top:8px;font-size:14px}
.status.success{color:#22c55e}
.status.error{color:#fb7185}
footer{margin-top:18px;color:var(–muted);font-size:13px}
</style>
</head>
<body>
<div class=”container”>
<header>
<div class=”logo”>TV</div>
<div>
<h1>Contact Tribune Voice</h1>
<p class=”lead”>Have a tip, story idea, correction or press inquiry? We want to hear from you. Use the form to send us a message or email us directly at <strong>contact@tribunevoice.com</strong>.</p>
</div>
</header>
<div class=”grid”>
<div class=”card info”>
<h2>Get in touch</h2>
<p>Tribune Voice is dedicated to delivering independent journalism. Whether you’re a reader with feedback, a source with a tip, or an organization seeking press information, your message matters. We aim to respond to all legitimate inquiries within 48 business hours.</p>
<h3 style=”margin-bottom:6px”>Contact details</h3>
<p class=”small”><strong>Email:</strong> <a href=”mailto:contact@tribunevoice.com” style=”color:var(–accent);text-decoration:none”>contact@tribunevoice.com</a></p>
<h3 style=”margin-top:16px”>What to send</h3>
<ul style=”color:var(–muted);line-height:1.6″>
<li>News tips and time-sensitive information</li>
<li>Corrections or factual updates</li>
<li>Press and media requests</li>
<li>General feedback and partnership inquiries</li>
</ul>
<p class=”help” style=”margin-top:12px”>For anonymous tips, please use an email account that does not contain your name. We respect source confidentiality when requested — indicate your preference in the message.</p>
<footer>Tribune Voice • News with Integrity</footer>
</div>
<div class=”card”>
<form id=”contactForm” novalidate>
<label for=”name”>Your name</label>
<input type=”text” id=”name” name=”name” placeholder=”Your full name” required>
<label for=”email”>Your email</label>
<input type=”email” id=”email” name=”email” placeholder=”you@example.com” required>
<label for=”subject”>Subject</label>
<input type=”text” id=”subject” name=”subject” placeholder=”Short subject” required>
<label for=”message”>Message</label>
<textarea id=”message” name=”message” placeholder=”Write your message here…” required></textarea>
<label style=”display:flex;align-items:center;gap:8px”><input type=”checkbox” id=”consent”> <span class=”small”>I agree that Tribune Voice may use my message to publish stories (my personal details will not be published without consent).</span></label>
<div class=”actions”>
<button type=”submit” class=”primary”>Send message</button>
<button type=”button” class=”ghost” id=”clearBtn”>Clear</button>
</div>
<p class=”status” id=”status” aria-live=”polite”></p>
<p class=”small” style=”margin-top:8px”>Note: This form uses your default mail app to send messages. If you prefer, you can email us directly at <a href=”mailto:contact@tribunevoice.com” style=”color:var(–accent);text-decoration:none”>contact@tribunevoice.com</a>.</p>
</form>
</div>
</div>
</div>
<script>
(function(){
const form = document.getElementById(‘contactForm’);
const status = document.getElementById(‘status’);
const clearBtn = document.getElementById(‘clearBtn’);
function showMessage(text, type){
status.textContent = text;
status.className = ‘status ‘ + (type === ‘ok’ ? ‘success’ : ‘error’);
}
clearBtn.addEventListener(‘click’, ()=>{
form.reset();
status.textContent=”;
});
form.addEventListener(‘submit’, function(e){
e.preventDefault();
status.textContent=”;
const name = form.name.value.trim();
const email = form.email.value.trim();
const subject = form.subject.value.trim();
const message = form.message.value.trim();
if(!name||!email||!subject||!message){
showMessage(‘Please fill in all required fields.’, ‘err’);
return;
}
// basic email check
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){
showMessage(‘Please enter a valid email address.’, ‘err’);
return;
}
// Construct a mailto: link (works if user has an email client configured)
const to = ‘contact@tribunevoice.com’;
const mailSubject = encodeURIComponent(‘[Tribune Voice Contact] ‘ + subject);
let body = ‘Name: ‘ + name + ‘\n’;
body += ‘Email: ‘ + email + ‘\n’;
if(document.getElementById(‘consent’).checked) body += ‘Consent: Yes – message may be used by Tribune Voice\n’;
body += ‘\n’ + message;
const mailto = `mailto:${to}?subject=${mailSubject}&body=${encodeURIComponent(body)}`;
// open mail client
window.location.href = mailto;
showMessage(‘Your mail client should open to send the message. If it does not, please email us at contact@tribunevoice.com’, ‘ok’);
});
})();
</script>
<!–
Deployment notes:
– The above form uses the user’s mail client (mailto). For production sites, replace the JS mailto flow with a server-side endpoint
(e.g., POST /api/contact) that sends email securely via an SMTP service or transactional email API (SendGrid, Mailgun, etc.).
– Always validate and sanitize inputs on the server.
– Consider adding spam protection (reCAPTCHA or hcaptcha) if you receive unsolicited messages.
–>
</body>
</html>
