Hugging Face's logo

Spaces:
Docfile
/
Mariam-physiques
Sleeping

App Files Community
Docfile commited on
Commit
d3df14c
·
verified ·
1 Parent(s): a576f64

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +62 -6
templates/index.html CHANGED
@@ -21,6 +21,35 @@
21
  0% { transform: rotate(0deg); }
22
  100% { transform: rotate(360deg); }
23
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  </style>
25
  </head>
26
  <body>
@@ -33,7 +62,7 @@
33
  </div>
34
  <div class="form-group">
35
  <label for="text_input">Texte:</label>
36
- <textarea name="text_input" id="text_input" class="form-control" ></textarea>
37
  </div>
38
  <button type="submit" class="btn btn-primary">Générer</button>
39
  </form>
@@ -44,32 +73,59 @@
44
  <div class="row">
45
  <div class="col-md-8">
46
  <h2>Contenu généré:</h2>
47
- <div>
48
  {{ generated_content | safe }}
49
  </div>
50
  </div>
51
  <div class="col-md-4">
52
  <h2>Structures chimiques:</h2>
53
  {% for image_path in image_paths %}
54
- <img src="{{ image_path }}" alt="Structure Chimique" style="max-width:100%; height:auto;"><br>
 
 
 
55
  {% endfor %}
56
  </div>
 
 
 
 
 
 
57
  </div>
58
  {% endif %}
59
  </div>
60
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
 
61
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
62
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
63
- <script>
64
  function showLoader() {
65
  document.getElementById('loader').style.display = 'block';
66
  }
67
 
68
- // Optionnel : cacher le loader après le chargement de la page
69
  window.onload = function() {
70
  document.getElementById('loader').style.display = 'none';
71
  };
72
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
73
  </script>
74
  </body>
75
  </html>
 
21
  0% { transform: rotate(0deg); }
22
  100% { transform: rotate(360deg); }
23
  }
24
+
25
+ .resizable-image {
26
+ max-width: 100%;
27
+ height: auto;
28
+ transition: transform 0.2s; /* Ajoute une transition pour une expérience plus douce */
29
+ }
30
+
31
+ .resizable-image:hover {
32
+ transform: scale(1.5); /* Zoom x1.5 au survol */
33
+ cursor: zoom-in;
34
+ }
35
+ .structure-chimique-container {
36
+ position: relative; /* Pour positionner le bouton de zoom */
37
+ margin-bottom: 20px;
38
+ border: 1px solid #ccc;
39
+ padding: 10px;
40
+ text-align: center;
41
+ }
42
+
43
+ .zoom-button {
44
+ position: absolute;
45
+ top: 10px;
46
+ right: 10px;
47
+ background-color: #f0f0f0;
48
+ border: none;
49
+ padding: 5px 10px;
50
+ cursor: pointer;
51
+ z-index: 10; /* Assurez-vous que le bouton est au-dessus de l'image */
52
+ }
53
  </style>
54
  </head>
55
  <body>
 
62
  </div>
63
  <div class="form-group">
64
  <label for="text_input">Texte:</label>
65
+ <textarea name="text_input" id="text_input" class="form-control"></textarea>
66
  </div>
67
  <button type="submit" class="btn btn-primary">Générer</button>
68
  </form>
 
73
  <div class="row">
74
  <div class="col-md-8">
75
  <h2>Contenu généré:</h2>
76
+ <div class="content-wrapper">
77
  {{ generated_content | safe }}
78
  </div>
79
  </div>
80
  <div class="col-md-4">
81
  <h2>Structures chimiques:</h2>
82
  {% for image_path in image_paths %}
83
+ <div class="structure-chimique-container">
84
+ <img src="{{ image_path }}" alt="Structure Chimique" class="resizable-image" onclick="toggleZoom(this)">
85
+ <button class="zoom-button" onclick="toggleZoomModal('{{ image_path }}')">Zoom</button>
86
+ </div>
87
  {% endfor %}
88
  </div>
89
+ </div>
90
+ <!-- Modal pour l'image zoomée -->
91
+ <div id="zoomModal" class="modal" style="display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9);">
92
+ <span class="close-modal" style="position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer;" onclick="closeZoomModal()">×</span>
93
+ <img id="zoomedImage" src="" style="margin: auto; display: block; max-width: 90%; max-height: 90%;">
94
+ <div style="text-align:center; color:white;">Cliquer en dehors de l'image ou sur la croix pour fermer.</div>
95
  </div>
96
  {% endif %}
97
  </div>
98
+
99
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
100
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
101
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
102
+ <script>
103
  function showLoader() {
104
  document.getElementById('loader').style.display = 'block';
105
  }
106
 
 
107
  window.onload = function() {
108
  document.getElementById('loader').style.display = 'none';
109
  };
110
 
111
+ function toggleZoomModal(imagePath) {
112
+ var modal = document.getElementById('zoomModal');
113
+ var zoomedImage = document.getElementById('zoomedImage');
114
+ zoomedImage.src = imagePath;
115
+ modal.style.display = 'block';
116
+ }
117
+ function closeZoomModal() {
118
+ document.getElementById('zoomModal').style.display = 'none';
119
+ }
120
+
121
+ // Fermer le modal si on clique en dehors de l'image
122
+ window.onclick = function(event) {
123
+ var modal = document.getElementById('zoomModal');
124
+ if (event.target == modal) {
125
+ modal.style.display = "none";
126
+ }
127
+ }
128
+
129
  </script>
130
  </body>
131
  </html>