Import source: src/App
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
+184
@@ -0,0 +1,184 @@
|
|||||||
|
.counter {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: var(--accent);
|
||||||
|
background: var(--accent-bg);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--accent-border);
|
||||||
|
}
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.base,
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
inset-inline: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.base {
|
||||||
|
width: 170px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework {
|
||||||
|
z-index: 1;
|
||||||
|
top: 34px;
|
||||||
|
height: 28px;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||||
|
scale(1.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vite {
|
||||||
|
z-index: 0;
|
||||||
|
top: 107px;
|
||||||
|
height: 26px;
|
||||||
|
width: auto;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||||
|
scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
place-content: center;
|
||||||
|
place-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 32px 20px 24px;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
flex: 1 1 0;
|
||||||
|
padding: 32px;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 24px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#docs {
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 32px 0 0;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--text-h);
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--social-bg);
|
||||||
|
display: flex;
|
||||||
|
padding: 6px 12px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: box-shadow 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
.button-icon {
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
margin-top: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
li {
|
||||||
|
flex: 1 1 calc(50% - 8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#spacer {
|
||||||
|
height: 88px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticks {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -4.5px;
|
||||||
|
border: 5px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: 0;
|
||||||
|
border-left-color: var(--border);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
right: 0;
|
||||||
|
border-right-color: var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
+138
@@ -0,0 +1,138 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { ThemeProvider } from './context/ThemeContext';
|
||||||
|
import { QRProvider } from './context/QRContext';
|
||||||
|
import { ToastProvider } from './context/ToastContext';
|
||||||
|
import { HistoryProvider } from './context/HistoryContext';
|
||||||
|
import { Navbar } from './components/Navbar/Navbar';
|
||||||
|
import { LeftPanel } from './components/LeftPanel/LeftPanel';
|
||||||
|
import { CenterPanel } from './components/CenterPanel/CenterPanel';
|
||||||
|
import { RightPanel } from './components/RightPanel/RightPanel';
|
||||||
|
|
||||||
|
type MobileTab = 'types' | 'preview' | 'style';
|
||||||
|
|
||||||
|
const TABS: { key: MobileTab; label: string; icon: React.ReactNode }[] = [
|
||||||
|
{
|
||||||
|
key: 'types', label: 'Type',
|
||||||
|
icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><rect x="2" y="2" width="8" height="8" rx="2" stroke="currentColor" strokeWidth="1.7"/><rect x="12" y="2" width="8" height="8" rx="2" stroke="currentColor" strokeWidth="1.7"/><rect x="2" y="12" width="8" height="8" rx="2" stroke="currentColor" strokeWidth="1.7"/><rect x="12" y="12" width="8" height="8" rx="2" stroke="currentColor" strokeWidth="1.7"/></svg>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'preview', label: 'Preview',
|
||||||
|
icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><rect x="3" y="3" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.7"/><rect x="12" y="3" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.7"/><rect x="3" y="12" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.7"/><path d="M14 16h4M16 14v4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/></svg>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'style', label: 'Style',
|
||||||
|
icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><circle cx="11" cy="11" r="3.5" stroke="currentColor" strokeWidth="1.7"/><path d="M11 2v2M11 18v2M2 11h2M18 11h2M4.93 4.93l1.41 1.41M15.66 15.66l1.41 1.41M4.93 17.07l1.41-1.41M15.66 6.34l1.41-1.41" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/></svg>,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const [mobileTab, setMobileTab] = useState<MobileTab>('preview');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider>
|
||||||
|
<ToastProvider>
|
||||||
|
<HistoryProvider>
|
||||||
|
<QRProvider>
|
||||||
|
<div className="flex flex-col w-screen overflow-hidden" style={{ height: '100dvh', background: 'var(--bg-page)' }}>
|
||||||
|
<Navbar />
|
||||||
|
|
||||||
|
{/* ── Desktop / Tablet landscape (≥1024px): 3 columns ── */}
|
||||||
|
<div className="hidden lg:flex flex-1 overflow-hidden">
|
||||||
|
<LeftPanel />
|
||||||
|
<CenterPanel />
|
||||||
|
<RightPanel />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Tablet portrait (768px–1023px): left + center, right hidden ── */}
|
||||||
|
<div className="hidden md:flex lg:hidden flex-1 overflow-hidden">
|
||||||
|
<LeftPanel />
|
||||||
|
<CenterPanel />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Mobile (<768px): single panel + bottom tab bar ── */}
|
||||||
|
<div className="flex md:hidden flex-1 overflow-hidden">
|
||||||
|
<div className="flex-1 overflow-hidden flex flex-col" style={{ display: mobileTab === 'types' ? 'flex' : 'none' }}>
|
||||||
|
<LeftPanel />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 overflow-hidden flex flex-col" style={{ display: mobileTab === 'preview' ? 'flex' : 'none' }}>
|
||||||
|
<CenterPanel />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 overflow-hidden flex flex-col" style={{ display: mobileTab === 'style' ? 'flex' : 'none' }}>
|
||||||
|
<RightPanel />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Mobile bottom tab bar ── */}
|
||||||
|
<nav
|
||||||
|
className="md:hidden flex-shrink-0 flex items-stretch relative"
|
||||||
|
style={{
|
||||||
|
background: 'var(--bg-panel)',
|
||||||
|
borderTop: '1px solid var(--border)',
|
||||||
|
height: '60px',
|
||||||
|
paddingBottom: 'env(safe-area-inset-bottom)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{TABS.map(tab => (
|
||||||
|
<button
|
||||||
|
key={tab.key}
|
||||||
|
onClick={() => setMobileTab(tab.key)}
|
||||||
|
className="flex-1 flex flex-col items-center justify-center gap-0.5 cursor-pointer relative transition-colors"
|
||||||
|
style={{ border: 'none', background: 'transparent', color: mobileTab === tab.key ? '#7C6FE0' : 'var(--text-muted)' }}
|
||||||
|
>
|
||||||
|
{mobileTab === tab.key && (
|
||||||
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-10 h-0.5 rounded-full" style={{ background: '#7C6FE0' }} />
|
||||||
|
)}
|
||||||
|
{tab.icon}
|
||||||
|
<span className="text-[10px] font-semibold tracking-wide">{tab.label}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* ── Tablet portrait: style panel button (floating) ── */}
|
||||||
|
<div className="hidden md:flex lg:hidden fixed bottom-6 right-6 z-30">
|
||||||
|
<StyleDrawer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</QRProvider>
|
||||||
|
</HistoryProvider>
|
||||||
|
</ToastProvider>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Floating style button for tablet portrait — opens right panel as a drawer */
|
||||||
|
function StyleDrawer() {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => setOpen(o => !o)}
|
||||||
|
className="w-14 h-14 rounded-full shadow-2xl flex items-center justify-center cursor-pointer transition-all"
|
||||||
|
style={{ background: '#7C6FE0', color: 'white', boxShadow: '0 8px 32px rgba(124,111,224,0.45)' }}
|
||||||
|
title="Style controls"
|
||||||
|
>
|
||||||
|
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||||||
|
<circle cx="11" cy="11" r="3.5" stroke="currentColor" strokeWidth="1.8"/>
|
||||||
|
<path d="M11 2v2M11 18v2M2 11h2M18 11h2M4.93 4.93l1.41 1.41M15.66 15.66l1.41 1.41M4.93 17.07l1.41-1.41M15.66 6.34l1.41-1.41" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
{open && (
|
||||||
|
<>
|
||||||
|
<div className="fixed inset-0 z-20" onClick={() => setOpen(false)} style={{ background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(2px)' }} />
|
||||||
|
<div
|
||||||
|
className="fixed right-0 top-0 bottom-0 z-30 overflow-y-auto shadow-2xl"
|
||||||
|
style={{ width: 'min(85vw, 430px)', background: 'var(--bg-panel)', borderLeft: '1px solid var(--border)' }}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between p-5 sticky top-0" style={{ background: 'var(--bg-panel)', borderBottom: '1px solid var(--border)' }}>
|
||||||
|
<span className="text-[17px] font-bold" style={{ color: 'var(--text-primary)' }}>Style your QR</span>
|
||||||
|
<button onClick={() => setOpen(false)} className="w-8 h-8 rounded-full flex items-center justify-center cursor-pointer" style={{ background: 'var(--bg-elevated)', color: 'var(--text-secondary)' }}>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<RightPanel embedded />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user