stylish ai sloop

6 months ago · 7a4bc2dcae
5 changed files with 132 additions and 5 deletions
--- a/pipboyUI/dist/pipboy-ui/index.html
+++ b/pipboyUI/dist/pipboy-ui/index.html
--- a/pipboyUI/dist/pipboy-ui/styles.1b3f163117c989c8.css
+++ b/pipboyUI/dist/pipboy-ui/styles.1b3f163117c989c8.css
--- a/pipboyUI/src/index.html
+++ b/pipboyUI/src/index.html
@ -10,7 +10,8 @@
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="crt-screen">
  <div class="scanline"></div>
  <app-root></app-root>
 </body>
 </html>
--- a/pipboyUI/src/styles.scss
+++ b/pipboyUI/src/styles.scss
@ -1,4 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
@import "styles/crt";
@font-face {
  font-family: 'RobotoTodd';
@ -25,7 +26,7 @@ $primary-color: rgb(0, 242, 0);
 $secondary-color: rgb(0 242 0 / 30%);
 $screen-width: 460px;
-html, body { height: 320px; width: $screen-width; background-color: black }
+html, body { height: 308px; width: $screen-width; background-color: black }
 body {
  margin: 0;
  font-family: RobotoTodd, "Helvetica Neue", sans-serif;
--- a/pipboyUI/src/styles/crt.scss
+++ b/pipboyUI/src/styles/crt.scss
@ -0,0 +1,124 @@
 $z-main: 20000;
 $z-scanline: 10000;
 .crt-screen {
  position: relative;
  background: #001100; /* Тёмно-зелёный фон */
  color: #00ff00; /* Ярко-зелёный текст */
  overflow: hidden;
 }
 .crt-screen::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
      rgba(18, 16, 16, 0) 50%,
      rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 4px;
  z-index: $z-main;
  pointer-events: none;
 }
 .crt-screen::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 255, 0, 0.05);
  opacity: 0.1;
  z-index: $z-main;
  pointer-events: none;
  animation: flicker 0.15s infinite;
 }
 /* Эффект виньетирования */
 .crt-screen {
  box-shadow:
    inset 0 0 60px rgba(0, 255, 0, 0.1),
    inset 0 0 100px rgba(0, 20, 0, 0.8),
    inset 0 0 150px rgba(0, 10, 0, 0.9);
 }
 /* Эффект сканирования */
 .scanline {
  width: 100%;
  height: 100px;
  background: linear-gradient(
      0deg,
      rgba(0, 255, 0, 0) 0%,
      rgba(0, 255, 0, 0.1) 50%,
      rgba(0, 255, 0, 0) 100%
  );
  position: absolute;
  animation: scan 8s linear infinite;
  z-index: $z-scanline;
  pointer-events: none;
 }
 /* Свечение для текста */
 .crt-text {
  text-shadow:
    0 0 5px #00ff00,
    0 0 10px #00ff00,
    0 0 15px #00ff00;
 }
 /* Эффект мерцания */
@keyframes flicker {
  0% { opacity: 0.1; }
  5% { opacity: 0.1; }
  10% { opacity: 0.2; }
  15% { opacity: 0.1; }
  20% { opacity: 0.3; }
  25% { opacity: 0.1; }
  30% { opacity: 0.2; }
  35% { opacity: 0.1; }
  40% { opacity: 0.25; }
  45% { opacity: 0.1; }
  50% { opacity: 0.15; }
  55% { opacity: 0.1; }
  60% { opacity: 0.2; }
  65% { opacity: 0.1; }
  70% { opacity: 0.3; }
  75% { opacity: 0.1; }
  80% { opacity: 0.25; }
  85% { opacity: 0.1; }
  90% { opacity: 0.2; }
  95% { opacity: 0.1; }
  100% { opacity: 0.15; }
 }
 /* Движение сканирующей линии */
@keyframes scan {
  0% {
    top: -100px;
  }
  100% {
    top: 100%;
  }
 }
 /* Дополнительные эффекты для контента */
 .crt-screen img,
 .crt-screen video {
  filter:
    contrast(1.2)
    brightness(0.8)
    hue-rotate(90deg)
    saturate(0.5);
 }
 /* Эффект кривизны экрана (опционально) */
 .crt-curve {
  transform: perspective(500px) rotateX(2deg);
  transform-origin: center top;
 }