Vytvoreni svatebniho webu s uvodni fotografii
This commit is contained in:
Kateřina Koutová
Vendored
+85
@@ -0,0 +1,85 @@
|
||||
@font-face {
|
||||
font-family: 'Glyphicons Halflings';
|
||||
src: url('../fonts/glyphicons-halflings-regular.eot');
|
||||
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
|
||||
}
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.nazevwebu {
|
||||
padding: 10px 16px;
|
||||
float: left;
|
||||
vertical-align: middle;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.userdiv{
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
float: right;
|
||||
vertical-align: middle;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
|
||||
ul.user {
|
||||
list-style: none;
|
||||
|
||||
}
|
||||
|
||||
ul.user li {
|
||||
display: inline;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
ul.user li+li:before {
|
||||
padding: 8px;
|
||||
color: black;
|
||||
content: '\007C';
|
||||
}
|
||||
|
||||
ul.user li a {
|
||||
color: #0275d8;
|
||||
text-decoration: underline;
|
||||
color: black;
|
||||
}
|
||||
|
||||
ul.user li a:hover {
|
||||
color: #01447e;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.profile-pic {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.profile-pic:hover .edit {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.edit {
|
||||
padding-top: 7px;
|
||||
padding-right: 7px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.edit a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.img-fluid{
|
||||
object-fit: cover; /* Do not scale the image */
|
||||
width: 100%;
|
||||
max-height: 25em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.glyphicon-edit{
|
||||
font-size: 2em;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Vendored
+49
@@ -0,0 +1,49 @@
|
||||
var schemacolor = "#fa8072";
|
||||
|
||||
$(document).ready(function(){
|
||||
$("a").hover(function(){
|
||||
$(this).css("color", schemacolor);
|
||||
}, function(){
|
||||
$(this).css("color", "black");
|
||||
});
|
||||
document.getElementById("jmeno").style.color = schemacolor;
|
||||
$(document).on('change', '.btn-file :file', function() {
|
||||
var input = $(this),
|
||||
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
|
||||
input.trigger('fileselect', [label]);
|
||||
});
|
||||
|
||||
$('.btn-file :file').on('fileselect', function(event, label) {
|
||||
|
||||
var input = $(this).parents('.input-group').find(':text'),
|
||||
log = label;
|
||||
|
||||
if( input.length ) {
|
||||
input.val(log);
|
||||
} else {
|
||||
if( log ) alert(log);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
function readURL(input) {
|
||||
if (input.files && input.files[0]) {
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onload = function (e) {
|
||||
$('#uvodni').attr('src', e.target.result);
|
||||
console.log("Nahrano");
|
||||
}
|
||||
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
function changeImage(){
|
||||
$("#imgInp").change(function(){
|
||||
readURL(this);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/template.js"></script>
|
||||
|
||||
<link href="css/svatweb.css" rel="stylesheet">
|
||||
|
||||
<title>Svatební web</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Sidebar -->
|
||||
|
||||
<nav class="top-panel">
|
||||
<div class="nazevwebu">
|
||||
<h1 id="jmeno"> Adam & Eva </h1>
|
||||
</div>
|
||||
<div class = "userdiv">
|
||||
<ul class="user">
|
||||
<li><a href="#"> Úvod </a></li>
|
||||
<li><a href="#"> Fotogalerie </a></li>
|
||||
<li><a href="#"> Náš příběh </a></li>
|
||||
<li><a href="#"><span class="glyphicon glyphicon-plus-sign"></span></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="profile-pic">
|
||||
<img src="./img/affair-anniversary-beach-1024993.jpg" class="img-fluid" id="uvodni" alt="Krásná úvodní fotografie">
|
||||
<div class="edit"><a href="#"><i class="glyphicon glyphicon-edit" data-toggle="modal" data-target="#exampleModal"></i></a></div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Úvodní fotografie</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label>Vybrat obrázek</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<span class="btn btn-default btn-file">
|
||||
Procházet<input type="file" id="imgInp">
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
|
||||
<button type="button" class="btn btn-primary" onclick="changeImage()" data-dismiss="modal">Nastavit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user