c'est dégueux mais fonctionnel

.gitignore

@@ -131,3 +131,7 @@ node_modules/
 average.txt
 requirements.txt
 py/.DS_Store
+py/.DS_Store
+py/.DS_Store
+py/.DS_Store
+py/nathan/.DS_Store

index.html

@@ -34,13 +34,13 @@
 				<a href="rechercher.html">Cherche ton code ici</a>
 			</div>
 			<input type="text" id="code" name="code" value="9782091317243">
-			<button onclick="urlachanger()">Changer de livre</button>
+			<button onclick="urlachanger()">update</button>
 		</div>
 
 		<div>
 			<label for="nbpage">Entrez la page :</label>
 			<input type="text" id="nbpage" name="nbpage" value="1" onchange="changerNBpage()">
-			<button onclick="changerNBpage()">Changer la page du livre</button>
+			<button onclick="changerNBpage()">update</button>
 		</div>
 
 		<div>
@@ -90,10 +90,10 @@
 			<h1>HG</h1>
 		</button>
 		<button onclick="changerURL(9782210114012, 'magnard')">
-			<h1>Anglais (magnard)</h1>
+			<h1>Anglais</h1>
 		</button>
 		<button onclick="changerURL(48452499, 'LLS')">
-			<h1>ES (lls)</h1>
+			<h1>ES</h1>
 		</button>
 		<!-- <button onclick="changerURL(9782017102120, 'hachette')">
 			<h1></h1>
@@ -106,16 +106,17 @@
 		</div>
 	</div>
 
-	<!-- <div class="mobile-buttons">
+	<div id="changepagebuttonmobile">
-		<button id="openWebpageButton1">Open Webpage</button>
+		<button onclick="pageachanger(-2)">&#x2190;</button>
-		<button id="openWebpageButton2">Open Webpage</button>
+		<button onclick="pageachanger(2)">&#x2192;</button>
-	</div> -->
+	</div>
-
+<br><br>
 	<div>
 		<a id="a1" href="" target="_blank">1</a>
 		<a id="a2" href="" target="_blank">2</a>
 	</div>
 
+
 	<div id="iframe" style="max-width: 30vh;">
 		<div id="iframe-1">
 			<div class="iframe-div-1">
@@ -134,7 +135,7 @@
 		<img id="myimg2" src="assets/img/404.png">
 	</div>
 
-	<div id="changepagebutton">
+	<div id="changepagebuttondesktop">
 		<button onclick="pageachanger(-2)">&#x2190; Page précédente</button>
 		<button onclick="pageachanger(2)">Page suivante &#x2192;</button>
 	</div>

style.css

