You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
3.9 KiB
HTML
159 lines
3.9 KiB
HTML
{% load static %}
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>
|
|
K-DepoT | Kikimor EOOD</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #ead9cb;
|
|
}
|
|
.header-links {
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
header {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem 2rem;
|
|
}
|
|
header h1 {
|
|
margin: 0;
|
|
}
|
|
section.hero {
|
|
background: url('{% static "images/depot.jpg" %}') center/cover no-repeat;
|
|
height: 400px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
text-shadow: 2px 2px 5px black;
|
|
}
|
|
.content {
|
|
padding: 2rem;
|
|
max-width: 1000px;
|
|
margin: auto;
|
|
}
|
|
.gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
.gallery img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
}
|
|
.map {
|
|
margin: 2rem 0;
|
|
text-align: center;
|
|
}
|
|
footer {
|
|
background-color: #2d3436;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 1rem;
|
|
}
|
|
#map {
|
|
height: 400px;
|
|
width: 100%;
|
|
border: 1px solid #ccc;
|
|
margin: 20px 0;
|
|
}
|
|
.header-content {
|
|
text-align: center;
|
|
}
|
|
|
|
.login-link {
|
|
position: static;
|
|
right: 2rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #a57d52;
|
|
text-decoration: none;
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid #a57d52;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.login-link:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header>
|
|
<div class="header-content">
|
|
<h1>
|
|
<img src="{% static 'images/k-depot-logo.svg' %}" alt="K-DepoT Logo" style="height: 150px; vertical-align: middle;">
|
|
K-DepoT
|
|
</h1>
|
|
<p>Operated by Kikimor EOOD</p>
|
|
</div>
|
|
<div class="header-links">
|
|
<a href="{% url 'login' %}" class="login-link">Login</a>
|
|
<a href="{% url 'allowed_vehicles' %}" class="login-link">Vehicles</a>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<h2>Efficient, Secure & Reliable Container Solutions</h2>
|
|
</section>
|
|
|
|
<div class="content">
|
|
<h2>About Us</h2>
|
|
<p>K-DepoT is your trusted partner for fast, efficient, and secure container depot services. Located in the port city of Varna, we specialize in container receiving, storage, and dispatching. At Kikimor EOOD, we combine modern logistics with reliable service to keep your cargo moving without delays.</p>
|
|
|
|
<h2>Gallery</h2>
|
|
<div class="gallery">
|
|
<img src="{% static 'images/depot.jpg' %}" alt="K-DepoT yard">
|
|
<img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be" alt="Container operations">
|
|
<img src="https://images.unsplash.com/photo-1604668915915-43e6227f021f" alt="Logistics and transport">
|
|
</div>
|
|
<h2>Contact Us</h2>
|
|
<p><strong>Address:</strong> Morska sirena str. 39, Varna, Bulgaria</p>
|
|
<p><strong>Phone:</strong> +359 88 123 4567</p>
|
|
<p><strong>Email:</strong> info@k-depot.bg</p>
|
|
|
|
<div class="map">
|
|
<div id="map"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
© 2025 Kikimor EOOD | K-DepoT - All rights reserved.
|
|
</footer>
|
|
|
|
|
|
<script>
|
|
function initMap() {
|
|
const depot = { lat: 43.2121, lng: 27.9204 };
|
|
const map = new google.maps.Map(document.getElementById('map'), {
|
|
zoom: 15,
|
|
center: depot,
|
|
});
|
|
const marker = new google.maps.Marker({
|
|
position: depot,
|
|
map: map,
|
|
title: 'K-DepoT'
|
|
});
|
|
}
|
|
</script>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBboGDgiCrc9yp2uSLmVcfVVIVK-kOQqc4&callback=initMap" async defer></script>
|
|
</body>
|
|
</html>
|
|
|
|
|