diff --git a/app.js b/app.js index 0644497..f2917ee 100644 --- a/app.js +++ b/app.js @@ -1,11 +1,10 @@ const SESSION_SECRET = "your_session_secret"; -// ...existing code... - const express = require('express'); const session = require('express-session'); const initDb = require('./db_init'); const path = require('path'); +const expressLayouts = require('express-ejs-layouts'); const routes = require('./routes'); @@ -34,6 +33,13 @@ app.use(session({ app.set('view engine', 'ejs'); app.set('views', path.join(__dirname, 'views')); +// Express EJS Layouts +app.use(expressLayouts); +app.set('layout', 'layout'); // nom du fichier layout sans .ejs + +// Static files +app.use(express.static(path.join(__dirname, 'public'))); + // Routes app.use('/', routes); diff --git a/database.sqlite b/database.sqlite new file mode 100644 index 0000000..1b9cafb Binary files /dev/null and b/database.sqlite differ diff --git a/package-lock.json b/package-lock.json index 6e11517..873dfae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "axios": "^1.11.0", "ejs": "^3.1.10", "express": "^5.1.0", + "express-ejs-layouts": "^2.5.1", "express-session": "^1.18.2", "sqlite3": "^5.1.7" } @@ -708,6 +709,11 @@ "url": "https://opencollective.com/express" } }, + "node_modules/express-ejs-layouts": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/express-ejs-layouts/-/express-ejs-layouts-2.5.1.tgz", + "integrity": "sha512-IXROv9n3xKga7FowT06n1Qn927JR8ZWDn5Dc9CJQoiiaaDqbhW5PDmWShzbpAa2wjWT1vJqaIM1S6vJwwX11gA==" + }, "node_modules/express-session": { "version": "1.18.2", "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.18.2.tgz", diff --git a/package.json b/package.json index 6b1d310..7e42484 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "axios": "^1.11.0", "ejs": "^3.1.10", "express": "^5.1.0", + "express-ejs-layouts": "^2.5.1", "express-session": "^1.18.2", "sqlite3": "^5.1.7" } diff --git a/views/logo.png b/public/logo.png similarity index 100% rename from views/logo.png rename to public/logo.png diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..e3ce7a2 --- /dev/null +++ b/public/style.css @@ -0,0 +1,294 @@ +body { + margin: 0; + font-family: Arial, sans-serif; + background: linear-gradient(135deg, #f8f6fc 0%, #fffbe7 100%); + color: #7a5c1e; +} + +header { + background: linear-gradient(90deg, #8e68aa 60%, #cb8d37 100%); + color: white; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 20px; + box-shadow: 0 2px 8px rgba(140, 104, 170, 0.08); +} + +header h1 { + font-size: 1.2rem; +} + +.search-bar { + flex-grow: 1; + margin: 0 20px; +} + +.search-bar input { + width: 100%; + padding: 5px; + border: none; + border-radius: 4px; +} + +.account { + background: linear-gradient(90deg, #cb8d37 60%, #8e68aa 100%); + padding: 6px 12px; + border-radius: 4px; + color: white; + cursor: pointer; + font-weight: bold; + transition: background 0.2s; +} + +.account:hover { + background: #a97b2c; +} + +main { + padding: 20px; + text-align: center; +} + +main h2 { + font-size: 2rem; + margin: 10px 0; +} + +.sections { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; + margin-top: 20px; +} + +.section h3 { + margin-bottom: 15px; + text-align: left; +} + +.cards { + display: flex; + flex-direction: column; + gap: 15px; +} + +.card { + background: #ddd; + border-radius: 8px; + padding: 15px; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.card-info { + text-align: left; +} + +.card-info h4 { + margin: 0 0 5px; + font-weight: bold; +} + +.card-photo { + background: #8e68aa; + width: 120px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.9rem; + color: #555; +} + +footer { + background: #8e68aa; + text-align: center; + padding: 10px; + margin-top: 30px; +} + +footer a { + margin: 0 10px; + text-decoration: none; + color: #333; +} + +/* Header layout amélioré */ +.main-header { + background: linear-gradient(90deg, #8e68aa 60%, #cb8d37 100%); + color: white; + box-shadow: 0 2px 8px rgba(140, 104, 170, 0.08); + padding: 0; +} + +.header-content { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 20px; + max-width: 1200px; + margin: 0 auto; + width: 100%; + gap: 0; +} + +.header-left { + display: flex; + align-items: center; + min-width: 220px; +} + +.header-left h1 { + font-size: 1.4rem; + margin: 0 0 0 10px; + white-space: nowrap; +} + +.header-center { + flex: 1 1 0; + display: flex; + justify-content: center; +} + +.header-right { + display: flex; + align-items: center; + min-width: 260px; + justify-content: flex-end; +} + +.search-bar { + flex: 1 1 300px; + max-width: 700px; + margin: 0 18px; +} + +.search-bar input { + width: 100%; + padding: 7px 12px; + border: none; + border-radius: 4px; + font-size: 1rem; +} + +.account { + display: flex; + align-items: center; + background: linear-gradient(90deg, #cb8d37 60%, #8e68aa 100%); + padding: 6px 12px; + border-radius: 4px; + color: white; + font-weight: bold; + transition: background 0.2s; +} + +.account a { + color: white; + text-decoration: none; + margin-left: 8px; + font-weight: bold; +} + +.account a:first-child { + margin-left: 0; +} + +.account:hover { + background: #a97b2c; +} + +.social-buttons { + display: flex; + gap: 12px; + margin: 0; +} + +.btn-social { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 18px; + border: none; + border-radius: 30px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07); + transition: transform 0.1s, box-shadow 0.2s; + outline: none; + text-decoration: none; +} + +.btn-social:active { + transform: scale(0.97); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.btn-google { + background: #fff; + color: #444; + border: 1px solid #e0e0e0; +} +.btn-google:hover { + background: #f5f5f5; +} + +.btn-discord { + background: #5865f2; + color: #fff; + border: none; +} +.btn-discord:hover { + background: #4752c4; +} + +.icon-social { + width: 22px; + height: 22px; + display: inline-block; + vertical-align: middle; +} + +.logo { + height: 40px; + width: 40px; + border-radius: 8px; + margin-right: 10px; + object-fit: contain; +} + +/* Responsive */ +@media (max-width: 900px) { + .header-content { + flex-direction: column; + align-items: stretch; + gap: 10px; + } + .header-center { + justify-content: stretch; + margin: 10px 0; + } + .header-right { + justify-content: center; + min-width: 0; + margin-top: 10px; + } + .search-bar { + min-width: 180px; + max-width: 100%; + margin: 10px 0; + } + .account { + margin-top: 10px; + } + .sections { + grid-template-columns: 1fr; + } + .social-buttons { + flex-direction: column; + gap: 12px; + } +} diff --git a/routes.js b/routes.js index 937bb6d..f6ae02b 100644 --- a/routes.js +++ b/routes.js @@ -3,7 +3,7 @@ const router = express.Router(); // Page d'accueil router.get('/', (req, res) => { - res.render('index', { user: req.session.user }); + res.render('resto', { user: req.session.user }); }); // Auth Discord diff --git a/views/index.ejs b/views/index.ejs new file mode 100644 index 0000000..ce7078b --- /dev/null +++ b/views/index.ejs @@ -0,0 +1,67 @@ +
+

