modif simplemobnav to look like a smartphone on big screen
This commit is contained in:
		
							
								
								
									
										58
									
								
								wwws/admin/src/test.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										58
									
								
								wwws/admin/src/test.html
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,58 @@ | ||||
| <!DOCTYPE html> | ||||
| <html lang="fr"> | ||||
| <head> | ||||
|   <meta charset="UTF-8" /> | ||||
|   <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||||
|   <title>App Smartphone Responsive</title> | ||||
|   <script src="https://cdn.tailwindcss.com"></script> | ||||
|   <!-- DaisyUI --> | ||||
|   <script> | ||||
|     tailwind.config = { | ||||
|       plugins: [daisyui], | ||||
|       daisyui: { themes: ["light"] } | ||||
|     } | ||||
|   </script> | ||||
| </head> | ||||
| <body class="bg-gray-200 flex items-center justify-center min-h-screen"> | ||||
|  | ||||
|   <!-- Smartphone container --> | ||||
|   <div class="w-full h-screen sm:w-[600px] bg-white rounded-none sm:rounded-2xl shadow-xl flex flex-col overflow-hidden"> | ||||
|      | ||||
|     <!-- Header --> | ||||
|     <div class="p-4 border-b font-bold text-lg"> | ||||
|       Mon Application | ||||
|     </div> | ||||
|  | ||||
|     <!-- Contenu scrollable --> | ||||
|     <div class="flex-1 overflow-y-auto flex flex-col justify-center p-4 space-y-4"> | ||||
|       <div class="card bg-base-200 p-4">Contenu 1</div> | ||||
|       <div class="card bg-base-200 p-4">Contenu 2</div> | ||||
|       <div class="card bg-base-200 p-4">Contenu 3</div> | ||||
|       <div class="card bg-base-200 p-4">Contenu 4</div> | ||||
|       <div class="card bg-base-200 p-4">Contenu 5</div> | ||||
|       <div class="card bg-base-200 p-4">Contenu 6</div> | ||||
|       <div class="card bg-base-200 p-4">Contenu 7</div> | ||||
|       <div class="card bg-base-200 p-4">Contenu 8</div> | ||||
|       <div class="card bg-base-200 p-4">Contenu 9</div> | ||||
|     </div> | ||||
|  | ||||
|     <!-- Dock en bas --> | ||||
|     <div class="flex justify-around border-t bg-base-100 p-2"> | ||||
|       <button class="btn btn-ghost btn-sm flex flex-col items-center"> | ||||
|         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0h6"/></svg> | ||||
|         <span class="text-xs">Home</span> | ||||
|       </button> | ||||
|       <button class="btn btn-ghost btn-sm flex flex-col items-center"> | ||||
|         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-6h13M9 5v6h13"/></svg> | ||||
|         <span class="text-xs">Search</span> | ||||
|       </button> | ||||
|       <button class="btn btn-ghost btn-sm flex flex-col items-center"> | ||||
|         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 7.292m0 0a4 4 0 100 7.292m0-14.584v14.584"/></svg> | ||||
|         <span class="text-xs">Profile</span> | ||||
|       </button> | ||||
|     </div> | ||||
|  | ||||
|   </div> | ||||
|  | ||||
| </body> | ||||
| </html> | ||||
		Reference in New Issue
	
	Block a user