HackingTerminal/style.css at main · abhiii9vvv/HackingTerminal · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
/* Body ki styling - poore page ko affect karti hai */
body {
  background: black; /* Background color black - hacker jaise dark theme */
  color: #00ff88; /* Text color green - hacker terminal jaisa color */
  font-family: Monospace; /* Monospace font - terminal jaisa dikhta hai, sabhi letters same width ke */
  padding: 20px; /* Charo taraf se 20px ki spacing - edges se content door */
  margin: 0;
  overflow: hidden;
  position: relative;
  min-height: 100vh;
}

/* Container ko relative position dena for logo */
.container{
  position: relative;
  min-height: 80vh;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 255, 136, 0.08) 0%,
    /* Top pe halka green */ rgba(0, 0, 0, 0.5) 50%,
    /* Middle me dark */ rgba(0, 255, 136, 0.08) 100%
  );
  animation: scanline 8s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

body::after {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: radial-gradient(
    rgba(0, 255, 136, 0.2) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
  pointer-events: none;
  z-index: -1;
}

/* Terminal element ki styling - ID selector hai (#) */
#terminal {
  max-width: 600px; /* Maximum width 600px - zyada bada nahi hoga */
  white-space: pre-line; /* Line breaks maintain karta hai, spacing preserve karta hai */
  position: relative;
  z-index: 1;
  text-shadow: 0 0 5px #00ff88, /* Chhoti green shadow */ 0 0 10px #00ff88,
    /* Medium green shadow */ 0 0 20px #00ff88;
    animation: textGlow 2s ease-in-out infinite alternate;
}

/* Hacker logo - center me background me light lines se bana */
.container::before{
  content: '⚠';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 200px;
  color: rgba(0, 255, 136, 0.05);
  z-index: 0;
  pointer-events: none;
  font-family: monospace;
}

@keyframes textGlow{
  from{
    text-shadow:
      0 0 5px #00ff88,
      0 0 10px #00ff88,
      0 0 20px #00ff88;
  }
  to{
    text-shadow:
      0 0 10px #00ff88,
      0 0 20px #00ff88,
      0 0 30px #00ff88,
      0 0 40px #00ff88;
  }
}

/* Cursor ki styling - ::after pseudo-element use kar rahe hain */
.cursor::after {
  content: "_"; /* Underscore character cursor ki tarah dikhta hai */
  animation: blink 1s infinite; /* Blink animation - 1 second ki, hamesha chalti rahegi */
}

/* Blink animation define kar rahe hain - cursor on/off hoga */
@keyframes blink {
  0%,
  50%,
  100% {
    /* 0%, 50% aur 100% pe - cursor visible hai */
    opacity: 1; /* Fully visible - opacity 1 */
  }
  25%,
  75% {
    /* 25% aur 75% pe - cursor invisible hai */
    opacity: 0; /* Completely hidden - opacity 0 */
  }
}

.watermark{
    position: fixed;
    bottom: 10px;
    right: 10px;
    color: rgba(0, 255, 136, 0.3);
    font-size: 12px;
    font-family: monospace;
    z-index: 100;
    text-shadow: 0 0 5px #00ff88;
    pointer-events: none;
}
.watermark:hover{
    color: rgba(0, 255, 136, 0.6);
}