L’EPICURIEN

+ + Logo de l'entreprise +
+
+ +
+

Restaurants les plus proches

+
+
+
+

Le Canard Toulousain

+

12 Rue du Capitole, 31000 Toulouse

+

Avis général

+
+ Photo du restaurant +
+
+
+

Chez Pépé Louis

+

8 Avenue de la Garonne, 31000 Toulouse

+

Avis général

+
+ Photo du restaurant +
+
+
+

La Table Rose

+

25 Rue Saint-Rome, 31000 Toulouse

+

Avis général

+
+ Photo du restaurant +
+
+
+ + +
+

Restaurants les plus populaires

+
+
+
+

Bistro Occitan

+

5 Place Wilson, 31000 Toulouse

+

Avis général

+
+ Photo du restaurant +
+
+
+

L’Assiette du Sud

+

17 Allée Jean Jaurès, 31000 Toulouse

+

Avis général

+
+ Photo du restaurant +
+
+
+

Le Petit Cassoulet

+

3 Rue des Filatiers, 31000 Toulouse

+

Avis général

+
+ Photo du restaurant +
+
+
\ No newline at end of file diff --git a/views/index.html b/views/index.html deleted file mode 100644 index a6e2f43..0000000 --- a/views/index.html +++ /dev/null @@ -1,209 +0,0 @@ - - - - - - - L'EPICURIEN - - - - - -
-

