<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<title>Test</title>
<style type="text/css">
:root {
--size: 12px;
/* 15px for btn-xl */
/* 15px for btn-lg */
/* 12px for btn-md */
/* 10px for btn-sm */
/* 5px for btn-xs */
--period: 750ms;
--color: #3498db;
--bg-color: white;
--thinness: 5;
/* 10 is okay */
}
.loader {
display: inline-block;
width: 12px;
height: 12px;
position: relative;
margin-right: calc(12px / 2);
}
.loader:before, .loader:after {
content: "";
position: absolute;
left: 0; /* make sure it's inside the box */
width: 100%;
height: 100%;
border-radius: 100%;
border: calc(12px / 5) solid transparent;
border-top-color: #3498db;
}
.loader:before {
z-index: 100;
animation: spin 750ms infinite;
}
.loader:after {
border: calc(12px / 5) solid white;
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<!--
<form id="myForm">
<input type="hidden" name="caca" value="pipi">
<input type="hidden" name="caca2" value="pipi2">
<input type="hidden" name="caca3" value="pipi3">
<button type="submit" name="formSubmit" class="btn btn-xl btn-primary">
Press Me!
</button>
</form>
<div id="error-myForm" class="row" style="display: none;">
<div class="col-sm-3">
<div class="alert alert-danger mb-1" role="alert">
<h4 class="error-lead">Error!</h4>
<p class="error-description"></p>
</div>
</div>
</div>
-->
<header id="main-header">
<a id="logo" href=".">
TANIA
<img src="./img/pen_800x800.png" alt="tania logo pen" width="25" height="25">
</a>
<div id="account">
<a class="nav-link" href="./questionnaires.php">Questionnaire Collection</a>
<a class="sign-out" href="./processes/logout.php">Sign Out</a>
</div>
</header>
<div class="container-fluid" id="view-experience-showcase" style="background-color: #333;">
<h2 style="color: white;">Test 123</h2>
<div id="view-experience-block">
<blockquote style="color:rgb(216,216,216); margin: 0;">
<h4><b style="color:#fff;">Description:</b> <span style="color:rgb(216,216,216);">Testing purposes</span></h4>
<h4><b style="color:#fff;">Type:</b> <span style="color:rgb(216,216,216);">Independent Research</span></h4>
<h4><b style="color:#fff;">Duration:</b> <span style="color:rgb(216,216,216);">3 weeks</span></h4>
</blockquote>
<div id="view-experience-buttons">
<div id="experience-pen" onclick="window.location='respuestas.php?exp=<?php echo $id_experience; ?>'">
<span class="fas fa-poll-h"></span>
</div>
<div id="experience-pen" onclick="nextModal('#Edit')">
<span class="fas fa-pen"></span>
</div>
<div id="experience-pen" onclick="prompt('Press Ctrl + C to copy to clipboard!','https://tania.uprrp.edu/enrollInExp.php?id=<?php echo $rowHash['hash_id']; ?>')">
<span class="fas fa-link"></span>
</div>
</div>
</div>
<br>
<div id="view-experience-tabs">
<a class="active" href="#calendar">Calendar</a>
<a href="#questionnaires">Questionnaires</a>
<a href="#moments">Moments</a>
<a href="#milestones">Milestones</a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<button type="button" data-piruli="acérrimo" data-pupi="yandel" class="btn btn-primary" data-toggle="modal" data-target="#bookModal">Hello World</button>
</div>
</div>
</div>
<div id="bookModal" class="modal fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div id="orderDetails" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#bookModal').on('show.bs.modal', function(e) {
var modal = $(this);
modal.find('#orderDetails').text(e.relatedTarget.innerText);
var data = $(e.relatedTarget).data('piruli');
var data2 = $(e.relatedTarget).data('pupi');
console.log(data);
console.log(data2);
console.log(modal);
});
//setTimeout(() => $('#bookModal').modal('toggle'), 5000);
</script>
</body>
</html>