pascal.lafourcade
/
tactique-basket
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Exporter png/pdf

Browse Source
master
emeric dallot 4 years ago
parent 56d3ce96e7
commit 7593bc534a
5 changed files with 292 additions and 97 deletions
Show Stats Download Patch File Download Diff File

57
ajout etienne/basket.css
Unescape View File

@ -170,3 +170,60 @@ body{
#bouttonadd:active{ #bouttonadd:active{
box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4); box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
} }
#Dribble:hover{
background-color: #b9b7b7;
}
.onoffswitch {
position: relative;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #FFFFFF; border-radius: 50px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.4s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 41px; padding: 0; line-height: 41px;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "DRIBBLER";
padding-left: 12px;
}
.onoffswitch-inner:after {
content: "DRIBBLER";
padding-left: 37px;
background-color: red; color: black;
text-align:left;
}
.onoffswitch-switch {
display: block; width: 30px; margin: 5.5px;
background: #34A7C1;
position: absolute; top: 0; bottom: 0;
border: 2px solid #FFFFFF; border-radius: 50px;
transition: all 0.4s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #A1A1A1;
}

30
ajout etienne/basket.html
Unescape View File

@ -9,8 +9,11 @@
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="basket.css"> <link rel="stylesheet" href="basket.css">
<title>Basket</title> <title>Basket</title>
</head> </head>
<body> <body>
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light" id="barre_nav"> <nav class="navbar navbar-expand-lg navbar-light" id="barre_nav">
<div id="titre"> <div id="titre">
@ -46,9 +49,16 @@
Partager Partager
</a> </a>
<div class="dropdown-menu text-white" aria-labelledby="navbarDropdown"> <div class="dropdown-menu text-white" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">PDF</a> <a href="#" class="button dropdown-item" id="btn-download">PNG</a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">JPG</a> <script src="https://cdn.jsdelivr.net/npm/three@0.118.3/build/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<button class="dropdown-item" id="download">Download</button>
</div> </div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
@ -114,11 +124,14 @@
DÉPLACER DÉPLACER
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item" id="Dribble">
<a class="nav-link" href="#"> <div class="onoffswitch">
<span data-feather="file-text"></span> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0" checked>
DRIBBLER <label class="onoffswitch-label" for="myonoffswitch">
</a> <span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link" href="#">
@ -218,8 +231,11 @@
<!-- Optional JavaScript --> <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="rectest.js"></script> <script src="rectest.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body> </body>
</html> </html>

55
ajout etienne/rectest.js
Unescape View File

@ -10,6 +10,9 @@ canvas.height = lt*0.536;
var ht = canvas.height; var ht = canvas.height;
var WIDTH = canvas.width; var WIDTH = canvas.width;
var HEIGHT = canvas.height; var HEIGHT = canvas.height;
var buttonPNG = document.getElementById('btn-download');
var buttonPDF = document.getElementById('btn-downloadpdf');
// drag related variables // drag related variables
var dragok = false; var dragok = false;
@ -581,4 +584,56 @@ function retourarriere(){
} }
buttonPNG.onclick = function(){
download(canvas, 'Schema.png');
}
function download(canvas, filename) {
var lnk = document.createElement('a'), e;
lnk.download = filename;
lnk.href = canvas.toDataURL("image/png;base64");
/// create a "fake" click-event to trigger the download
if (document.createEvent) {
e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false,false, 0, null);
lnk.dispatchEvent(e);
} else if (lnk.fireEvent) {
lnk.fireEvent("onclick");
}
}
init();
function init() {
var button = document.getElementById( 'download' );
button.addEventListener( 'click', function() {
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF();
imgData.width=300;
imgData.height=200;
pdf.addImage(imgData, 'JPEG',0 ,0);
pdf.save("download.pdf");
} );
}

140
basket.css
Unescape View File

