diff --git a/core/templates/core/contact_form_page.html b/core/templates/core/contact_form_page.html index 2868da1..a2e0743 100644 --- a/core/templates/core/contact_form_page.html +++ b/core/templates/core/contact_form_page.html @@ -1,77 +1,194 @@ {% extends "core/base.html" %} {% load core_tags menu_tags static wagtailcore_tags wagtailimages_tags crispy_forms_tags %} -{% block content %} -<div class="row"> - <!-- Contact Form (Desktop) --> - <div class="col-md-6 d-none d-md-block"> - <div class="border-bottom pb-2 mb-3"> - <h2>{{ self.form_title }}</h2> - </div> - <form action="{% pageurl self %}" method="POST" class="mb-4"> - {% csrf_token %} - {{ form|crispy }} - <div class="text-end"> - <button type="submit" class="btn btn-primary">Senden</button> - </div> - </form> - </div> +{% block extra_css %} +<style> + /* Contact page specific styles */ + .contact-section { + padding: 2rem 0; + } - <!-- Contact Person --> - <div class="col-md-6 col-12"> - <div class="border-bottom pb-2 mb-3"> - <h2>Ihr Ansprechpartner</h2> - </div> - <div class="row"> - {% if self.person_img %} - <!-- Desktop Image --> - <div class="col-md-6 d-none d-md-block text-center"> - <div class="card mb-4"> - {% image self.person_img fill-240x320 class="img-fluid card-img-top" %} - <div class="card-body"> - <h4 class="card-title">{{ self.person_name }}</h4> - <p class="card-text">{{ self.person_position }}</p> + .section-title { + position: relative; + margin-bottom: 2rem; + } + + .section-title:after { + content: ''; + position: absolute; + bottom: -10px; + left: 0; + width: 60px; + height: 3px; + background-color: var(--bs-primary); + border-radius: 3px; + } + + .contact-card { + border-radius: 12px; + overflow: hidden; + box-shadow: var(--box-shadow-medium); + transition: transform 0.3s ease, box-shadow 0.3s ease; + height: 100%; + border: none; + } + + .contact-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + } + + .contact-info-list li { + padding: 0.75rem 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + transition: transform 0.2s ease; + } + + .contact-info-list li:last-child { + border-bottom: none; + } + + .contact-info-list li:hover { + transform: translateX(5px); + } + + .contact-info-list i { + color: var(--bs-primary); + font-size: 1.2rem; + width: 30px; + text-align: center; + } + + .person-img-container { + overflow: hidden; + border-radius: 12px; + box-shadow: var(--box-shadow-light); + width: 100%; + height: 300px; + } + + .person-img-container img { + transition: transform 0.5s ease; + width: 100%; + height: 100%; + object-fit: cover; + } + + .person-img-container:hover img { + transform: scale(1.05); + } + + .contact-form-card { + padding: 2rem; + } + + .animate-fade-in-up { + animation: fadeInUp 0.8s ease-out; + } + + @keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } + } +</style> +{% endblock %} + +{% block content %} +<div class="contact-section"> + <div class="row"> + <!-- Contact Form (Desktop) --> + <div class="col-md-6 d-none d-md-block animate-fade-in-up" style="animation-delay: 0.1s;"> + <h2 class="section-title">{{ self.form_title }}</h2> + <div class="card contact-card contact-form-card mb-4"> + <form action="{% pageurl self %}" method="POST"> + {% csrf_token %} + {{ form|crispy }} + <div class="text-end mt-4"> + <button type="submit" class="btn btn-primary"> + <i class="bi bi-send me-2"></i>Senden + </button> </div> - </div> + </form> </div> - <!-- Mobile Image --> - <div class="col-sm-6 col-12 d-md-none"> - <div class="card mb-4"> - {% image self.person_img fill-240x320 class="img-fluid card-img-top" %} - <div class="card-body"> - <h4 class="card-title">{{ self.person_name }}</h4> - <p class="card-text">{{ self.person_position }}</p> + </div> + + <!-- Contact Person --> + <div class="col-md-6 col-12 animate-fade-in-up" style="animation-delay: 0.2s;"> + <h2 class="section-title">Ihr Ansprechpartner</h2> + <div class="card contact-card mb-4"> + <div class="card-body p-4"> + <div class="row"> + {% if self.person_img %} + <!-- Person Image --> + <div class="col-md-5 col-sm-6 mb-4 mb-md-0"> + <div class="person-img-container"> + {% image self.person_img fill-300x400 class="img-fluid rounded" %} + </div> + <div class="text-center mt-3"> + <h4 class="mb-1">{{ self.person_name }}</h4> + <p class="text-muted">{{ self.person_position }}</p> + </div> + </div> + {% endif %} + + <!-- Contact Information --> + {% if self.address or self.mail_address or self.phone or self.web_address %} + <div class="col-md-7 col-sm-6"> + <h5 class="mb-3">Kontaktdaten</h5> + <ul class="list-unstyled contact-info-list"> + {% if self.address %} + <li><i class="bi bi-geo-alt"></i> {{ self.address }}</li> + {% endif %} + {% if self.mail_address %} + <li> + <a href="mailto:{{ self.mail_address }}" class="text-decoration-none text-dark"> + <i class="bi bi-envelope"></i> {{ self.mail_address }} + </a> + </li> + {% endif %} + {% if self.phone %} + <li> + <a href="tel:{{ self.phone }}" class="text-decoration-none text-dark"> + <i class="bi bi-telephone"></i> {{ self.phone }} + </a> + </li> + {% endif %} + {% if self.web_address %} + <li> + <a href="{{ self.web_address }}" class="text-decoration-none text-dark"> + <i class="bi bi-globe"></i> {{ self.web_address }} + </a> + </li> + {% endif %} + </ul> + </div> + {% endif %} </div> </div> </div> - {% endif %} - - <!-- Contact Information --> - {% if self.address or self.mail_address or self.phone or self.web_address %} - <div class="col-sm-6 col-12"> - <ul class="list-unstyled mb-4"> - {% if self.address %}<li class="mb-2"><i class="bi bi-house me-2"></i>{{ self.address }}</li>{% endif %} - {% if self.mail_address %}<li class="mb-2"><a href="mailto:{{ self.mail_address }}" class="text-decoration-none"><i class="bi bi-envelope me-2"></i>{{ self.mail_address }}</a></li>{% endif %} - {% if self.phone %}<li class="mb-2"><a href="tel:{{ self.phone }}" class="text-decoration-none"><i class="bi bi-telephone me-2"></i>{{ self.phone }}</a></li>{% endif %} - {% if self.web_address %}<li class="mb-2"><a href="{{ self.web_address }}" class="text-decoration-none"><i class="bi bi-globe me-2"></i>{{ self.web_address }}</a></li>{% endif %} - </ul> - </div> - {% endif %} </div> - </div> - <!-- Contact Form (Mobile) --> - <div class="col-12 d-md-none"> - <div class="border-bottom pb-2 mb-3"> - <h2>{{ self.form_title }}</h2> - </div> - <form action="{% pageurl self %}" method="POST" class="mb-4"> - {% csrf_token %} - {{ form|crispy }} - <div class="text-end"> - <button type="submit" class="btn btn-primary">Senden</button> + <!-- Contact Form (Mobile) --> + <div class="col-12 d-md-none animate-fade-in-up" style="animation-delay: 0.3s;"> + <h2 class="section-title">{{ self.form_title }}</h2> + <div class="card contact-card contact-form-card mb-4"> + <form action="{% pageurl self %}" method="POST"> + {% csrf_token %} + {{ form|crispy }} + <div class="text-end mt-4"> + <button type="submit" class="btn btn-primary"> + <i class="bi bi-send me-2"></i>Senden + </button> + </div> + </form> </div> - </form> + </div> </div> </div> {% endblock content %} diff --git a/feo_homepage/settings/dev.py b/feo_homepage/settings/dev.py index 0430df7..a887fb5 100644 --- a/feo_homepage/settings/dev.py +++ b/feo_homepage/settings/dev.py @@ -5,6 +5,7 @@ DEBUG = True TEMPLATE_DEBUG = True EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' +ALLOWED_HOSTS = ['*'] try: