<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Avezz's Game Collection - Play amazing games">
<meta property="og:title" content="Avezz's Collection">
<meta property="og:description" content="Avezz's Game Collection - Play amazing games">
<meta property="og:type" content="website">
<title>Avezz's Collection</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1a1410 0%, #2d1810 50%, #1a1410 100%);
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
.bg-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.particle {
position: absolute;
background: radial-gradient(circle, rgba(204, 159, 120, 0.4) 0%, transparent 70%);
border-radius: 50%;
animation: float 20s infinite ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0; }
10% { opacity: 0.4; }
25% { transform: translate(120px, -120px) scale(1.3) rotate(90deg); opacity: 0.6; }
50% { transform: translate(-80px, -250px) scale(0.7) rotate(180deg); opacity: 0.5; }
75% { transform: translate(-180px, -120px) scale(1.2) rotate(270deg); opacity: 0.7; }
90% { opacity: 0.4; }
100% { transform: translate(0, 0) scale(1) rotate(360deg); opacity: 0; }
}
.container {
position: relative;
z-index: 1;
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
}
header {
text-align: center;
margin-bottom: 50px;
animation: slideDown 0.8s ease-out;
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-30px); }
to { opacity: 1; transform: translateY(0); }
}
h1 {
color: #cc9f78;
font-size: 3em;
font-weight: 300;
letter-spacing: 2px;
margin-bottom: 10px;
text-shadow: 0 0 20px rgba(204, 159, 120, 0.3);
}
.header-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.header-btn {
background: rgba(45, 35, 25, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(204, 159, 120, 0.3);
color: #cc9f78;
padding: 12px 24px;
border-radius: 12px;
font-size: 1em;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 400;
}
.header-btn:hover {
background: rgba(204, 159, 120, 0.2);
border-color: rgba(204, 159, 120, 0.5);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.fullscreen-btn {
position: fixed;
bottom: 30px;
right: 30px;
background: rgba(45, 35, 25, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(204, 159, 120, 0.3);
color: #cc9f78;
padding: 12px 18px;
border-radius: 12px;
font-size: 0.95em;
cursor: pointer;
transition: all 0.3s ease;
z-index: 999;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
line-height: 1;
font-weight: 500;
}
.fullscreen-btn:hover {
background: rgba(204, 159, 120, 0.3);
border-color: rgba(204, 159, 120, 0.5);
transform: scale(1.05) translateY(-2px);
}
.fullscreen-btn:active {
transform: scale(0.95);
}
.search-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: none;
align-items: flex-start;
justify-content: center;
padding-top: 100px;
z-index: 1000;
animation: fadeIn 0.3s ease-out;
}
.search-container.active {
display: flex;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.search-box {
background: rgba(45, 35, 25, 0.95);
border: 2px solid rgba(204, 159, 120, 0.4);
border-radius: 20px;
padding: 30px;
width: 90%;
max-width: 600px;
animation: slideInScale 0.3s ease-out;
}
@keyframes slideInScale {
from {
opacity: 0;
transform: translateY(-30px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.search-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.search-title {
color: #cc9f78;
font-size: 1.5em;
font-weight: 400;
}
.close-btn {
background: none;
border: none;
color: #cc9f78;
font-size: 1.8em;
cursor: pointer;
transition: all 0.3s ease;
line-height: 1;
}
.close-btn:hover {
color: #d4b89a;
transform: rotate(90deg);
}
.search-input {
width: 100%;
padding: 15px 20px;
background: rgba(20, 15, 10, 0.6);
border: 1px solid rgba(204, 159, 120, 0.3);
border-radius: 12px;
color: #f5e6d3;
font-size: 1.1em;
outline: none;
transition: all 0.3s ease;
}
.search-input::placeholder {
color: #a68a6f;
}
.search-input:focus {
border-color: rgba(204, 159, 120, 0.6);
box-shadow: 0 0 20px rgba(204, 159, 120, 0.2);
}
.search-results {
margin-top: 20px;
max-height: 250px;
overflow-y: auto;
}
.search-result-item {
padding: 12px 15px;
background: rgba(20, 15, 10, 0.4);
border: 1px solid rgba(204, 159, 120, 0.2);
border-radius: 8px;
margin-bottom: 10px;
color: #cc9f78;
cursor: pointer;
transition: all 0.3s ease;
}
.search-result-item:hover {
background: rgba(204, 159, 120, 0.2);
border-color: rgba(204, 159, 120, 0.4);
transform: translateX(5px);
}
.no-results {
text-align: center;
color: #a68a6f;
padding: 30px;
font-size: 1em;
}
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.card {
background: rgba(45, 35, 25, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(204, 159, 120, 0.2);
border-radius: 20px;
transition: all 0.4s ease;
animation: fadeInUp 0.6s ease-out backwards;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(204, 159, 120, 0.1) 0%, transparent 70%);
animation: rotate 15s linear infinite;
pointer-events: none;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
.card:nth-child(6) { animation-delay: 0.6s; }
.card:hover {
transform: translateY(-10px);
border-color: rgba(204, 159, 120, 0.5);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.game-slot {
min-height: 350px;
padding: 0;
display: flex;
flex-direction: column;
cursor: pointer;
overflow: hidden;
}
.game-slot:hover .game-thumbnail {
transform: scale(1.02);
}
.game-thumbnail {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: rgba(30, 25, 20, 0.4);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.game-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.game-title {
background: rgba(20, 15, 10, 0.8);
padding: 20px;
text-align: center;
color: #cc9f78;
font-size: 1.2em;
font-weight: 400;
border-top: 1px solid rgba(204, 159, 120, 0.2);
}
.game-viewer {
position: fixed;
inset: 0;
background: rgba(26, 20, 16, 0.98);
display: none;
flex-direction: column;
z-index: 2000;
animation: fadeIn 0.3s ease-out;
}
.game-viewer.active {
display: flex;
}
.game-header {
background: rgba(45, 35, 25, 0.9);
backdrop-filter: blur(10px);
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(204, 159, 120, 0.2);
}
.game-header h2 {
color: #cc9f78;
font-size: 1.5em;
font-weight: 400;
}
.game-controls {
display: flex;
gap: 10px;
}
.game-controls button {
background: rgba(204, 159, 120, 0.2);
border: 1px solid rgba(204, 159, 120, 0.3);
color: #cc9f78;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
}
.game-controls button:hover {
background: rgba(204, 159, 120, 0.3);
border-color: rgba(204, 159, 120, 0.5);
}
.game-frame {
flex: 1;
border: none;
background: #000;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #cc9f78;
font-size: 1.2em;
}
/* Categories View */
.categories-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1a1410 0%, #2d1810 50%, #1a1410 100%);
display: none;
flex-direction: column;
z-index: 1500;
animation: fadeIn 0.3s ease-out;
overflow: hidden;
}
.categories-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.categories-container.active {
display: flex;
}
.categories-header {
background: rgba(45, 35, 25, 0.9);
backdrop-filter: blur(10px);
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(204, 159, 120, 0.2);
position: relative;
z-index: 1;
}
.categories-header h2 {
color: #cc9f78;
font-size: 1.8em;
font-weight: 400;
}
.categories-content {
flex: 1;
overflow-y: auto;
padding: 40px;
max-width: 1400px;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 1;
}
.category-folder {
background: rgba(45, 35, 25, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(204, 159, 120, 0.2);
border-radius: 15px;
margin-bottom: 20px;
overflow: hidden;
transition: all 0.4s ease;
animation: categorySlideIn 0.6s ease-out backwards;
position: relative;
}
.category-folder::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(204, 159, 120, 0.08) 0%, transparent 70%);
animation: rotate 20s linear infinite;
pointer-events: none;
}
@keyframes categorySlideIn {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.category-folder:nth-child(1) { animation-delay: 0.1s; }
.category-folder:nth-child(2) { animation-delay: 0.2s; }
.category-folder:nth-child(3) { animation-delay: 0.3s; }
.category-folder:nth-child(4) { animation-delay: 0.4s; }
.category-folder:nth-child(5) { animation-delay: 0.5s; }
.category-folder:nth-child(6) { animation-delay: 0.6s; }
.category-folder:nth-child(7) { animation-delay: 0.7s; }
.category-folder:nth-child(8) { animation-delay: 0.8s; }
.category-folder:nth-child(9) { animation-delay: 0.9s; }
.category-folder:nth-child(10) { animation-delay: 1s; }
.category-folder:hover {
border-color: rgba(204, 159, 120, 0.5);
transform: translateX(10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.category-header {
padding: 20px 25px;
cursor: pointer;
display: flex;
align-items: center;
gap: 15px;
transition: all 0.3s ease;
user-select: none;
position: relative;
z-index: 1;
}
.category-header:hover {
background: rgba(204, 159, 120, 0.15);
transform: scale(1.02);
}
.category-header:active {
transform: scale(0.98);
}
.category-arrow {
color: #cc9f78;
font-size: 1.2em;
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
display: inline-block;
}
.category-folder.expanded .category-arrow {
transform: rotate(90deg) scale(1.2);
}
.category-icon {
font-size: 1.5em;
animation: iconBounce 2s ease-in-out infinite;
}
@keyframes iconBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.category-folder:hover .category-icon {
animation: iconSpin 0.6s ease-in-out;
}
@keyframes iconSpin {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.2); }
100% { transform: rotate(360deg) scale(1); }
}
.category-name {
color: #cc9f78;
font-size: 1.3em;
font-weight: 400;
flex: 1;
transition: all 0.3s ease;
}
.category-folder:hover .category-name {
transform: translateX(5px);
text-shadow: 0 0 10px rgba(204, 159, 120, 0.5);
}
.category-count {
color: #a68a6f;
font-size: 0.9em;
background: rgba(204, 159, 120, 0.15);
padding: 5px 12px;
border-radius: 20px;
transition: all 0.3s ease;
}
.category-folder:hover .category-count {
background: rgba(204, 159, 120, 0.25);
transform: scale(1.1);
}
.category-games {
display: none;
padding: 20px 25px;
border-top: 1px solid rgba(204, 159, 120, 0.1);
animation: expandDown 0.4s ease-out;
}
@keyframes expandDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.category-folder.expanded .category-games {
display: block;
}
.category-game-item {
display: flex;
align-items: center;
gap: 15px;
padding: 12px;
margin-bottom: 10px;
background: rgba(20, 15, 10, 0.4);
border: 1px solid rgba(204, 159, 120, 0.2);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
animation: gameItemFadeIn 0.4s ease-out backwards;
}
@keyframes gameItemFadeIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.category-game-item:nth-child(1) { animation-delay: 0.05s; }
.category-game-item:nth-child(2) { animation-delay: 0.1s; }
.category-game-item:nth-child(3) { animation-delay: 0.15s; }
.category-game-item:nth-child(4) { animation-delay: 0.2s; }
.category-game-item:nth-child(5) { animation-delay: 0.25s; }
.category-game-item:nth-child(6) { animation-delay: 0.3s; }
.category-game-item:nth-child(7) { animation-delay: 0.35s; }
.category-game-item:nth-child(8) { animation-delay: 0.4s; }
.category-game-item:nth-child(9) { animation-delay: 0.45s; }
.category-game-item:nth-child(10) { animation-delay: 0.5s; }
.category-game-item:hover {
background: rgba(204, 159, 120, 0.2);
border-color: rgba(204, 159, 120, 0.5);
transform: translateX(10px) scale(1.02);
box-shadow: 0 5px 20px rgba(204, 159, 120, 0.2);
}
.category-game-img {
width: 60px;
height: 60px;
border-radius: 8px;
object-fit: cover;
border: 1px solid rgba(204, 159, 120, 0.2);
transition: all 0.3s ease;
}
.category-game-item:hover .category-game-img {
transform: scale(1.1) rotate(5deg);
border-color: rgba(204, 159, 120, 0.5);
box-shadow: 0 5px 15px rgba(204, 159, 120, 0.3);
}
.category-game-name {
color: #cc9f78;
font-size: 1.1em;
font-weight: 400;
}
/* Popup notification */
.popup-notification {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
background: rgba(45, 35, 25, 0.95);
backdrop-filter: blur(10px);
border: 2px solid rgba(204, 159, 120, 0.4);
border-radius: 20px;
padding: 40px 50px;
z-index: 3000;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.popup-notification.active {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
pointer-events: all;
}
.popup-notification h3 {
color: #cc9f78;
font-size: 1.8em;
margin-bottom: 15px;
font-weight: 400;
}
.popup-notification p {
color: #a68a6f;
font-size: 1.2em;
margin-bottom: 25px;
}
.popup-notification button {
background: rgba(204, 159, 120, 0.3);
border: 1px solid rgba(204, 159, 120, 0.5);
color: #cc9f78;
padding: 12px 30px;
border-radius: 10px;
font-size: 1.1em;
cursor: pointer;
transition: all 0.3s ease;
}
.popup-notification button:hover {
background: rgba(204, 159, 120, 0.4);
transform: translateY(-2px);
}
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 2999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.popup-overlay.active {
opacity: 1;
pointer-events: all;
}
/* Intro Cutscene */
.intro-cutscene {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
overflow: hidden;
}
.intro-cutscene.active {
display: flex;
}
.intro-cutscene::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200%;
height: 200%;
background:
radial-gradient(circle at 20% 50%, rgba(204, 159, 120, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(204, 159, 120, 0.03) 0%, transparent 50%);
animation: backgroundPulse 4s ease-in-out infinite;
}
@keyframes backgroundPulse {
0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}
.circle-wipe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300vw;
height: 300vw;
border-radius: 50%;
background: #000;
box-shadow:
inset 0 0 100px rgba(204, 159, 120, 0.3),
0 0 200px rgba(0, 0, 0, 0.8);
animation: circleClose 1.8s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
@keyframes circleClose {
0% {
width: 300vw;
height: 300vw;
box-shadow: inset 0 0 100px rgba(204, 159, 120, 0.3);
}
70% {
box-shadow: inset 0 0 150px rgba(204, 159, 120, 0.5);
}
100% {
width: 0;
height: 0;
box-shadow: inset 0 0 200px rgba(204, 159, 120, 0.8);
}
}
.logo-reveal {
position: absolute;
opacity: 0;
animation: logoFade 2.2s ease-in-out 1.6s forwards;
text-align: center;
filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.5));
}
@keyframes logoFade {
0% {
opacity: 0;
transform: scale(0.5) rotateY(90deg);
filter: blur(20px) drop-shadow(0 0 40px rgba(255, 255, 255, 0.5));
}
15% {
opacity: 1;
transform: scale(1.15) rotateY(0deg);
filter: blur(0px) drop-shadow(0 0 60px rgba(255, 255, 255, 0.8));
}
25% {
transform: scale(1.05) rotateY(-5deg);
}
35% {
transform: scale(1) rotateY(0deg);
}
75% {
opacity: 1;
transform: scale(1) rotateY(0deg);
filter: blur(0px) drop-shadow(0 0 60px rgba(255, 255, 255, 0.8));
}
90% {
opacity: 0.5;
transform: scale(1.1) rotateY(10deg);
filter: blur(5px) drop-shadow(0 0 80px rgba(255, 255, 255, 0.9));
}
100% {
opacity: 0;
transform: scale(1.3) rotateY(20deg);
filter: blur(20px) drop-shadow(0 0 100px rgba(255, 255, 255, 1));
}
}
.logo-svg {
width: 300px;
height: 300px;
margin-bottom: 20px;
filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.3));
animation: logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-10px) rotate(2deg); }
50% { transform: translateY(0) rotate(0deg); }
75% { transform: translateY(-10px) rotate(-2deg); }
}
.logo-svg polygon,
.logo-svg path,
.logo-svg rect {
animation: svgGlow 2s ease-in-out infinite;
}
@keyframes svgGlow {
0%, 100% {
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}
50% {
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.9));
}
}
.logo-text {
font-size: 3em;
color: #fff;
font-weight: 300;
letter-spacing: 12px;
text-shadow:
0 0 10px rgba(255, 255, 255, 0.8),
0 0 20px rgba(255, 255, 255, 0.6),
0 0 30px rgba(255, 255, 255, 0.4),
0 0 40px rgba(204, 159, 120, 0.3);
animation: textPulse 2s ease-in-out infinite;
}
@keyframes textPulse {
0%, 100% {
text-shadow:
0 0 10px rgba(255, 255, 255, 0.8),
0 0 20px rgba(255, 255, 255, 0.6),
0 0 30px rgba(255, 255, 255, 0.4),
0 0 40px rgba(204, 159, 120, 0.3);
}
50% {
text-shadow:
0 0 20px rgba(255, 255, 255, 1),
0 0 30px rgba(255, 255, 255, 0.8),
0 0 40px rgba(255, 255, 255, 0.6),
0 0 60px rgba(204, 159, 120, 0.5);
}
}
/* Scanlines effect */
.intro-cutscene::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.15) 1px,
transparent 1px,
transparent 2px
);
pointer-events: none;
animation: scanlines 8s linear infinite;
opacity: 0.3;
}
@keyframes scanlines {
0% { transform: translateY(0); }
100% { transform: translateY(10px); }
}
</style>
</head>
<body>
<div class="bg-animation" id="bgAnimation"></div>
<!-- Open in new tab button -->
<button class="fullscreen-btn" id="newTabMainBtn" onclick="openDashboardInNewTab()" title="Open in New Tab">🔗 Open in New Tab</button>
<div class="search-container" id="searchContainer">
<div class="search-box">
<div class="search-header">
<h2 class="search-title">Search Games</h2>
<button class="close-btn" id="closeSearch">×</button>
</div>
<input
type="text"
class="search-input"
id="searchInput"
placeholder="Type to search for games..."
autocomplete="off"
>
<div class="search-results" id="searchResults"></div>
</div>
</div>
<div class="game-viewer" id="gameViewer">
<div class="game-header">
<h2 id="gameName">Game</h2>
<div class="game-controls">
<button id="newTabBtn" onclick="openGameInNewTab()">🔗 Open in New Tab</button>
<button id="fullscreenGameBtn" onclick="fullscreenGame()">⛶ Fullscreen</button>
<button onclick="closeGame()">✕ Close</button>
</div>
</div>
<iframe class="game-frame" id="gameFrame"></iframe>
</div>
<!-- Categories View -->
<div class="categories-container" id="categoriesContainer">
<div class="categories-header">
<h2>📁 Game Categories</h2>
<div class="game-controls">
<button onclick="closeCategories()">Close</button>
</div>
</div>
<div class="categories-content" id="categoriesContent">
<!-- Categories will be loaded here -->
</div>
</div>
<!-- Popup Notification -->
<div class="popup-overlay" id="popupOverlay" onclick="closePopup()"></div>
<div class="popup-notification" id="popupNotification">
<h3>Sorry!!</h3>
<p>At the moment you can't suggest games!</p>
<button onclick="closePopup()">OK</button>
</div>
<!-- Intro Cutscene -->
<div class="intro-cutscene" id="introCutscene">
<div class="circle-wipe"></div>
<div class="logo-reveal">
<svg class="logo-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<!-- Hexagon frame -->
<polygon points="100,10 173,55 173,145 100,190 27,145 27,55"
fill="none" stroke="white" stroke-width="3" opacity="0.8"/>
<!-- Inner hexagon -->
<polygon points="100,30 155,65 155,135 100,170 45,135 45,65"
fill="none" stroke="white" stroke-width="2" opacity="0.5"/>
<!-- Letter A (stylized as a triangle/mountain) -->
<path d="M 100 60 L 70 120 L 80 120 L 100 85 L 120 120 L 130 120 Z"
fill="white" opacity="0.9"/>
<rect x="85" y="105" width="30" height="8" fill="white" opacity="0.9"/>
<!-- Orbiting dots -->
<circle cx="100" cy="30" r="4" fill="white" opacity="0.7">
<animateTransform attributeName="transform" type="rotate"
from="0 100 100" to="360 100 100"
dur="4s" repeatCount="indefinite"/>
</circle>
<circle cx="155" cy="65" r="4" fill="white" opacity="0.7">
<animateTransform attributeName="transform" type="rotate"
from="60 100 100" to="420 100 100"
dur="4s" repeatCount="indefinite"/>
</circle>
<circle cx="155" cy="135" r="4" fill="white" opacity="0.7">
<animateTransform attributeName="transform" type="rotate"
from="120 100 100" to="480 100 100"
dur="4s" repeatCount="indefinite"/>
</circle>
<!-- Center glow -->
<circle cx="100" cy="100" r="35" fill="none" stroke="white"
stroke-width="1" opacity="0.2">
<animate attributeName="r" values="35;45;35"
dur="2s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.2;0.4;0.2"
dur="2s" repeatCount="indefinite"/>
</circle>
</svg>
<div class="logo-text">AVEZZ.DEV</div>
</div>
</div>
<div class="container">
<header>
<div class="header-buttons">
<button class="header-btn" id="searchBtn">🔍 Search</button>
<button class="header-btn" id="categoriesBtn">📁 Categories</button>
</div>
<h1>Avezz's Collection</h1>
<div class="header-buttons">
<button class="header-btn" id="allGamesBtn">🎮 All Games</button>
<button class="header-btn" id="suggestGamesBtn">💡 Suggest Games</button>
</div>
</header>
<div class="dashboard-grid" id="gamesGrid">
<!-- Games will be loaded here -->
</div>
</div>
<script>
// Background particles
const bgAnimation = document.getElementById('bgAnimation');
for (let i = 0; i < 15; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.width = Math.random() * 250 + 150 + 'px';
particle.style.height = particle.style.width;
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 15 + 's';
particle.style.animationDuration = Math.random() * 15 + 15 + 's';
bgAnimation.appendChild(particle);
}
// Add particles to categories view
function addParticlesToCategories() {
const categoriesContainer = document.getElementById('categoriesContainer');
const existingParticles = categoriesContainer.querySelector('.bg-animation-categories');
if (existingParticles) return;
const bgAnim = document.createElement('div');
bgAnim.className = 'bg-animation-categories';
bgAnim.style.position = 'absolute';
bgAnim.style.top = '0';
bgAnim.style.left = '0';
bgAnim.style.width = '100%';
bgAnim.style.height = '100%';
bgAnim.style.pointerEvents = 'none';
bgAnim.style.zIndex = '0';
for (let i = 0; i < 15; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.width = Math.random() * 250 + 150 + 'px';
particle.style.height = particle.style.width;
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 15 + 's';
particle.style.animationDuration = Math.random() * 15 + 15 + 's';
bgAnim.appendChild(particle);
}
categoriesContainer.insertBefore(bgAnim, categoriesContainer.firstChild);
}
// Game data - using GN-Math's game library
const zonesURL = "https://cdn.jsdelivr.net/gh/gn-math/assets@main/zones.json";
const coverURL = "https://cdn.jsdelivr.net/gh/gn-math/covers@main";
const htmlURL = "https://cdn.jsdelivr.net/gh/gn-math/html@main";
let games = [];
let currentGame = null;
// Category definitions
const categories = {
'Action': { icon: '⚔️', keywords: ['shooter', 'fight', 'battle', 'combat', 'war', 'gun', 'zombie'] },
'Puzzle': { icon: '🧩', keywords: ['puzzle', 'brain', 'logic', 'maze', 'match', 'sudoku', 'block'] },
'Racing': { icon: '🏎️', keywords: ['racing', 'drive', 'car', 'bike', 'speed', 'drift', 'rally'] },
'Sports': { icon: '⚽', keywords: ['football', 'soccer', 'basketball', 'sports', 'tennis', 'golf', 'baseball'] },
'Platformer': { icon: '🎮', keywords: ['platform', 'jump', 'run', 'mario', 'sonic', 'adventure'] },
'Strategy': { icon: '🎯', keywords: ['strategy', 'tower', 'defense', 'tycoon', 'simulator', 'management'] },
'Rhythm': { icon: '🎵', keywords: ['rhythm', 'music', 'beat', 'dance', 'friday', 'fnf', 'song'] },
'Multiplayer': { icon: '👥', keywords: ['multiplayer', '.io', 'online', 'versus', 'pvp', 'battle'] },
'Casual': { icon: '🎲', keywords: ['casual', 'click', 'idle', 'clicker', 'simple', 'easy'] },
'Other': { icon: '📦', keywords: [] }
};
function categorizeGame(game) {
const name = game.name.toLowerCase();
for (const [category, data] of Object.entries(categories)) {
if (category === 'Other') continue;
for (const keyword of data.keywords) {
if (name.includes(keyword)) {
return category;
}
}
}
return 'Other';
}
// Load games
async function loadGames() {
try {
// Try multiple CORS proxies
const proxies = [
'', // Direct (no proxy)
'https://corsproxy.io/?',
'https://api.allorigins.win/raw?url=',
];
let data = null;
let lastError = null;
for (const proxy of proxies) {
try {
const url = proxy + encodeURIComponent(zonesURL + "?t=" + Date.now());
const response = await fetch(proxy ? url : zonesURL + "?t=" + Date.now());
data = await response.json();
break; // Success!
} catch (e) {
lastError = e;
continue; // Try next proxy
}
}
if (!data) {
throw lastError || new Error('All proxies failed');
}
// Filter out Discord-related games
games = data.filter(game => {
const name = game.name.toLowerCase();
const url = game.url.toLowerCase();
return !name.includes('discord') && !url.includes('discord');
});
displayGames(games);
} catch (error) {
console.error('Error loading games:', error);
document.getElementById('gamesGrid').innerHTML = '<p style="color: #cc9f78; text-align: center; grid-column: 1/-1;">Failed to load games. Please try refreshing the page.</p>';
}
}
// Display games
function displayGames(gamesToShow) {
const grid = document.getElementById('gamesGrid');
grid.innerHTML = '';
gamesToShow.forEach(game => {
const card = document.createElement('div');
card.className = 'card game-slot';
card.onclick = () => openGame(game);
const thumbnail = document.createElement('div');
thumbnail.className = 'game-thumbnail';
const img = document.createElement('img');
img.src = game.cover.replace("{COVER_URL}", coverURL).replace("{HTML_URL}", htmlURL);
img.alt = game.name;
img.loading = 'lazy';
thumbnail.appendChild(img);
const title = document.createElement('div');
title.className = 'game-title';
title.textContent = game.name;
card.appendChild(thumbnail);
card.appendChild(title);
grid.appendChild(card);
});
}
// Open game
function openGame(game) {
currentGame = game;
// If it's an external URL, just open it
if (game.url.startsWith("http")) {
window.open(game.url, "_blank");
return;
}
// Show intro cutscene
const cutscene = document.getElementById('introCutscene');
cutscene.classList.add('active');
// Prepare the game in the background
const viewer = document.getElementById('gameViewer');
const frame = document.getElementById('gameFrame');
const nameEl = document.getElementById('gameName');
nameEl.textContent = game.name;
const url = game.url.replace("{COVER_URL}", coverURL).replace("{HTML_URL}", htmlURL);
// Load the game during cutscene
fetch(url + "?t=" + Date.now())
.then(response => response.text())
.then(html => {
frame.srcdoc = html;
// After 4 seconds, hide cutscene and show game
setTimeout(() => {
cutscene.classList.remove('active');
viewer.classList.add('active');
}, 4000);
})
.catch(error => {
cutscene.classList.remove('active');
alert("Failed to load game: " + error);
});
}
// Open dashboard in new tab
function openDashboardInNewTab() {
const btn = document.getElementById('newTabMainBtn');
// Visual feedback
btn.innerHTML = '✓ Opened!';
btn.style.background = 'rgba(100, 200, 100, 0.5)';
// Open current page in new tab
window.open(window.location.href, '_blank');
setTimeout(() => {
btn.innerHTML = '🔗 Open in New Tab';
btn.style.background = 'rgba(45, 35, 25, 0.9)';
}, 2000);
}
// Listen for fullscreen changes (for game viewer)
['fullscreenchange', 'webkitfullscreenchange', 'msfullscreenchange'].forEach(event => {
document.addEventListener(event, () => {
const gameBtn = document.getElementById('fullscreenGameBtn');
const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
if (isFullscreen) {
if (gameBtn) {
gameBtn.innerHTML = '◧ Exit Fullscreen';
}
} else {
if (gameBtn) {
gameBtn.innerHTML = '⛶ Fullscreen';
}
}
});
});
// Close game
function closeGame() {
// Exit fullscreen if active
if (document.fullscreenElement) {
document.exitFullscreen();
}
const viewer = document.getElementById('gameViewer');
const frame = document.getElementById('gameFrame');
viewer.classList.remove('active');
frame.srcdoc = '';
currentGame = null;
}
// Fullscreen game iframe
function fullscreenGame() {
const viewer = document.getElementById('gameViewer');
const btn = document.getElementById('fullscreenGameBtn');
if (!document.fullscreenElement) {
const fullscreenPromise = viewer.requestFullscreen();
if (fullscreenPromise) {
fullscreenPromise.catch(err => {
console.log('Fullscreen not supported:', err);
// Show feedback
btn.innerHTML = '✕ Not Available';
btn.style.background = 'rgba(200, 100, 100, 0.3)';
setTimeout(() => {
btn.innerHTML = '⛶ Fullscreen';
btn.style.background = '';
}, 2000);
});
}
} else {
document.exitFullscreen();
}
}
// Open game in new tab
function openGameInNewTab() {
const btn = document.getElementById('newTabBtn');
if (!currentGame) return;
// Visual feedback
btn.innerHTML = '✓ Opened!';
btn.style.background = 'rgba(100, 200, 100, 0.3)';
setTimeout(() => {
btn.innerHTML = '🔗 Open in New Tab';
btn.style.background = '';
}, 2000);
if (currentGame.url.startsWith("http")) {
window.open(currentGame.url, "_blank");
return;
}
const url = currentGame.url.replace("{COVER_URL}", coverURL).replace("{HTML_URL}", htmlURL);
fetch(url + "?t=" + Date.now())
.then(response => response.text())
.then(html => {
const newWindow = window.open("about:blank", "_blank");
if (newWindow) {
newWindow.document.open();
newWindow.document.write(html);
newWindow.document.close();
}
})
.catch(error => {
btn.innerHTML = '✕ Failed';
btn.style.background = 'rgba(200, 100, 100, 0.3)';
setTimeout(() => {
btn.innerHTML = '🔗 Open in New Tab';
btn.style.background = '';
}, 2000);
alert("Failed to open game: " + error);
});
}
// Search functionality
const searchBtn = document.getElementById('searchBtn');
const searchContainer = document.getElementById('searchContainer');
const closeSearch = document.getElementById('closeSearch');
const searchInput = document.getElementById('searchInput');
const searchResults = document.getElementById('searchResults');
searchBtn.addEventListener('click', () => {
searchContainer.classList.add('active');
setTimeout(() => searchInput.focus(), 100);
});
closeSearch.addEventListener('click', () => {
searchContainer.classList.remove('active');
});
searchContainer.addEventListener('click', (e) => {
if (e.target === searchContainer) {
searchContainer.classList.remove('active');
}
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && searchContainer.classList.contains('active')) {
searchContainer.classList.remove('active');
}
});
searchInput.addEventListener('input', (e) => {
const query = e.target.value.toLowerCase().trim();
if (query === '') {
searchResults.innerHTML = '';
displayGames(games); // Show all games when search is empty
return;
}
const filtered = games.filter(game =>
game.name.toLowerCase().includes(query)
);
// Update the main grid with filtered results
displayGames(filtered);
// Update search dropdown
if (filtered.length === 0) {
searchResults.innerHTML = '<div class="no-results">No games found</div>';
} else {
searchResults.innerHTML = filtered.slice(0, 10).map(game =>
`<div class="search-result-item" onclick='selectGameFromSearch(${game.id})'>🎮 ${game.name}</div>`
).join('');
}
});
// Handle Enter key in search
searchInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
searchContainer.classList.remove('active');
searchInput.blur();
}
});
function selectGameFromSearch(id) {
const game = games.find(g => g.id === id);
if (game) {
searchContainer.classList.remove('active');
openGame(game);
}
}
// Categories functionality
const categoriesBtn = document.getElementById('categoriesBtn');
const categoriesContainer = document.getElementById('categoriesContainer');
const categoriesContent = document.getElementById('categoriesContent');
categoriesBtn.addEventListener('click', () => {
addParticlesToCategories();
displayCategories();
categoriesContainer.classList.add('active');
});
function closeCategories() {
categoriesContainer.classList.remove('active');
}
function displayCategories() {
const categorized = {};
// Initialize categories
for (const category of Object.keys(categories)) {
categorized[category] = [];
}
// Categorize all games
games.forEach(game => {
const category = categorizeGame(game);
categorized[category].push(game);
});
// Build HTML
let html = '';
for (const [categoryName, categoryGames] of Object.entries(categorized)) {
if (categoryGames.length === 0) continue;
const icon = categories[categoryName].icon;
html += `
<div class="category-folder" id="category-${categoryName}">
<div class="category-header" onclick="toggleCategory('${categoryName}')">
<span class="category-arrow">▶</span>
<span class="category-icon">${icon}</span>
<span class="category-name">${categoryName}</span>
<span class="category-count">${categoryGames.length} games</span>
</div>
<div class="category-games">
${categoryGames.map(game => `
<div class="category-game-item" onclick='openGameFromCategory(${game.id})'>
<img src="${game.cover.replace("{COVER_URL}", coverURL).replace("{HTML_URL}", htmlURL)}"
alt="${game.name}"
class="category-game-img">
<span class="category-game-name">${game.name}</span>
</div>
`).join('')}
</div>
</div>
`;
}
categoriesContent.innerHTML = html;
}
function toggleCategory(categoryName) {
const folder = document.getElementById(`category-${categoryName}`);
folder.classList.toggle('expanded');
}
function openGameFromCategory(id) {
const game = games.find(g => g.id === id);
if (game) {
closeCategories();
openGame(game);
}
}
// Suggest Games button - show popup
const suggestGamesBtn = document.getElementById('suggestGamesBtn');
suggestGamesBtn.addEventListener('click', () => {
document.getElementById('popupOverlay').classList.add('active');
document.getElementById('popupNotification').classList.add('active');
});
function closePopup() {
document.getElementById('popupOverlay').classList.remove('active');
document.getElementById('popupNotification').classList.remove('active');
}
// All Games button - reset to show all games
const allGamesBtn = document.getElementById('allGamesBtn');
allGamesBtn.addEventListener('click', () => {
searchInput.value = '';
searchResults.innerHTML = '';
displayGames(games);
if (searchContainer.classList.contains('active')) {
searchContainer.classList.remove('active');
}
});
// Load games on page load
loadGames();
// Play intro cutscene on page load
window.addEventListener('load', () => {
const cutscene = document.getElementById('introCutscene');
cutscene.classList.add('active');
// Hide cutscene after 3.5 seconds
setTimeout(() => {
cutscene.classList.remove('active');
}, 4000);
});
</script>
</body>
</html>
/* Add your styles here */
// Add your code here