xyz-loropiceno-Luma-Attrezzoteca-Items/index.html at main · lascuolaopensource/xyz-loropiceno-Luma-Attrezzoteca-Items · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Luma Attrezzoteca — Catalogo Modelli 3D</title>
    <meta name="description" content="Catalogo di modelli 3D per l'attrezzoteca comunitaria di Luma, Spazio Tradizioni Future a Loro Piceno. Scarica, stampa in 3D, fresa o taglia al laser.">
    <meta property="og:title" content="Luma Attrezzoteca — Catalogo Modelli 3D">
    <meta property="og:description" content="Modelli 3D scaricabili per stampa 3D, fresatura e taglio laser.">
    <meta property="og:type" content="website">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header id="site-header" class="site-header"></header>

    <main>
        <section class="hero">
            <div class="container">
                <div class="hero__grid">
                    <div class="hero__top">
                        <div class="hero__label">
                            <span class="eyebrow">Archivio · Vol. 01</span>
                            <p class="hero__sublabel">
                                Modelli 3D progettati a Loro Piceno e disponibili
                                per la fabbricazione nel territorio.
                            </p>
                        </div>

                        <div class="hero__counter" aria-label="Modelli pubblicati">
                            <div class="hero__counter-value" id="hero-count">04</div>
                            <span class="hero__counter-label">Modelli pubblicati</span>
                            <span class="hero__counter-sub">in continuo aggiornamento</span>
                        </div>
                    </div>

                    <h1 class="hero__wordmark">Attrezzo<wbr>teca</h1>

                    <div class="hero__bottom">
                        <p class="hero__lead">
                            Un catalogo aperto di <em>oggetti</em>
                            disegnati per essere autoprodotti
                            nei laboratori della comunità.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section class="catalog">
            <div class="container">
                <header class="catalog__head">
                    <h2 class="catalog__title">Catalogo<small>/ apri, scarica, fabbrica</small></h2>
                </header>

                <div class="filter-bar">
                    <span class="filter-bar__label">Categoria</span>
                    <div class="filter-bar__pills" id="filter-pills"></div>
                    <div class="filter-bar__search">
                        <input type="text" class="search-input" id="search-input" placeholder="Cerca modello, tag o descrizione…">
                    </div>
                </div>

                <div class="filter-bar filter-bar--secondary">
                    <span class="filter-bar__label">Lavorazione</span>
                    <div class="filter-bar__pills" id="lavorazione-pills">
                        <button class="filter-pill active" data-lavorazione="">Tutte</button>
                        <button class="filter-pill" data-lavorazione="stampa-3d">Stampa 3D</button>
                        <button class="filter-pill" data-lavorazione="cnc">Fresatura CNC</button>
                        <button class="filter-pill" data-lavorazione="laser">Taglio Laser</button>
                    </div>
                </div>

                <div class="card-grid" id="card-grid"></div>
            </div>
        </section>
    </main>

    <footer id="site-footer" class="site-footer"></footer>

    <script src="js/shared.js"></script>
    <script src="js/catalog.js"></script>
    <script>
        // Decorate cards with index attributes after the catalog renders.
        // catalog.js owns the grid; we observe and stamp.
        (function () {
            const grid = document.getElementById('card-grid');
            const counter = document.getElementById('hero-count');
            if (!grid) return;

            const stamp = () => {
                const cards = grid.querySelectorAll('.card');
                cards.forEach((card, i) => {
                    card.setAttribute('data-index', String(i + 1).padStart(2, '0'));
                    // Insert meta row if catalog.js hasn't (it doesn't render the cta line)
                    const body = card.querySelector('.card__body');
                    if (body && !body.querySelector('.card__meta')) {
                        const cat = body.querySelector('.card__category');
                        if (cat) {
                            const meta = document.createElement('div');
                            meta.className = 'card__meta';
                            meta.appendChild(cat);
                            const cta = document.createElement('span');
                            cta.className = 'card__cta';
                            cta.textContent = 'Apri';
                            meta.appendChild(cta);
                            body.appendChild(meta);
                        }
                    }
                });
                if (counter) {
                    const total = grid.querySelectorAll('.card').length;
                    counter.textContent = String(total).padStart(2, '0');
                }
            };

            const obs = new MutationObserver(stamp);
            obs.observe(grid, { childList: true });
            stamp();

            // Lavorazione pills — filter by fabrication method
            const lavPills = document.getElementById('lavorazione-pills');
            if (lavPills) {
                lavPills.addEventListener('click', (e) => {
                    const pill = e.target.closest('.filter-pill');
                    if (!pill) return;
                    lavPills.querySelectorAll('.filter-pill').forEach(p => p.classList.remove('active'));
                    pill.classList.add('active');
                    const val = pill.dataset.lavorazione || '';
                    if (window.LumaCatalog) window.LumaCatalog.setLavorazione(val);
                });
            }
        })();
    </script>
</body>
</html>