This commit is contained in:
isUnknown
commit
e0467f5181
12 changed files with 538057 additions and 0 deletions
36
.forgejo/workflows/deploy.yml
Normal file
36
.forgejo/workflows/deploy.yml
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
name: Deploy
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
name: Deploy to Production
|
||||
runs-on: docker
|
||||
container:
|
||||
image: forgejo-ci-php:latest
|
||||
steps:
|
||||
- name: Checkout code
|
||||
run: |
|
||||
git clone --depth 1 --branch main https://oauth2:${{ github.token }}@forge.studio-variable.com/${{ github.repository }}.git .
|
||||
|
||||
- name: Deploy via FTP
|
||||
env:
|
||||
USERNAME: ${{ secrets.USERNAME }}
|
||||
PASSWORD: ${{ secrets.PASSWORD }}
|
||||
HOST: ${{ secrets.HOST }}
|
||||
run: |
|
||||
cat > /tmp/lftp-script.txt <<SCRIPT
|
||||
set ftp:ssl-allow no
|
||||
open -u $USERNAME,$PASSWORD $HOST
|
||||
mirror --reverse --verbose --ignore-time --parallel=10 \
|
||||
--exclude ^\.git/ \
|
||||
--exclude ^\.forgejo/ \
|
||||
--exclude ^\.vscode/ \
|
||||
--exclude \.DS_Store\$ \
|
||||
. .
|
||||
quit
|
||||
SCRIPT
|
||||
lftp -f /tmp/lftp-script.txt
|
||||
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"liveServer.settings.port": 5502
|
||||
}
|
||||
BIN
assets/3D-samples/Key words for Online library.docx
Normal file
BIN
assets/3D-samples/Key words for Online library.docx
Normal file
Binary file not shown.
598
assets/3D-samples/assiette complète anim - gltf.gltf
Normal file
598
assets/3D-samples/assiette complète anim - gltf.gltf
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/3D-samples/assiette anim 6.wmv
Normal file
BIN
assets/3D-samples/assiette anim 6.wmv
Normal file
Binary file not shown.
534677
assets/3D-samples/moule asperges sans materiau.obj.obj
Normal file
534677
assets/3D-samples/moule asperges sans materiau.obj.obj
Normal file
File diff suppressed because it is too large
Load diff
87
assets/3D-samples/moule asperges.gltf.gltf
Normal file
87
assets/3D-samples/moule asperges.gltf.gltf
Normal file
File diff suppressed because one or more lines are too long
461
assiette.html
Normal file
461
assiette.html
Normal file
|
|
@ -0,0 +1,461 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Assiette complète — CERAMIQ+</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
|
||||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.media-viewer::before { display: none; }
|
||||
.media-viewer { background: var(--c-bg-subtle); }
|
||||
.viewer-progress-track {
|
||||
width: 160px;
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
}
|
||||
.viewer-progress-bar {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: #111;
|
||||
transition: width 0.12s linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ─── Header ──────────────────────────────────────── -->
|
||||
<header class="site-header">
|
||||
<a href="index.html" class="site-logo">CERAMIC+</a>
|
||||
<nav class="header-nav">
|
||||
<ul>
|
||||
<li>Bibliothèque</li>
|
||||
<li>Écosystème</li>
|
||||
<li>Évènements</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="header-actions">
|
||||
<div class="search-wrap">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="text" placeholder="Rechercher une publication…">
|
||||
</div>
|
||||
<button class="btn-account btn-account--primary">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
Se connecter
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<nav class="obj-nav">
|
||||
|
||||
<a href="index.html" class="obj-back">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
Retour aux résultats
|
||||
</a>
|
||||
|
||||
<div class="obj-nav-context">
|
||||
<span class="obj-nav-path">
|
||||
<a href="index.html">Pièces</a>
|
||||
<span class="bc-sep">›</span>
|
||||
<a href="#">Céramique traditionnelle</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="result-nav-filters">
|
||||
<div class="filter">Argile</div>
|
||||
<div class="filter">Espagne</div>
|
||||
<div class="filter">Moulage</div>
|
||||
</div>
|
||||
|
||||
<div class="obj-nav-arrows">
|
||||
<button class="obj-arrow" title="Fiche précédente">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="obj-position">1 / 18</span>
|
||||
<button class="obj-arrow" title="Fiche suivante">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
<!-- ─── Contenu fiche objet ───────────────────────── -->
|
||||
<div class="obj-wrap">
|
||||
|
||||
<!-- ─── En-tête ────────────────────────────────── -->
|
||||
<header class="obj-header">
|
||||
<div>
|
||||
<h1 class="obj-title">Assiette complète</h1>
|
||||
<div class="card-meta" style="margin-top:10px">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Céramique traditionnelle</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
<span class="meta-pill">Argile</span>
|
||||
<span class="meta-pill">XVIIIe siècle</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="obj-header-actions">
|
||||
<button class="btn-action">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
|
||||
</svg>
|
||||
Télécharger
|
||||
</button>
|
||||
<button class="btn-action" onclick="window.print()">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 6 2 18 2 18 9"/>
|
||||
<path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/>
|
||||
<rect x="6" y="14" width="12" height="8"/>
|
||||
</svg>
|
||||
Imprimer
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ─── Corps : médias + info ────────────────────── -->
|
||||
<div class="obj-body">
|
||||
|
||||
<!-- ─── Médias ──────────────────────────────────── -->
|
||||
<section class="obj-media">
|
||||
|
||||
<div class="media-viewer">
|
||||
<canvas id="viewer3d" style="position:absolute;inset:0;width:100%;height:100%;display:none;z-index:1;"></canvas>
|
||||
<div class="media-viewer-inner" id="viewer-placeholder">
|
||||
<div class="viewer-progress-track">
|
||||
<div class="viewer-progress-bar" id="loader-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-controls" style="z-index:3;">
|
||||
<button class="ctrl-btn" title="Réinitialiser la vue">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="1 4 1 10 7 10"/>
|
||||
<path d="M3.51 15a9 9 0 1 0 .49-4.75"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="ctrl-btn" title="Zoom avant">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
<line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="ctrl-btn" title="Zoom arrière">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
<line x1="8" y1="11" x2="14" y2="11"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="ctrl-btn ctrl-btn--sep" title="Plein écran">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/>
|
||||
<line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media-thumbs">
|
||||
<div class="thumb thumb--3d is-active">
|
||||
<svg class="thumb-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.5">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>
|
||||
</svg>
|
||||
<span class="thumb-label">3D</span>
|
||||
</div>
|
||||
<div class="thumb">
|
||||
<span class="thumb-label">IMG 1</span>
|
||||
</div>
|
||||
<div class="thumb">
|
||||
<span class="thumb-label">IMG 2</span>
|
||||
</div>
|
||||
<div class="thumb thumb--portrait">
|
||||
<span class="thumb-label">IMG 3</span>
|
||||
</div>
|
||||
<div class="thumb">
|
||||
<svg class="thumb-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.5">
|
||||
<polygon points="5 3 19 12 5 21 5 3"/>
|
||||
</svg>
|
||||
<span class="thumb-label">VID 1</span>
|
||||
</div>
|
||||
<div class="thumb thumb--pdf">
|
||||
<svg class="thumb-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.5">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/>
|
||||
</svg>
|
||||
<span class="thumb-label">PDF</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- ─── Panneau d'informations ─────────────────── -->
|
||||
<aside class="obj-info">
|
||||
|
||||
<dl class="info-list">
|
||||
|
||||
<div class="info-row">
|
||||
<dt>Pays / Région</dt>
|
||||
<dd>Espagne<br><span class="info-sub">Castille-et-León</span></dd>
|
||||
</div>
|
||||
<hr class="info-divider">
|
||||
<div class="info-row">
|
||||
<dt>Partenaires</dt>
|
||||
<dd>
|
||||
Musée de la Céramique de Barcelone<br>
|
||||
Universidad Complutense de Madrid<br>
|
||||
<span class="info-sub">Réseau CERAMIQ, Partenaire associé</span>
|
||||
</dd>
|
||||
</div>
|
||||
<hr class="info-divider">
|
||||
<div class="info-row">
|
||||
<dt>Auteur de la fiche</dt>
|
||||
<dd>
|
||||
Centre de Recherche Céramique Sud-Ouest<br>
|
||||
</dd>
|
||||
</div>
|
||||
<hr class="info-divider">
|
||||
<div class="info-row">
|
||||
<dt>Date de publication</dt>
|
||||
<dd>23 mars 2026<br><span class="info-sub">Mise à jour : 27 avril 2026</span></dd>
|
||||
</div>
|
||||
<hr class="info-divider">
|
||||
<div class="info-row">
|
||||
<dt>Lien vers la fiche sur le site du partenaire</dt>
|
||||
<dd>23 mars 2026</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<button class="btn-contact-cta">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
</svg>
|
||||
Contacter l'auteur de la fiche
|
||||
</button>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ─── Description ────────────────────────────── -->
|
||||
<section class="obj-section">
|
||||
<h2 class="obj-section-title">Description</h2>
|
||||
<div class="obj-description">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue ligula lorem, in cursus ligula condimentum eget. Fusce interdum nec sem quis euismod. Etiam turpis lorem, pharetra eu eros vel, ultricies dictum orci. Donec semper quam vitae nulla blandit, consectetur ultricies augue consequat. Maecenas fringilla efficitur metus, quis aliquet enim mattis sed. Morbi sed cursus ante. Vivamus rhoncus, mauris id posuere condimentum, augue nisi feugiat turpis, nec luctus sapien nisl vel ipsum.</p>
|
||||
<p>Nullam auctor elit dictum, imperdiet magna eget, auctor sem. Pellentesque sodales, erat non varius tristique, massa quam scelerisque mi, et finibus purus diam ac turpis. Nam porta, leo ac iaculis blandit, dui augue tempor purus, nec fermentum arcu nulla sit amet erat.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─── Pièces similaires ─────────────────────── -->
|
||||
<section class="obj-section">
|
||||
<h2 class="obj-section-title">Pièces similaires</h2>
|
||||
<div class="obj-related-grid">
|
||||
|
||||
<article class="piece-card">
|
||||
<div class="card-image"><span class="card-tag">Argile</span></div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Écuelle à oreilles</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<div class="card-image"><span class="card-tag">Kaolin</span></div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Bol à poignée</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Coulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Portugal</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<div class="card-image"><span class="card-tag">Argile</span></div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Tasse campaniforme</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Occitanie</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<div class="card-image"><span class="card-tag">Feldspath</span></div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Pot à bouillon couvert</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Coulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import * as THREE from 'three';
|
||||
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
|
||||
const canvas = document.getElementById('viewer3d');
|
||||
const pholder = document.getElementById('viewer-placeholder');
|
||||
const viewer = document.querySelector('.media-viewer');
|
||||
const bar = document.getElementById('loader-bar');
|
||||
|
||||
// ── Renderer ──────────────────────────────────────────
|
||||
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
|
||||
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
|
||||
renderer.outputColorSpace = THREE.SRGBColorSpace;
|
||||
renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
||||
renderer.toneMappingExposure = 0.9;
|
||||
|
||||
// ── Scene / Camera ────────────────────────────────────
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(40, 1, 0.001, 1000);
|
||||
|
||||
// ── Lights ────────────────────────────────────────────
|
||||
scene.add(new THREE.AmbientLight(0xffffff, 1.5));
|
||||
const key = new THREE.DirectionalLight(0xffffff, 2.5);
|
||||
key.position.set(3, 5, 3);
|
||||
scene.add(key);
|
||||
const fill = new THREE.DirectionalLight(0xffffff, 0.6);
|
||||
fill.position.set(-3, 2, -2);
|
||||
scene.add(fill);
|
||||
|
||||
// ── Controls ──────────────────────────────────────────
|
||||
const controls = new OrbitControls(camera, canvas);
|
||||
controls.enableDamping = true;
|
||||
controls.dampingFactor = 0.06;
|
||||
|
||||
// ── Model ─────────────────────────────────────────────
|
||||
let initCamPos, initTarget;
|
||||
let mixer = null;
|
||||
const clock = new THREE.Clock();
|
||||
|
||||
new GLTFLoader().load(
|
||||
'assets/3D-samples/assiette%20%20compl%C3%A8te%20anim%20-%20gltf.gltf',
|
||||
(gltf) => {
|
||||
const model = gltf.scene;
|
||||
const box = new THREE.Box3().setFromObject(model);
|
||||
const c = box.getCenter(new THREE.Vector3());
|
||||
const size = box.getSize(new THREE.Vector3());
|
||||
const dim = Math.max(size.x, size.y, size.z);
|
||||
|
||||
model.position.sub(c);
|
||||
scene.add(model);
|
||||
|
||||
if (gltf.animations.length) {
|
||||
mixer = new THREE.AnimationMixer(model);
|
||||
gltf.animations.forEach(clip => mixer.clipAction(clip).play());
|
||||
}
|
||||
|
||||
camera.near = dim * 0.001;
|
||||
camera.far = dim * 100;
|
||||
camera.position.set(0, dim * 0.25, dim * 2.2);
|
||||
controls.target.set(0, 0, 0);
|
||||
controls.update();
|
||||
|
||||
initCamPos = camera.position.clone();
|
||||
initTarget = controls.target.clone();
|
||||
|
||||
bar.style.width = '100%';
|
||||
canvas.style.display = 'block';
|
||||
pholder.style.display = 'none';
|
||||
},
|
||||
({ loaded, total }) => {
|
||||
if (total) bar.style.width = `${Math.round(loaded / total * 100)}%`;
|
||||
},
|
||||
(err) => {
|
||||
bar.style.background = '#c00';
|
||||
console.error(err);
|
||||
}
|
||||
);
|
||||
|
||||
// ── Resize ────────────────────────────────────────────
|
||||
function resize() {
|
||||
const w = viewer.clientWidth, h = viewer.clientHeight;
|
||||
camera.aspect = w / h;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(w, h);
|
||||
}
|
||||
resize();
|
||||
new ResizeObserver(resize).observe(viewer);
|
||||
|
||||
// ── Render loop ───────────────────────────────────────
|
||||
(function frame() {
|
||||
requestAnimationFrame(frame);
|
||||
const delta = clock.getDelta();
|
||||
if (mixer) mixer.update(delta);
|
||||
controls.update();
|
||||
renderer.render(scene, camera);
|
||||
})();
|
||||
|
||||
// ── Boutons de contrôle ───────────────────────────────
|
||||
document.querySelector('[title="Réinitialiser la vue"]')?.addEventListener('click', () => {
|
||||
if (!initCamPos) return;
|
||||
camera.position.copy(initCamPos);
|
||||
controls.target.copy(initTarget);
|
||||
controls.update();
|
||||
});
|
||||
|
||||
document.querySelector('[title="Zoom avant"]')?.addEventListener('click', () => {
|
||||
const d = camera.position.distanceTo(controls.target);
|
||||
const dir = new THREE.Vector3().subVectors(controls.target, camera.position).normalize();
|
||||
camera.position.addScaledVector(dir, d * 0.25);
|
||||
controls.update();
|
||||
});
|
||||
|
||||
document.querySelector('[title="Zoom arrière"]')?.addEventListener('click', () => {
|
||||
const d = camera.position.distanceTo(controls.target);
|
||||
const dir = new THREE.Vector3().subVectors(controls.target, camera.position).normalize();
|
||||
camera.position.addScaledVector(dir, -d * 0.3);
|
||||
controls.update();
|
||||
});
|
||||
|
||||
document.querySelector('[title="Plein écran"]')?.addEventListener('click', () => {
|
||||
document.fullscreenElement ? document.exitFullscreen() : viewer.requestFullscreen();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- ─── Footer ──────────────────────────────────────── -->
|
||||
<footer class="site-footer">
|
||||
<span class="footer-logo">CERAMIQ+</span>
|
||||
<div class="footer-links">
|
||||
<a href="#">Mentions légales</a>
|
||||
<a href="#">RGPD</a>
|
||||
<a href="#">Contact</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
704
index.html
Normal file
704
index.html
Normal file
|
|
@ -0,0 +1,704 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Round</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ─── Header ──────────────────────────────────────── -->
|
||||
<header class="site-header">
|
||||
<a href="/index.html" class="site-logo">CERAMIC+</a>
|
||||
|
||||
<nav class="header-nav">
|
||||
<ul>
|
||||
<li>Bibliothèque</li>
|
||||
<li>Écosystème</li>
|
||||
<li>Évènements</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="header-actions">
|
||||
<div class="search-wrap">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="text" placeholder="Rechercher une publication…">
|
||||
</div>
|
||||
<button class="btn-account btn-account--primary">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
Se connecter
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<!-- ─── Page hero ──────────────────────────────────── -->
|
||||
<div class="page-hero">
|
||||
<h1>Bibliothèque numérique</h1>
|
||||
</div>
|
||||
|
||||
<!-- ─── Sélecteur de section ──────────────────────── -->
|
||||
<div class="section-switcher">
|
||||
|
||||
<a href="#" class="section-tile active">
|
||||
<strong class="tile-name">Pièces</strong>
|
||||
<ul class="tile-items">
|
||||
<li class="tile-item-sub active">Céramique traditionnelle</li>
|
||||
<li class="tile-item-sub">Céramique contemporaine</li>
|
||||
<li class="tile-item-sub">Céramique artistique</li>
|
||||
<li class="tile-item-sub">Céramique et design</li>
|
||||
<li class="tile-item-sub">Faïence</li>
|
||||
</ul>
|
||||
</a>
|
||||
|
||||
<a href="#" class="section-tile">
|
||||
<strong class="tile-name">Moules</strong>
|
||||
<ul class="tile-items">
|
||||
<li class="tile-item-sub">Céramique</li>
|
||||
<li class="tile-item-sub">Faïence</li>
|
||||
</ul>
|
||||
</a>
|
||||
|
||||
<a href="#" class="section-tile">
|
||||
<strong class="tile-name">Décorations</strong>
|
||||
<ul class="tile-items">
|
||||
<li class="tile-item-sub">Dessin</li>
|
||||
<li class="tile-item-sub">Peinture au pinceau</li>
|
||||
<li class="tile-item-sub">Coulée robotisée</li>
|
||||
<li class="tile-item-sub">Séparation des couleurs</li>
|
||||
<li class="tile-item-sub">Emaillage au pinceau</li>
|
||||
<li class="tile-item-sub">Cordon émaillé</li>
|
||||
</ul>
|
||||
</a>
|
||||
|
||||
<a href="#" class="section-tile">
|
||||
<strong class="tile-name">Carreaux</strong>
|
||||
<ul class="tile-items">
|
||||
<li class="tile-item-sub">Céramique</li>
|
||||
<li class="tile-item-sub">Faïence</li>
|
||||
<li class="tile-item-sub">Traditionnel</li>
|
||||
<li class="tile-item-sub">Innovant</li>
|
||||
<li class="tile-item-sub">Bactéricide</li>
|
||||
</ul>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ─── Catalogue ──────────────────────────────────── -->
|
||||
<div class="catalogue-wrap">
|
||||
|
||||
<!-- ─── Sidebar filtres ──────────────────────────── -->
|
||||
<aside class="sidebar">
|
||||
<p class="sidebar-title">Filtres avancés</p>
|
||||
|
||||
<!-- Matériaux -->
|
||||
<details class="filter-accordion" open>
|
||||
<summary class="filter-accordion-title">Matériaux</summary>
|
||||
<div class="filter-accordion-body">
|
||||
|
||||
<div class="filter-subgroup">
|
||||
<div class="filter-subgroup-label">Traditionnels</div>
|
||||
<ul class="filter-checkbox-list filter-checkbox-list--sub">
|
||||
<li><label><input type="checkbox" checked> Argile</label></li>
|
||||
<li><label><input type="checkbox"> Silice</label></li>
|
||||
<li><label><input type="checkbox"> Feldspath</label></li>
|
||||
<li><label><input type="checkbox"> Kaolin</label></li>
|
||||
<li><label><input type="checkbox"> Andalousite</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="filter-subgroup">
|
||||
<div class="filter-subgroup-label">Carbonates</div>
|
||||
<ul class="filter-checkbox-list filter-checkbox-list--sub">
|
||||
<li><label><input type="checkbox"> La dolomite</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="filter-subgroup">
|
||||
<div class="filter-subgroup-label">Aluminates</div>
|
||||
<ul class="filter-checkbox-list filter-checkbox-list--sub">
|
||||
<li><label><input type="checkbox"> Chamottes</label></li>
|
||||
<li><label><input type="checkbox"> Alumines calcinées</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="filter-subgroup">
|
||||
<div class="filter-subgroup-label">Chimiques</div>
|
||||
<ul class="filter-checkbox-list filter-checkbox-list--sub">
|
||||
<li><label><input type="checkbox"> Zirconium</label></li>
|
||||
<li><label><input type="checkbox"> Carbure de silicium</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="filter-checkbox-list" style="margin-top:8px">
|
||||
<li><label><input type="checkbox"> Les moins durables</label></li>
|
||||
<li><label><input type="checkbox"> Conformes à la DNSH</label></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<hr class="sidebar-divider">
|
||||
|
||||
<!-- Techniques -->
|
||||
<details class="filter-accordion">
|
||||
<summary class="filter-accordion-title">Techniques</summary>
|
||||
<div class="filter-accordion-body">
|
||||
<ul class="filter-checkbox-list">
|
||||
<li><label><input type="checkbox"> Moulage</label></li>
|
||||
<li><label><input type="checkbox"> Coulage</label></li>
|
||||
<li><label><input type="checkbox"> Décoration traditionnelle</label></li>
|
||||
<li><label><input type="checkbox"> Décoration manuelle</label></li>
|
||||
<li><label><input type="checkbox"> Impression 3D</label></li>
|
||||
<li><label><input type="checkbox"> Robotcasting</label></li>
|
||||
<li><label><input type="checkbox"> Séparation des couleurs plates</label></li>
|
||||
<li><label><input type="checkbox"> Emaillage au pinceau</label></li>
|
||||
<li><label><input type="checkbox"> Cordon émaillé (boîtier)</label></li>
|
||||
<li><label><input type="checkbox"> Carreaux bactéricides</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<hr class="sidebar-divider">
|
||||
|
||||
<!-- Technologies -->
|
||||
<details class="filter-accordion">
|
||||
<summary class="filter-accordion-title">Technologies</summary>
|
||||
<div class="filter-accordion-body">
|
||||
<ul class="filter-checkbox-list">
|
||||
<li><label><input type="checkbox"> Numérisation 3D</label></li>
|
||||
<li><label><input type="checkbox"> Gaussian Splatting</label></li>
|
||||
<li><label><input type="checkbox"> Les cobots</label></li>
|
||||
<li><label><input type="checkbox"> Impression jet d'encre</label></li>
|
||||
<li><label><input type="checkbox"> Impression 3D</label></li>
|
||||
<li><label><input type="checkbox"> Robocasting</label></li>
|
||||
<li><label><input type="checkbox"> Usinage CNC (mullite)</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<hr class="sidebar-divider">
|
||||
|
||||
<!-- Méthodologies -->
|
||||
<details class="filter-accordion">
|
||||
<summary class="filter-accordion-title">Méthodologies</summary>
|
||||
<div class="filter-accordion-body">
|
||||
<ul class="filter-checkbox-list">
|
||||
<li><label><input type="checkbox"> Céramique contemporaine</label></li>
|
||||
<li><label><input type="checkbox"> Technique traditionnelle</label></li>
|
||||
<li><label><input type="checkbox"> Technologies de pointe</label></li>
|
||||
<li><label><input type="checkbox"> Fabrication durable</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<hr class="sidebar-divider">
|
||||
|
||||
<!-- Transfert de connaissances -->
|
||||
<details class="filter-accordion">
|
||||
<summary class="filter-accordion-title">Transfert de connaissances</summary>
|
||||
<div class="filter-accordion-body">
|
||||
<ul class="filter-checkbox-list">
|
||||
<li><label><input type="checkbox"> Céramique contemporaine</label></li>
|
||||
<li><label><input type="checkbox"> Céramique traditionnelle</label></li>
|
||||
<li><label><input type="checkbox"> Techniques traditionnelles</label></li>
|
||||
<li><label><input type="checkbox"> Technologies de pointe</label></li>
|
||||
<li><label><input type="checkbox"> Carreaux bactéricides</label></li>
|
||||
<li><label><input type="checkbox"> Séparation des couleurs</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<hr class="sidebar-divider">
|
||||
|
||||
<!-- Innovations -->
|
||||
<details class="filter-accordion">
|
||||
<summary class="filter-accordion-title">Innovations</summary>
|
||||
<div class="filter-accordion-body">
|
||||
<ul class="filter-checkbox-list">
|
||||
<li><label><input type="checkbox"> Robotcasting (réduction des déchets)</label></li>
|
||||
<li><label><input type="checkbox"> Écosystème numérique & vert</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<hr class="sidebar-divider">
|
||||
|
||||
<!-- Témoignages -->
|
||||
<details class="filter-accordion">
|
||||
<summary class="filter-accordion-title">Témoignages</summary>
|
||||
<div class="filter-accordion-body">
|
||||
<ul class="filter-checkbox-list">
|
||||
<li><label><input type="checkbox"> Artisans de la faïence ancienne</label></li>
|
||||
<li><label><input type="checkbox"> Craft design</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<hr class="sidebar-divider">
|
||||
|
||||
<!-- Pays -->
|
||||
<details class="filter-accordion" open>
|
||||
<summary class="filter-accordion-title">Pays</summary>
|
||||
<div class="filter-accordion-body">
|
||||
<ul class="filter-checkbox-list">
|
||||
<li><label><input type="checkbox"> Espagne</label></li>
|
||||
<li><label><input type="checkbox"> Portugal</label></li>
|
||||
<li><label><input type="checkbox"> Nouvelle-Aquitaine</label></li>
|
||||
<li><label><input type="checkbox"> Occitanie</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<hr class="sidebar-divider">
|
||||
|
||||
<!-- Auteurs -->
|
||||
<details class="filter-accordion">
|
||||
<summary class="filter-accordion-title">Auteurs</summary>
|
||||
<div class="filter-accordion-body">
|
||||
<select class="filter-select">
|
||||
<option value="">Tous les auteurs</option>
|
||||
<optgroup label="Individus">
|
||||
<option>Artisans</option>
|
||||
<option>Artistes</option>
|
||||
<option>Designers</option>
|
||||
<option>Céramistes</option>
|
||||
</optgroup>
|
||||
<optgroup label="Structures">
|
||||
<option>Entreprises du secteur</option>
|
||||
<option>Écoles secondaires</option>
|
||||
<option>Écoles professionnelles</option>
|
||||
<option>Écoles supérieures — art & design</option>
|
||||
<option>Centres technologiques</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<hr class="sidebar-divider">
|
||||
|
||||
<button class="btn-reset">Réinitialiser les filtres</button>
|
||||
</aside>
|
||||
|
||||
<!-- ─── Contenu principal ──────────────────────── -->
|
||||
<main class="catalogue-main">
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="catalogue-toolbar">
|
||||
<div class="toolbar-section">
|
||||
<span class="toolbar-section-name">Pièces</span>
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 2l3 3-3 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span class="toolbar-section-sub">Céramique traditionnelle</span>
|
||||
</div>
|
||||
<div class="num-results">
|
||||
<p><span>24</span> résultats</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtres actifs -->
|
||||
<div class="active-filters">
|
||||
<div class="filter-tag">Céramique traditionnelle <button>×</button></div>
|
||||
<div class="filter-tag">Argile <button>×</button></div>
|
||||
<div class="filter-tag">Espagne <button>×</button></div>
|
||||
<div class="filter-tag">Portugal <button>×</button></div>
|
||||
</div>
|
||||
|
||||
<!-- Grille pièces -->
|
||||
<div class="pieces-grid">
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="assiette.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<path d="M12 2C8 2 5 8 5 12s3 8 7 8 7-4 7-8-3-10-7-10z"/>
|
||||
<path d="M8 12c0-2 1.8-4 4-4s4 2 4 4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Argile</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Assiette complète</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="moule-asperges.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<path d="M6 20h12M7 20V8l5-6 5 6v12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Argile</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Moule à asperges</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="round-object.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<ellipse cx="12" cy="8" rx="6" ry="4"/>
|
||||
<path d="M6 8v8c0 2.2 2.7 4 6 4s6-1.8 6-4V8"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Argile</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Cruche à bec verseur</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Occitanie</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="round-object.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<rect x="5" y="4" width="14" height="16" rx="2"/>
|
||||
<path d="M9 9h6M9 13h4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Feldspath</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Carreau de pavement</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Impression 3D</span>
|
||||
<span class="meta-pill">Innovant</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="round-object.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<path d="M12 3c-4.4 0-8 4-8 9s3.6 9 8 9 8-4 8-9-3.6-9-8-9z"/>
|
||||
<path d="M9 12c0-1.7 1.3-3 3-3s3 1.3 3 3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Argile</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Pot à tabac</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Portugal</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="round-object.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<path d="M7 20h10M8 20V10L12 4l4 6v10"/>
|
||||
<path d="M10 14h4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Kaolin</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Théière à poignée</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Coulage</span>
|
||||
<span class="meta-pill">Contemporain</span>
|
||||
<span class="meta-pill country">Nouvelle-Aquitaine</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="round-object.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<circle cx="12" cy="12" r="7"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Argile</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Assiette à rebord</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Robotcasting</span>
|
||||
<span class="meta-pill">Innovant</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="round-object.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<path d="M5 7h14v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7z"/>
|
||||
<path d="M9 7V4h6v3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Silice</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Soupière couverte</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Portugal</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="round-object.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<path d="M12 2C8 2 5 8 5 12s3 8 7 8 7-4 7-8-3-10-7-10z"/>
|
||||
<path d="M8 12c0-2 1.8-4 4-4s4 2 4 4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Argile</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Bol à oreilles</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="round-object.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<path d="M6 20h12M7 20V8l5-6 5 6v12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Kaolin</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Vase soliflore</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Coulage</span>
|
||||
<span class="meta-pill">Contemporain</span>
|
||||
<span class="meta-pill country">Portugal</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="round-object.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<ellipse cx="12" cy="8" rx="6" ry="4"/>
|
||||
<path d="M6 8v8c0 2.2 2.7 4 6 4s6-1.8 6-4V8"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Argile</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Cruche à bec verseur</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Occitanie</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="round-object.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<rect x="5" y="4" width="14" height="16" rx="2"/>
|
||||
<path d="M9 9h6M9 13h4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Feldspath</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Carreau de pavement</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Impression 3D</span>
|
||||
<span class="meta-pill">Innovant</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="round-object.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<path d="M12 3c-4.4 0-8 4-8 9s3.6 9 8 9 8-4 8-9-3.6-9-8-9z"/>
|
||||
<path d="M9 12c0-1.7 1.3-3 3-3s3 1.3 3 3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Argile</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Pot à tabac</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Portugal</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="round-object.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<path d="M7 20h10M8 20V10L12 4l4 6v10"/>
|
||||
<path d="M10 14h4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Kaolin</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Théière à poignée</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Coulage</span>
|
||||
<span class="meta-pill">Contemporain</span>
|
||||
<span class="meta-pill country">Nouvelle-Aquitaine</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="round-object.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<circle cx="12" cy="12" r="7"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Argile</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Assiette à rebord</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Robotcasting</span>
|
||||
<span class="meta-pill">Innovant</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="round-object.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<path d="M5 7h14v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7z"/>
|
||||
<path d="M9 7V4h6v3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Silice</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Soupière couverte</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Portugal</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="round-object.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<rect x="5" y="4" width="14" height="16" rx="2"/>
|
||||
<path d="M9 9h6M9 13h4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Feldspath</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Carreau de pavement</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Impression 3D</span>
|
||||
<span class="meta-pill">Innovant</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<a href="round-object.html" class="card-image">
|
||||
<div class="card-image-placeholder">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<path d="M12 3c-4.4 0-8 4-8 9s3.6 9 8 9 8-4 8-9-3.6-9-8-9z"/>
|
||||
<path d="M9 12c0-1.7 1.3-3 3-3s3 1.3 3 3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="card-tag">Argile</span>
|
||||
</a>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Pot à tabac</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Portugal</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<nav class="pagination" aria-label="Pagination">
|
||||
<button class="page-btn" aria-label="Page précédente">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="page-btn active">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">4</button>
|
||||
<button class="page-btn">5</button>
|
||||
<button class="page-btn ellipsis">…</button>
|
||||
<button class="page-btn">18</button>
|
||||
<button class="page-btn" aria-label="Page suivante">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- ─── Footer ──────────────────────────────────────── -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
446
moule-asperges.html
Normal file
446
moule-asperges.html
Normal file
|
|
@ -0,0 +1,446 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Moule à asperges — CERAMIQ+</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
|
||||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.media-viewer::before { display: none; }
|
||||
.media-viewer { background: var(--c-bg-subtle); }
|
||||
.viewer-progress-track {
|
||||
width: 160px;
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
}
|
||||
.viewer-progress-bar {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: #111;
|
||||
transition: width 0.12s linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ─── Header ──────────────────────────────────────── -->
|
||||
<header class="site-header">
|
||||
<a href="index.html" class="site-logo">CERAMIC+</a>
|
||||
<nav class="header-nav">
|
||||
<ul>
|
||||
<li>Bibliothèque</li>
|
||||
<li>Écosystème</li>
|
||||
<li>Évènements</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="header-actions">
|
||||
<div class="search-wrap">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="text" placeholder="Rechercher une publication…">
|
||||
</div>
|
||||
<button class="btn-account btn-account--primary">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
Se connecter
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<nav class="obj-nav">
|
||||
|
||||
<a href="index.html" class="obj-back">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
Retour aux résultats
|
||||
</a>
|
||||
|
||||
<div class="obj-nav-context">
|
||||
<span class="obj-nav-path">
|
||||
<a href="index.html">Moules</a>
|
||||
<span class="bc-sep">›</span>
|
||||
<a href="#">Céramique traditionnelle</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="result-nav-filters">
|
||||
<div class="filter">Argile</div>
|
||||
<div class="filter">Espagne</div>
|
||||
<div class="filter">Moulage</div>
|
||||
</div>
|
||||
|
||||
<div class="obj-nav-arrows">
|
||||
<button class="obj-arrow" title="Fiche précédente">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="obj-position">2 / 18</span>
|
||||
<button class="obj-arrow" title="Fiche suivante">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
<!-- ─── Contenu fiche objet ───────────────────────── -->
|
||||
<div class="obj-wrap">
|
||||
|
||||
<!-- ─── En-tête ────────────────────────────────── -->
|
||||
<header class="obj-header">
|
||||
<div>
|
||||
<h1 class="obj-title">Moule à asperges</h1>
|
||||
<div class="card-meta" style="margin-top:10px">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Céramique traditionnelle</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
<span class="meta-pill">Argile</span>
|
||||
<span class="meta-pill">XIXe siècle</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="obj-header-actions">
|
||||
<button class="btn-action">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
|
||||
</svg>
|
||||
Télécharger
|
||||
</button>
|
||||
<button class="btn-action" onclick="window.print()">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 6 2 18 2 18 9"/>
|
||||
<path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/>
|
||||
<rect x="6" y="14" width="12" height="8"/>
|
||||
</svg>
|
||||
Imprimer
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ─── Corps : médias + info ────────────────────── -->
|
||||
<div class="obj-body">
|
||||
|
||||
<!-- ─── Médias ──────────────────────────────────── -->
|
||||
<section class="obj-media">
|
||||
|
||||
<div class="media-viewer">
|
||||
<canvas id="viewer3d" style="position:absolute;inset:0;width:100%;height:100%;display:none;z-index:1;"></canvas>
|
||||
<div class="media-viewer-inner" id="viewer-placeholder">
|
||||
<div class="viewer-progress-track">
|
||||
<div class="viewer-progress-bar" id="loader-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-controls" style="z-index:3;">
|
||||
<button class="ctrl-btn" title="Réinitialiser la vue">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="1 4 1 10 7 10"/>
|
||||
<path d="M3.51 15a9 9 0 1 0 .49-4.75"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="ctrl-btn" title="Zoom avant">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
<line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="ctrl-btn" title="Zoom arrière">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
<line x1="8" y1="11" x2="14" y2="11"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="ctrl-btn ctrl-btn--sep" title="Plein écran">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/>
|
||||
<line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media-thumbs">
|
||||
<div class="thumb thumb--3d is-active">
|
||||
<svg class="thumb-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.5">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>
|
||||
</svg>
|
||||
<span class="thumb-label">3D</span>
|
||||
</div>
|
||||
<div class="thumb">
|
||||
<span class="thumb-label">IMG 1</span>
|
||||
</div>
|
||||
<div class="thumb">
|
||||
<span class="thumb-label">IMG 2</span>
|
||||
</div>
|
||||
<div class="thumb thumb--portrait">
|
||||
<span class="thumb-label">IMG 3</span>
|
||||
</div>
|
||||
<div class="thumb thumb--pdf">
|
||||
<svg class="thumb-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.5">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/>
|
||||
</svg>
|
||||
<span class="thumb-label">PDF</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- ─── Panneau d'informations ─────────────────── -->
|
||||
<aside class="obj-info">
|
||||
|
||||
<dl class="info-list">
|
||||
|
||||
<div class="info-row">
|
||||
<dt>Pays / Région</dt>
|
||||
<dd>Espagne<br><span class="info-sub">Castille-et-León</span></dd>
|
||||
</div>
|
||||
<hr class="info-divider">
|
||||
<div class="info-row">
|
||||
<dt>Partenaires</dt>
|
||||
<dd>
|
||||
Musée de la Céramique de Barcelone<br>
|
||||
Universidad Complutense de Madrid<br>
|
||||
<span class="info-sub">Réseau CERAMIQ, Partenaire associé</span>
|
||||
</dd>
|
||||
</div>
|
||||
<hr class="info-divider">
|
||||
<div class="info-row">
|
||||
<dt>Auteur de la fiche</dt>
|
||||
<dd>
|
||||
Centre de Recherche Céramique Sud-Ouest<br>
|
||||
</dd>
|
||||
</div>
|
||||
<hr class="info-divider">
|
||||
<div class="info-row">
|
||||
<dt>Date de publication</dt>
|
||||
<dd>23 mars 2026<br><span class="info-sub">Mise à jour : 27 avril 2026</span></dd>
|
||||
</div>
|
||||
<hr class="info-divider">
|
||||
<div class="info-row">
|
||||
<dt>Lien vers la fiche sur le site du partenaire</dt>
|
||||
<dd>23 mars 2026</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<button class="btn-contact-cta">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
</svg>
|
||||
Contacter l'auteur de la fiche
|
||||
</button>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ─── Description ────────────────────────────── -->
|
||||
<section class="obj-section">
|
||||
<h2 class="obj-section-title">Description</h2>
|
||||
<div class="obj-description">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue ligula lorem, in cursus ligula condimentum eget. Fusce interdum nec sem quis euismod. Etiam turpis lorem, pharetra eu eros vel, ultricies dictum orci. Donec semper quam vitae nulla blandit, consectetur ultricies augue consequat. Maecenas fringilla efficitur metus, quis aliquet enim mattis sed. Morbi sed cursus ante. Vivamus rhoncus, mauris id posuere condimentum, augue nisi feugiat turpis, nec luctus sapien nisl vel ipsum.</p>
|
||||
<p>Nullam auctor elit dictum, imperdiet magna eget, auctor sem. Pellentesque sodales, erat non varius tristique, massa quam scelerisque mi, et finibus purus diam ac turpis. Nam porta, leo ac iaculis blandit, dui augue tempor purus, nec fermentum arcu nulla sit amet erat.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─── Pièces similaires ─────────────────────── -->
|
||||
<section class="obj-section">
|
||||
<h2 class="obj-section-title">Pièces similaires</h2>
|
||||
<div class="obj-related-grid">
|
||||
|
||||
<article class="piece-card">
|
||||
<div class="card-image"><span class="card-tag">Argile</span></div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Moule à tagine</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<div class="card-image"><span class="card-tag">Kaolin</span></div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Moule à tarte</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Coulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Portugal</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<div class="card-image"><span class="card-tag">Argile</span></div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Moule à brioche</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Occitanie</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<div class="card-image"><span class="card-tag">Feldspath</span></div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Moule à charlotte</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Coulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import * as THREE from 'three';
|
||||
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
|
||||
const canvas = document.getElementById('viewer3d');
|
||||
const pholder = document.getElementById('viewer-placeholder');
|
||||
const viewer = document.querySelector('.media-viewer');
|
||||
const bar = document.getElementById('loader-bar');
|
||||
|
||||
// ── Renderer ──────────────────────────────────────────
|
||||
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
|
||||
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
|
||||
renderer.outputColorSpace = THREE.SRGBColorSpace;
|
||||
renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
||||
renderer.toneMappingExposure = 0.9;
|
||||
|
||||
// ── Scene / Camera ────────────────────────────────────
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(40, 1, 0.001, 1000);
|
||||
|
||||
// ── Lights ────────────────────────────────────────────
|
||||
scene.add(new THREE.AmbientLight(0xffffff, 1.5));
|
||||
const key = new THREE.DirectionalLight(0xffffff, 2.5);
|
||||
key.position.set(3, 5, 3);
|
||||
scene.add(key);
|
||||
const fill = new THREE.DirectionalLight(0xffffff, 0.6);
|
||||
fill.position.set(-3, 2, -2);
|
||||
scene.add(fill);
|
||||
|
||||
// ── Controls ──────────────────────────────────────────
|
||||
const controls = new OrbitControls(camera, canvas);
|
||||
controls.enableDamping = true;
|
||||
controls.dampingFactor = 0.06;
|
||||
|
||||
// ── Model ─────────────────────────────────────────────
|
||||
let initCamPos, initTarget;
|
||||
|
||||
new GLTFLoader().load(
|
||||
'assets/3D-samples/moule%20asperges.gltf.gltf',
|
||||
(gltf) => {
|
||||
const model = gltf.scene;
|
||||
const box = new THREE.Box3().setFromObject(model);
|
||||
const c = box.getCenter(new THREE.Vector3());
|
||||
const size = box.getSize(new THREE.Vector3());
|
||||
const dim = Math.max(size.x, size.y, size.z);
|
||||
|
||||
model.position.sub(c);
|
||||
scene.add(model);
|
||||
|
||||
camera.near = dim * 0.001;
|
||||
camera.far = dim * 100;
|
||||
camera.position.set(0, dim * 0.25, dim * 2.2);
|
||||
controls.target.set(0, 0, 0);
|
||||
controls.update();
|
||||
|
||||
initCamPos = camera.position.clone();
|
||||
initTarget = controls.target.clone();
|
||||
|
||||
bar.style.width = '100%';
|
||||
canvas.style.display = 'block';
|
||||
pholder.style.display = 'none';
|
||||
},
|
||||
({ loaded, total }) => {
|
||||
if (total) bar.style.width = `${Math.round(loaded / total * 100)}%`;
|
||||
},
|
||||
(err) => {
|
||||
bar.style.background = '#c00';
|
||||
console.error(err);
|
||||
}
|
||||
);
|
||||
|
||||
// ── Resize ────────────────────────────────────────────
|
||||
function resize() {
|
||||
const w = viewer.clientWidth, h = viewer.clientHeight;
|
||||
camera.aspect = w / h;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(w, h);
|
||||
}
|
||||
resize();
|
||||
new ResizeObserver(resize).observe(viewer);
|
||||
|
||||
// ── Render loop ───────────────────────────────────────
|
||||
(function frame() {
|
||||
requestAnimationFrame(frame);
|
||||
controls.update();
|
||||
renderer.render(scene, camera);
|
||||
})();
|
||||
|
||||
// ── Boutons de contrôle ───────────────────────────────
|
||||
document.querySelector('[title="Réinitialiser la vue"]')?.addEventListener('click', () => {
|
||||
if (!initCamPos) return;
|
||||
camera.position.copy(initCamPos);
|
||||
controls.target.copy(initTarget);
|
||||
controls.update();
|
||||
});
|
||||
|
||||
document.querySelector('[title="Zoom avant"]')?.addEventListener('click', () => {
|
||||
const d = camera.position.distanceTo(controls.target);
|
||||
const dir = new THREE.Vector3().subVectors(controls.target, camera.position).normalize();
|
||||
camera.position.addScaledVector(dir, d * 0.25);
|
||||
controls.update();
|
||||
});
|
||||
|
||||
document.querySelector('[title="Zoom arrière"]')?.addEventListener('click', () => {
|
||||
const d = camera.position.distanceTo(controls.target);
|
||||
const dir = new THREE.Vector3().subVectors(controls.target, camera.position).normalize();
|
||||
camera.position.addScaledVector(dir, -d * 0.3);
|
||||
controls.update();
|
||||
});
|
||||
|
||||
document.querySelector('[title="Plein écran"]')?.addEventListener('click', () => {
|
||||
document.fullscreenElement ? document.exitFullscreen() : viewer.requestFullscreen();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- ─── Footer ──────────────────────────────────────── -->
|
||||
<footer class="site-footer">
|
||||
<span class="footer-logo">CERAMIQ+</span>
|
||||
<div class="footer-links">
|
||||
<a href="#">Mentions légales</a>
|
||||
<a href="#">RGPD</a>
|
||||
<a href="#">Contact</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
524
round-object.html
Normal file
524
round-object.html
Normal file
|
|
@ -0,0 +1,524 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Round, object</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
|
||||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ─── Header ──────────────────────────────────────── -->
|
||||
<header class="site-header">
|
||||
<a href="index.html" class="site-logo">CERAMIC+</a>
|
||||
<nav class="header-nav">
|
||||
<ul>
|
||||
<li>Bibliothèque</li>
|
||||
<li>Écosystème</li>
|
||||
<li>Évènements</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="header-actions">
|
||||
<div class="search-wrap">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="text" placeholder="Rechercher une publication…">
|
||||
</div>
|
||||
<button class="btn-account btn-account--primary">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
Se connecter
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<nav class="obj-nav">
|
||||
|
||||
<a href="index.html" class="obj-back">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
Retour aux résultats
|
||||
</a>
|
||||
|
||||
<div class="obj-nav-context">
|
||||
<span class="obj-nav-path">
|
||||
<a href="round.html">Pièces</a>
|
||||
<span class="bc-sep">›</span>
|
||||
<a href="#">Céramique traditionnelle</a>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="result-nav-filters">
|
||||
<div class="filter">Argile</div>
|
||||
<div class="filter">Espagne</div>
|
||||
<div class="filter">Moulage</div>
|
||||
</div>
|
||||
|
||||
<div class="obj-nav-arrows">
|
||||
<button class="obj-arrow" title="Fiche précédente">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="obj-position">4 / 18</span>
|
||||
<button class="obj-arrow" title="Fiche suivante">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
<!-- ─── Contenu fiche objet ───────────────────────── -->
|
||||
<div class="obj-wrap">
|
||||
|
||||
<!-- ─── En-tête ────────────────────────────────── -->
|
||||
<header class="obj-header">
|
||||
<div>
|
||||
<!-- <span class="obj-ref">CERAMIQ-2024-0042</span> -->
|
||||
<h1 class="obj-title">Bol à oreilles</h1>
|
||||
<div class="card-meta" style="margin-top:10px">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Céramique traditionnelle</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
<span class="meta-pill">Argile</span>
|
||||
<span class="meta-pill">XVIIIe siècle</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="obj-header-actions">
|
||||
<button class="btn-action">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
|
||||
</svg>
|
||||
Télécharger
|
||||
</button>
|
||||
<button class="btn-action" onclick="window.print()">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 6 2 18 2 18 9"/>
|
||||
<path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/>
|
||||
<rect x="6" y="14" width="12" height="8"/>
|
||||
</svg>
|
||||
Imprimer
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ─── Corps : médias + info ────────────────────── -->
|
||||
<div class="obj-body">
|
||||
|
||||
<!-- ─── Médias ──────────────────────────────────── -->
|
||||
<section class="obj-media">
|
||||
|
||||
<!-- <div class="media-tabs">
|
||||
<button class="media-tab is-active">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>
|
||||
</svg>
|
||||
Rendu 3D
|
||||
</button>
|
||||
<button class="media-tab">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>
|
||||
<polyline points="21 15 16 10 5 21"/>
|
||||
</svg>
|
||||
Images <span class="media-count">3</span>
|
||||
</button>
|
||||
<button class="media-tab">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polygon points="5 3 19 12 5 21 5 3"/>
|
||||
</svg>
|
||||
Vidéos <span class="media-count">2</span>
|
||||
</button>
|
||||
<button class="media-tab">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/>
|
||||
</svg>
|
||||
PDF <span class="media-count">1</span>
|
||||
</button>
|
||||
</div> -->
|
||||
|
||||
<div class="media-viewer">
|
||||
<canvas id="viewer3d" style="position:absolute;inset:0;width:100%;height:100%;display:none;z-index:1;"></canvas>
|
||||
<div class="media-viewer-inner" id="viewer-placeholder">
|
||||
<svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>
|
||||
</svg>
|
||||
<span class="media-type-label">Rendu 3D interactif</span>
|
||||
<span class="media-hint">Chargement du modèle…</span>
|
||||
</div>
|
||||
<div class="media-controls" style="z-index:3;">
|
||||
<button class="ctrl-btn" title="Réinitialiser la vue">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="1 4 1 10 7 10"/>
|
||||
<path d="M3.51 15a9 9 0 1 0 .49-4.75"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="ctrl-btn" title="Zoom avant">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
<line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="ctrl-btn" title="Zoom arrière">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
<line x1="8" y1="11" x2="14" y2="11"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="ctrl-btn ctrl-btn--sep" title="Plein écran">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/>
|
||||
<line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media-thumbs">
|
||||
<div class="thumb thumb--3d is-active">
|
||||
<svg class="thumb-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.5">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>
|
||||
</svg>
|
||||
<span class="thumb-label">3D</span>
|
||||
</div>
|
||||
<div class="thumb">
|
||||
<span class="thumb-label">IMG 1</span>
|
||||
</div>
|
||||
<div class="thumb">
|
||||
<span class="thumb-label">IMG 2</span>
|
||||
</div>
|
||||
<div class="thumb thumb--portrait">
|
||||
<span class="thumb-label">IMG 3</span>
|
||||
</div>
|
||||
<div class="thumb">
|
||||
<svg class="thumb-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.5">
|
||||
<polygon points="5 3 19 12 5 21 5 3"/>
|
||||
</svg>
|
||||
<span class="thumb-label">VID 1</span>
|
||||
</div>
|
||||
<div class="thumb thumb--portrait">
|
||||
<svg class="thumb-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.5">
|
||||
<polygon points="5 3 19 12 5 21 5 3"/>
|
||||
</svg>
|
||||
<span class="thumb-label">VID 2</span>
|
||||
</div>
|
||||
<div class="thumb thumb--pdf">
|
||||
<svg class="thumb-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.5">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/>
|
||||
</svg>
|
||||
<span class="thumb-label">PDF</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- ─── Panneau d'informations ─────────────────── -->
|
||||
<aside class="obj-info">
|
||||
|
||||
<dl class="info-list">
|
||||
|
||||
<div class="info-row">
|
||||
<dt>Pays / Région</dt>
|
||||
<dd>Espagne<br><span class="info-sub">Castille-et-León</span></dd>
|
||||
</div>
|
||||
<hr class="info-divider">
|
||||
<div class="info-row">
|
||||
<dt>Partenaires</dt>
|
||||
<dd>
|
||||
Musée de la Céramique de Barcelone<br>
|
||||
Universidad Complutense de Madrid<br>
|
||||
<span class="info-sub">Réseau CERAMIQ, Partenaire associé</span>
|
||||
</dd>
|
||||
</div>
|
||||
<hr class="info-divider">
|
||||
<div class="info-row">
|
||||
<dt>Auteur de la fiche</dt>
|
||||
<dd>
|
||||
Centre de Recherche Céramique Sud-Ouest<br>
|
||||
<!-- <span class="info-sub">Réf. interne : CRCSO/2024</span><br>
|
||||
<span class="info-sub">Mise à jour : 14 mars 2024</span> -->
|
||||
</dd>
|
||||
</div>
|
||||
<hr class="info-divider">
|
||||
|
||||
<div class="info-row">
|
||||
<dt>Date de publication</dt>
|
||||
<dd>23 mars 2026<br><span class="info-sub">Mise à jour : 27 avril 2026</span></dd>
|
||||
</div>
|
||||
<hr class="info-divider">
|
||||
|
||||
<div class="info-row">
|
||||
<dt>Lien vers la fiche sur le site du partenaire</dt>
|
||||
<dd>23 mars 2026</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<button class="btn-contact-cta">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
</svg>
|
||||
Contacter l’auteur de la fiche
|
||||
</button>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ─── Description ────────────────────────────── -->
|
||||
<section class="obj-section">
|
||||
<h2 class="obj-section-title">Description</h2>
|
||||
<div class="obj-description">
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue ligula lorem, in cursus ligula condimentum eget. Fusce interdum nec sem quis euismod. Etiam turpis lorem, pharetra eu eros vel, ultricies dictum orci. Donec semper quam vitae nulla blandit, consectetur ultricies augue consequat. Maecenas fringilla efficitur metus, quis aliquet enim mattis sed. Morbi sed cursus ante. Vivamus rhoncus, mauris id posuere condimentum, augue nisi feugiat turpis, nec luctus sapien nisl vel ipsum. Fusce consectetur erat at odio aliquet interdum. Duis vulputate elit sit amet dolor vestibulum vestibulum. Nunc tincidunt sapien augue, nec aliquam lectus sodales sit amet. Cras imperdiet purus neque, vel hendrerit sapien mattis sit amet.</p>
|
||||
<p>Nullam auctor elit dictum, imperdiet magna eget, auctor sem. Pellentesque sodales, erat non varius tristique, massa quam scelerisque mi, et finibus purus diam ac turpis. Nam porta, leo ac iaculis blandit, dui augue tempor purus, nec fermentum arcu nulla sit amet erat. Duis dignissim ut felis ut porta. Phasellus hendrerit placerat mollis. Vivamus non elit suscipit, egestas tellus fermentum, maximus nulla. Ut sem diam, tincidunt quis tortor et, hendrerit tempus lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque id bibendum magna. Sed tempus, ipsum ac mollis tincidunt, metus tellus ullamcorper massa, sed scelerisque justo nibh tempus nulla. Vivamus varius urna sed urna pretium mattis. Nulla at neque ut tellus tempus lobortis quis eget augue. Proin interdum massa id justo ultricies, in facilisis neque maximus. Pellentesque nec rutrum justo, non imperdiet dui. </p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- ─── Formulaire de contact ──────────────────── -->
|
||||
<!-- <section class="obj-section">
|
||||
<h2 class="obj-section-title">Prendre contact à propos de cette fiche</h2>
|
||||
<form class="contact-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Nom <span class="form-required">*</span></label>
|
||||
<input class="form-input" type="text" placeholder="Votre nom">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Prénom <span class="form-required">*</span></label>
|
||||
<input class="form-input" type="text" placeholder="Votre prénom">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email <span class="form-required">*</span></label>
|
||||
<input class="form-input" type="email" placeholder="votre@email.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Organisation</label>
|
||||
<input class="form-input" type="text" placeholder="Votre organisation (optionnel)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Objet <span class="form-required">*</span></label>
|
||||
<input class="form-input" type="text" value="À propos de la fiche : Bol à oreilles — CÉRQ-2024-0042" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Message <span class="form-required">*</span></label>
|
||||
<textarea class="form-input form-textarea" rows="5" placeholder="Votre message…"></textarea>
|
||||
</div>
|
||||
<div class="form-footer-row">
|
||||
<p class="form-note">* Champs obligatoires · Données traitées conformément au RGPD</p>
|
||||
<button type="submit" class="btn-submit">Envoyer le message</button>
|
||||
</div>
|
||||
</form>
|
||||
</section> -->
|
||||
|
||||
<!-- ─── Pièces similaires ─────────────────────── -->
|
||||
<section class="obj-section">
|
||||
<h2 class="obj-section-title">Pièces similaires</h2>
|
||||
<div class="obj-related-grid">
|
||||
|
||||
<article class="piece-card">
|
||||
<div class="card-image"><span class="card-tag">Argile</span></div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Écuelle à oreilles</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<div class="card-image"><span class="card-tag">Kaolin</span></div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Bol à poignée</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Coulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Portugal</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<div class="card-image"><span class="card-tag">Argile</span></div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Tasse campaniforme</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Moulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Occitanie</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="piece-card">
|
||||
<div class="card-image"><span class="card-tag">Feldspath</span></div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-name">Pot à bouillon couvert</h2>
|
||||
<div class="card-meta">
|
||||
<span class="meta-pill technique">Coulage</span>
|
||||
<span class="meta-pill">Traditionnel</span>
|
||||
<span class="meta-pill country">Espagne</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import * as THREE from 'three';
|
||||
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
|
||||
const canvas = document.getElementById('viewer3d');
|
||||
const pholder = document.getElementById('viewer-placeholder');
|
||||
const viewer = document.querySelector('.media-viewer');
|
||||
const hintEl = pholder.querySelector('.media-hint');
|
||||
|
||||
// ── Renderer ──────────────────────────────────────────
|
||||
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
|
||||
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
|
||||
renderer.outputColorSpace = THREE.SRGBColorSpace;
|
||||
renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
||||
renderer.toneMappingExposure = 0.9;
|
||||
|
||||
// ── Scene / Camera ────────────────────────────────────
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(40, 1, 0.001, 1000);
|
||||
|
||||
// ── Lights ────────────────────────────────────────────
|
||||
scene.add(new THREE.AmbientLight(0xffffff, 1.5));
|
||||
const key = new THREE.DirectionalLight(0xffffff, 2.5);
|
||||
key.position.set(3, 5, 3);
|
||||
scene.add(key);
|
||||
const fill = new THREE.DirectionalLight(0xffffff, 0.6);
|
||||
fill.position.set(-3, 2, -2);
|
||||
scene.add(fill);
|
||||
|
||||
// ── Controls ──────────────────────────────────────────
|
||||
const controls = new OrbitControls(camera, canvas);
|
||||
controls.enableDamping = true;
|
||||
controls.dampingFactor = 0.06;
|
||||
|
||||
// ── Model ─────────────────────────────────────────────
|
||||
let initCamPos, initTarget;
|
||||
|
||||
new GLTFLoader().load(
|
||||
'assets/3D-samples/moule%20asperges.gltf.gltf',
|
||||
(gltf) => {
|
||||
const model = gltf.scene;
|
||||
const box = new THREE.Box3().setFromObject(model);
|
||||
const c = box.getCenter(new THREE.Vector3());
|
||||
const size = box.getSize(new THREE.Vector3());
|
||||
const dim = Math.max(size.x, size.y, size.z);
|
||||
|
||||
model.position.sub(c);
|
||||
scene.add(model);
|
||||
|
||||
camera.near = dim * 0.001;
|
||||
camera.far = dim * 100;
|
||||
camera.position.set(0, dim * 0.25, dim * 2.2);
|
||||
controls.target.set(0, 0, 0);
|
||||
controls.update();
|
||||
|
||||
initCamPos = camera.position.clone();
|
||||
initTarget = controls.target.clone();
|
||||
|
||||
canvas.style.display = 'block';
|
||||
pholder.style.display = 'none';
|
||||
},
|
||||
({ loaded, total }) => {
|
||||
if (total) hintEl.textContent = `Chargement… ${Math.round(loaded / total * 100)} %`;
|
||||
},
|
||||
(err) => {
|
||||
hintEl.textContent = 'Erreur de chargement du modèle 3D.';
|
||||
console.error(err);
|
||||
}
|
||||
);
|
||||
|
||||
// ── Resize ────────────────────────────────────────────
|
||||
function resize() {
|
||||
const w = viewer.clientWidth, h = viewer.clientHeight;
|
||||
camera.aspect = w / h;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(w, h);
|
||||
}
|
||||
resize();
|
||||
new ResizeObserver(resize).observe(viewer);
|
||||
|
||||
// ── Render loop ───────────────────────────────────────
|
||||
(function frame() {
|
||||
requestAnimationFrame(frame);
|
||||
controls.update();
|
||||
renderer.render(scene, camera);
|
||||
})();
|
||||
|
||||
// ── Boutons de contrôle ───────────────────────────────
|
||||
document.querySelector('[title="Réinitialiser la vue"]')?.addEventListener('click', () => {
|
||||
if (!initCamPos) return;
|
||||
camera.position.copy(initCamPos);
|
||||
controls.target.copy(initTarget);
|
||||
controls.update();
|
||||
});
|
||||
|
||||
document.querySelector('[title="Zoom avant"]')?.addEventListener('click', () => {
|
||||
const d = camera.position.distanceTo(controls.target);
|
||||
const dir = new THREE.Vector3().subVectors(controls.target, camera.position).normalize();
|
||||
camera.position.addScaledVector(dir, d * 0.25);
|
||||
controls.update();
|
||||
});
|
||||
|
||||
document.querySelector('[title="Zoom arrière"]')?.addEventListener('click', () => {
|
||||
const d = camera.position.distanceTo(controls.target);
|
||||
const dir = new THREE.Vector3().subVectors(controls.target, camera.position).normalize();
|
||||
camera.position.addScaledVector(dir, -d * 0.3);
|
||||
controls.update();
|
||||
});
|
||||
|
||||
document.querySelector('[title="Plein écran"]')?.addEventListener('click', () => {
|
||||
document.fullscreenElement ? document.exitFullscreen() : viewer.requestFullscreen();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- ─── Footer ──────────────────────────────────────── -->
|
||||
<footer class="site-footer">
|
||||
<span class="footer-logo">CERAMIQ+</span>
|
||||
<div class="footer-links">
|
||||
<a href="#">Mentions légales</a>
|
||||
<a href="#">RGPD</a>
|
||||
<a href="#">Contact</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
521
style.css
Normal file
521
style.css
Normal file
|
|
@ -0,0 +1,521 @@
|
|||
|
||||
:root {
|
||||
--c-ink: #111;
|
||||
--c-bg: #fff;
|
||||
--c-bg-subtle: #f5f5f5;
|
||||
--c-bg-muted: #f7f7f7;
|
||||
--c-placeholder: #ccc;
|
||||
--c-text-faint: #aaa;
|
||||
--c-text-dim: #555;
|
||||
|
||||
--font: Arial, sans-serif;
|
||||
--text-xs: 11px;
|
||||
--text-base: 15px;
|
||||
--text-title: 17px;
|
||||
--text-hero: 32px;
|
||||
--text-display: 60px;
|
||||
|
||||
/* Layout */
|
||||
--header-h: 60px;
|
||||
--subnav-h: 44px;
|
||||
--sidebar-w: 260px;
|
||||
--info-panel-w: 300px;
|
||||
|
||||
/* Espacement */
|
||||
--sp-1: 4px; /* micro : méta, pagination */
|
||||
--sp-2: 6px; /* compact : icône+texte, tags */
|
||||
--sp-3: 8px; /* standard : items groupés */
|
||||
--sp-4: 16px; /* confortable : blocs, groupes */
|
||||
--sp-5: 24px; /* large : entre sections */
|
||||
--p-page: 28px; /* gutter horizontal de page */
|
||||
--p-section: 32px; /* padding vertical sections */
|
||||
--p-card: 12px; /* padding interne cartes */
|
||||
--p-btn: 5px 14px; /* padding boutons */
|
||||
--p-tag: 4px 12px; /* padding tags / pills */
|
||||
|
||||
/* Border-radius */
|
||||
--r-pill: 100px;
|
||||
--r-card: 10px;
|
||||
--r-block: 8px;
|
||||
--r-sm: 6px;
|
||||
--r-xs: 5px;
|
||||
--r-mini: 3px;
|
||||
|
||||
/* Z-index */
|
||||
--z-header: 100;
|
||||
--z-subnav: 90;
|
||||
|
||||
/* Raccourci bordure */
|
||||
--border: 1px solid var(--c-ink);
|
||||
|
||||
/* placeholder image */
|
||||
--placeholder-bg:
|
||||
linear-gradient(to bottom right,
|
||||
transparent calc(50% - .6px), var(--c-placeholder) calc(50% - .6px),
|
||||
var(--c-placeholder) calc(50% + .6px), transparent calc(50% + .6px)),
|
||||
linear-gradient(to bottom left,
|
||||
transparent calc(50% - .6px), var(--c-placeholder) calc(50% - .6px),
|
||||
var(--c-placeholder) calc(50% + .6px), transparent calc(50% + .6px));
|
||||
}
|
||||
|
||||
/* ── Reset ──────────────────────────────────────────────── */
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: var(--font); font-size: var(--text-base); color: var(--c-ink); background: var(--c-bg); }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button, select, input { font-family: inherit; font-size: inherit; }
|
||||
|
||||
|
||||
|
||||
/* ════════════════════════════════════════════════════════
|
||||
COMMUN — header, catégories, cartes, filtres, footer
|
||||
════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Header ─────────────────────────────────────────────── */
|
||||
.site-header {
|
||||
position: sticky; top: 0; z-index: var(--z-header);
|
||||
background: var(--c-bg); border-bottom: var(--border);
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0 var(--p-page); height: var(--header-h);
|
||||
}
|
||||
.site-logo { font-size: var(--text-title); color: var(--c-ink); flex-shrink: 0; }
|
||||
|
||||
.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
|
||||
|
||||
|
||||
.header-nav{
|
||||
flex-grow: 1;
|
||||
margin-left: 6ch;
|
||||
}
|
||||
|
||||
.header-nav ul{
|
||||
list-style: none;
|
||||
display: flex;
|
||||
font-size: var(--text-xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05rem;
|
||||
gap: 4ch;
|
||||
|
||||
}
|
||||
|
||||
.header-nav ul li{
|
||||
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
display: flex; align-items: center; gap: var(--sp-2);
|
||||
border: var(--border); border-radius: var(--r-pill); padding: var(--p-btn);
|
||||
}
|
||||
.search-wrap svg { display: none; }
|
||||
.search-wrap input {
|
||||
background: none; border: none; outline: none;
|
||||
color: var(--c-ink); width: 160px; font-size: var(--text-xs);
|
||||
}
|
||||
.search-wrap input::placeholder { color: var(--c-ink); }
|
||||
|
||||
.btn-account {
|
||||
border: var(--border); border-radius: var(--r-pill);
|
||||
background: none; color: var(--c-ink);
|
||||
padding: var(--p-btn); cursor: pointer; font-size: var(--text-xs);
|
||||
}
|
||||
.btn-account svg { display: none; }
|
||||
|
||||
/* ── Nuage de catégories ─────────────────────────────────── */
|
||||
.category-cloud {
|
||||
display: flex; align-items: center; gap: var(--sp-2);
|
||||
padding: 10px var(--p-page); border-bottom: var(--border);
|
||||
overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap;
|
||||
}
|
||||
.category-cloud::-webkit-scrollbar { display: none; }
|
||||
.category-tag {
|
||||
font-size: var(--text-xs); color: var(--c-ink);
|
||||
padding: var(--p-tag); border-radius: var(--r-pill); border: var(--border);
|
||||
white-space: nowrap; flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Cartes pièces ───────────────────────────────────────── */
|
||||
.piece-card {
|
||||
border-radius: var(--r-card); border: var(--border);
|
||||
overflow: hidden; cursor: pointer;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
display: block; aspect-ratio: 1;
|
||||
position: relative; overflow: hidden; border-bottom: var(--border);
|
||||
}
|
||||
.card-image::before { content: ''; position: absolute; inset: 0; background: var(--placeholder-bg); }
|
||||
.card-image svg, .card-image img { display: none; }
|
||||
|
||||
.card-tag {
|
||||
position: absolute; top: 8px; left: 8px; z-index: 1;
|
||||
background: var(--c-bg); color: var(--c-ink);
|
||||
font-size: var(--text-xs); padding: 2px 8px;
|
||||
border-radius: var(--r-pill); border: var(--border);
|
||||
}
|
||||
|
||||
.card-body { padding: var(--p-card); flex: 1; display: flex; flex-direction: column; gap: 3px; }
|
||||
.card-ref { font-size: var(--text-xs); color: var(--c-ink); letter-spacing: .08em; text-transform: uppercase; }
|
||||
.card-name { font-size: var(--text-title); color: var(--c-ink); margin-top: 2px; line-height: 1.2; }
|
||||
|
||||
.card-meta { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-1); }
|
||||
.meta-pill {
|
||||
font-size: var(--text-xs); color: var(--c-ink);
|
||||
border: var(--border); border-radius: var(--r-pill); padding: 2px 9px;
|
||||
}
|
||||
|
||||
/* ── Tags / filtres actifs ───────────────────────────────── */
|
||||
.filter-tag {
|
||||
display: flex; align-items: center; gap: var(--sp-1);
|
||||
border: var(--border); border-radius: var(--r-pill);
|
||||
padding: 3px 10px 3px 12px; font-size: var(--text-xs); color: var(--c-ink);
|
||||
}
|
||||
.filter-tag button {
|
||||
background: none; border: none; cursor: pointer;
|
||||
color: var(--c-ink); line-height: 1; padding: 0; font-size: var(--text-base);
|
||||
}
|
||||
|
||||
/* ── Footer ──────────────────────────────────────────────── */
|
||||
.site-footer {
|
||||
border-top: var(--border); padding: var(--sp-5) var(--p-page);
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
flex-wrap: wrap; gap: 12px;
|
||||
font-size: var(--text-xs); color: var(--c-ink); margin-top: 40px;
|
||||
}
|
||||
.footer-logo { font-size: var(--text-title); color: var(--c-ink); }
|
||||
.footer-links { display: flex; gap: 20px; }
|
||||
|
||||
|
||||
/* ════════════════════════════════════════════════════════
|
||||
PAGE CATALOGUE — round.html
|
||||
════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Hero ────────────────────────────────────────────────── */
|
||||
.page-hero {
|
||||
padding: 48px var(--p-page) 44px;
|
||||
display: flex; align-items: flex-end; justify-content: space-between;
|
||||
gap: var(--sp-5); border-bottom: var(--border);
|
||||
}
|
||||
.page-hero h1 { font-size: var(--text-display); color: var(--c-ink); line-height: .95; font-weight: normal; }
|
||||
|
||||
/* ── Sélecteur de section ────────────────────────────────── */
|
||||
.section-switcher {
|
||||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
|
||||
padding: 14px var(--p-page); border-bottom: var(--border);
|
||||
}
|
||||
.section-tile {
|
||||
display: flex; flex-direction: column; gap: var(--sp-1);
|
||||
padding: 14px 16px 12px; color: var(--c-ink);
|
||||
border-radius: var(--r-block); border: var(--border);
|
||||
cursor: pointer; position: relative; overflow: hidden;
|
||||
}
|
||||
.tile-name { font-size: var(--text-title); color: var(--c-ink); margin-top: 6px; font-weight: normal; }
|
||||
.tile-items { list-style: none; margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
|
||||
.tile-item-sub {
|
||||
font-size: var(--text-xs); color: var(--c-ink);
|
||||
padding-left: 8px; border-left: 1px solid transparent;
|
||||
}
|
||||
.section-tile.active .tile-item-sub.active { border-color: var(--c-ink); }
|
||||
|
||||
/* ── Layout catalogue ────────────────────────────────────── */
|
||||
.catalogue-wrap { display: flex; align-items: flex-start; padding: 0 var(--p-page); gap: var(--sp-5); }
|
||||
|
||||
/* ── Sidebar ─────────────────────────────────────────────── */
|
||||
.sidebar {
|
||||
width: var(--sidebar-w); flex-shrink: 0; padding: 20px 0;
|
||||
position: sticky; top: var(--header-h);
|
||||
max-height: calc(100vh - var(--header-h)); overflow-y: auto;
|
||||
}
|
||||
.sidebar-title {
|
||||
font-size: var(--text-xs); color: var(--c-ink); letter-spacing: .05em; text-transform: uppercase;
|
||||
margin-bottom: 14px; padding-bottom: 10px; border-bottom: var(--border);
|
||||
}
|
||||
|
||||
.filter-accordion { border: none; }
|
||||
.filter-accordion-title {
|
||||
list-style: none; display: flex; align-items: center; justify-content: space-between;
|
||||
font-size: var(--text-xs); color: var(--c-ink);
|
||||
cursor: pointer; padding: 6px 0; user-select: none;
|
||||
}
|
||||
.filter-accordion-title::-webkit-details-marker { display: none; }
|
||||
.filter-accordion-title::after { content: '+'; color: var(--c-ink); }
|
||||
.filter-accordion[open] .filter-accordion-title::after { content: '−'; }
|
||||
.filter-accordion-body { padding: 8px 0 4px; display: flex; flex-direction: column; gap: 7px; }
|
||||
|
||||
.filter-subgroup-label {
|
||||
font-size: var(--text-xs); color: var(--c-ink); font-style: italic;
|
||||
margin-top: 10px; margin-bottom: 7px;
|
||||
}
|
||||
.filter-checkbox-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); }
|
||||
.filter-checkbox-list label { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; font-size: var(--text-xs); color: var(--c-ink); }
|
||||
.filter-checkbox-list input[type="checkbox"] { accent-color: var(--c-ink); width: 12px; height: 12px; flex-shrink: 0; }
|
||||
.filter-checkbox-list--sub label { padding-left: 4px; }
|
||||
.filter-select {
|
||||
width: 100%; border: var(--border); border-radius: var(--r-sm);
|
||||
padding: 6px 8px; background: var(--c-bg); color: var(--c-ink);
|
||||
font-size: var(--text-xs); outline: none;
|
||||
}
|
||||
.sidebar-divider { border: none; border-top: var(--border); margin: 10px 0; }
|
||||
.btn-reset {
|
||||
width: 100%; padding: 8px; background: none;
|
||||
border: var(--border); border-radius: var(--r-pill);
|
||||
color: var(--c-ink); cursor: pointer; font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
/* ── Contenu principal ───────────────────────────────────── */
|
||||
.catalogue-main { flex: 1; min-width: 0; padding: 20px 0; }
|
||||
|
||||
.catalogue-toolbar {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 18px; flex-wrap: wrap; gap: 10px;
|
||||
}
|
||||
.toolbar-section { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-base); color: var(--c-ink); }
|
||||
.toolbar-section-name { font-size: var(--text-base); }
|
||||
.toolbar-section svg { opacity: .35; flex-shrink: 0; }
|
||||
|
||||
.num-results{
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.num-results span{
|
||||
font-weight: bold;
|
||||
}
|
||||
.sort-wrap { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
|
||||
.sort-wrap label { font-size: var(--text-xs); color: var(--c-ink); }
|
||||
.sort-wrap select {
|
||||
border: var(--border); border-radius: var(--r-pill);
|
||||
padding: 5px 24px 5px 10px; background: var(--c-bg); color: var(--c-ink);
|
||||
font-size: var(--text-xs); outline: none; appearance: none; -webkit-appearance: none;
|
||||
}
|
||||
|
||||
.active-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: 18px; min-height: 24px; }
|
||||
|
||||
/* ── Grille pièces ───────────────────────────────────────── */
|
||||
.pieces-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); }
|
||||
|
||||
/* ── Pagination ──────────────────────────────────────────── */
|
||||
.pagination {
|
||||
display: flex; align-items: center; justify-content: center; gap: var(--sp-1);
|
||||
margin-top: var(--p-section); padding-top: 20px; border-top: var(--border);
|
||||
}
|
||||
.page-btn {
|
||||
min-width: 34px; height: 34px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border: var(--border); border-radius: var(--r-pill);
|
||||
background: none; color: var(--c-ink); font-size: var(--text-base); cursor: pointer;
|
||||
}
|
||||
.page-btn.active { border-width: 2px; }
|
||||
.page-btn.ellipsis { border: none; cursor: default; pointer-events: none; }
|
||||
|
||||
|
||||
/* ════════════════════════════════════════════════════════
|
||||
PAGE FICHE OBJET — round-object.html
|
||||
════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Barre de retour / navigation ───────────────────────── */
|
||||
.obj-nav {
|
||||
display: flex; align-items: center; gap: var(--sp-4);
|
||||
padding: 0 var(--p-page); height: var(--subnav-h);
|
||||
border-bottom: var(--border);
|
||||
position: sticky; top: var(--header-h); z-index: var(--z-subnav);
|
||||
background: var(--c-bg);
|
||||
}
|
||||
.obj-back {
|
||||
display: flex; align-items: center; gap: var(--sp-2);
|
||||
font-size: var(--text-xs); color: var(--c-ink); flex-shrink: 0;
|
||||
border: var(--border); border-radius: var(--r-pill); padding: var(--p-tag);
|
||||
}
|
||||
.obj-back:hover { background: var(--c-bg-subtle); }
|
||||
|
||||
.obj-nav-context { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
|
||||
.obj-nav-path {
|
||||
display: flex; align-items: center; gap: var(--sp-2);
|
||||
font-size: var(--text-xs); color: var(--c-ink); flex-shrink: 0;
|
||||
}
|
||||
.bc-sep { opacity: .4; }
|
||||
.obj-nav-filters { display: flex; gap: var(--sp-1); flex-wrap: nowrap; overflow: hidden; }
|
||||
|
||||
.result-nav-filters{
|
||||
display: flex;
|
||||
color: var(--c-ink);
|
||||
opacity: .6;
|
||||
font-size: var(--text-xs);
|
||||
|
||||
}
|
||||
|
||||
.result-nav-filters .filter::after{
|
||||
content: ', ';
|
||||
padding-right: 0.5ch;
|
||||
}
|
||||
|
||||
.result-nav-filters .filter:last-of-type::after{
|
||||
content: '...'
|
||||
}
|
||||
|
||||
.obj-nav-arrows { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; margin-left: auto; }
|
||||
.obj-arrow {
|
||||
width: 26px; height: 26px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border: var(--border); border-radius: var(--r-pill);
|
||||
background: none; color: var(--c-ink); cursor: pointer;
|
||||
}
|
||||
.obj-position { font-size: var(--text-xs); color: var(--c-ink); white-space: nowrap; }
|
||||
|
||||
/* ── Conteneur principal ─────────────────────────────────── */
|
||||
.obj-wrap { padding: 0 var(--p-page); }
|
||||
|
||||
/* ── En-tête objet ───────────────────────────────────────── */
|
||||
.obj-header {
|
||||
display: flex; align-items: flex-start; justify-content: space-between;
|
||||
gap: var(--sp-4); padding: 24px 0 20px; margin-bottom: var(--sp-5);
|
||||
}
|
||||
.obj-ref { font-size: var(--text-xs); color: var(--c-ink); letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: var(--sp-1); }
|
||||
.obj-title {
|
||||
font-size: var(--text-hero); font-weight: normal; color: var(--c-ink); line-height: 1.1;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.obj-header-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; margin-top: var(--sp-1); }
|
||||
.btn-action {
|
||||
display: flex; align-items: center; gap: var(--sp-2);
|
||||
border: var(--border); border-radius: var(--r-pill);
|
||||
background: none; color: var(--c-ink);
|
||||
padding: var(--p-btn); cursor: pointer; font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
/* ── Corps : médias + panneau info ───────────────────────── */
|
||||
.obj-body { display: grid; grid-template-columns: 1fr var(--info-panel-w); gap: 28px; }
|
||||
|
||||
/* ── Section médias ──────────────────────────────────────── */
|
||||
.obj-media { display: flex; flex-direction: column; min-width: 0; }
|
||||
|
||||
.media-tabs {
|
||||
display: flex;
|
||||
border: var(--border); border-radius: var(--r-block) var(--r-block) 0 0;
|
||||
overflow: hidden; border-bottom: none;
|
||||
}
|
||||
.media-tab {
|
||||
flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
|
||||
padding: 8px 10px; background: none; border: none; border-right: var(--border);
|
||||
font-family: inherit; font-size: var(--text-xs); color: var(--c-ink); cursor: pointer;
|
||||
}
|
||||
.media-tab:last-child { border-right: none; }
|
||||
.media-tab.is-active { background: var(--c-ink); color: var(--c-bg); }
|
||||
|
||||
.media-count {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 16px; height: 16px; border-radius: var(--r-pill);
|
||||
border: 1px solid currentColor; font-size: var(--text-xs); line-height: 1;
|
||||
}
|
||||
|
||||
.media-viewer {
|
||||
position: relative; aspect-ratio: 16 / 9;
|
||||
border: var(--border); overflow: hidden;
|
||||
}
|
||||
.media-viewer::before { content: ''; position: absolute; inset: 0; background: var(--placeholder-bg); }
|
||||
.media-viewer-inner {
|
||||
position: absolute; inset: 0;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
gap: var(--sp-2); pointer-events: none;
|
||||
}
|
||||
.media-type-label { font-size: var(--text-base); color: var(--c-ink); }
|
||||
.media-hint { font-size: var(--text-xs); color: var(--c-ink); opacity: .55; }
|
||||
|
||||
.media-controls { position: absolute; bottom: 10px; right: 10px; display: flex; gap: var(--sp-1); }
|
||||
.ctrl-btn {
|
||||
width: 28px; height: 28px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border: var(--border); border-radius: var(--r-sm);
|
||||
background: var(--c-bg); color: var(--c-ink); cursor: pointer;
|
||||
}
|
||||
.ctrl-btn--sep { margin-left: var(--sp-1); }
|
||||
|
||||
/* ── Vignettes ───────────────────────────────────────────── */
|
||||
.media-thumbs {
|
||||
display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none;
|
||||
padding: 10px 12px;
|
||||
border: var(--border); border-top: none;
|
||||
border-radius: 0 0 var(--r-block) var(--r-block);
|
||||
}
|
||||
.media-thumbs::-webkit-scrollbar { display: none; }
|
||||
|
||||
.thumb {
|
||||
position: relative; flex-shrink: 0; height: 64px; width: 84px;
|
||||
border: var(--border); border-radius: var(--r-xs); overflow: hidden;
|
||||
cursor: pointer; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center; gap: 3px;
|
||||
}
|
||||
.thumb::before { content: ''; position: absolute; inset: 0; background: var(--placeholder-bg); }
|
||||
.thumb-icon { position: relative; z-index: 1; }
|
||||
.thumb-label {
|
||||
position: relative; z-index: 1;
|
||||
font-size: var(--text-xs); color: var(--c-ink); text-align: center;
|
||||
background: rgba(255,255,255,.85); padding: 1px 5px; border-radius: var(--r-mini);
|
||||
}
|
||||
.thumb.is-active { border-width: 2px; }
|
||||
.thumb--portrait { width: 44px; }
|
||||
.thumb--pdf { width: 52px; }
|
||||
.thumb--3d::before { display: none; }
|
||||
.thumb--3d { background: var(--c-bg-subtle); }
|
||||
|
||||
/* ── Panneau d'informations ──────────────────────────────── */
|
||||
.obj-info {
|
||||
display: flex; flex-direction: column;
|
||||
border: var(--border); border-radius: var(--r-block); overflow: hidden;
|
||||
align-self: flex-start;
|
||||
position: sticky; top: calc(var(--header-h) + var(--subnav-h));
|
||||
}
|
||||
.info-list { list-style: none; }
|
||||
.info-row { padding: 14px 16px; display: flex; flex-direction: column; gap: var(--sp-1); }
|
||||
.info-row dt { font-size: var(--text-xs); color: var(--c-ink); text-transform: uppercase; letter-spacing: .08em; }
|
||||
.info-row dd { font-size: var(--text-base); color: var(--c-ink); line-height: 1.5; margin: 0; }
|
||||
.info-sub { font-size: var(--text-xs); color: var(--c-ink); opacity: .6; }
|
||||
.info-divider { border: none; border-top: var(--border); margin: 0; }
|
||||
|
||||
.btn-contact-cta {
|
||||
display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
|
||||
width: 100%; padding: var(--p-card) 16px; background: none;
|
||||
border: none; border-top: var(--border);
|
||||
color: var(--c-ink); font-family: inherit; font-size: var(--text-xs); cursor: pointer;
|
||||
}
|
||||
|
||||
/* ── Sections ────────────────────────────────────────────── */
|
||||
.obj-section { padding: var(--p-section) 0; }
|
||||
.obj-section-title { font-size: var(--text-title); font-weight: normal; color: var(--c-ink); margin-bottom: var(--sp-4); }
|
||||
|
||||
.obj-description { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--sp-4); }
|
||||
.obj-description p { font-size: var(--text-base); color: var(--c-ink); line-height: 1.7; max-width: 680px; }
|
||||
|
||||
.obj-keywords { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
|
||||
.keyword-tag {
|
||||
font-size: var(--text-xs); color: var(--c-ink);
|
||||
border: var(--border); border-radius: var(--r-pill); padding: 3px 10px;
|
||||
}
|
||||
|
||||
/* ── Formulaire de contact ───────────────────────────────── */
|
||||
.contact-form { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
|
||||
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
|
||||
.form-label { font-size: var(--text-xs); color: var(--c-ink); text-transform: uppercase; letter-spacing: .06em; }
|
||||
.form-required { color: var(--c-ink); }
|
||||
.form-input {
|
||||
border: var(--border); border-radius: var(--r-sm); padding: 8px 10px;
|
||||
background: var(--c-bg); color: var(--c-ink);
|
||||
font-family: inherit; font-size: var(--text-base);
|
||||
outline: none; width: 100%;
|
||||
}
|
||||
.form-input[readonly] { background: var(--c-bg-muted); color: var(--c-text-dim); }
|
||||
.form-input::placeholder { color: var(--c-text-faint); }
|
||||
.form-textarea { resize: vertical; min-height: 100px; }
|
||||
.form-footer-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-1);
|
||||
}
|
||||
.form-note { font-size: var(--text-xs); color: var(--c-ink); opacity: .6; }
|
||||
.btn-submit {
|
||||
border: var(--border); border-radius: var(--r-pill);
|
||||
background: var(--c-ink); color: var(--c-bg);
|
||||
padding: 8px 24px; font-family: inherit; font-size: var(--text-xs); cursor: pointer;
|
||||
}
|
||||
|
||||
/* ── Pièces similaires ───────────────────────────────────── */
|
||||
.obj-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
|
||||
Loading…
Add table
Add a link
Reference in a new issue