Skip to content

Commit 8bdd6ec

Browse files
neSpeccneSpecc
committed
alerts
1 parent 2c2450a commit 8bdd6ec

15 files changed

Lines changed: 630 additions & 184 deletions

‎.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,6 @@ module.exports = {
1111
],
1212
rules: {
1313
'jsdoc/require-returns': 'off',
14+
'no-irregular-whitespace': 'off',
1415
},
1516
};

‎assets/images/alerts-bg.png‎

248 KB
Loading

‎assets/images/check-features.png‎

6.19 KB
Loading

‎assets/images/telemetry.png‎

133 KB
Loading

‎assets/images/tg-message-corner.png‎

735 Bytes
Loading

‎assets/styles/variables.pcss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
:root {
88
--color-bg-main: #000000;
99
--color-bg-secondary: #101010;
10+
--color-bg-third: #080808;
1011
--color-bg-popover: #231E30;
1112

1213
--color-text-main: #ffffff;
@@ -30,6 +31,7 @@
3031

3132

3233
--color-separator: rgba(255, 255, 255, 0.12);
34+
--color-separator-island: #171717;
3335

3436
--layout-block-inner-container-width: 1520px;
3537
--layout-content-container-width: 1024px;

‎components/feature/alerts.vue‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<template>
2+
<div class="feature-alerts">
3+
<FeatureTitle
4+
title="Алерты"
5+
description="Получайте уведомления о проблемах в ПО на почту, в Telegram или Slack"
6+
centered
7+
/>
8+
9+
<div ref="elementRef" class="tg-message" :class="{ 'tg-message--visible': isVisible }">
10+
<div class="tg-message__avatar">
11+
<img src="~/assets/images/hawk-logo.png" aria-hidden="true">
12+
</div>
13+
14+
<div class="tg-message__content">
15+
<div class="tg-message__title">
16+
Hawk
17+
</div>
18+
19+
<span class="tg-message__text">
20+
null is not an object (evaluating 'e.payload')
21+
</span>
22+
23+
<div class="tg-message__code">
24+
<pre>11: const e = event;
25+
12:→ payload = e.payload;
26+
13: if (payload.user.isPaid)</pre>
27+
</div>
28+
29+
<span class="tg-message__text">
30+
<span class="tg-message__link">View Details</span>
31+
| Hawk Web [Prod] | 5 new
32+
</span>
33+
<span class="tg-message__time">
34+
17:09
35+
</span>
36+
</div>
37+
</div>
38+
</div>
39+
</template>
40+
41+
<script lang="ts" setup>
42+
import { useIntersectionObserver } from '~/composables/useIntersectionObserver';
43+
44+
const { isVisible, elementRef } = useIntersectionObserver({
45+
threshold: 0.3,
46+
rootMargin: '0px 0px -50px 0px',
47+
});
48+
</script>
49+
50+
<style lang="pcss">
51+
.feature-alerts {
52+
--padding: var(--layout-paddings-horisontal);
53+
54+
padding: 35px var(--padding) var(--padding) var(--padding);
55+
background-image: url('~/assets/images/alerts-bg.png');
56+
background-size: 150%;
57+
height: 100%;
58+
display: flex;
59+
flex-direction: column;
60+
justify-content: space-between;
61+
}
62+
63+
/* Animation keyframes for message appearance */
64+
@keyframes messageSlideIn {
65+
from {
66+
opacity: 0;
67+
transform: translateY(50px) scaleX(0.8);
68+
}
69+
to {
70+
opacity: 1;
71+
transform: none;
72+
}
73+
}
74+
75+
.tg-message {
76+
display: flex;
77+
flex-direction: row;
78+
gap: 12px;
79+
opacity: 0;
80+
transform: translateY(50px) scaleX(0.8);
81+
will-change: transform, opacity;
82+
83+
&--visible {
84+
animation: messageSlideIn 0.4s cubic-bezier(.25,1.3,.86,1.07) forwards;
85+
}
86+
87+
&__avatar {
88+
width: 40px;
89+
height: 40px;
90+
flex-shrink: 0;
91+
align-self: flex-end;
92+
border-radius: 50%;
93+
overflow: hidden;
94+
background-color: var(--color-bg-third);
95+
display: flex;
96+
align-items: center;
97+
justify-content: center;
98+
background-color: #595D6F;
99+
100+
img {
101+
width: 66%;
102+
transform: translateX(1px);
103+
104+
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
105+
transform: none;
106+
}
107+
}
108+
}
109+
110+
&__content {
111+
position: relative;
112+
display: flex;
113+
flex-direction: column;
114+
gap: 3px;
115+
background-color: var(--color-bg-secondary);
116+
border-radius: 10px;
117+
padding: 10px 14px 20px 14px;
118+
font-size: 12px;
119+
color: var(--color-text-main);
120+
border: 1px solid #222222;
121+
122+
/* Add rounded outer bubble corner at left-bottom */
123+
&::before {
124+
content: '';
125+
position: absolute;
126+
left: -10px;
127+
bottom: -1.8px;
128+
width: 16.2px;
129+
height: 16.83px;
130+
background-image: url('~/assets/images/tg-message-corner.png');
131+
background-size: 100%;
132+
background-repeat: no-repeat;
133+
background-position: center;
134+
135+
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
136+
left: -10.5px;
137+
}
138+
}
139+
}
140+
141+
&__title {
142+
color: #AC60FD;
143+
font-weight: 800;
144+
}
145+
146+
&__code {
147+
font-size: 12px;
148+
color: var(--color-text-third);
149+
font-family: var(--font-mono);
150+
background-color: #171717;
151+
padding: 3px 6px;
152+
border-radius: 4px;
153+
margin: 4px 0;
154+
}
155+
156+
&__link {
157+
color: #3184E2;
158+
text-decoration: underline;
159+
}
160+
161+
&__time {
162+
color: var(--color-text-third);
163+
font-style: italic;
164+
font-size: 11px;
165+
position: absolute;
166+
right: 14px;
167+
bottom: 4px;
168+
}
169+
}
170+
</style>

