Fixed the ui for mobile and fixed some visual ui bugs for the modals
This commit is contained in:
Elias Kamenka
parent
34ab8ccf68
commit
a35be81985
Binary file not shown.
|
Before Width: | Height: | Size: 203 KiB After Width: | Height: | Size: 66 KiB |
98
src/App.css
98
src/App.css
@ -9,11 +9,12 @@ body {
|
||||
|
||||
.about-container {
|
||||
text-align: center;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.typewriter-text {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 3rem;
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
@ -71,23 +72,30 @@ body {
|
||||
.social-cards {
|
||||
margin-top: 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 200px));
|
||||
gap: 1rem;
|
||||
padding: 0 2rem;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.social-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
color: white !important;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.social-card:hover {
|
||||
@ -110,7 +118,7 @@ body {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 1rem;
|
||||
gap: 0rem;
|
||||
}
|
||||
|
||||
.social-card-icon {
|
||||
@ -122,18 +130,18 @@ body {
|
||||
|
||||
.social-card h3 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-size: clamp(1.2rem, 3vw, 1.5rem);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.social-card p {
|
||||
margin: 0;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 1rem;
|
||||
font-size: clamp(0.9rem, 2.5vw, 1rem);
|
||||
}
|
||||
|
||||
.animated-paragraph {
|
||||
font-size: 1.15rem;
|
||||
font-size: clamp(0.9rem, 2.5vw, 1.15rem);
|
||||
color: #e0e0e0;
|
||||
margin: 24px 0 32px 0;
|
||||
text-align: center;
|
||||
@ -142,6 +150,7 @@ body {
|
||||
margin-right: auto;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.6;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.animated-paragraph .cursor {
|
||||
@ -167,13 +176,11 @@ body {
|
||||
.modal-content {
|
||||
background: rgba(35, 39, 47, 0.85);
|
||||
border-radius: 16px;
|
||||
padding: 32px 24px 24px 24px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.45);
|
||||
position: relative;
|
||||
min-width: 340px;
|
||||
width: 90%;
|
||||
max-width: 380px;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
padding: 2.5rem 1.5rem 1.5rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -182,39 +189,35 @@ body {
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
max-width: 320px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.modal-caption {
|
||||
color: #e0e0e0;
|
||||
font-size: 1.1rem;
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 16px;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
font-size: 1.5rem;
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
padding: 8px;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: #EA4335;
|
||||
}
|
||||
|
||||
.discord-tag-row {
|
||||
.modal-caption {
|
||||
color: #e0e0e0;
|
||||
font-size: 1.1rem;
|
||||
margin-top: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-tag-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
@ -222,7 +225,7 @@ body {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.discord-tag {
|
||||
.modal-tag {
|
||||
font-size: 1.3rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #e0e0e0;
|
||||
@ -233,7 +236,7 @@ body {
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
.modal-copy-btn {
|
||||
background: #5865F2;
|
||||
color: #fff;
|
||||
border: none;
|
||||
@ -245,7 +248,32 @@ body {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.copy-btn:hover, .copy-btn:focus {
|
||||
.modal-copy-btn:hover, .modal-copy-btn:focus {
|
||||
background: #4752c4;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal-qr {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
height: auto;
|
||||
border-radius: 12px;
|
||||
margin: 0.5rem 0 1rem 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.social-cards {
|
||||
grid-template-columns: 200px;
|
||||
padding: 0rem 0;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 85%;
|
||||
padding: 2rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.modal-qr {
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
29
src/App.tsx
29
src/App.tsx
@ -69,14 +69,24 @@ function SocialCard({ title, icon, description, href, onClick }: {
|
||||
)
|
||||
}
|
||||
|
||||
function SignalPopup({ show, onClose }: { show: boolean, onClose: () => void }) {
|
||||
function SignalPopup({ show, onClose, username }: { show: boolean, onClose: () => void, username: string }) {
|
||||
const [copied, setCopied] = useState(false)
|
||||
if (!show) return null
|
||||
const handleCopy = () => {
|
||||
navigator.clipboard.writeText(username)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 1200)
|
||||
}
|
||||
return (
|
||||
<div className="modal-backdrop" onClick={onClose}>
|
||||
<div className="modal-content" onClick={e => e.stopPropagation()}>
|
||||
<button className="modal-close" onClick={onClose}>×</button>
|
||||
<img src="/shikoro-signal.png" alt="Signal QR" className="modal-image" />
|
||||
<div className="modal-caption">Scan to chat with me on Signal!</div>
|
||||
<img src="/shikoro-signal.png" alt="Signal QR" className="modal-qr" />
|
||||
<div className="modal-tag-row">
|
||||
<span className="modal-tag">{username}</span>
|
||||
<button className="modal-copy-btn" onClick={handleCopy}>{copied ? 'Copied!' : 'Copy'}</button>
|
||||
</div>
|
||||
<div className="modal-caption">Scan or use Username!</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@ -94,11 +104,10 @@ function DiscordPopup({ show, onClose, tag }: { show: boolean, onClose: () => vo
|
||||
<div className="modal-backdrop" onClick={onClose}>
|
||||
<div className="modal-content" onClick={e => e.stopPropagation()}>
|
||||
<button className="modal-close" onClick={onClose}>×</button>
|
||||
<img src="/discord-logo.png" alt="Discord Logo" className="modal-image" style={{background:'#5865F2',padding:'16px'}} />
|
||||
<div className="modal-caption" style={{marginBottom:'12px'}}>Add me on Discord:</div>
|
||||
<div className="discord-tag-row">
|
||||
<span className="discord-tag">{tag}</span>
|
||||
<button className="copy-btn" onClick={handleCopy}>{copied ? 'Copied!' : 'Copy'}</button>
|
||||
<div className="modal-caption" style={{marginBottom:'12px'}}>My Discord Tag:</div>
|
||||
<div className="modal-tag-row">
|
||||
<span className="modal-tag">{tag}</span>
|
||||
<button className="modal-copy-btn" onClick={handleCopy}>{copied ? 'Copied!' : 'Copy'}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -142,10 +151,10 @@ function App() {
|
||||
href="#"
|
||||
/>
|
||||
</div>
|
||||
<SignalPopup show={showSignalPopup} onClose={() => setShowSignalPopup(false)} />
|
||||
<SignalPopup show={showSignalPopup} onClose={() => setShowSignalPopup(false)} username="shikoro.31" />
|
||||
<DiscordPopup show={showDiscordPopup} onClose={() => setShowDiscordPopup(false)} tag="shikoro.1" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
export default App
|
||||
Loading…
x
Reference in New Issue
Block a user