fix: Improve overall user interaction

- image set draggable to false - texts set selectable to false
khantzawphyo · May 15, 2024 · 4fd6676 · 4fd6676
1 parent 8bf1d3a
commit 4fd6676
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -65,6 +65,15 @@ h1.title {
     font-size: 48px;
 }
 
+.prevent-select {
+    -webkit-user-select: none;
+    /* Safari */
+    -ms-user-select: none;
+    /* IE 10 and IE 11 */
+    user-select: none;
+    /* Standard syntax */
+}
+
 .game-header {
     display: flex;
     flex-direction: column;
@@ -131,12 +140,12 @@ h1.title {
     width: 150px;
     height: 150px;
     transition: all 0.5s ease;
-    background: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.25);
     border-radius: 16px;
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(5px);
-    -webkit-backdrop-filter: blur(5px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(2.5px);
+    -webkit-backdrop-filter: blur(2.5px);
+    border: 1.5px solid rgba(255, 255, 255, 0.79);
 }
 
 .btn-choice:hover {
@@ -286,4 +295,4 @@ footer {
         padding: 8px 16px;
         font-size: 14px;
     }
-}
+}
diff --git a/index.html b/index.html
@@ -28,7 +28,7 @@
     <script src="https://kit.fontawesome.com/5786aab587.js" crossorigin="anonymous"></script>
 </head>
 
-<body>
+<body class="prevent-select">
     <!-- HEADER -->
     <header>
         <h1 class="title">Rock Paper Scissors</h1>
@@ -75,7 +75,7 @@ <h1 class="game-info">Choose your weapon</h1>
     <!-- MODAL -->
     <div class="modal hidden">
         <div class="modal-card">
-            <img class="modal-emoji" src="" alt="Emoji">
+            <img class="modal-emoji" src="" alt="Emoji" draggable="false">
             <p class="modal-message"></p>
             <button class="btn-restart">Play Again</button>
         </div>