Hugging Face's logo

Spaces:
vvnhung99
/
gemini3hackathon-oppy
Sleeping

App Files Community
gemini3hackathon-oppy
File size: 3,948 Bytes
0d37119
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
export default function Header({ scanProgress, scanPhase, authenticated, oauthAvailable, onLogin, onLogout }) {
  return (
    <header style={{
      padding: '24px 32px',
      borderBottom: '1px solid var(--border)',
    }}>
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}>
        <div>
          <h1 style={{
            fontSize: '28px',
            fontWeight: 700,
            color: 'var(--green)',
            letterSpacing: '4px',
          }}>
            &#9632; OPERATOR
          </h1>
          <p style={{
            fontSize: '12px',
            color: 'var(--text-dim)',
            marginTop: '4px',
            fontStyle: 'italic',
          }}>
            The AI Agent That Works While You Talk.
          </p>
        </div>
        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
          {oauthAvailable && (
            <>
              <span style={{
                fontSize: '11px',
                color: authenticated ? 'var(--green)' : 'var(--text-dim)',
                display: 'flex',
                alignItems: 'center',
                gap: '6px',
              }}>
                <span style={{
                  width: '8px',
                  height: '8px',
                  borderRadius: '50%',
                  background: authenticated ? 'var(--green)' : 'var(--text-dim)',
                  display: 'inline-block',
                }} />
                {authenticated ? 'GOOGLE CONNECTED' : 'DEMO MODE'}
              </span>
              <button
                onClick={authenticated ? onLogout : onLogin}
                style={{
                  background: 'transparent',
                  color: authenticated ? 'var(--text-dim)' : '#4285F4',
                  border: `1px solid ${authenticated ? 'var(--border)' : '#4285F4'}`,
                  padding: '8px 16px',
                  fontFamily: 'inherit',
                  fontSize: '11px',
                  fontWeight: 700,
                  cursor: 'pointer',
                  letterSpacing: '1px',
                  transition: 'all 0.2s',
                }}
              >
                {authenticated ? 'DISCONNECT' : 'CONNECT GOOGLE'}
              </button>
            </>
          )}
          {scanProgress > 0 && scanProgress < 100 && (
            <span style={{
              fontSize: '12px',
              color: 'var(--green)',
              letterSpacing: '2px',
              fontWeight: 700,
              animation: 'pulse 1.5s infinite',
            }}>
              SCANNING...
            </span>
          )}
        </div>
      </div>

      {/* Progress bar */}
      {scanProgress > 0 && scanProgress < 100 && (
        <div style={{ marginTop: '16px' }}>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginBottom: '6px',
          }}>
            <span style={{
              fontSize: '11px',
              color: 'var(--text-dim)',
              letterSpacing: '1px',
            }}>
              {scanPhase}
            </span>
            <span style={{
              fontSize: '11px',
              color: 'var(--text-dim)',
              fontVariantNumeric: 'tabular-nums',
            }}>
              {scanProgress}%
            </span>
          </div>
          <div style={{
            width: '100%',
            height: '6px',
            background: '#1a1a1a',
            borderRadius: '3px',
            overflow: 'hidden',
          }}>
            <div style={{
              width: `${scanProgress}%`,
              height: '100%',
              background: 'linear-gradient(90deg, var(--green), #00cc6a)',
              borderRadius: '3px',
              boxShadow: '0 0 8px rgba(0, 255, 136, 0.4)',
            }} />
          </div>
        </div>
      )}
    </header>
  );
}