@@ -1,16 +1,17 @@
-:root {
+@media only screen and (max-width: 1000px) {
-    /* -webkit-user-select: none; */
+    :root {
+        /* -webkit-user-select: none; */
         -webkit-touch-callout: none;
         -ms-user-select: none;
         -moz-user-select: none;
         user-select: none;
-        --color-scheme : light;
+        --color-scheme: light;
         --ecriture: black;
         --background: white;
         --police: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-        --scalenb : 0.5;
+        --scalenb: 0.5;
-        --iframe-width : 560px;
+        --iframe-width: 560px;
-        --iframe-height : 800px;
+        --iframe-height: 800px;
     }
     
     html {
@@ -32,7 +33,7 @@
     #iframe {
         display: flex;
         /* width:30vh; */
-        height:76vh;
+        height: 76vh;
         transform: scale(var(--scalenb));
         position: relative;
         transform-origin: top left;
@@ -55,7 +56,7 @@
     .iframe-div-1 {
         /* display: block; */
         /* height: 2043px;
-        width: 1477px; */
+            width: 1477px; */
         height: var(--iframe-height);
         width: var(--iframe-width);
     }
@@ -63,16 +64,16 @@
     .iframe-div-2 {
         /* display: block; */
         /* height: 2043px;
-        width: 1477px; */
+            width: 1477px; */
         height: var(--iframe-height);
         width: var(--iframe-width);
     }
     
     iframe {
         /* width: 553px;
-        height: 794px; */
+            height: 794px; */
         /* width: fit-content;
-        height: fit-content; */
+            height: fit-content; */
         width: 100%;
         height: 100%;
         display: block;
@@ -97,11 +98,164 @@
         margin: 10px;
     }
     
-    #changepagebutton {
+    input[type="text"] {
-        position: fixed;
+        padding: 5px;
-        bottom: 0px;
+        margin-bottom: 10px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        font-size: 16px;
+        line-height: 1.5;
+        width: 130px;
+        border-color: var(--background);
+    }
+    
+    input[type="radio"] {
+        margin-top: 10px;
+        margin-right: 20px;
+        margin-bottom: 10px;
+        margin-left: 5px;
+    }
+    
+    button {
+        /* padding: 5px; */
+        background-color: #4CAF50;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 16px;
+        line-height: 1.5;
+        margin-bottom: 10px;
+        width: 100px;
+        height: 40px;
+    }
+    
+    button:hover {
+        background-color: #3e8e41;
+    }
+    
+    
+    
+    button:last-child {
+        margin-right: 10px;
+    }
+    
+    h1 {
+        font-size: 15px;
+    }
+    
+    a {
+        color: #3391ff;
+    }
+    #changepagebuttondesktop {
+        display: none;
+    }
+    #changepagebuttonmobile {
+        position: absolute;
+        /* bottom: 0px;
         left: 50%;
-        transform: translate(-50%);
+        transform: translate(-50%); */
+    }
+}
+
+@media only screen and (min-width: 1001px) {
+    :root {
+        /* -webkit-user-select: none; */
+        -webkit-touch-callout: none;
+        -ms-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+        --color-scheme: light;
+        --ecriture: black;
+        --background: white;
+        --police: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        --scalenb: 0.5;
+        --iframe-width: 560px;
+        --iframe-height: 800px;
+    }
+    
+    html {
+        /* color-scheme: dark !important; */
+        color-scheme: var(--color-scheme);
+        background: var(--background);
+        color: var(--ecriture);
+        font-size: 1.5rem;
+        font-family: var(--police);
+    }
+    
+    body {
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        font-size: 16px;
+        line-height: 1.5;
+        background-color: var(--background);
+    }
+    
+    #iframe {
+        display: flex;
+        /* width:30vh; */
+        height: 76vh;
+        transform: scale(var(--scalenb));
+        position: relative;
+        transform-origin: top left;
+        margin: 10px;
+    }
+    
+    #iframe-1 {
+        display: flex;
+        /* margin: 5px; */
+        background-color: transparent;
+    
+    }
+    
+    #iframe-2 {
+        display: flex;
+        /* margin: 5px; */
+        background-color: transparent;
+    }
+    
+    .iframe-div-1 {
+        /* display: block; */
+        /* height: 2043px;
+            width: 1477px; */
+        height: var(--iframe-height);
+        width: var(--iframe-width);
+    }
+    
+    .iframe-div-2 {
+        /* display: block; */
+        /* height: 2043px;
+            width: 1477px; */
+        height: var(--iframe-height);
+        width: var(--iframe-width);
+    }
+    
+    iframe {
+        /* width: 553px;
+            height: 794px; */
+        /* width: fit-content;
+            height: fit-content; */
+        width: 100%;
+        height: 100%;
+        display: block;
+        margin-bottom: 20px;
+    }
+    
+    #img {
+        display: flex;
+        margin: 5px;
+        background-color: transparent;
+        transform: scale(var(--scalenb));
+        position: relative;
+        transform-origin: top left;
+    }
+    
+    img {
+        width: 50%;
+    }
+    
+    label {
+        display: block;
+        margin: 10px;
     }
     
     input[type="text"] {
@@ -153,3 +307,13 @@
     a {
         color: #3391ff;
     }
+    #changepagebuttondesktop {
+        position: fixed;
+        bottom: 0px;
+        left: 50%;
+        transform: translate(-50%);
+    }
+    #changepagebuttonmobile {
+        display: none;
+    }
+}