JSON_dynamique/index.html at master · patrick-lainesse/JSON_dynamique · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>

<!--
Page web préparée par: Patrick Lainesse
Matricule: 740302
Dans le cadre du cours IFT1142, session H20

Ressources utilisées:
- Template Colorlib: https://colorlib.com/wp/template/medino/

Les fichiers css et javascript que j'ai modifiés ou créés sont situés dans les dossiers /css et /js.
Tous les documents provenant du template se retrouvent dans le dossier /template.
Je me suis rajouté une difficulté supplémentaire pour ce projet: adapter les différents éléments d'un style bootstrap
tout en conservant conserver certaines des fonctions jquery pour animer des transitions.
-->


<html lang="fr">
<head>
    <!-- Required Meta Tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- Page Title -->
    <title>Medino</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="template/images/logo/favicon.png" type="image/x-icon">

    <!-- CSS Files -->
    <link rel="stylesheet" href="template/css/animate-3.7.0.css">
    <link rel="stylesheet" href="template/css/font-awesome-4.7.0.min.css">
    <link rel="stylesheet" href="template/css/bootstrap-4.1.3.min.css">
    <link rel="stylesheet" href="template/css/owl-carousel.min.css">
    <link rel="stylesheet" href="template/css/jquery.datetimepicker.min.css">
    <link rel="stylesheet" href="template/css/linearicons.css">
    <link rel="stylesheet" href="template/css/style_template.css">
    <link rel="stylesheet" href="template/css/nice-select.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <!-- Preloader Starts -->
    <div class="preloader">
        <div class="spinner"></div>
    </div>
    <!-- Preloader End -->

    <!-- Header Area Starts -->
    <header class="header-area">
        <div class="header-top">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9 d-md-flex">
                        <h6 class="mr-3">Patrick Lainesse</h6>
                        <h6 class="mr-3">Matricule: 740302</h6>
                        <h6 class="mr-3">IFT1142</h6>
                        <h6 class="mr-3">Hiver 2020</h6>
                    </div>
                </div>
            </div>
        </div>
        <div id="header">
            <div class="container">
                <div class="row align-items-center justify-content-between d-flex">
                <div id="logo">
                    <a href="index.html"><img src="template/images/logo/logo.png" alt="" title="" /></a>
                </div>
                <nav id="nav-menu-container"> <!--barre d'outils-->
                    <ul class="nav-menu">
                        <li><a href="#" onclick="afficher_tableau(this.id, 0, 0)" id="pati">Liste de patients</a></li>
                        <li><a href="#" onclick="afficher_tableau(this.id, 0, 0)" id="etab">Liste des établissements</a></li>
                        <li><a href="#" onclick="afficher_tableau(this.id, 0, 0)" id="hosp">Liste des hospitalisations</a></li>
                        <li><a href="#" onclick="charger_select(this.id)" id="hosp_pati">Hospitalisations<br>par patient</a></li>
                        <li><a href="#" onclick="charger_select(this.id)" id="hosp_etab">Hospitalisations par<br>établissement et par spécialité</a></li>
                    </ul>
                </nav><!-- #nav-menu-container -->
                </div>
            </div>
        </div>
    </header>
    <!-- Header Area End -->

    <!-- Banner Area Starts -->
    <section class="banner-area arriere_padding">
        <div class="container tableau_padding centre" id="conteneur">
            <div class="row" id="texte_pub">
                <div class="col-lg-5">
                    <h4>Les menus en Javascript</h4>
                    <h1>La gestion d'hôpital à son meilleur</h1>
                    <p>En autant que tout le monde reste sagement à la maison.</p>
                    <a href="#prepare_par" class="template-btn mt-3" onclick="montrer_footer()">Préparé par</a>
                </div>
            </div>

            <div class="cache" id="menuSelect"></div>
            <!--<div class="cache default-select" id="default-select"></div>-->

            <!--section zone d'affichage de la page, où s'affichent dynamiquement les tableaux-->
            <div class="section-top-border cache" id="cadre_tableau">
                <a href="index.html" class="genric-btn boutonX danger-border radius" id="boutonX">X</a>
                <div class="progress-table-wrap">
                    <div class="progress-table tableau_largeur" id="tableau">
                        <div class="table-head rangee_padding" id="attributs"></div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!-- Banner Area End -->

    <!-- Hotline Area Starts -->
    <!--section status de la page, où s'affichent dynamiquement les messages d'erreur ou autres informations-->
    <section class="hotline-area text-center section-padding etat_padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2>Zone d'état</h2>
                    <p class="pt-3 cache" id="status"></p><!--c'est ici que s'affichent les messages, caché par défaut-->
                </div>
            </div>
        </div>
    </section>
    <!-- Hotline Area End -->

    <!-- Footer Area Starts -->
    <footer class="footer-area section-padding cache" id="footer" onclick="montrer_footer()">
        <div class="footer-copyright">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-6">
                        <p id="prepare_par">
                            Site web préparé par: Patrick Lainesse<br>
                            Matricule: 740302<br>
                            Dans le cadre du cours IFT1142<br>
                            Session: Hiver 2020
                        </p>
                        <span>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</span>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="social-icons">
                            <ul>
                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                <li><a href="#"><i class="fa fa-behance"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer Area End -->


    <!-- Javascript -->
    <script src="template/js/vendor/jquery-2.2.4.min.js"></script>
	<script src="template/js/vendor/bootstrap-4.1.3.min.js"></script>
    <script src="template/js/vendor/wow.min.js"></script>
    <script src="template/js/vendor/owl-carousel.min.js"></script>
    <script src="template/js/vendor/jquery.datetimepicker.full.min.js"></script>
    <script src="template/js/vendor/jquery.nice-select.min.js"></script>
    <script src="template/js/vendor/superfish.min.js"></script>
    <script src="template/js/main.js"></script>
    <script src="js/hospitalisations.js"></script>
    <script src="js/scripts.js"></script>

</body>
</html>