Meu primeiro tópico

Ter Set 10, 2024 9:21 pm

Antes de começares com a administração do fόrum, leia os primeiros passos:

Como aceder ao Painel administrativo?
Comece por iniciar sessão no fórum clicando em "Entrar" na barra de navegação (acima), uma nova página será aberta. Introduza o nome de usuário "Admin" e a senha que usaste na criação do fórum. Caso esqueceste da senha clica aqui para recuperar. Quando conectado ao fórum, clique no link "Painel administrativo" existente no final da página do fórum.

Como alterar a aparência do fόrum?
Podes alterar a aparência do fόrum escolhendo um tema (cada tema apresenta: imagens, ícones ou cores distintos). Para isso, aceda ao Painel administrativo > Visualização > Temas e clique em "Escolher um tema" aparecerá várias opções de temas que pode ser alterado a qualquer momento.

Como gerenciar as categorias, fόruns ou sub-fóruns?
Podes adicionar, alterar e apagar as categorias e os fόruns que criaste a qualquer momento e quantas vezes quiseres. Para isso, aceda ao Painel administrativo > Geral > Fórum > Categorias e Fóruns clique no sinal de adição para criar uma categoria, fórum ou sub-fórum.

Ter Set 10, 2024 9:30 pm

<div class="notification">
<div class="notification-icon">
<img src="https://img.icons8.com/fluency/48/000000/information.png" alt="Info Icon">
</div>
<div class="notification-content">
<div class="notification-title">Tópico Arquivado</div>
<div class="notification-text">
Olá, Zaswes. A Administração do fórum informa que este tópico deixa de estar ativo e foi arquivado.
Você poderá reler o conteúdo, mas não poderá responder ou atualizá-lo.
<br><br>
<i>Cordialmente, a Administração do Fórum.</i>
</div>
</div>
</div>

<div class="notification" style="background: linear-gradient(135deg, #e8f5e9, #43a047); color: #2e7d32;">
<div class="notification-icon">
<img src="https://img.icons8.com/fluency/48/000000/checkmark.png" alt="Check Icon">
</div>
<div class="notification-content">
<div class="notification-title">Formulário Atualizado</div>
<div class="notification-text">
Este formulário foi atualizado por: <b>Seu Nickname</b>.
<br>
Os requerimentos aprovados estão nas listagens. Caso veja algum erro, contate o(a) atualizador(a).
<br><br>
<i>Atenciosamente, Recursos Humanos.</i>
</div>
</div>
</div>

<div class="notification" style="background: linear-gradient(135deg, #ffebee, #e53935); color: #c62828;">
<div class="notification-icon">
<img src="https://img.icons8.com/fluency/48/000000/cancel.png" alt="Cancel Icon">
</div>
<div class="notification-content">
<div class="notification-title">Requerimento Cancelado</div>
<div class="notification-text">
O requerimento foi preenchido incorretamente, faltando informações primordiais ou com modelo errado.
<br><br>
<i>Atenciosamente, Recursos Humanos.</i>
</div>
</div>
</div>

<script>
// Aqui você pode adicionar interações JavaScript como:
// Adicionar borda de flash em tempo real para uma notificação.
function addFlashEffect() {
const notification = document.querySelector('.notification');
notification.classList.toggle('flash-border');
}

// Exemplo: Adiciona o efeito flash 2 segundos após a página carregar.
setTimeout(addFlashEffect, 2000);
</script>

Ter Set 10, 2024 9:31 pm

Tópico Arquivado

Olá, Zaswes. A Administração do fórum informa que este tópico deixa de estar ativo e foi arquivado.
Você poderá reler o conteúdo, mas não poderá responder ou atualizá-lo.

Cordialmente, a Administração do Fórum.

Ter Set 10, 2024 9:33 pm

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quadro de Notificações</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f2f5;
}

