Merge pull request #609 from aslams2020/TermsOfService

✔️Styled "Terms Of Service" Page!
ChromeGaming · Jul 25, 2024 · de097d1 · de097d1
2 parents c8430b3 + 3a4b710
commit de097d1
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 47 deletions.
diff --git a/pages/privacypolicy.html b/pages/privacypolicy.html
@@ -7,6 +7,7 @@
     <title>Privacy Policy- Dot Box</title>
     <link rel="stylesheet" href="../styles/mainstyle.css">
     <link rel="stylesheet" href="../styles/privacypolicy.css">
+    <link rel="shortcut icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLX16O836Ioh6PoPFyU0mSLuzI9LLUC46SpD-4eE9MQ31AGxsdf8m6ZCMBVB7x7HaVm3Y&usqp=CAU" type="image/x-icon">
 </head>
 <style>
    .circle {

diff --git a/pages/termsofservice.html b/pages/termsofservice.html
@@ -7,6 +7,7 @@
     <title>Terms Of Service - Dot Box</title>
     <link rel="stylesheet" href="../styles/mainstyle.css">
     <link rel="stylesheet" href="../styles/termsofservice.css">
+    <link rel="shortcut icon" href="https://img.freepik.com/free-vector/console-gamepad-hitech-technology-live-gaming-service-video-gaming-controller-joystick-with-buttons-joypad-gamers-peripheral-input-device-vector-isolated-concept-metaphor-illustration_335657-4310.jpg" type="image/x-icon">
 </head>
 <style>
   .circle {

diff --git a/styles/termsofservice.css b/styles/termsofservice.css
@@ -1,88 +1,163 @@
 body {
-    font-family: 'Helvetica Neue', Arial, sans-serif;
-    background-color: #f0f0f0;
+    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Arial', sans-serif;
+    line-height: 1.6;
+    color: #fff;
+    background: linear-gradient(135deg, #f2bf6d 0%,#eb9e18 50%, #f16b4a 100%);
     margin: 0;
     padding: 0;
-    color: #333;
     overflow-x: hidden;
+    min-height: 100vh;
+
 }
 
 .container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    max-width: 55%;
-    margin: auto;
-    padding: 20px;
-    background: linear-gradient(to top, rgba(255, 184, 4, 0.78), white);
-    border-radius: 10px;
-    box-shadow: 0px 5px 15px rgba(6, 6, 6, 0.829);
-    text-align: left;
-    line-height: 1.8;
-    padding-bottom: 50px;
+    max-width: 900px;
+    margin: 2rem auto;
+    padding: 2rem;
+    background-color: rgba(52, 152, 219, 0.8);
+    border-radius: 20px;
+    box-shadow: 0 0 30px rgba(241, 196, 15, 0.5);
 }
 
 .header {
     text-align: center;
-    margin-bottom: 20px;
+    margin-bottom: 2rem;
 }
 
 .title {
-    color: #25254a;
-    font-size: 37px;
-}
-
-.main-content {
-    text-align: left;
+    color: #f1c40f;
+    font-size: 3rem;
+    text-shadow: 3px 3px 0 #e74c3c;
+    transform: rotate(-3deg);
+    display: inline-block;
+    animation: float 3s ease-in-out infinite;
 }
 
 .section {
-    margin-bottom: 20px;
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+    background-color: rgba(231, 76, 60, 0.7);
+    border-radius: 15px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    transform: skew(-2deg);
 }
 
 .section-title {
-    color: #25254a;
-    font-size: 24px;
-    margin-bottom: 10px;
+    color: #f39c12;
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+    border-bottom: 3px dashed #f39c12;
+    padding-bottom: 0.5rem;
 }
 
-.section-content,
-.list-item {
-    margin-bottom: 15px;
+.section-content {
+    margin-bottom: 1rem;
+    font-size: 1.1rem;
 }
 
 .section-list {
-    padding-left: 20px;
+    padding-left: 1.5rem;
+    list-style-type: none;
+}
+
+.list-item {
+    margin-bottom: 0.5rem;
+    position: relative;
+}
+
+.list-item:before {
+    content: '🎮';
+    position: absolute;
+    left: -1.5rem;
+    top: 0.2rem;
 }
 
 .back-btn {
-    margin-top: 30px;
-    padding: 10px 21px;
-    background: rgb(37, 37, 74);
+    display: inline-block;
+    padding: 0.8rem 1.5rem;
+    background-color: #e74c3c;
     color: #fff;
-    text-align: center;
-    border-radius: 5px;
-    width: 55%;
     text-decoration: none;
+    border-radius: 50px;
+    transition: all 0.3s ease;
     font-weight: bold;
-    align-self: center;
-    margin-left: 320px;
+    font-size: 1.2rem;
+    border: 3px solid #f1c40f;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }
 
 .back-btn:hover {
-    background: #1a1a2f;
+    background-color: #f1c40f;
+    color: #e74c3c;
+    transform: scale(1.05) rotate(-5deg
+    );
+}
+
+.circle {
+    position: absolute;
+    width: 25px;
+    height: 25px;
+
+    border-radius: 50%;
+    pointer-events: none;
+    background: radial-gradient(circle, rgba(0, 225, 246, 0.8), rgba(224, 55, 36, 0.8));
+    transition: transform 0.1s, left 0.1s, top 0.1s;
+}
+
+.circle-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 9999;
+}
+
+.video-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    overflow: hidden;
+}
+
+.video {
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0.3;
 }
 
-@media (max-width: 767px) {
+@media (max-width: 768px) {
     .container {
-        max-width: 90%;
-        padding: 15px 20px;
-        line-height: 1.5;
+
+        margin: 1rem;
+        padding: 1rem;
+    }
+
+    .title {
+        font-size: 2.5rem;
     }
 
-    .back-btn {
-        margin-left: 80px;
-        padding: 10px 21px;
-        width: 100%;
+    .section-title {
+        font-size: 1.5rem;
+    }
+
+    .circle-container {
+        display: none;
     }
 }
+
+@keyframes float {
+    0% { transform: translateY(0px) rotate(-3deg); }
+    50% { transform: translateY(-10px) rotate(-3deg); }
+    100% { transform: translateY(0px) rotate(-3deg); }
+}