@ -24,15 +24,10 @@
margin-bottom: 5px; margin-bottom: 5px;
} }
#menu-ajout{
position: absolute;
}
body{ body{
/*background-color: #353535;*/ background-color: #303030;
background-color: #900000; overflow-x: scroll;
overflow-x: hidden; overflow-y: scroll;
overflow-y:scroll;
} }
.collapse.width, .collapse.width,
@ -42,10 +37,6 @@ body{
width: 0; width: 0;
transition: all .2s ease; transition: all .2s ease;
} }
#collapseExample{
width: 400px;
height: 100%;
}
.collapse .flex-column { .collapse .flex-column {
overflow: auto; overflow: auto;
@ -56,88 +47,70 @@ body{
width: 100%; width: 100%;
} }
#derouler_action{
margin-bottom: 90%;
}
#colonne_gauche{
width: fill;
height: fill;
background-color: #353535;
}
#colonne_droite{
width: auto;
height: auto;
background-color: #993535;
}
.feather { .feather {
width: 16px; width: 16px;
height: 16px; height: 16px;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
/*
* Sidebar
*/
.sidebar { .sidebar {
margin-top: 56px; width: 20%;
position: fixed; margin-top: 56px;
top: 0; position: fixed;
bottom: 0; top: 0;
right: 0; bottom: 0;
z-index: 100; /* Behind the navbar */ right: 0;
padding: 48px 0 0; /* Height of navbar */ z-index: 100; /* Behind the navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
background-color: #b9b7b7;
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.sidebar { .sidebar {
top: 5rem; top: 5rem;
} }
} }
.sidebar-sticky { .sidebar-sticky {
position: relative; position: relative;
top: 0; top: 0;
height: calc(100vh - 48px); height: calc(100vh - 48px);
padding-top: .5rem; padding-top: .5rem;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
} }
@supports ((position: -webkit-sticky) or (position: sticky)) { @supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky { .sidebar-sticky {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
} }
} }
.sidebar .nav-link { .sidebar .nav-link {
font-weight: 500; font-weight: 500;
color: #333; color: #333;
} }
.sidebar .nav-link .feather { .sidebar .nav-link .feather {
margin-right: 4px; margin-right: 4px;
color: #999; color: #999;
} }
.sidebar .nav-link.active { .sidebar .nav-link.active {
color: #007bff; color: #007bff;
} }
.sidebar .nav-link:hover .feather, .sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather { .sidebar .nav-link.active .feather {
color: inherit; color: inherit;
} }
.sidebar-heading { .sidebar-heading {
font-size: .75rem; font-size: .75rem;
text-transform: uppercase; text-transform: uppercase;
} }
#list-home-list{ #list-home-list{
height: 50px; height: 50px;
@ -158,3 +131,42 @@ body{
height: 150px; height: 150px;
width: 80%; width: 80%;
} }
#sidebarMenu{
min-width: 50px;
}
#terrain{
margin-top: 2%;
margin-left: 5%;
width: 75%;
height: auto;
}
#demiTerrainDroit{
margin-top: 2%;
margin-left: 20%;
width: 75%;
height: auto;
}
#demiTerrainGauche{
margin-top: 2%;
margin-left: 20%;
width: 75%;
height: auto;
/*transform: rotate(90deg);*/
}
.boutons {
margin-top: 1%;
}
#bouttonadd: hover {
background-color : "red";
border-color: "yellow";
}
#bouttonadd:active{
box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
}

105
basket.html
Unescape View File

@ -1,4 +1,3 @@
<!-- Ambroise GABERT -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
@ -15,7 +14,7 @@
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light" id="barre_nav"> <nav class="navbar navbar-expand-lg navbar-light" id="barre_nav">
<div id="titre"> <div id="titre">
<img id="image_ballon" src="image_ballon.jpg" width="30" height="30" alt=""> <img id="image_ballon" src="ballon.png" width="30" height="30" alt="">
<a class="navbar-brand text-white" href="#">BASKET</a> <a class="navbar-brand text-white" href="#">BASKET</a>
</div> </div>
<button class="navbar-toggler bg-light" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler bg-light" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@ -35,11 +34,11 @@
Nouvelle page Nouvelle page
</a> </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> <div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">HAUT TERRAIN</a> <a class="dropdown-item" id="demo" href="#" onclick="afficherDemiTerrainDroit()">TERRAIN DROIT</a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item " href="#">BAS TERRAIN</a> <a class="dropdown-item " href="#" onclick="afficherDemiTerrainGauche()">TERRAIN GAUCHE</a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item " href="#">FULL TERRAIN</a> <a class="dropdown-item " href="#" onclick="afficherFullTerrain()" >FULL TERRAIN</a>
</div> </div>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
@ -62,7 +61,7 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block sidebar collapse">
<div class="row list-group list-group"> <div class="row list-group list-group">
<div > <div >
<div class="list-group list-group-horizontal" id="bouton" role="tablist"> <div class="list-group list-group-horizontal" id="bouton" role="tablist">
@ -76,7 +75,7 @@
<div class="tab-content" id="nav-tabContent"> <div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list"> <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
<div class="sidebar-sticky pt-3"> <div class="sidebar-sticky pt-3">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted font-weight-bold">
<span>AJOUTER JOUEUR</span> <span>AJOUTER JOUEUR</span>
<a class="d-flex align-items-center text-muted" href="#" aria-label="Add a new report"> <a class="d-flex align-items-center text-muted" href="#" aria-label="Add a new report">
<span data-feather="plus-circle"></span> <span data-feather="plus-circle"></span>
@ -84,19 +83,19 @@
</h6> </h6>
<ul class="nav flex-column" id="ul"> <ul class="nav flex-column" id="ul">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link" onclick="ajouterjoueur()" href="#">
<span data-feather="file"></span> <span data-feather="file"></span>
ATTAQUANT ATTAQUANT
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item" id="bouttonadd">
<a class="nav-link" href="#"> <a class="nav-link " onclick="ajouteradversaire()" href="#">
<span data-feather="shopping-cart"></span> <span data-feather="shopping-cart"></span>
DEFENSEUR DÉFENSEUR
</a> </a>
</ul> </ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted font-weight-bold">
<span>ACTIONS</span> <span>ACTIONS</span>
<a class="d-flex align-items-center text-muted" href="#" aria-label="Add a new report"> <a class="d-flex align-items-center text-muted" href="#" aria-label="Add a new report">
<span data-feather="plus-circle"></span> <span data-feather="plus-circle"></span>
@ -104,7 +103,7 @@
</h6> </h6>
<ul class="nav flex-column mb-2" id="ul"> <ul class="nav flex-column mb-2" id="ul">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link" onclick="triggerfairepasse()"href="#">
<span data-feather="file-text"></span> <span data-feather="file-text"></span>
PASSE PASSE
</a> </a>
@ -112,19 +111,19 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link" href="#">
<span data-feather="file-text"></span> <span data-feather="file-text"></span>
DEPLACER DÉPLACER
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link" href="#">
<span data-feather="file-text"></span> <span data-feather="file-text"></span>
DRIBLER DRIBBLER
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#"> <a class="nav-link" href="#">
<span data-feather="file-text"></span> <span data-feather="file-text"></span>
ECRAN ÉCRAN
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
@ -133,6 +132,18 @@
TIRER TIRER
</a> </a>
</li> </li>
<li class="nav-item">
<a class="nav-link" onclick="retourarriere()" href="#">
<span data-feather="file-text"></span>
RETOUR ARRIERE
</a>
</li>
<li class="nav-item">
<a class="nav-link" onclick="triggerdonnerlaballe()" href="#">
<span data-feather="file-text"></span>
DONNER LA BALLE
</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -157,14 +168,58 @@
</div> </div>
</div> </div>
</div> </div>
</nav> </nav>
<button type="button" class="btn btn-warning fixed-bottom font-weight-bold" >+</button>
<div class="boutons">
<button type="button" class="btn btn-warning">
<img src="flèche_gauche.png" height="30">
</button>
<button type="button" class="btn btn-warning">
<img src="flèche_droite.png" height="30">
</button>
</div>
<div id="divTerrains">
<canvas id="terrain" style="display:block;"></canvas>
<script src ="Terrains/Horizontal/entier.js"></script>
<canvas id="demiTerrainDroit" style="display:none;"></canvas>
<script src ="Terrains/Horizontal/demiDroit.js"></script>
<canvas id="demiTerrainGauche" style="display:none;"></canvas>
<script src ="Terrains/Horizontal/demiGauche.js"></script>
</div>
<script>
function afficherFullTerrain() {
document.getElementById("terrain").style.display = "block";
document.getElementById("demiTerrainDroit").style.display = "none";
document.getElementById("demiTerrainGauche").style.display = "none";
}
function afficherDemiTerrainDroit() {
document.getElementById("terrain").style.display = "none";
document.getElementById("demiTerrainDroit").style.display = "block";
document.getElementById("demiTerrainGauche").style.display = "none";
}
function afficherDemiTerrainGauche() {
document.getElementById("terrain").style.display = "none";
document.getElementById("demiTerrainDroit").style.display = "none";
document.getElementById("demiTerrainGauche").style.display = "block";
}
</script>
<button type="button" class="btn btn-warning fixed-bottom font-weight-bold">+</button>
<!-- Optional JavaScript --> <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="rectest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
</body> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</html> </body>
</html>

Write Preview
Loading…
Cancel
Save