PNRR
Sito web dell'Istituzione scolastica
https://www.istitutocomprensivo3alghero.edu.it/index.php/accesso-rapido/pnrr
2026-02-27T08:31:19+00:00
noreply@istitutocomprensivo3alghero.edu.it
Risorse didattiche
2025-07-07T20:33:12+00:00
2025-07-07T20:33:12+00:00
https://www.istitutocomprensivo3alghero.edu.it/index.php/accesso-rapido/pnrr/508-risorse-didattiche-3
Bruno Serratrice
<p><style>
:root {
--primary-color: #003ca3;
--accent-color: #008f7a;
--view-bg: #007bff;
--text-color: #333;
--bg-color: #ff00ff;
--card-bg: #fff;
}
#futuraPlatform {
max-width: 1400px;
margin: auto;
font-family: 'Open Sans', sans-serif;
color: var(--text-color);
background: var(--bg-color);
}
header {
background: #fff;
border-bottom: 4px solid var(--primary-color);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
text-decoration: none;
}
.add-btn {
background: var(--primary-color);
color: #fff;
border: none;
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
}
.add-btn:hover { opacity: 0.9; }
main { padding: 0 1rem 2rem; }
.section-title {
font-size: 1.75rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 1rem;
border-bottom: 2px solid var(--accent-color);
padding-bottom: 0.5rem;
}
#builderSection { display: none; margin-top: 2rem; }
#resourceForm {
background: var(--card-bg);
padding: 1.5rem;
border-radius: 8px;
}
.form-group { margin-bottom: 1rem; }
label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
input[type="text"], textarea, select, input[type="file"] {
width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;
}
#resourceForm button {
background: var(--accent-color); color: #fff; padding: 0.6rem 1.2rem;
border: none; border-radius: 4px; cursor: pointer; font-weight: 600;
}
#resourceForm button:hover { opacity: 0.9; }
.filter-container { margin-bottom: 1rem; text-align: right; }
.filter-container select {
padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 1rem;
}
.resource-card {
background: var(--card-bg);
border-radius: 8px;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.2s;
}
.resource-card:hover { transform: translateY(-4px); }
.resource-card .category-label {
background: var(--accent-color);
color: #fff;
padding: 0.2rem 0.5rem;
border-radius: 3px;
font-size: 0.8rem;
display: inline-block;
margin-bottom: 0.5rem;
}
.resource-card .title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--accent-color);
}
.resource-card .description {
flex-grow: 1;
margin-bottom: 1rem;
}
.view-btn {
background: var(--view-bg);
color: #fff;
padding: 0.6rem 1.2rem;
text-decoration: none;
border-radius: 4px;
font-weight: 600;
display: inline-block;
}
.view-btn:hover { opacity: 0.9; }
@media (max-width: 1024px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
nav { flex-direction: column; }
.grid { grid-template-columns: 1fr; }
}
</style>
<div id="futuraPlatform">
<header>
<nav>
<a href="https://www.istitutocomprensivo3alghero.edu.it/#" class="logo">Istituto Comprensivo 3 Alghero</a>
<button id="builderNav" class="add-btn">Aggiungi Risorsa</button>
</nav>
</header>
<main>
<section id="builderSection">
<h2 class="section-title">Aggiungi Risorsa</h2>
<form id="resourceForm">
<div class="form-group">
<label for="resTitle">Titolo</label>
<input type="text" id="resTitle" required>
</div>
<div class="form-group">
<label for="resDescription">Descrizione</label>
<textarea id="resDescription" rows="3"></textarea>
</div>
<div class="form-group">
<label for="resCategory">Categoria</label>
<select id="resCategory">
<option value="coding">Coding</option>
<option value="inclusione">App per l'inclusione</option>
<option value="ai">Intelligenza Artificiale</option>
<option value="admin">Digitalizzazione Amministrativa</option>
<option value="metodologie">Metodologie didattiche</option>
</select>
</div>
<div class="form-group">
<label for="resType">Tipo</label>
<select id="resType">
<option value="url">URL Esterno</option>
<option value="youtube">Video YouTube</option>
<option value="file">File</option>
</select>
</div>
<div class="form-group" id="inputUrlGroup">
<label for="resUrl">URL</label>
<input type="text" id="resUrl" placeholder="https://">
</div>
<div class="form-group" id="inputYoutubeGroup" style="display:none;">
<label for="resYoutube">Link YouTube</label>
<input type="text" id="resYoutube" placeholder="https://youtu.be/">
</div>
<div class="form-group" id="inputFileGroup" style="display:none;">
<label for="resFile">Seleziona File</label>
<input type="file" id="resFile">
</div>
<button type="submit">Aggiungi Risorsa</button>
</form>
</section>
<section id="resourcesSection">
<h2 class="section-title">Risorse didattiche a cura della comunità di pratiche</h2>
<div class="filter-container">
<label for="categoryFilter">Filtra per categoria:</label>
<select id="categoryFilter">
<option value="all">Tutte</option>
<option value="coding">Coding</option>
<option value="inclusione">App per l'inclusione</option>
<option value="ai">Intelligenza Artificiale</option>
<option value="admin">Digitalizzazione Amministrativa</option>
</select>
</div>
<div class="grid" id="resourceGrid"></div>
</section>
</main>
</div>
<script>
// PIN e funzioni di navigazione
const BUILDER_PIN = '1234';
const builderSection = document.getElementById('builderSection');
const resourcesSection = document.getElementById('resourcesSection');
const builderNavBtn = document.getElementById('builderNav');
function showResources() {
builderSection.style.display = 'none';
resourcesSection.style.display = 'block';
window.scrollTo(0, resourcesSection.offsetTop - 20);
}
function showBuilder() {
builderSection.style.display = 'block';
resourcesSection.style.display = 'none';
window.scrollTo(0, builderSection.offsetTop - 20);
}
builderNavBtn.addEventListener('click', () => {
const pin = prompt('Inserisci PIN per accedere al builder delle risorse:');
if (pin === BUILDER_PIN) showBuilder();
else alert('PIN non valido. Accesso negato.');
});
// Switch input form
const resType = document.getElementById('resType');
resType.addEventListener('change', () => {
document.getElementById('inputUrlGroup').style.display = resType.value === 'url' ? 'block' : 'none';
document.getElementById('inputYoutubeGroup').style.display = resType.value === 'youtube' ? 'block' : 'none';
document.getElementById('inputFileGroup').style.display = resType.value === 'file' ? 'block' : 'none';
});
// Aggiunge risorsa dinamicamente con etichetta categoria
function addResource(res) {
const card = document.createElement('div');
card.className = 'resource-card';
card.setAttribute('data-category', res.category);
card.innerHTML = `
<span class="category-label">${res.category.charAt(0).toUpperCase() + res.category.slice(1)}</span>
<div class="title">${res.title}</div>
<div class="description">${res.description}</div>
<a href="https://www.istitutocomprensivo3alghero.edu.it/${res.url}" target="_blank" class="view-btn">Visualizza</a>
`;
document.getElementById('resourceGrid').appendChild(card);
}
// Submit form
document.getElementById('resourceForm').addEventListener('submit', (e) => {
e.preventDefault();
const title = document.getElementById('resTitle').value.trim();
const description = document.getElementById('resDescription').value.trim();
const category = document.getElementById('resCategory').value;
let url = '';
if (resType.value === 'url') url = document.getElementById('resUrl').value.trim();
else if (resType.value === 'youtube') url = document.getElementById('resYoutube').value.trim();
else if (resType.value === 'file') {
const file = document.getElementById('resFile').files[0];
url = URL.createObjectURL(file);
}
addResource({ title, description, category, url });
e.target.reset();
resType.dispatchEvent(new Event('change'));
showResources();
});
// Filtro categorie
document.getElementById('categoryFilter').addEventListener('change', function() {
const val = this.value;
document.querySelectorAll('#resourceGrid .resource-card').forEach(card => {
const cat = card.getAttribute('data-category');
card.style.display = (val === 'all' || cat === val) ? 'flex' : 'none';
});
});
// Vista iniziale
showResources();
</script></p>
<p><style>
:root {
--primary-color: #003ca3;
--accent-color: #008f7a;
--view-bg: #007bff;
--text-color: #333;
--bg-color: #ff00ff;
--card-bg: #fff;
}
#futuraPlatform {
max-width: 1400px;
margin: auto;
font-family: 'Open Sans', sans-serif;
color: var(--text-color);
background: var(--bg-color);
}
header {
background: #fff;
border-bottom: 4px solid var(--primary-color);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
text-decoration: none;
}
.add-btn {
background: var(--primary-color);
color: #fff;
border: none;
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
}
.add-btn:hover { opacity: 0.9; }
main { padding: 0 1rem 2rem; }
.section-title {
font-size: 1.75rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 1rem;
border-bottom: 2px solid var(--accent-color);
padding-bottom: 0.5rem;
}
#builderSection { display: none; margin-top: 2rem; }
#resourceForm {
background: var(--card-bg);
padding: 1.5rem;
border-radius: 8px;
}
.form-group { margin-bottom: 1rem; }
label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
input[type="text"], textarea, select, input[type="file"] {
width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;
}
#resourceForm button {
background: var(--accent-color); color: #fff; padding: 0.6rem 1.2rem;
border: none; border-radius: 4px; cursor: pointer; font-weight: 600;
}
#resourceForm button:hover { opacity: 0.9; }
.filter-container { margin-bottom: 1rem; text-align: right; }
.filter-container select {
padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 1rem;
}
.resource-card {
background: var(--card-bg);
border-radius: 8px;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.2s;
}
.resource-card:hover { transform: translateY(-4px); }
.resource-card .category-label {
background: var(--accent-color);
color: #fff;
padding: 0.2rem 0.5rem;
border-radius: 3px;
font-size: 0.8rem;
display: inline-block;
margin-bottom: 0.5rem;
}
.resource-card .title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--accent-color);
}
.resource-card .description {
flex-grow: 1;
margin-bottom: 1rem;
}
.view-btn {
background: var(--view-bg);
color: #fff;
padding: 0.6rem 1.2rem;
text-decoration: none;
border-radius: 4px;
font-weight: 600;
display: inline-block;
}
.view-btn:hover { opacity: 0.9; }
@media (max-width: 1024px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
nav { flex-direction: column; }
.grid { grid-template-columns: 1fr; }
}
</style>
<div id="futuraPlatform">
<header>
<nav>
<a href="https://www.istitutocomprensivo3alghero.edu.it/#" class="logo">Istituto Comprensivo 3 Alghero</a>
<button id="builderNav" class="add-btn">Aggiungi Risorsa</button>
</nav>
</header>
<main>
<section id="builderSection">
<h2 class="section-title">Aggiungi Risorsa</h2>
<form id="resourceForm">
<div class="form-group">
<label for="resTitle">Titolo</label>
<input type="text" id="resTitle" required>
</div>
<div class="form-group">
<label for="resDescription">Descrizione</label>
<textarea id="resDescription" rows="3"></textarea>
</div>
<div class="form-group">
<label for="resCategory">Categoria</label>
<select id="resCategory">
<option value="coding">Coding</option>
<option value="inclusione">App per l'inclusione</option>
<option value="ai">Intelligenza Artificiale</option>
<option value="admin">Digitalizzazione Amministrativa</option>
<option value="metodologie">Metodologie didattiche</option>
</select>
</div>
<div class="form-group">
<label for="resType">Tipo</label>
<select id="resType">
<option value="url">URL Esterno</option>
<option value="youtube">Video YouTube</option>
<option value="file">File</option>
</select>
</div>
<div class="form-group" id="inputUrlGroup">
<label for="resUrl">URL</label>
<input type="text" id="resUrl" placeholder="https://">
</div>
<div class="form-group" id="inputYoutubeGroup" style="display:none;">
<label for="resYoutube">Link YouTube</label>
<input type="text" id="resYoutube" placeholder="https://youtu.be/">
</div>
<div class="form-group" id="inputFileGroup" style="display:none;">
<label for="resFile">Seleziona File</label>
<input type="file" id="resFile">
</div>
<button type="submit">Aggiungi Risorsa</button>
</form>
</section>
<section id="resourcesSection">
<h2 class="section-title">Risorse didattiche a cura della comunità di pratiche</h2>
<div class="filter-container">
<label for="categoryFilter">Filtra per categoria:</label>
<select id="categoryFilter">
<option value="all">Tutte</option>
<option value="coding">Coding</option>
<option value="inclusione">App per l'inclusione</option>
<option value="ai">Intelligenza Artificiale</option>
<option value="admin">Digitalizzazione Amministrativa</option>
</select>
</div>
<div class="grid" id="resourceGrid"></div>
</section>
</main>
</div>
<script>
// PIN e funzioni di navigazione
const BUILDER_PIN = '1234';
const builderSection = document.getElementById('builderSection');
const resourcesSection = document.getElementById('resourcesSection');
const builderNavBtn = document.getElementById('builderNav');
function showResources() {
builderSection.style.display = 'none';
resourcesSection.style.display = 'block';
window.scrollTo(0, resourcesSection.offsetTop - 20);
}
function showBuilder() {
builderSection.style.display = 'block';
resourcesSection.style.display = 'none';
window.scrollTo(0, builderSection.offsetTop - 20);
}
builderNavBtn.addEventListener('click', () => {
const pin = prompt('Inserisci PIN per accedere al builder delle risorse:');
if (pin === BUILDER_PIN) showBuilder();
else alert('PIN non valido. Accesso negato.');
});
// Switch input form
const resType = document.getElementById('resType');
resType.addEventListener('change', () => {
document.getElementById('inputUrlGroup').style.display = resType.value === 'url' ? 'block' : 'none';
document.getElementById('inputYoutubeGroup').style.display = resType.value === 'youtube' ? 'block' : 'none';
document.getElementById('inputFileGroup').style.display = resType.value === 'file' ? 'block' : 'none';
});
// Aggiunge risorsa dinamicamente con etichetta categoria
function addResource(res) {
const card = document.createElement('div');
card.className = 'resource-card';
card.setAttribute('data-category', res.category);
card.innerHTML = `
<span class="category-label">${res.category.charAt(0).toUpperCase() + res.category.slice(1)}</span>
<div class="title">${res.title}</div>
<div class="description">${res.description}</div>
<a href="https://www.istitutocomprensivo3alghero.edu.it/${res.url}" target="_blank" class="view-btn">Visualizza</a>
`;
document.getElementById('resourceGrid').appendChild(card);
}
// Submit form
document.getElementById('resourceForm').addEventListener('submit', (e) => {
e.preventDefault();
const title = document.getElementById('resTitle').value.trim();
const description = document.getElementById('resDescription').value.trim();
const category = document.getElementById('resCategory').value;
let url = '';
if (resType.value === 'url') url = document.getElementById('resUrl').value.trim();
else if (resType.value === 'youtube') url = document.getElementById('resYoutube').value.trim();
else if (resType.value === 'file') {
const file = document.getElementById('resFile').files[0];
url = URL.createObjectURL(file);
}
addResource({ title, description, category, url });
e.target.reset();
resType.dispatchEvent(new Event('change'));
showResources();
});
// Filtro categorie
document.getElementById('categoryFilter').addEventListener('change', function() {
const val = this.value;
document.querySelectorAll('#resourceGrid .resource-card').forEach(card => {
const cat = card.getAttribute('data-category');
card.style.display = (val === 'all' || cat === val) ? 'flex' : 'none';
});
});
// Vista iniziale
showResources();
</script></p>