Projeto Alpha Lumen

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lista de Projetos</title>
<style>
body {
font-family: "Times New Roman", sans-serif;
margin: 0;
padding: 20px;
background-color: #f2f2f2;
color: #333;
}
h1 {
color: #007BFF;
text-align: center;
font-size: 36px;
margin-bottom: 20px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
li {
background-color: #fff;
margin: 10px;
padding: 20px;
border: 2px solid #ddd;
border-radius: 8px;
transition: all 0.3s ease;
width: 300px;
}
li:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
a {
text-decoration: none;
color: #007BFF;
font-weight: bold;
font-size: 18px;
}
a:hover {
text-decoration: underline;
}
#project-details {
margin-top: 20px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
display: none;
}
input[type="text"] {
padding: 10px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 10px 20px;
border: none;
background-color: #007BFF;
color: #fff;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
.experiment-image {
width: 100%;
height: auto;
border-radius: 8px;
}
#project-name {
font-size: 24px;
color: #007BFF;
}
#project-description {
font-size: 18px;
}
strong {
color: #007BFF;
}
</style>
</head>
<body>
<h1>Projetos Científicos</h1>
<ul id="project-list">

<li>
<img src="https://via.placeholder.com/300" alt="Experimento A"
class="experiment-image">
<a href="#" onclick="showProject(1)">Experimento A - Intacto</a>
</li>
<li>
<img src="https://via.placeholder.com/300" alt="Experimento B"
<a href="#" onclick="showProject(2)">Experimento B - Danificado</a>
</li>
<li>
<img src="https://via.placeholder.com/300" alt="Experimento C"
<a href="#" onclick="showProject(3)">Experimento C - Intacto</a>
</li>
</ul>
<div id="project-details">
<h2 id="project-name"></h2>
<p id="project-description"></p>
<p><strong>País:</strong> <span id="project-country"></span></p>
<p><strong>Status:</strong> <span id="project-status"></span></p>
<div id="tasks-section" style="display: none;">

<h3>Tarefas para Recuperação</h3>
<ul id="tasks-list"></ul>
<input type="text" id="new-task" placeholder="Nova tarefa">
<button onclick="addTask()">Adicionar Tarefa</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const projects = [
{ id: 1, name: 'Experimento A', description: 'Descrição do
Experimento A', country: 'Brasil', status: 'intacto' },
{ id: 2, name: 'Experimento B', description: 'Descrição do
Experimento B', country: 'EUA', status: 'danificado' },
{ id: 3, name: 'Experimento C', description: 'Descrição do
Experimento C', country: 'Alemanha', status: 'intacto' }
];
const tasks = {
2: [{ id: 1, task: 'Reparar painel solar' }, { id: 2, task:
'Verificar conexões' }]
};
const projectList = document.getElementById('project-list');

const projectDetails = document.getElementById('project-details');
window.showProject = function(projectId) {
const project = projects.find(p => p.id === projectId);
document.getElementById('project-name').innerText = project.name;
document.getElementById('project-description').innerText =
project.description;
document.getElementById('project-country').innerText =
project.country;
document.getElementById('project-status').innerText =
project.status;
projectList.style.display = 'none';
projectDetails.style.display = 'block';
if (project.status === 'danificado') {

document.getElementById('tasks-section').style.display =
'block';
loadTasks(projectId);
}
}
function loadTasks(projectId) {
const tasksList = document.getElementById('tasks-list');
tasksList.innerHTML = '';
if (tasks[projectId]) {
tasks[projectId].forEach(task => {
const listItem = document.createElement('li');
listItem.innerText = task.task;
tasksList.appendChild(listItem);
});
}
}
window.addTask = function() {
const projectId = projects.find(p => p.name ===
document.getElementById('project-name').innerText).id;
const newTask = document.getElementById('new-task').value;
if (!tasks[projectId]) {
tasks[projectId] = [];
}
tasks[projectId].push({ id: tasks[projectId].length + 1, task:
newTask });
const tasksList = document.getElementById('tasks-list');

const listItem = document.createElement('li');
listItem.innerText = newTask;
tasksList.appendChild(listItem);
document.getElementById('new-task').value = '';
}
});
</script>
</body>
</

Projeto Alpha Lumen

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Projeto Alpha Lumen

Uploaded by

Copyright:

Available Formats

<!

<div id="tasks-section" style="display: none;">

const projectList = document.getElementById('project-list');

if (project.status === 'danificado') {

const tasksList = document.getElementById('tasks-list');

You might also like