From cdb0bbbc72853b14cb404b6359a4f7f63de6e001 Mon Sep 17 00:00:00 2001
From: MOHAMED MEHIAOUI <mohamed.mehiaoui8@etu.univ-lorraine.fr>
Date: Sat, 15 Mar 2025 14:13:11 +0100
Subject: [PATCH] Modification de l'html
---
MEHIAOUI/app.css | 68 +++++++++++++++++++++++++++++++++++++++++++++
MEHIAOUI/index.html | 40 ++++++++++++++++----------
MEHIAOUI/projet.js | 4 +--
3 files changed, 95 insertions(+), 17 deletions(-)
create mode 100644 MEHIAOUI/app.css
diff --git a/MEHIAOUI/app.css b/MEHIAOUI/app.css
new file mode 100644
index 0000000..1a79f9c
--- /dev/null
+++ b/MEHIAOUI/app.css
@@ -0,0 +1,68 @@
+*{
+ margin: 0;
+ padding: 0;
+}
+body{
+ font-family: 'Poppins', sans-serif;
+ background-color: white;
+ width:100vw;
+ height: 100vh;
+
+
+ header {
+ text-align: center;
+ background: radial-gradient(circle, rgba(255, 102, 128, 0.2) 30%, rgba(102, 204, 255, 0.2) 70%);
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
+ .logo, .creators{
+ position: absolute;
+ font-size: 1.2rem;
+ font-weight: bold;
+ color: #6c63ff;
+ }
+ .logo{
+ top: 0;
+ left: 0;
+ }
+ .creators{
+ top: 0;
+ right: 5px;
+ }
+
+ .title {
+ font-size: 3rem;
+ font-weight: bold;
+ color: #003b66;
+ }
+
+ .subtitle {
+ font-size: 1.2rem;
+ color: #8b8eb2;
+ font-weight: 500;
+ }
+ }
+ /*div centre title*/
+ main{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ .centre{
+ border: none;
+ width: 100%;
+ padding: 40px;
+ font-size: 20px;
+ font-weight: bold;
+ color: cadetblue;
+ text-align: center;
+ margin-bottom: 40px;
+ }
+ }
+}
+
diff --git a/MEHIAOUI/index.html b/MEHIAOUI/index.html
index 9d9b144..c543633 100644
--- a/MEHIAOUI/index.html
+++ b/MEHIAOUI/index.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>TP 1</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
+ <link rel="stylesheet" type="text/css" href="app.css">
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
@@ -11,21 +12,30 @@
</style>
</head>
<body>
- <!-- API importe du site de Three.js -->
- <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
- <script type="importmap">
- {
- "imports": {
- "three": "https://threejs.org/build/three.module.js",
- "three/addons/": "https://threejs.org/examples/jsm/"
+ <header>
+ <h3 class="logo">OurProject</h3>
+ <h3 class="creators">Merimi & Mehiaoui</h3>
+ <h1 class="title">THREE.JS Project</h1>
+ <p class="subtitle">Découvrez notre petit projet en three.js !</p>
+ </header>
+ <main>
+ <!-- Un titre centre -->
+ <div id="webGL" class="centre">Juste un bol, des fruits, et des fleurs</div>
+
+ <!-- API importe du site de Three.js -->
+ <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
+ <script type="importmap">
+ {
+ "imports": {
+ "three": "https://threejs.org/build/three.module.js",
+ "three/addons/": "https://threejs.org/examples/jsm/"
+ }
}
- }
- </script>
- <!-- JQuery pour afficher les erreurs -->
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
- <!-- Un titre centre -->
- <div id="webGL" class="centre">Juste un bol, des fruits, et des fleurs</div>
- <!-- Mon script avec un chemin relatif -->
- <script type="module" src="projet.js"></script>
+ </script>
+ <!-- JQuery pour afficher les erreurs -->
+ <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+ <!-- Mon script avec un chemin relatif -->
+ <div class="scene"><script type="module" src="projet.js"></script></div>
+ </main>
</body>
</html>
\ No newline at end of file
diff --git a/MEHIAOUI/projet.js b/MEHIAOUI/projet.js
index e5155e2..1ef83c6 100644
--- a/MEHIAOUI/projet.js
+++ b/MEHIAOUI/projet.js
@@ -273,8 +273,8 @@ function fillScene() {
function init() {
// For grading the window is fixed in size; here's general code:
- var canvasWidth = window.innerWidth;
- var canvasHeight = window.innerHeight;
+ var canvasWidth = window.innerWidth/2;
+ var canvasHeight = window.innerHeight/2;
var canvasRatio = canvasWidth / canvasHeight;
// RENDERER
--
GitLab