Skip to content

Commit cb29349

Browse files
b0aseb0ase
committed
Add proof of concept banner across the top of the site
Banner Features: - Clear 'PROOF OF CONCEPT' label with warning icon - Informative message about development status - Link to GitHub repository for contributions - Dismissible with close button (X) - Prominent orange gradient design for visibility - Smooth slide-down animation on load Layout Integration: - Fixed position at very top (z-index 20000) - Adjusts taskbar position to sit below banner - Updates all page padding to account for banner space - Mobile responsive design with proper spacing - Maintains proper layering with other UI elements Responsive Design: - Desktop: 48px height with full message - Mobile: 44px height with compact layout - Very small screens: 60px height for text wrapping - Proper spacing adjustments across all breakpoints The banner clearly communicates that this is a demonstration version while encouraging developer participation through the GitHub link.
1 parent f5e1dbf commit cb29349

File tree

8 files changed

+234
-6
lines changed

8 files changed

+234
-6
lines changed

‎frontend/src/App.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,25 @@ body {
88
background: linear-gradient(135deg, #E3F2FD 0%, #FFFFFF 50%, #E1F5FE 100%);
99
margin: 0;
1010
padding: 0;
11+
padding-top: 48px; /* Space for proof of concept banner */
1112
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
1213
-webkit-font-smoothing: antialiased;
1314
-moz-osx-font-smoothing: grayscale;
1415
min-height: 100vh;
1516
}
1617

18+
@media (max-width: 768px) {
19+
body {
20+
padding-top: 44px; /* Smaller banner on mobile */
21+
}
22+
}
23+
24+
@media (max-width: 480px) {
25+
body {
26+
padding-top: 60px; /* Account for text wrapping on very small screens */
27+
}
28+
}
29+
1730
.App {
1831
text-align: center;
1932
background: transparent;

‎frontend/src/App.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import ContributionsPage from './pages/ContributionsPage';
1919
import TasksPage from './pages/TasksPage';
2020
import ClaudeChat from './components/ClaudeChat';
2121
import SpreadsheetTaskbar from './components/SpreadsheetTaskbar';
22+
import ProofOfConceptBanner from './components/ProofOfConceptBanner';
2223
import SpreadsheetExchangeView from './components/SpreadsheetExchangeView';
2324
import InstallPrompt from './components/InstallPrompt';
2425
import { BitcoinService, SpreadsheetData } from './services/BitcoinService';
@@ -191,7 +192,9 @@ function App() {
191192
};
192193

193194
return (
194-
<Routes>
195+
<>
196+
<ProofOfConceptBanner />
197+
<Routes>
195198
<Route path="/bitcoin-spreadsheet" element={<BitcoinSpreadsheetPage />} />
196199
<Route path="/bap" element={<BapsPage />} />
197200
<Route path="/developers" element={<BapsPage />} /> {/* Keep for backwards compatibility */}
@@ -208,7 +211,7 @@ function App() {
208211
<div className="loading">Loading Bitcoin Spreadsheet...</div>
209212
</div>
210213
) : (
211-
<div className="App" style={{ paddingTop: isMobile ? '0' : '28px' }}>
214+
<div className="App" style={{ paddingTop: isMobile ? '0' : '76px' }}> {/* 48px banner + 28px taskbar */}
212215
{/* Bitcoin Spreadsheet Taskbar */}
213216
<SpreadsheetTaskbar
214217
isAuthenticated={isAuthenticated}
@@ -662,6 +665,7 @@ function App() {
662665
)
663666
} />
664667
</Routes>
668+
</>
665669
);
666670
}
667671

‎frontend/src/components/ProofOfConceptBanner.css‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
/* Proof of Concept Banner */
2+
.poc-banner {
3+
position: fixed;
4+
top: 0;
5+
left: 0;
6+
right: 0;
7+
z-index: 20000;
8+
background: linear-gradient(135deg, #FF6B35, #F7931E);
9+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
10+
display: flex;
11+
align-items: center;
12+
justify-content: space-between;
13+
padding: 12px 24px;
14+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
15+
animation: slideDown 0.3s ease-out;
16+
}
17+
18+
@keyframes slideDown {
19+
from {
20+
transform: translateY(-100%);
21+
opacity: 0;
22+
}
23+
to {
24+
transform: translateY(0);
25+
opacity: 1;
26+
}
27+
}
28+
29+
.poc-banner-content {
30+
display: flex;
31+
align-items: center;
32+
gap: 12px;
33+
flex: 1;
34+
}
35+
36+
.poc-banner-icon {
37+
color: #ffffff;
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
width: 24px;
42+
height: 24px;
43+
flex-shrink: 0;
44+
}
45+
46+
.poc-banner-text {
47+
display: flex;
48+
flex-direction: column;
49+
gap: 2px;
50+
color: #ffffff;
51+
}
52+
53+
.poc-banner-label {
54+
font-size: 12px;
55+
font-weight: 700;
56+
letter-spacing: 1px;
57+
text-transform: uppercase;
58+
line-height: 1;
59+
}
60+
61+
.poc-banner-message {
62+
font-size: 13px;
63+
font-weight: 400;
64+
line-height: 1.3;
65+
opacity: 0.95;
66+
}
67+
68+
.poc-banner-message a {
69+
color: #ffffff;
70+
text-decoration: underline;
71+
font-weight: 500;
72+
margin-left: 8px;
73+
transition: opacity 0.2s ease;
74+
}
75+
76+
.poc-banner-message a:hover {
77+
opacity: 0.8;
78+
}
79+
80+
.poc-banner-close {
81+
background: transparent;
82+
border: none;
83+
color: #ffffff;
84+
cursor: pointer;
85+
padding: 4px;
86+
border-radius: 4px;
87+
display: flex;
88+
align-items: center;
89+
justify-content: center;
90+
transition: all 0.2s ease;
91+
flex-shrink: 0;
92+
opacity: 0.8;
93+
}
94+
95+
.poc-banner-close:hover {
96+
background: rgba(255, 255, 255, 0.1);
97+
opacity: 1;
98+
}
99+
100+
.poc-banner-close:focus {
101+
outline: 2px solid rgba(255, 255, 255, 0.3);
102+
outline-offset: 2px;
103+
}
104+
105+
/* Mobile Responsive */
106+
@media (max-width: 768px) {
107+
.poc-banner {
108+
padding: 10px 16px;
109+
}
110+
111+
.poc-banner-content {
112+
gap: 8px;
113+
}
114+
115+
.poc-banner-text {
116+
gap: 1px;
117+
}
118+
119+
.poc-banner-label {
120+
font-size: 11px;
121+
}
122+
123+
.poc-banner-message {
124+
font-size: 12px;
125+
}
126+
127+
.poc-banner-message a {
128+
margin-left: 4px;
129+
}
130+
}
131+
132+
@media (max-width: 480px) {
133+
.poc-banner {
134+
padding: 8px 12px;
135+
}
136+
137+
.poc-banner-text {
138+
flex-direction: row;
139+
align-items: center;
140+
gap: 8px;
141+
flex-wrap: wrap;
142+
}
143+
144+
.poc-banner-label {
145+
font-size: 10px;
146+
}
147+
148+
.poc-banner-message {
149+
font-size: 11px;
150+
}
151+
}
152+
153+
/* Adjustments for when banner is present */
154+
.poc-banner-active {
155+
padding-top: 48px;
156+
}
157+
158+
@media (max-width: 768px) {
159+
.poc-banner-active {
160+
padding-top: 44px;
161+
}
162+
}
163+
164+
@media (max-width: 480px) {
165+
.poc-banner-active {
166+
padding-top: 60px; /* More space on very small screens due to text wrapping */
167+
}
168+
}

‎frontend/src/components/ProofOfConceptBanner.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, { useState } from 'react';
2+
import './ProofOfConceptBanner.css';
3+
4+
const ProofOfConceptBanner: React.FC = () => {
5+
const [isVisible, setIsVisible] = useState(true);
6+
7+
if (!isVisible) return null;
8+
9+
return (
10+
<div className="poc-banner">
11+
<div className="poc-banner-content">
12+
<div className="poc-banner-icon">
13+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
14+
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
15+
<line x1="12" y1="9" x2="12" y2="13"/>
16+
<line x1="12" y1="17" x2="12.01" y2="17"/>
17+
</svg>
18+
</div>
19+
<div className="poc-banner-text">
20+
<span className="poc-banner-label">PROOF OF CONCEPT</span>
21+
<span className="poc-banner-message">
22+
This is a demonstration version. Features are under active development.
23+
<a href="https://github.com/bitcoin-apps-suite/bitcoin-spreadsheet" target="_blank" rel="noopener noreferrer">
24+
Contribute on GitHub
25+
</a>
26+
</span>
27+
</div>
28+
</div>
29+
<button
30+
className="poc-banner-close"
31+
onClick={() => setIsVisible(false)}
32+
aria-label="Close banner"
33+
>
34+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
35+
<line x1="18" y1="6" x2="6" y2="18"/>
36+
<line x1="6" y1="6" x2="18" y2="18"/>
37+
</svg>
38+
</button>
39+
</div>
40+
);
41+
};
42+
43+
export default ProofOfConceptBanner;

‎frontend/src/components/SpreadsheetTaskbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -533,7 +533,7 @@ const SpreadsheetTaskbar: React.FC<TaskbarProps> = ({
533533
color: '#ffffff',
534534
userSelect: 'none',
535535
position: 'fixed',
536-
top: 0,
536+
top: 48, // Account for proof of concept banner
537537
left: 0,
538538
right: 0,
539539
zIndex: 10000

‎frontend/src/pages/ContributionsPage.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
min-height: 100vh;
66
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
77
position: relative;
8-
padding-top: 28px;
8+
padding-top: 76px; /* 48px banner + 28px taskbar */
99
}
1010

1111
/* Header Links */

‎frontend/src/pages/DocsPage.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
color: #ffffff;
55
min-height: 100vh;
66
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
7-
padding-top: 28px;
7+
padding-top: 76px; /* 48px banner + 28px taskbar */
88
}
99

1010
.docs-container {

‎frontend/src/pages/TasksPage.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
min-height: 100vh;
66
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
77
position: relative;
8-
padding-top: 28px;
8+
padding-top: 76px; /* 48px banner + 28px taskbar */
99
}
1010

1111
/* Header Links */

0 commit comments

Comments
 (0)