282 lines
14 KiB
HTML
282 lines
14 KiB
HTML
{% extends 'base.html' %}
|
||
|
||
{% load humanize %}
|
||
|
||
|
||
{% block header %}
|
||
<style>
|
||
label[for="terms-and-condition-checkbox"] {
|
||
cursor: pointer;
|
||
}
|
||
label[for="terms-and-condition-checkbox"] a {
|
||
pointer-events: none;
|
||
}
|
||
|
||
</style>
|
||
|
||
{% endblock header %}
|
||
|
||
|
||
{% block content %}
|
||
|
||
<header>
|
||
<div class="collapse bg-dark" id="navbarHeader">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-sm-8 col-md-7 py-4">
|
||
<h4 class="text-white">About</h4>
|
||
<p class="text-muted">
|
||
Add some information about the album below, the author, or any other
|
||
background context. Make it a few sentences long so folks can pick
|
||
up some informative tidbits. Then, link them off to some social
|
||
networking sites or contact information.
|
||
</p>
|
||
</div>
|
||
<div class="col-sm-4 offset-md-1 py-4">
|
||
<h4 class="text-white">Contact</h4>
|
||
<ul class="list-unstyled">
|
||
<li><a href="#" class="text-white">Follow on Twitter</a></li>
|
||
<li><a href="#" class="text-white">Like on Facebook</a></li>
|
||
<li><a href="#" class="text-white">Email me</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="navbar navbar-dark bg-dark box-shadow">
|
||
<div class="container d-flex justify-content-between">
|
||
<a href="#" class="navbar-brand d-flex align-items-center">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
class="mr-2"
|
||
>
|
||
<path
|
||
d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
|
||
></path>
|
||
<circle cx="12" cy="13" r="4"></circle>
|
||
</svg>
|
||
<strong>Album</strong>
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main role="main">
|
||
{% if messages %}
|
||
{% for message in messages %}
|
||
<div id="message">
|
||
<div style="padding: 5px;" >
|
||
<div id="inner-message" class="alert alert-{{message.tags}}" style="margin-bottom: 0px; margin-top: 0px;">
|
||
{{ message }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
{% endif %}
|
||
<section class="jumbotron" style="background-image: url('https://cemhri.org/wp-content/uploads/2018/04/Home-Four-Banner-Background-Image.png') ">
|
||
<div class="container">
|
||
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
|
||
Wanna Contribute? click here..
|
||
</a>
|
||
<br>
|
||
<div class="collapse" id="collapseExample">
|
||
<div class="card card-body mt-3">
|
||
<form method="post" enctype="multipart/form-data">
|
||
{% csrf_token %}
|
||
<div class="form-group">
|
||
<strong>I have ..</strong>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="object_type" id="exampleRadios1" value="EQUIPMENT" checked>
|
||
<label class="form-check" for="exampleRadios1">
|
||
Equipment (helmet; rope; clothing; etc.)
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="object_type" id="exampleRadios2" value="SUMMIT_PHOTO">
|
||
<label class="form-check" for="exampleRadios2">
|
||
Summit photo
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="object_type" id="exampleRadios3" value="CLIMBING_FILM">
|
||
<label class="form-check" for="exampleRadios3">
|
||
Climbing film
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="object_type" id="exampleRadios4" value="MOUNTAIN_STORY">
|
||
<label class="form-check" for="exampleRadios4">
|
||
Mountain story
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="object_type" id="exampleRadios5" value="SPECIAL_KNOWLEDGE">
|
||
<label class="form-check" for="exampleRadios5">
|
||
Special knowledge
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="description"><strong>Description</strong></label>
|
||
<textarea name="description" id="description" rows="5" class="form-control" required></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="image"><strong>Image</strong></label>
|
||
<div class="custom-file">
|
||
<input name="image" type="file" id="image" accept="image/png, image/gif, image/jpeg" required>
|
||
<label id="image-label" class="custom-file-label" for="image">Choose an image</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="surname">Surname</label>
|
||
<input class="form-control" id="surname" name="surname" aria-describedby="surname" placeholder="Enter Surname" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="first_name">First Name</label>
|
||
<input class="form-control" id="first_name" name="first_name" aria-describedby="first_name" placeholder="Enter First Name" required>
|
||
</div>
|
||
|
||
|
||
<div class="form-group">
|
||
<label for="birth_date">Date of Brith</label>
|
||
<input type="date" class="form-control" id="birth_date" name="birth_date" aria-describedby="birth date" placeholder="Enter surname" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="address">Address</label>
|
||
<input class="form-control" id="address" name="address" aria-describedby="address" placeholder="Enter Address" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="postal_code">Postal Code</label>
|
||
<input class="form-control" id="postal_code" name="postal_code" aria-describedby="postal_code" placeholder="Enter Postal Code" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="town">Town</label>
|
||
<input class="form-control" id="town" name="town" aria-describedby="town" placeholder="Enter Town Name" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="telephone">Telephone</label>
|
||
<input class="form-control" id="telephone" name="telephone" aria-describedby="telephone" placeholder="Enter Telephone Number" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="email">Email</label>
|
||
<input type="email" class="form-control" id="email" name="email" aria-describedby="email" placeholder="Enter email" required>
|
||
<small id="email" class="form-text text-muted">We'll never share your email with anyone else.</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<strong>I would like to do the following with my object / my film / my story:</strong>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="target" id="exampleRadios7" value="DONATE_TO_MUSEUM" checked>
|
||
<label class="form-check-label" for="exampleRadios7">
|
||
Donate it to the collection of the Swiss Alpine Museum.
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="target" id="exampleRadios8" value="MAKE_IT_AVAILABLE_SOLELY">
|
||
<label class="form-check-label" for="exampleRadios8">
|
||
Make it available solely for the Lost and Found Memories Office until october 2023.
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" name="is_agreed_terms_and_cond" id="terms-and-condition-checkbox" value="True" required>
|
||
<label class="form-check-label" for="terms-and-condition-checkbox">
|
||
I have read and agree with the </label> <a href="#" data-toggle="modal" data-target=".bd-example-modal-lg">rules</a>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-primary float-right" type="submit">Submit</button>
|
||
|
||
</form>
|
||
|
||
<div class="modal data-bs-dismiss bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">X</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="modal-body p-3">
|
||
<h1 class="big-text" style="display: block;">Lost & Found Rules</h1>
|
||
<p data-block-key="p4tu6"></p><h4 data-block-key="c4plv">Rule 1: You’re the focus of attention in the Lost and Found Memories Office</h4><p data-block-key="a394e">We’re interested in what women have experienced in the mountains over the last fifty years. Anyone who would like to show a personal object in the museum and is prepared to tell their personal experiences or the history of mountaineering, climbing women can take part. There are no limits to the kind of objects as long as you are happy to exhibit your treasure in the Swiss Alpine Museum for two years.</p><h4 data-block-key="6oq5m">Rule 2: A formal start to our relationship – by filling out a form.</h4><p data-block-key="b07ki">If you want to join in, just fill out the form. Just give a short description of your personal objects that belong in a museum – and the memories you associate with them. We’ll look over your suggestion and get in touch with you to discuss the transfer details (contract for a loan or donation, handover date). As our space is limited, we do need to reserve the right to say no, unfortunately. And we hope you understand that we can’t accept any objects that are spontaneously brought along to the museum.</p><h4 data-block-key="cp7qk">Rule 3: You decide how you tell us your story.</h4><p data-block-key="adtg7">Every object in the exhibition receives a label. On the rear of the label there is space for your own story. We’d like it even more if you could pop round to the Lost and Found Memories Office from February 2020 onwards and tell us your tale in our video box. As soon as your object goes on show, we’ll let you know.</p><h4 data-block-key="78em">Rule 4: We decide together how long your object remains in the museum.</h4><p data-block-key="75fvd">You have two options: either you loan us the object for the duration of the Lost and Found Memories Office and pick it up again afterwards, or you donate it to the Swiss Alpine Museum and the item becomes part of our collection. We do need to reserve the right to decline a donation because of the type, size, or condition of the object.</p><h4 data-block-key="8afcr">Rule 5: Your object should have no reservations about being touched.</h4><p data-block-key="729kc">Generally speaking, when an object in private ownership is transferred to a museum collection, it can only be handled with gloves and is displayed behind glass. But we’d like to do things a bit differently at the Lost and Found Memories Office: the objects there can be touched. If your object needs special protection, you should let us know.</p><h4 data-block-key="a4n56">Rule 6: You won’t receive any unwelcome post.</h4><p data-block-key="165u5">Your personal details will be used exclusively for communication between the lender and the collection. If you want to receive the most up-to-date information about our other exciting projects, subscribe to our BergPost newsletter.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<div class="album py-5 bg-light">
|
||
<div class="container">
|
||
<div class="row">
|
||
|
||
{% for album in albums %}
|
||
<div class="col-md-4">
|
||
<div class="card mb-4 box-shadow">
|
||
<img
|
||
class="card-img-top"
|
||
src="{{ album.image.url }}"
|
||
alt="Card image cap"
|
||
style="height: 10rem; width: auto;"
|
||
/>
|
||
<div class="card-body">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
{% if album.is_verified %}
|
||
<span class="badge badge-success">Verified</span>
|
||
{% else %}
|
||
<span class="badge badge-danger">Unverified</span>
|
||
{% endif %}
|
||
{% comment %} <div class="btn-group">
|
||
<button
|
||
type="button"
|
||
class="btn btn-sm btn-outline-secondary"
|
||
>
|
||
View
|
||
</button>
|
||
</div> {% endcomment %}
|
||
<small class="text-muted">{{ album.created_at | naturaltime }}</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
{% endblock content %}
|
||
|
||
{% block footer %}
|
||
|
||
<script>
|
||
$("#image").change(function(){
|
||
$("#image-label").text(this.files[0].name);
|
||
});
|
||
|
||
</script>
|
||
|
||
{% endblock footer %}
|
||
|