Spaces:

gruhit-patel
/

connect-4-frontend

Running

App Files Files Community

Gruhit Patel commited on Apr 8, 2024

Commit

f94d478

verified ·

1 Parent(s): 698da72

added responsiveness for mobile compatibility

Browse files

Files changed (3) hide show

assets/index-BLn9xBXz.css +1 -0
assets/index-CdcHo89Z.js +0 -0
index.html +2 -2

assets/index-BLn9xBXz.css ADDED Viewed

	@@ -0,0 +1 @@

+ .App{display:flex;flex-direction:column;align-items:center}.board{display:flex;flex-direction:column;background-color:#6f3;width:90%;max-width:600px;height:85vh;padding:.5%;border-radius:2%;box-shadow:0 0 2% #0003;overflow:hidden}.row{display:flex;justify-content:center;width:100%}.cell{flex:1;padding-top:calc(100% / 7);background-color:#fff;margin:1%;border-radius:50%;max-width:calc(100% / 7 - 2%)}.winning-cell{animation:glow 1s infinite alternate}@keyframes glow{0%{box-shadow:0 0 1% #0004ff80}to{box-shadow:0 0 2% #0004ff}}.play-button{display:flex;justify-content:center;align-items:center;position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);cursor:pointer}.play-icon{width:12%;height:auto;fill:#007bff}.reload-button{display:flex;justify-content:center;align-items:center;position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);cursor:pointer}.reload-icon{width:12%;height:auto;fill:#007bff}.options-header{margin-bottom:20px}.options-container{display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 768px){.board{height:auto;max-height:none;width:100%;max-width:none}.cell{flex:1;padding-top:calc(100% / 6);margin:.5%;max-width:48%}.row{flex-wrap:wrap}.options-container{position:relative;top:calc(100% + 10px);left:50%;transform:translate(-50%);margin-top:10px}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@media only screen and (max-width: 768px){body{font-size:14px}}

assets/index-CdcHo89Z.js ADDED Viewed

The diff for this file is too large to render. See raw diff

index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
-    <script type="module" crossorigin src="/assets/index-Dpp0_ulh.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-6sbi0XHv.css">
   </head>
   <body>
     <div id="root"></div>

     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
+    <script type="module" crossorigin src="/assets/index-CdcHo89Z.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BLn9xBXz.css">
   </head>
   <body>
     <div id="root"></div>