Skip to content

Commit 05afb90

Browse files
WizardLoopWizardLoop
authored
<?php echo "Magic"; ?>
1 parent b6819f8 commit 05afb90

File tree

1 file changed

+247
-6
lines changed

1 file changed

+247
-6
lines changed

‎index.html‎

Lines changed: 247 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1.0">
6-
<title>Master of PHP spells</title>
6+
<title>Master of PHP spells!</title>
77
<meta property="og:image" content="https://avatars.githubusercontent.com/php-wiz">
88
<link href="https://fonts.googleapis.com/css?family=Orbitron:700&display=swap" rel="stylesheet">
99
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
@@ -282,7 +282,7 @@
282282
<span>Night</span>
283283
</div>
284284
<canvas id="bg-canvas"></canvas>
285-
<div class="card-container">
285+
<div class="card-container" id="mainPage">
286286
<div class="profile-card">
287287
<div class="card-header">
288288
<img src="https://avatars.githubusercontent.com/php-wiz" alt="Wizard Avatar" class="avatar" />
@@ -291,22 +291,234 @@
291291
</div>
292292
<div class="about-section">
293293
Backend Developer<br>
294-
I conjure up magical web solutions using PHP, JavaScript, and more.<br>
295-
My code blends creativity and technical wizardry to craft high-quality, modern, and responsive websites and apps.<br>
294+
My code blends creativity and technical wizardry.<br>
296295
<span style="color:#8f00ff;">Let me cast a spell on your next project!</span>
297296
</div>
298297
<div class="socials">
299298
<a href="https://github.com/php-wiz" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
300299
<a href="https://t.me/phpwiz" target="_blank" title="Telegram"><i class="fab fa-telegram"></i></a>
301-
<a href="mailto:phpwiz@phpwiz.dev" title="Email"><i class="fa-solid fa-envelope"></i></a>
300+
<a href="mailto:phpwiz@example.com" title="Email"><i class="fa-solid fa-envelope"></i></a>
302301
<a href="https://linkedin.com/in/phpwiz" target="_blank" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
303302
</div>
304303
<div class="actions">
305304
<a href="https://github.com/php-wiz" class="action-btn follow" target="_blank" rel="noopener">Follow</a>
306305
<a href="https://t.me/phpwiz" class="action-btn" target="_blank" rel="noopener">Contact</a>
307306
</div>
308307
</div>
308+
<!-- magic-echo removed -->
309309
</div>
310+
<div class="card-container" id="aboutPage" style="display:none;">
311+
<div class="profile-card">
312+
<div class="card-header">
313+
<img src="https://avatars.githubusercontent.com/php-wiz" alt="Wizard Avatar" class="avatar" />
314+
<div class="name">About Us</div>
315+
</div>
316+
<div class="about-section">
317+
Welcome to PHPWIZ!<br>
318+
We are passionate backend developers conjuring up magical web solutions.<br>
319+
Our expertise: PHP, JavaScript, modern web, and app development.<br>
320+
<span style="color:#8f00ff;">Let's build something amazing together!</span>
321+
</div>
322+
<div class="socials">
323+
<a href="https://github.com/php-wiz" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
324+
<a href="https://t.me/phpwiz" target="_blank" title="Telegram"><i class="fab fa-telegram"></i></a>
325+
<a href="mailto:[email protected]" title="Email"><i class="fa-solid fa-envelope"></i></a>
326+
<a href="https://linkedin.com/in/phpwiz" target="_blank" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
327+
</div>
328+
<div class="actions">
329+
<a href="https://github.com/php-wiz" class="action-btn follow" target="_blank" rel="noopener">GitHub</a>
330+
<a href="https://t.me/phpwiz" class="action-btn" target="_blank" rel="noopener">Telegram</a>
331+
</div>
332+
</div>
333+
</div>
334+
<div class="card-container" id="marketPage" style="display:none;">
335+
<div class="profile-card">
336+
<div class="card-header">
337+
<img src="https://avatars.githubusercontent.com/php-wiz" alt="Wizard Avatar" class="avatar" />
338+
<div class="name">Market</div>
339+
</div>
340+
<div class="about-section">
341+
<span style="color:#8f00ff; font-size:1.1em;">You have arrived at our store, coming soon!</span>
342+
</div>
343+
</div>
344+
</div>
345+
<div class="card-container" id="accountPage" style="display:none;">
346+
<div class="profile-card">
347+
<div class="card-header">
348+
<img src="https://avatars.githubusercontent.com/php-wiz" alt="Wizard Avatar" class="avatar" />
349+
<div class="name">My Account</div>
350+
</div>
351+
<div class="about-section">
352+
<span style="color:#8f00ff;">Account features coming soon!</span>
353+
</div>
354+
</div>
355+
</div>
356+
<div class="card-container" id="donatePage" style="display:none;">
357+
<div class="profile-card">
358+
<div class="card-header">
359+
<img src="https://avatars.githubusercontent.com/php-wiz" alt="Wizard Avatar" class="avatar" />
360+
<div class="name">Donate</div>
361+
</div>
362+
<div class="about-section">
363+
<span style="color:#8f00ff;">Support us with a donation!<br>Thank you for your magic!</span>
364+
<div class="donate-links">
365+
<a href="https://t.me/wizardloop" target="_blank" class="donate-btn telegram"><i class="fab fa-telegram"></i> Telegram</a>
366+
<a href="https://ko-fi.com/WizardLoop" target="_blank" class="donate-btn kofi"><i class="fa-solid fa-mug-hot"></i> Ko-fi</a>
367+
<a href="https://paypal.me/WizardLoop" target="_blank" class="donate-btn paypal"><i class="fab fa-paypal"></i> PayPal</a>
368+
</div>
369+
</div>
370+
</div>
371+
</div>
372+
<nav class="bottom-nav">
373+
<button class="nav-btn active" id="navMain">
374+
<i class="fa-solid fa-house"></i>
375+
<span>Main</span>
376+
</button>
377+
<button class="nav-btn" id="navAbout">
378+
<i class="fa-solid fa-user-group"></i>
379+
<span>About</span>
380+
</button>
381+
<button class="nav-btn" id="navMarket">
382+
<i class="fa-solid fa-store"></i>
383+
<span>Market</span>
384+
</button>
385+
<button class="nav-btn" id="navAccount">
386+
<i class="fa-solid fa-user"></i>
387+
<span>My Account</span>
388+
</button>
389+
<button class="nav-btn" id="navDonate">
390+
<i class="fa-solid fa-heart"></i>
391+
<span>Donate</span>
392+
</button>
393+
</nav>
394+
<style>
395+
.magic-echo {
396+
margin-top: 18px;
397+
text-align: center;
398+
font-family: 'Orbitron', Arial, sans-serif;
399+
font-size: 1.13rem;
400+
color: #f72585;
401+
font-weight: bold;
402+
letter-spacing: 0.04em;
403+
text-shadow: 0 0 8px #7209b755;
404+
}
405+
.magic-echo span {
406+
color: #f72585;
407+
}
408+
.bottom-nav {
409+
position: fixed;
410+
bottom: 0;
411+
left: 0;
412+
width: 100vw;
413+
height: 62px;
414+
background: linear-gradient(90deg, #3a0ca3 0%, #7209b7 100%);
415+
display: flex;
416+
justify-content: space-around;
417+
align-items: center;
418+
z-index: 20;
419+
box-shadow: 0 -2px 16px #00f0ff44;
420+
border-radius: 18px 18px 0 0;
421+
padding-bottom: env(safe-area-inset-bottom, 0);
422+
}
423+
.bottom-nav .nav-btn {
424+
background: none;
425+
border: none;
426+
color: #fff;
427+
font: inherit;
428+
display: flex;
429+
flex-direction: column;
430+
align-items: center;
431+
justify-content: center;
432+
font-size: 1.1rem;
433+
flex: 1 1 0;
434+
padding: 0.2rem 0 0.1rem 0;
435+
cursor: pointer;
436+
transition: color 0.2s;
437+
outline: none;
438+
border-radius: 12px;
439+
height: 100%;
440+
gap: 2px;
441+
}
442+
.bottom-nav .nav-btn.active,
443+
.bottom-nav .nav-btn:focus {
444+
color: #00f0ff;
445+
background: linear-gradient(90deg, #f72585 0%, #00f0ff 100%);
446+
box-shadow: 0 0 8px #00f0ff44;
447+
}
448+
.bottom-nav .nav-btn i {
449+
font-size: 1.3rem;
450+
margin-bottom: 2px;
451+
}
452+
.bottom-nav .nav-btn span {
453+
font-size: 0.93rem;
454+
font-weight: 600;
455+
letter-spacing: 0.01em;
456+
}
457+
@media (max-width: 600px) {
458+
.bottom-nav {
459+
height: 56px;
460+
border-radius: 14px 14px 0 0;
461+
}
462+
.bottom-nav .nav-btn i {
463+
font-size: 1.1rem;
464+
}
465+
.bottom-nav .nav-btn span {
466+
font-size: 0.85rem;
467+
}
468+
.card-container {
469+
min-height: calc(90vh - 56px);
470+
margin-bottom: 56px;
471+
}
472+
}
473+
@media (min-width: 601px) {
474+
.bottom-nav {
475+
max-width: 500px;
476+
left: 50%;
477+
transform: translateX(-50%);
478+
}
479+
}
480+
</style>
481+
<style>
482+
.donate-links {
483+
display: flex;
484+
flex-direction: column;
485+
gap: 0.7rem;
486+
margin-top: 1.2rem;
487+
align-items: center;
488+
}
489+
.donate-btn {
490+
display: flex;
491+
align-items: center;
492+
justify-content: center;
493+
gap: 0.5em;
494+
font-size: 1.05rem;
495+
font-weight: bold;
496+
border-radius: 14px;
497+
padding: 0.5em 1.2em;
498+
text-decoration: none;
499+
color: #fff;
500+
background: linear-gradient(90deg, #00f0ff 0%, #f72585 100%);
501+
box-shadow: 0 0 8px #00f0ff44;
502+
transition: background 0.2s, transform 0.2s;
503+
border: none;
504+
}
505+
.donate-btn.telegram {
506+
background: linear-gradient(90deg, #229ED9 0%, #00f0ff 100%);
507+
}
508+
.donate-btn.kofi {
509+
background: linear-gradient(90deg, #29abe0 0%, #f72585 100%);
510+
}
511+
.donate-btn.paypal {
512+
background: linear-gradient(90deg, #003087 0%, #00f0ff 100%);
513+
}
514+
.donate-btn:hover, .donate-btn:focus {
515+
transform: scale(1.07);
516+
box-shadow: 0 0 16px #f7258599;
517+
color: #fff;
518+
text-decoration: none;
519+
}
520+
}
521+
</style>
310522
<script>
311523
// Disable right-click context menu
312524
document.addEventListener('contextmenu', function(e) {
@@ -443,6 +655,35 @@
443655

444656
// Recreate particles on resize for responsiveness
445657
window.addEventListener('resize', createParticles);
446-
</script>
658+
659+
660+
const mainPage = document.getElementById('mainPage');
661+
const aboutPage = document.getElementById('aboutPage');
662+
const marketPage = document.getElementById('marketPage');
663+
const accountPage = document.getElementById('accountPage');
664+
const donatePage = document.getElementById('donatePage');
665+
const navMain = document.getElementById('navMain');
666+
const navAbout = document.getElementById('navAbout');
667+
const navMarket = document.getElementById('navMarket');
668+
const navAccount = document.getElementById('navAccount');
669+
const navDonate = document.getElementById('navDonate');
670+
function showPage(page) {
671+
mainPage.style.display = page === 'main' ? '' : 'none';
672+
aboutPage.style.display = page === 'about' ? '' : 'none';
673+
marketPage.style.display = page === 'market' ? '' : 'none';
674+
accountPage.style.display = page === 'account' ? '' : 'none';
675+
donatePage.style.display = page === 'donate' ? '' : 'none';
676+
navMain.classList.toggle('active', page === 'main');
677+
navAbout.classList.toggle('active', page === 'about');
678+
navMarket.classList.toggle('active', page === 'market');
679+
navAccount.classList.toggle('active', page === 'account');
680+
navDonate.classList.toggle('active', page === 'donate');
681+
}
682+
navMain.addEventListener('click', () => showPage('main'));
683+
navAbout.addEventListener('click', () => showPage('about'));
684+
navMarket.addEventListener('click', () => showPage('market'));
685+
navAccount.addEventListener('click', () => showPage('account'));
686+
navDonate.addEventListener('click', () => showPage('donate'));
687+
</script>
447688
</body>
448689
</html>

0 commit comments

Comments
 (0)