Hugging Face's logo

Spaces:
Aarav13
/
AuthriX
Sleeping

App Files Community
AuthriX
File size: 3,368 Bytes
70348ce
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
import styled from 'styled-components';

interface AnalyzeButtonProps {
  onClick: () => void;
}

const StyledWrapper = styled.div`
  .button {
    --main-size: 1.1em;
    --color-text: #ffffff;
    --color-background: #7c3aed;
    --color-background-hover: #a855f7;
    --color-outline: rgba(168, 85, 247, 0.25);
    --color-shadow: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border: none;
    border-radius: calc(var(--main-size) * 100);
    padding: 0.45em 0 0.45em 0.9em;
    font-family: 'Space Grotesk', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: var(--main-size);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text);
    background: var(--color-background);
    box-shadow: 0 0 0.3em 0 var(--color-background);
    transition: 1s;
  }

  .button:active {
    transform: scale(0.95);
  }

  .button:hover {
    outline: 0.1em solid transparent;
    outline-offset: 0.2em;
    box-shadow: 0 0 1.2em 0 var(--color-background);
    animation: ripple 1s linear infinite, colorize 1s infinite;
    transition: 0.5s;
  }

  .button span {
    margin-right: 0.3em;
    transition: 0.5s;
  }

  .button:hover span {
    text-shadow: 5px 5px 5px var(--color-shadow);
  }

  .button:active span {
    text-shadow: none;
  }

  .button svg {
    height: 0.8em;
    fill: var(--color-text);
    margin-right: -0.16em;
    position: relative;
    transition: 0.5s;
  }

  .button:hover svg {
    margin-right: 0.66em;
    transition: 0.5s;
    filter: drop-shadow(5px 5px 2.5px var(--color-shadow));
  }

  .button:active svg {
    filter: none;
  }

  .button svg polygon:nth-child(1) {
    transition: 0.4s;
    transform: translateX(-60%);
  }

  .button svg polygon:nth-child(2) {
    transition: 0.5s;
    transform: translateX(-30%);
  }

  .button:hover svg polygon:nth-child(1) {
    transform: translateX(0%);
    animation: opacity 1s infinite 0.6s;
  }

  .button:hover svg polygon:nth-child(2) {
    transform: translateX(0%);
    animation: opacity 1s infinite 0.4s;
  }

  .button:hover svg polygon:nth-child(3) {
    animation: opacity 1s infinite 0.2s;
  }

  @keyframes opacity {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes colorize {
    0%   { background: var(--color-background); }
    50%  { background: var(--color-background-hover); }
    100% { background: var(--color-background); }
  }

  @keyframes ripple {
    0%   { outline: 0em solid transparent;              outline-offset: -0.1em; }
    50%  { outline: 0.2em solid var(--color-outline);   outline-offset: 0.2em; }
    100% { outline: 0.4em solid transparent;            outline-offset: 0.4em; }
  }
`;

export default function AnalyzeButton({ onClick }: AnalyzeButtonProps) {
  return (
    <StyledWrapper>
      <button className="button" onClick={onClick}>
        <span>ANALYZE VIDEO</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 43">
          <polygon points="39.58,4.46 44.11,0 66,21.5 44.11,43 39.58,38.54 56.94,21.5" />
          <polygon points="19.79,4.46 24.32,0 46.21,21.5 24.32,43 19.79,38.54 37.15,21.5" />
          <polygon points="0,4.46 4.53,0 26.42,21.5 4.53,43 0,38.54 17.36,21.5" />
        </svg>
      </button>
    </StyledWrapper>
  );
}