diff --git a/2D_webApp/index.html b/2D_webApp/index.html index c0e75c9..d571b80 100644 --- a/2D_webApp/index.html +++ b/2D_webApp/index.html @@ -1,15 +1,14 @@ - - - - + + + + Multiplayer Game - - - - -
+ + + +
@@ -19,10 +18,13 @@
+
+
+
Z-Space
+
+
- - @@ -30,17 +32,18 @@ const firebaseConfig = { apiKey: "AIzaSyD6r4Imp6niFdf4w-YGFdInzVAUKOpGWvc", authDomain: "multiplayer-game-0203.firebaseapp.com", - databaseURL: "https://multiplayer-game-0203-default-rtdb.firebaseio.com", + databaseURL: + "https://multiplayer-game-0203-default-rtdb.firebaseio.com", projectId: "multiplayer-game-0203", storageBucket: "multiplayer-game-0203.appspot.com", messagingSenderId: "74265101148", appId: "1:74265101148:web:76052c92dcf6b8329b3799", - measurementId: "G-3NZR0L9R80" + measurementId: "G-3NZR0L9R80", }; firebase.initializeApp(firebaseConfig); - + - - \ No newline at end of file + + diff --git a/2D_webApp/styles.css b/2D_webApp/styles.css index c283a20..7f5a6d8 100644 --- a/2D_webApp/styles.css +++ b/2D_webApp/styles.css @@ -151,4 +151,108 @@ button:active { } .Coin_shadow { background: url(/images/coin-shadow.png) no-repeat no-repeat; -} \ No newline at end of file +} + + +.main { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 2rem; + min-height: 100vh; +} + +.description { + display: inherit; + justify-content: inherit; + align-items: inherit; + font-size: 0.85rem; + max-width: var(--main-width); + width: 100%; + z-index: 2; + font-family: var(--font-mono); +} + +.center { + display: flex; + justify-content: center; + align-items: center; + position: relative; +} + +.center::before { + background: var(--secondary-glow); + border-radius: 50%; + width: 680px; + height: 560px; + margin-left: -400px; +} + +.center::after { + background: var(--primary-glow); + width:340px; + height: 280px; + z-index: -1; +} + +.center::before, +.center::after { + content: ''; + left: -90%; + position: absolute; + filter: blur(60px); + transform: translateZ(0); +} + + +.thirteen { + display: flex; + justify-content: center; + align-items: center; + padding: 15px 20px; + margin-left: 16px; + transform: translateZ(0); + border-radius: var(--border-radius); + overflow: hidden; + box-shadow: 0px 2px 8px -1px #0000001a; + font-size: 20px; +} + +.thirteen::before, +.thirteen::after { + content: ''; + position: absolute; + z-index: -1; +} + +/* Conic Gradient Animation */ +.thirteen::before { + animation: 6s rotate linear infinite; + width: 200%; + height: 200%; + background: var(--tile-border); +} + +/* Inner Square */ +.thirteen::after { + inset: 0; + padding: 1px; + border-radius: var(--border-radius); + background: linear-gradient( + to bottom right, + rgba(var(--tile-start-rgb), 1), + rgba(var(--tile-end-rgb), 1) + ); + background-clip: content-box; +} + + +@keyframes rotate { + from { + transform: rotate(360deg); + } + to { + transform: rotate(0deg); + } +}