.notification {
position: relative;
width: 400px;
padding: 20px;
margin: 20px;
border-radius: 12px;
background: linear-gradient(135deg, #e0f7fa, #00acc1);
color: #00796b;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.notification:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.notification::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
background: linear-gradient(90deg, #00acc1, #00e5ff);
animation: flash-border 1.5s infinite alternate;
}

@keyframes flash-border {
0% { background: linear-gradient(90deg, #00acc1, #00e5ff); }
100% { background: linear-gradient(90deg, #00e5ff, #00acc1); }
}

.notification-icon {
display: inline-block;
background: #ffffff;
padding: 10px;
border-radius: 50%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.notification-icon img {
width: 30px;
height: 30px;
}

.notification-content {
margin-left: 60px;
position: relative;
}

.notification-title {
font-weight: bold;
font-size: 1.2em;
margin-bottom: 8px;
}

.notification-text {
font-size: 0.9em;
line-height: 1.5;
color: #4f4f4f;
}

.notification i {
font-size: 0.8em;
color: #555;
}

/* Adicionando animação no ícone */
.notification-icon {
position: absolute;
top: 20px;
left: 20px;
}

/* Efeito Flash (JavaScript Trigger) */
.flash-border {
border: 3px solid #ff1744;
}
</style>
</head>
<body>

<div class="notification">
<div class="notification-icon">
<img src="https://img.icons8.com/fluency/48/000000/information.png" alt="Info Icon">
</div>
<div class="notification-content">
<div class="notification-title">Tópico Arquivado</div>
<div class="notification-text">
Olá, Zaswes. A Administração do fórum informa que este tópico deixa de estar ativo e foi arquivado.
Você poderá reler o conteúdo, mas não poderá responder ou atualizá-lo.
<br><br>
<i>Cordialmente, a Administração do Fórum.</i>
</div>
</div>
</div>

<div class="notification" style="background: linear-gradient(135deg, #e8f5e9, #43a047); color: #2e7d32;">
<div class="notification-icon">
<img src="https://img.icons8.com/fluency/48/000000/checkmark.png" alt="Check Icon">
</div>
<div class="notification-content">
<div class="notification-title">Formulário Atualizado</div>
<div class="notification-text">
Este formulário foi atualizado por: <b>Seu Nickname</b>.
<br>
Os requerimentos aprovados estão nas listagens. Caso veja algum erro, contate o(a) atualizador(a).
<br><br>
<i>Atenciosamente, Recursos Humanos.</i>
</div>
</div>
</div>

<div class="notification" style="background: linear-gradient(135deg, #ffebee, #e53935); color: #c62828;">
<div class="notification-icon">
<img src="https://img.icons8.com/fluency/48/000000/cancel.png" alt="Cancel Icon">
</div>
<div class="notification-content">
<div class="notification-title">Requerimento Cancelado</div>
<div class="notification-text">
O requerimento foi preenchido incorretamente, faltando informações primordiais ou com modelo errado.
<br><br>
<i>Atenciosamente, Recursos Humanos.</i>
</div>
</div>
</div>

<script>
// Aqui você pode adicionar interações JavaScript como:
// Adicionar borda de flash em tempo real para uma notificação.
function addFlashEffect() {
const notification = document.querySelector('.notification');
notification.classList.toggle('flash-border');
}

// Exemplo: Adiciona o efeito flash 2 segundos após a página carregar.
setTimeout(addFlashEffect, 2000);
</script>

</body>
</html>

Ter Set 10, 2024 9:35 pm

Quadro de Notificações

Tópico Arquivado

Olá, Zaswes. A Administração do fórum informa que este tópico deixa de estar ativo e foi arquivado.
Você poderá reler o conteúdo, mas não poderá responder ou atualizá-lo.

Cordialmente, a Administração do Fórum.

Formulário Atualizado

Este formulário foi atualizado por: Seu Nickname.

Os requerimentos aprovados estão nas listagens. Caso veja algum erro, contate o(a) atualizador(a).

Atenciosamente, Recursos Humanos.

Requerimento Cancelado

O requerimento foi preenchido incorretamente, faltando informações primordiais ou com modelo errado.

Atenciosamente, Recursos Humanos.

// Aqui você pode adicionar interações JavaScript como:
// Adicionar borda de flash em tempo real para uma notificação.
function addFlashEffect() {
const notification = document.querySelector('.notification');
notification.classList.toggle('flash-border');
}

// Exemplo: Adiciona o efeito flash 2 segundos após a página carregar.
setTimeout(addFlashEffect, 2000);

Ter Set 10, 2024 9:40 pm

Tópico Arquivado

Olá, Zaswes. A Administração do fórum informa que este tópico deixa de estar ativo e foi arquivado.
Você poderá reler o conteúdo deste tópico, mas não poderá responder ou atualizá-lo.
[br][br]
Se tiver dúvidas, entre em contato com um administrador.
[br][br]
Cordialmente, a Administração do Fórum.

Ter Set 10, 2024 9:42 pm

Formulário Atualizado

Este formulário foi atualizado por Seu Nickname.
Os requerimentos aprovados estão nas listagens. Se houver algum erro, entre em contato com o(a) atualizador(a).
Atenciosamente, Setor Administrativo.

Meu primeiro tópico

Meu primeiro tópico

Re: Meu primeiro tópico

Re: Meu primeiro tópico

Re: Meu primeiro tópico

Re: Meu primeiro tópico

Re: Meu primeiro tópico

Re: Meu primeiro tópico

Re: Meu primeiro tópico