NeuroCore-Byte-Wars/showcase.html at main · InfinityByteStudios/NeuroCore-Byte-Wars · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Showcase - NeuroCore: Byte Wars</title>
    <link rel="icon" type="image/png" href="/.netlify/images?url=/assets/Logos/NeuroCore Byte Wars Logo.png&w=32&h=32&fit=contain&fm=png&q=90">
    <link rel="stylesheet" href="css/style.css">
    <style>
        body {
            background: linear-gradient(135deg, #001133 0%, #000522 100%);
            color: #fff;
            font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
            margin: 0;
            min-height: 100vh;
        }
        .showcase-header {
            text-align: center;
            padding: 40px 20px 20px 20px;
        }
        .showcase-title {
            font-size: 2.5rem;
            font-weight: bold;
            color: #00ffff;
            text-shadow: 0 0 20px #00ffff88;
        }
        .showcase-subtitle {
            font-size: 1.2rem;
            color: #aaa;
            margin-top: 10px;
        }
        .clips-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 32px;
            padding: 40px 5vw;
            max-width: 1200px;
            margin: 0 auto;
        }
        .clip-card {
            background: rgba(10, 20, 40, 0.85);
            border-radius: 18px;
            box-shadow: 0 8px 32px #00ffff22, 0 2px 8px #000a;
            overflow: hidden;
            transition: transform 0.2s;
            border: 2px solid #00ffff33;
        }
        .clip-card:hover {
            transform: scale(1.03);
            box-shadow: 0 16px 48px #00ffff44, 0 4px 16px #000a;
        }
        .clip-media {
            width: 100%;
            display: block;
            aspect-ratio: 16/9;
            object-fit: cover;
            background: #222;
        }
        .clip-info {
            padding: 18px 16px 14px 16px;
        }
        .clip-title {
            font-size: 1.1rem;
            font-weight: bold;
            color: #00ffff;
            margin-bottom: 8px;
        }
        .clip-desc {
            font-size: 0.98rem;
            color: #ccc;
        }
        .back-btn {
            display: inline-block;
            margin: 30px 0 0 0;
            padding: 12px 28px;
            background: linear-gradient(90deg, #00ffff 0%, #0088cc 100%);
            color: #001133;
            font-weight: bold;
            border-radius: 10px;
            text-decoration: none;
            font-size: 1rem;
            box-shadow: 0 2px 12px #00ffff44;
            transition: background 0.2s, transform 0.2s;
        }
        .back-btn:hover {
            background: linear-gradient(90deg, #00ccff 0%, #00ffff 100%);
            transform: translateY(-2px);
        }
        @media (max-width: 600px) {
            .showcase-title { font-size: 2rem; }
            .clips-grid { padding: 20px 2vw; gap: 18px; }
        }
    </style>
</head>
<body>
    <div class="showcase-header">
        <div class="showcase-title">NeuroCore: Byte Wars - Game Clips</div>
        <div class="showcase-subtitle">A visual showcase of gameplay moments and features. Screen record this page to create highlight reels!</div>
    </div>
    <div class="clips-grid">
        <!-- Example Clip 1: Replace src with your own video or GIF/image -->
        <div class="clip-card">
            <video class="clip-media" src="assets/clips/clip1.mp4" controls poster="assets/clips/clip1-thumb.png"></video>
            <div class="clip-info">
                <div class="clip-title">Epic Boss Fight</div>
                <div class="clip-desc">Watch as the player faces off against the final boss with advanced upgrades and visual effects.</div>
            </div>
        </div>
        <!-- Example Clip 2 -->
        <div class="clip-card">
            <img class="clip-media" src="assets/clips/clip2.gif" alt="Wave Survival Clip">
            <div class="clip-info">
                <div class="clip-title">Wave Survival</div>
                <div class="clip-desc">Intense wave-based combat with dozens of enemies and particle effects.</div>
            </div>
        </div>
        <!-- Example Clip 3 -->
        <div class="clip-card">
            <video class="clip-media" src="assets/clips/clip3.mp4" controls poster="assets/clips/clip3-thumb.png"></video>
            <div class="clip-info">
                <div class="clip-title">Upgrade Showcase</div>
                <div class="clip-desc">Demonstration of the upgrade system and UI animations in action.</div>
            </div>
        </div>
        <!-- Add more clips as needed! -->
    </div>
    <div style="text-align:center;">
        <a href="index.html" class="back-btn">← Back to Home</a>
    </div>
</body>
</html>