auction_center/app/views/common/_webpush_modal.html.erb at fc775d7c2144d22fdcb4258cfc82c4891ec8f706 · internetee/auction_center · 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
<div class="webpush-modal" data-turbo-temporary>
  <div class="webpush-modal__content">
    <button class="webpush-modal__close" data-action="click->push-notification#close">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
    </button>
    <div class="webpush-modal__icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
    </div>
    <h2 class="webpush-modal__title"><%= t('.webpush_title') %></h2>
    <p class="webpush-modal__description"><%= t('.webpush_descr') %></p>
    <div class="webpush-modal__buttons">
      <button class="webpush-modal__button webpush-modal__button--decline" data-action="push-notification#decline"><%= t('.webpush_decline') %></button>
      <button class="webpush-modal__button webpush-modal__button--accept" data-action="push-notification#setupPushNotifications"><%= t('.webpush_agree') %></button>
    </div>
  </div>
</div>

<style>
  .webpush-modal {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 360px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    animation: slideIn 0.3s ease forwards;
  }

  @keyframes slideIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .webpush-modal__content {
    padding: 24px;
  }

  .webpush-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #9ca3af;
    transition: color 0.2s ease;
  }

  .webpush-modal__close:hover {
    color: #6b7280;
  }

  .webpush-modal__close svg {
    width: 20px;
    height: 20px;
  }

  .webpush-modal__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background-color: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .webpush-modal__icon svg {
    width: 24px;
    height: 24px;
    color: #ffffff;
  }

  .webpush-modal__title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px;
    text-align: center;
  }

  .webpush-modal__description {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 24px;
    text-align: center;
    line-height: 1.5;
  }

  .webpush-modal__buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
  }

  .webpush-modal__button {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .webpush-modal__button--decline {
    background-color: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
  }

  .webpush-modal__button--decline:hover {
    background-color: #e5e7eb;
  }

  .webpush-modal__button--accept {
    background-color: #3b82f6;
    color: #ffffff;
    border: none;
  }

  .webpush-modal__button--accept:hover {
    background-color: #2563eb;
  }
</style>