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;
+}