L'EPICURIEN

-
- -
- -
- - -
-
-

L’EPICURIEN

Logo de l'entreprise -
-
- -
-

Restaurants les plus proches

-
-
-
-

Nom restaurant

-

Adresse

-

Avis général

-
- Photo du restaurant -
-
-
-

Nom restaurant

-

Adresse

-

Avis général

-
- Photo du restaurant -
-
-
-

Nom restaurant

-

Adresse

-

Avis général

-
- Photo du restaurant -
-
-
- - -
-

Restaurants les plus populaires

-
-
-
-

Nom restaurant

-

Adresse

-

Avis général

-
- Photo du restaurant -
-
-
-

Nom restaurant

-

Adresse

-

Avis général

-
- Photo du restaurant -
-
-
-

Nom restaurant

-

Adresse

-

Avis général

-
- Photo du restaurant -
-
-
-
- - - - - - \ No newline at end of file diff --git a/views/layout.ejs b/views/layout.ejs new file mode 100644 index 0000000..819ca6e --- /dev/null +++ b/views/layout.ejs @@ -0,0 +1,58 @@ + + + + + + + + + L'EPICURIEN + + + + + +
+
+
+ + + +

L'EPICURIEN

+
+
+
+ +
+
+
+ +
+
+
+ +
+ <%- body %> +
+ + + + + \ No newline at end of file diff --git a/views/resto.ejs b/views/resto.ejs new file mode 100644 index 0000000..bb464bd --- /dev/null +++ b/views/resto.ejs @@ -0,0 +1,218 @@ + +
+ +
+
+

Nom restaurant ❤️

+

Adresse

+
+ ⭐️⭐️⭐️⭐️⭐️ + +
+
+
+
Graph radar
+
+
+ + +
+ + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat +

+
+ + +
+
+
+
+
+ + +

Avis

+
+
+

Titre avis

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
Qualité des plats ⭐⭐⭐⭐⭐
+
Service ⭐⭐⭐⭐⭐
+
Ambiance ⭐⭐⭐⭐⭐
+
Accessibilité ⭐⭐⭐⭐⭐
+
Tarif ⭐⭐⭐⭐⭐
+
+
+ +
+

Titre avis

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
Qualité des plats ⭐⭐⭐⭐⭐
+
Service ⭐⭐⭐⭐⭐
+
Ambiance ⭐⭐⭐⭐⭐
+
Accessibilité ⭐⭐⭐⭐⭐
+
Tarif ⭐⭐⭐⭐⭐
+
+
+ +
+

Titre avis

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
Qualité des plats ⭐⭐⭐⭐⭐
+
Service ⭐⭐⭐⭐⭐
+
Ambiance ⭐⭐⭐⭐⭐
+
Accessibilité ⭐⭐⭐⭐⭐
+
Tarif ⭐⭐⭐⭐⭐
+
+
+
+ + + +
+ + +