‎components/feature/telemetry.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<div class="feature-telemetry">
3+
<FeatureTitle
4+
title="Телеметрия"
5+
description="Будьте в курсе того, что происходит в рантайме"
6+
/>
7+
8+
<div class="feature-telemetry__image-wrapper">
9+
<div class="feature-telemetry__image">
10+
<img src="~/assets/images/telemetry.png" alt="Телеметрия">
11+
</div>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script lang="ts" setup>
17+
18+
</script>
19+
20+
<style lang="pcss">
21+
.feature-telemetry {
22+
--padding: var(--layout-paddings-horisontal);
23+
--image-width: 370px;
24+
--image-height: 267px;
25+
26+
padding: 53px calc(var(--image-width) + 10px) var(--padding) var(--padding);
27+
position: relative;
28+
height: var(--image-height);
29+
box-sizing: content-box;
30+
display: flex;
31+
align-items: flex-end;
32+
33+
&__image-wrapper {
34+
position: absolute;
35+
bottom: 0;
36+
right: 0;
37+
border-radius: 7px 0 0 0;
38+
39+
&::before {
40+
content: '';
41+
position: absolute;
42+
top: -1px;
43+
left: -1px;
44+
z-index: 1;
45+
width: calc(100% + 2px);
46+
height: calc(100% + 2px);
47+
background: linear-gradient(129deg, #3b3f4b, #3e3e43);
48+
49+
border-radius: 7px 0 0 0;
50+
}
51+
}
52+
53+
&__image {
54+
width: var(--image-width);
55+
height: var(--image-height);
56+
object-fit: cover;
57+
border-radius: 7px 0 0 0;
58+
overflow: hidden;
59+
60+
img {
61+
width: 118%;
62+
z-index: 2;
63+
position: relative;
64+
border-radius: 7px 0 0 0;
65+
}
66+
}
67+
}
68+
</style>

‎components/feature/title.vue‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<template>
2+
<div class="feature-title" :class="{ 'feature-title--centered': centered }">
3+
<h2>
4+
{{ title }}
5+
</h2>
6+
7+
<p class="feature-title__description">
8+
{{ description }}
9+
</p>
10+
</div>
11+
</template>
12+
13+
<script lang="ts">
14+
import Vue from 'vue';
15+
16+
export default Vue.extend({
17+
props: {
18+
title: {
19+
type: String,
20+
required: true,
21+
},
22+
23+
description: {
24+
type: String,
25+
required: true,
26+
},
27+
28+
centered: {
29+
type: Boolean,
30+
default: false,
31+
},
32+
},
33+
});
34+
</script>
35+
36+
<style lang="pcss">
37+
.feature-title {
38+
display: flex;
39+
flex-direction: column;
40+
gap: 12px;
41+
42+
&--centered {
43+
align-items: center;
44+
text-align: center;
45+
}
46+
47+
h2 {
48+
font-size: 20px;
49+
line-height: 1.2;
50+
font-weight: bold;
51+
color: var(--color-text-main);
52+
}
53+
54+
&__description {
55+
font-size: 14px;
56+
color: var(--color-text-secondary);
57+
line-height: 20px;
58+
}
59+
}
60+
</style>

0 commit comments

Comments
 (0)