Selamın aleyküm forum.
Bu konuda bir blocked.html sayfası kodlayacağız.
Bu sayfalar adından da anlayacağınız üzere kullanıcıların yasaklanması durumunda gördüğü sayfalardır.
blocked.html (frontend)
Bu konuda bir blocked.html sayfası kodlayacağız.
Bu sayfalar adından da anlayacağınız üzere kullanıcıların yasaklanması durumunda gördüğü sayfalardır.
blocked.html (frontend)
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Erişim Engellendi</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
background-color: #f8f9fa;
color: #333;
text-align: center;
padding: 50px;
}
.container {
max-width: 600px;
margin: auto;
padding: 30px;
background-color: #ffffff;
border: 1px solid #dcdcdc;
border-radius: 8px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 36px;
color: #c0392b;
margin-bottom: 10px;
font-weight: 600;
}
p {
font-size: 16px;
color: #555;
margin: 15px 0;
}
.error-code {
font-size: 20px;
color: #a93226;
font-weight: 500;
}
.divider {
width: 50px;
height: 3px;
background-color: #c0392b;
margin: 20px auto;
}
#contactBtn {
display: inline-block;
margin-top: 20px;
padding: 10px 25px;
background-color: #34495e;
color: white;
text-decoration: none;
font-weight: 500;
border-radius: 5px;
transition: background-color 0.3s ease;
}
#contactBtn:hover {
background-color: #2c3e50;
cursor: pointer;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: white;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 400px;
border-radius: 10px;
box-sizing: border-box;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.input-group {
position: relative;
margin: 10px 0;
}
.input-group i {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
color: #aaa;
}
.input-group input, .input-group textarea {
width: 100%;
padding: 10px 10px 10px 40px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
box-sizing: border-box;
}
textarea {
resize: none;
}
button {
background-color: #34495e;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%;
}
button:hover {
background-color: #2c3e50;
}
</style>
</head>
<body>
<div class="container">
<h1>Erişim Engellendi</h1>
<div class="divider"></div>
<p>Bu sayfaya erişiminiz güvenlik veya kısıtlamalar nedeniyle engellenmiştir.</p>
<p class="error-code">Yasaklandınız!</p>
<a id="contactBtn">Bir Yetkiliyle İletişime Geç</a>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>İletişim Formu</h2>
<form>
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" name="name" placeholder="Adınız" required>
</div>
<div class="input-group">
<i class="fas fa-envelope"></i>
<input type="email" name="email" placeholder="E-posta Adresiniz" required>
</div>
<div class="input-group">
<i class="fas fa-comment"></i>
<textarea name="message" placeholder="Mesajınız" rows="4" maxlength="250" required></textarea>
</div>
<button type="submit">Gönder</button>
</form>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("contactBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
