feat: new styles applied, new dir structure

rastmob · Dec 18, 2023 · daea2a3 · daea2a3
1 parent bc2b493
commit daea2a3
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 17 deletions.
diff --git a/cookiesettings.js → src/cookiesettings.js b/cookiesettings.js → src/cookiesettings.js
diff --git a/src/img/Rastmobile_Logo_HD-300x300.png b/src/img/Rastmobile_Logo_HD-300x300.png
diff --git a/index.html → src/index.html b/index.html → src/index.html
@@ -4,6 +4,8 @@
     <meta charset="UTF-8" />
     <title>Rast Mobile Website</title>
     <link rel="stylesheet" href="./style.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+
 
     <!-- Marketing Script -->
     <script
@@ -48,15 +50,35 @@
   <body>
     <!-- Cookie Bar -->
     <div id="RMcookiePermissionContent" class="RM-cookie-bar">
-      <p class="RM-cookie-message">
-        We use cookies to enhance your experience. By continuing to visit this
-        site you agree to our use of cookies.
-        <a href="/cookie-policy" target="_blank">Learn more</a>.
-      </p>
+      <div class="RM-cookie-logo-container">
+       <a href="https://www.rastmobile.com" target="_blank" title="Rast Mobile LTD."> <img src="img/Rastmobile_Logo_HD-300x300.png" alt="Rast Mobile Logo" class="RM-cookie-logo"></a>
+    </div>
+    <div class="RM-cookie-socials">
+      <a href="https://www.linkedin.com/company/rastmobile/" target="_blank" class="social-link">
+          <i class="fab fa-linkedin"></i>
+      </a>
+      <a href="https://www.instagram.com/mobilerast/" target="_blank" class="social-link">
+          <i class="fab fa-instagram"></i>
+      </a>
+      <a href="https://www.behance.net/rastmobile" target="_blank" class="social-link">
+          <i class="fab fa-behance"></i>
+      </a>
+      <a href="https://twitter.com/rastmobile" target="_blank" class="social-link">
+          <i class="fab fa-twitter"></i>
+      </a>
+  </div>
+    <div class="RM-cookie-message">
+      We use cookies to improve your experience. By continuing to visit this site you agree to our use of cookies.
+      <a href="https://rastmobile.com/gizlilik-politikasi/" target="_blank">Learn more</a>.
+  </div>
+
+
+
+
       <div class="RM-cookie-buttons">
-        <button onclick="RMAcceptAllCookies()">Accept All</button>
-        <button onclick="RMRejectAllCookies()">Reject All</button>
-        <button onclick="openCookieSettings()">Cookie Settings</button>
+        <button onclick="RMAcceptAllCookies()" class="RM-btn RM-btn-accept">Accept All</button>
+        <button onclick="RMRejectAllCookies()" class="RM-btn RM-btn-reject">Reject All</button>
+        <button onclick="openCookieSettings()" class="RM-btn RM-btn-settings">Cookie Settings</button>
       </div>
     </div>
 
@@ -71,15 +93,14 @@
           ></button>
         </div>
         <div class="RM-cookie-modal-body">
-          <ul id="RMcookieCategoryList">
+          <ul id="RMcookieCategoryList" class="RM-cookie-category-list">
             <!-- Cookie categories will be dynamically inserted here -->
           </ul>
         </div>
 
         <div class="RM-cookie-modal-footer">
-          <button onclick="RMAcceptAllCookies()">Accept All</button>
-          <button onclick="RMRejectAllCookies()">Reject All</button>
-          <button onclick="saveCookieSettings()">Save Settings</button>
+          <button onclick="RMAcceptAllCookies()" class="RM-btn RM-btn-accept-all">Accept All</button>
+          <button onclick="RMRejectAllCookies()" class="RM-btn RM-btn-reject-all">Reject All</button>
         </div>
       </div>
     </div>

diff --git a/style.css → src/style.css b/style.css → src/style.css
@@ -13,24 +13,72 @@
     z-index: 1000;
 }
 
+
+.RM-cookie-bar {
+    background-color: #000; /* Rast Mobile dark color */
+    color: #fff;
+    padding: 20px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.RM-cookie-logo {
+    width: 75px; /* or your preferred size */
+    margin-right: 15px;
+}
+
+
 .RM-cookie-message {
     margin: 0;
     color: #333;
 }
 
 .RM-cookie-buttons button {
     margin-left: 10px;
-    padding: 5px 15px;
-    background-color: #007bff;
-    color: white;
+    padding: 10px 20px;
     border: none;
-    border-radius: 4px;
+    border-radius: 5px;
     cursor: pointer;
+    font-weight: bold;
+    color:white;
 }
 
 .RM-cookie-buttons button:hover {
     background-color: #0056b3;
 }
+.RM-cookie-socials {
+    display: flex;
+    align-items: center;
+    margin-right: 15px; /* Sağ kenardan biraz boşluk */
+}
+
+.social-link {
+    color: ##000000; /* veya Rast Mobile marka rengi */
+    margin-left: 10px; /* ikonlar arası boşluk */
+    font-size: 20px; /* İkon büyüklüğü */
+    transition: color 0.7s ease; /* Renk değişimi için geçiş efekti */
+}
+
+.social-link:hover {
+    color: #aaa; /* Hover durumunda ikon rengi */
+}
+
+.RM-btn-accept {
+    background-color: #4CAF50; /* Rast Mobile's accent color for acceptance */
+}
+
+.RM-btn-reject {
+    background-color: #f44336; /* A contrasting color for rejection */
+}
+
+.RM-btn-settings {
+    background-color: #008CBA; /* A neutral color for settings */
+}
 
 /* Cookie Modal Styles */
 .RM-cookie-modal {
@@ -79,9 +127,48 @@
     justify-content: flex-end;
 }
 
+.RM-cookie-modal-footer .RM-btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background-color 0.3s ease;
+}
+
+.RM-btn-accept-all {
+    background-color: #4CAF50; /* Yeşil renk, kabul için */
+    color: white;
+}
+
+.RM-btn-accept-all:hover {
+    background-color: #388E3C; /* Daha koyu bir yeşil, hover durumu için */
+}
+
+.RM-btn-reject-all {
+    background-color: #f44336; /* Kırmızı renk, reddetme için */
+    color: white;
+}
+
+.RM-btn-reject-all:hover {
+    background-color: #D32F2F; /* Daha koyu bir kırmızı, hover durumu için */
+}
+
+.RM-cookie-modal-close {
+    border: none;
+    background: none;
+    color: #AAAAAA;
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.RM-cookie-modal-close:hover {
+    color: #888888;
+}
+
+
 .RM-cookie-modal-footer button {
     padding: 5px 15px;
-    background-color: #007bff;
     color: white;
     border: none;
     border-radius: 4px;