Всё, что важно знать сотруднику Департамента: обновления правил, запуск новых проектов, технические работы и прочая оперативная информация. Следите за новостями, чтобы быть в курсе событий.
Новости
Сообщений 1 страница 2 из 2
Поделиться2Вчера 12:17:42
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ReapNote Уведомление</title>
<style>
/* Минимизированные стили для лучшей производительности */
.reap-notification {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
background: linear-gradient(145deg, #f8f8f8, #e8e8e8);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
border-left: 5px solid #8a8a8a;
max-width: 100%;
margin: 15px auto;
color: #333;
}
.reap-header {
background-color: #f0f0f0;
padding: 15px 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid #ddd;
}
.reap-logo {
display: flex;
align-items: center;
margin-right: 15px;
}
.reap-logo-icon {
font-size: 22px;
margin-right: 10px;
color: #666;
}
.reap-logo-text {
font-weight: 700;
color: #444;
font-size: 18px;
}
.reap-time {
margin-left: auto;
font-size: 13px;
color: #777;
background: #e8e8e8;
padding: 4px 8px;
border-radius: 15px;
}
.reap-content {
padding: 20px;
}
.reap-notification-type {
display: inline-block;
background-color: #a5a5a5;
color: #fff;
font-size: 12px;
padding: 4px 10px;
border-radius: 4px;
margin-bottom: 15px;
text-transform: uppercase;
}
.reap-title {
margin-top: 0;
color: #444;
font-size: 20px;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
font-weight: 700;
}
.reap-text {
font-size: 15px;
line-height: 1.5;
color: #555;
margin-bottom: 15px;
}
.reap-details {
background-color: #f0f0f0;
padding: 12px;
border-radius: 6px;
margin: 15px 0;
font-size: 14px;
border-left: 3px solid #aaa;
}
.reap-footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #ddd;
gap: 10px;
}
.reap-button {
background-color: #e0e0e0;
color: #555;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
transition: background-color 0.2s;
flex: 1;
min-width: 120px;
}
.reap-button:hover {
background-color: #d0d0d0;
}
.reap-button.primary {
background-color: #8a8a8a;
color: #fff;
}
.reap-button.primary:hover {
background-color: #7a7a7a;
}
.reap-urgent {
color: #6a6a6a;
font-weight: 700;
background: #f0f0f0;
padding: 2px 5px;
border-radius: 3px;
}
.reap-priority {
display: inline-flex;
align-items: center;
background: #f0f0f0;
padding: 4px 10px;
border-radius: 15px;
margin-top: 12px;
font-size: 13px;
}
.reap-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
}
.reap-tag {
background: #e8e8e8;
padding: 3px 8px;
border-radius: 12px;
font-size: 11px;
color: #666;
}
/* Символика */
.reap-notification {
position: relative;
overflow: hidden;
}
.reap-notification::before, .reap-notification::after {
content: "†";
position: absolute;
opacity: 0.03;
z-index: 0;
color: #555;
font-size: 120px;
pointer-events: none;
}
.reap-notification::before {
top: -30px;
right: -20px;
}
.reap-notification::after {
bottom: -40px;
left: -20px;
transform: rotate(45deg);
}
/* Адаптивность */
@media (max-width: 480px) {
.reap-header {
padding: 12px 15px;
}
.reap-content {
padding: 15px;
}
.reap-title {
font-size: 18px;
}
.reap-logo-text {
font-size: 16px;
}
.reap-button {
min-width: 100px;
padding: 7px 12px;
}
}
</style>
</head>
<body>
<div class="reap-notification">
<div class="reap-header">
<div class="reap-logo">
<span class="reap-logo-icon">☠</span>
<span class="reap-logo-text">ReapNote</span>
</div>
<div class="reap-time">12:17</div>
</div>
<div class="reap-content">
<span class="reap-notification-type">Системное уведомление</span>
<h2 class="reap-title">Добро пожаловать!</h2>
<p class="reap-text">Уважаемые сотрудники Департамента,</p>
<p class="reap-text">Рады сообщить, что основной функционал Департамента переведён в режим штатной эксплуатации. К сбору душ можно приступать.</p>
<p class="reap-text"><b>ТЕКУЩИЙ СТАТУС СИСТЕМЫ:</b></p>
<p class="reap-text"><b>БАЗА ДАННЫХ ДУШ:</b> Онлайн, доступна для поиска и внесения записей.</p>
<p class="reap-text"><b>НАВИГАЦИЯ И КАРТЫ:</b> Активны. Координаты смертных определяются без сбоев.</p>
<p class="reap-text"><b>МОДУЛЬ ОТЧЁТНОСТИ:</b> Форма №F-666 доступна для заполнения.</p>
<p class="reap-text"><b>МЕЛКИЕ ТЕХНИЧЕСКИЕ РАБОТЫ:</b> Ведётся настройка второстепенных сервисов:</p>
<p class="reap-text">★ Оптимизация каналов связи между мирами.<br>
★ Повышение стабильности порталов в часы пиковой нагрузки.<br>
★ Калибровка датчиков определения причины смерти.</p>
<p class="reap-text">Это <span class="reap-urgent">НЕ</span> влияет на вашу основную деятельность.</p>
<div class="reap-details">
<strong>Рекомендации для персонала:</strong><br>
- В случае обнаружения аномалий в работе системы немедленно составляйте «Акт о техническом сбое» и направляйте в отдел IT-поддержки.<br>
- Не пытайтесь перезагружать серпы самостоятельно. Обо всех неисправностях инструментария сообщайте своему непосредственному руководителю.<br>
- Следите за дальнейшими уведомлениями в данном разделе.
</div>
<p class="reap-text"><i>Благодарим за проявленное понимание. Удачной смены.</i></p>
<div class="reap-priority">
<span>☠</span> Приоритет: Средний
</div>
<div class="reap-tags">
<span class="reap-tag">Технические работы</span>
<span class="reap-tag">Уведомление</span>
<span class="reap-tag">Департамент</span>
</div>
<div class="reap-footer">
<button class="reap-button">Отложить</button>
<button class="reap-button primary">Подтвердить прочтение</button>
</div>
</div>
</div>
</body>
</html>[/html]