google play

rosticom · Oct 10, 2024 · 732dd51 · 732dd51
1 parent 6ea9542
commit 732dd51
Show file tree

Hide file tree

Showing 21 changed files with 307 additions and 202 deletions.
diff --git a/docs/assets/148_148-orOfdDNG.png b/docs/assets/148_148-orOfdDNG.png
diff --git a/docs/assets/232_232-B5KD57Zr.png b/docs/assets/232_232-B5KD57Zr.png
diff --git a/docs/assets/buy_coo_image_1-WcpaUSdZ.png b/docs/assets/buy_coo_image_1-WcpaUSdZ.png
diff --git a/docs/assets/coobot_logo-B83-6CHg.png b/docs/assets/coobot_logo-B83-6CHg.png
diff --git a/docs/assets/index-P5MbBlxN.css b/docs/assets/index-P5MbBlxN.css
diff --git a/docs/assets/index-fBJGFjO1.css b/docs/assets/index-fBJGFjO1.css
diff --git a/docs/assets/index-CGXkOy18.js → docs/assets/index-m7s08lMF.js b/docs/assets/index-CGXkOy18.js → docs/assets/index-m7s08lMF.js
diff --git a/docs/index.html b/docs/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Staking $COO</title>
     <script src="https://telegram.org/js/telegram-web-app.js"></script>
-    <script type="module" crossorigin src="./assets/index-CGXkOy18.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-fBJGFjO1.css">
+    <script type="module" crossorigin src="./assets/index-m7s08lMF.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-P5MbBlxN.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "coobot-merkaba",
   "private": true,
-  "version": "0.0.16",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/App.css b/src/App.css
@@ -1,46 +1,82 @@
 #root {
-  max-width: 1280px;
+  max-width: 480px;
   margin: 0 auto;
   padding: 1rem;
   text-align: center;
   min-height: 88vh;
+  width: 100%;
 }
 
 .logo {
-  height: 5em;
-  margin-top: 1em;
+  height: 4em;
+  /* margin-top: 1em; */
   will-change: filter;
   transition: filter 300ms;
   border-radius: 50%;
 }
+
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
+  transform: scale(1.05);
 }
+
 .logo.react:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);
+  transform: scale(1.05);
 }
 
 .logo_app {
-  height: 5em;
-  padding-left: 1.5em;
-  padding-right: 1.5em;
+  height: 4em;
+  /* padding-left: 1.5em;
+  padding-right: 1.5em; */
   will-change: filter;
   transition: filter 300ms;
   border-radius: 50%;
   align-self: center;
 }
+
 .logo_app:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
+  transform: scale(1.05);
 }
+
 .logo_app.react:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);
+  transform: scale(1.05);
+}
+
+/* .buy_logo {
+  border-radius: 50%;
+  align-self: center;
+  height: 10em;
 }
 
-.buy_coo_image {
-  width: 93%;
-  border-radius: 10px;
+.buy_logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+  transform: scale(1.05);
+}
+
+.buy_logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+  transform: scale(1.05);
+} */
+
+.card {
+  padding: 0.68em;
 }
 
+.read-the-docs {
+  color: #888;
+}
+
+.row_center {
+  padding-top: 1.2em;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+
+
 /* @keyframes logo-spin {
   from {
     transform: rotate(0deg);
@@ -54,12 +90,4 @@
   a:nth-of-type(2) .logo {
     animation: logo-spin infinite 20s linear;
   }
-} */
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+} */
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,9 +7,10 @@ import { Header } from "./components/Header/Header";
 
 // import { useState } from 'react'
 // import reactLogo from './assets/merkaba_tv.jpg'
-import buyCooImage from './assets/buy_coo_image_1.png'
+// import buyCooImage from './assets/buy_coo_image_1.png'
 import chatLogo from './assets/coobot_23.jpg'
-import coobotLogo from './assets/coobot_logo.png'
+import coobotLogo from './assets/148_148.png'
+import coobotAndroidLogo from './assets/232_232.png'
 import gasPumbLogo from './assets/gaspump.jpg'
 import './App.css'
 import TonUsdChart from "./components/TonusdChart/TonusdChart";
@@ -71,10 +72,13 @@ function App() {
         {/* <TxForm /> */}
         {/* <TonProofDemo /> */}
 
-        <div>
+        <div className = "row_center">
           <a href="https://t.me/+JuO8mZMYOnRmN2Ux">
             <img src={chatLogo} className="logo" alt="Coobot chat" />
           </a>
+          <a onClick={() => openLink('https://play.google.com/store/apps/details?id=com.rosticom.qantb&hl=ru')}>
+            <img src={coobotAndroidLogo} className="logo_app" alt="Coobot app" />
+          </a>
           <a onClick={() => openLink('https://coo.topme.be')}>
             <img src={coobotLogo} className="logo_app" alt="Coobot app" />
           </a>
@@ -95,18 +99,18 @@ function App() {
           {/* <button onClick={() => setCount((count) => count + 1)}>
             earn coins for your wallet: {count} money transfer
           </button> */}
-          <p> 
+          {/* <p> 
             <a href="https://t.me/gasPump_bot/app?startapp=eyJyZWZfdXNlcl9pZCI6NTY1ODY0MzE4LCJ0b2tlbl9hZGRyZXNzIjoiRVFEZGlyd3l5YXNST2tvUnc5bUJCekJkUUhjYUFjOUV5OFpoak1TdXRkdHJmU2M1In0">
-              Buy $COO and chill out until November 1st, 2024.
+              Buy $COO and chill out until November 1st, 2024. */}
               {/* Please, buy some $COO to be rich */}
               {/* Transfer coobots to your wallet */}
               {/* <code>coobot coins</code>  */}
-            </a>
-          </p>
+            {/* </a>
+          </p> */}
         </div>
-        <a href="https://t.me/gasPump_bot/app?startapp=eyJyZWZfdXNlcl9pZCI6NTY1ODY0MzE4LCJ0b2tlbl9hZGRyZXNzIjoiRVFEZGlyd3l5YXNST2tvUnc5bUJCekJkUUhjYUFjOUV5OFpoak1TdXRkdHJmU2M1In0">
-            <img src={buyCooImage} className="logo" alt="Coobot app" />
-        </a>
+        {/* <a href="https://t.me/gasPump_bot/app?startapp=eyJyZWZfdXNlcl9pZCI6NTY1ODY0MzE4LCJ0b2tlbl9hZGRyZXNzIjoiRVFEZGlyd3l5YXNST2tvUnc5bUJCekJkUUhjYUFjOUV5OFpoak1TdXRkdHJmU2M1In0">
+            <img src={buyCooImage} className="buy_logo" alt="Coobot app" />
+        </a> */}
 
         <Footer />
       </div>

diff --git a/src/assets/148_148.png b/src/assets/148_148.png
diff --git a/src/assets/232_232.png b/src/assets/232_232.png
diff --git a/src/assets/Pasted Graphic 2.png b/src/assets/Pasted Graphic 2.png
diff --git a/src/assets/android_logo.png b/src/assets/android_logo.png
diff --git a/src/assets/app_icon.png b/src/assets/app_icon.png
diff --git a/src/assets/google_play_badge.png b/src/assets/google_play_badge.png
diff --git a/src/assets/square_logo_android.png b/src/assets/square_logo_android.png
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,11 +1,14 @@
 // import {Locales, ReturnStrategy, Theme, THEME, useTonConnectUI} from "@tonconnect/ui-react";
 // import {BorderRadius} from "@tonconnect/ui-react";
-import {useTonConnectUI} from "@tonconnect/ui-react";
+// import {useTonConnectUI} from "@tonconnect/ui-react";
 import './footer.scss';
 // import {useEffect, useState} from "react";
 // import {ColorsModal} from "./ColorsModal/ColorsModal";
 
 // const defaultWalletsSelectValue = '["Tonkeeper", "OpenMask"]';
+const openLink = (url: string | URL | undefined) => {
+    window.open(url, '_blank');
+};
 
 export const Footer = () => {
     // const [checkboxes, setCheckboxes] = useState(
@@ -16,7 +19,7 @@ export const Footer = () => {
     // const [skipRedirect, setSkipRedirect] = useState('ios');
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [_, setOptions] = useTonConnectUI();
+    // const [_, setOptions] = useTonConnectUI();
 
     // const onLangChange = (lang: string) => {
     //     setOptions({language: lang as Locales})
@@ -30,7 +33,7 @@ export const Footer = () => {
     //     setOptions({uiPreferences: {borderRadius: borders as BorderRadius}})
     // }
 
-    setOptions({uiPreferences: {borderRadius: 'm'}}) // or 's'
+    // setOptions({uiPreferences: {borderRadius: 'm'}}) // or 's'
 
     // console.log("hi!");
 
@@ -67,6 +70,13 @@ export const Footer = () => {
     // }, [checkboxes, setOptions])
 
     return <footer className="footer">
+              <button className="google-play-button" onClick={ () => {
+                openLink('https://play.google.com/store/apps/details?id=com.rosticom.qantb&hl=ru')
+              } }> 
+                <img src="src/assets/google_play_badge.png" alt="Google Play" />
+              </button>
+      {/* google-play-badge.png */}
+
         {/* <div>
             <label>language</label>
             <select onChange={e => onLangChange(e.target.value)}>

diff --git a/src/components/Footer/footer.scss b/src/components/Footer/footer.scss
@@ -1,28 +1,79 @@
 .footer {
-  padding: 20px;
-  display: flex;
-  gap: 20px;
-  justify-content: flex-end;
-  align-items: center;
-  flex-wrap: wrap;
-
-  > div > label {
-    color: white;
-    margin-right: 5px;
-  }
+  // padding: 20px;
+  // display: flex;
+  // gap: 20px;
+  // justify-content: flex-end;
+  // align-items: center;
+  // flex-wrap: wrap;
+
+  // > div > label {
+  //   color: white;
+  //   margin-right: 5px;
+  // }
+
+  // .google-play-badge {
+  //   background-image: url('./google-play-badge.png');
+  //   // background-size: cover;
+  //   display: inline-flex;
+  //   // width: 100px;
+  //   // height: 60px;
+  //   border: none;
+  //   cursor: pointer;
+  //   .google-play-badge img {
+  //     width: 50px;
+  //     height: auto;
+  //   }
+  // }
+  .google-play-button {
+    background-color: transparent; /* Цвет фона кнопки */
+    // background-color: wheat; /* Цвет фона кнопки */
+    border: none; /* Убираем границу */
+    display: inline-flex; /* Используем flex для выравнивания */
+    align-items: center; /* Выравнивание по вертикали */
+    // padding: 10px 20px; /* Отступы */
+    cursor: pointer; /* Курсор при наведении */
+    border-radius: 8px; /* Скругленные углы */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень */
+    transition: transform 0.2s, box-shadow 0.2s; /* Плавные переходы */
+    width: 180px;
 }
 
-.footer-checkbox-container {
-  display: flex;
-  flex-direction: column;
+button {
+  padding: 0;
+}
 
-  > span {
-    color: white;
-    font-weight: bold;
-    margin-bottom: 4px;
-  }
+.google-play-button img {
+    width: 180px; /* Ширина изображения */
+    height: auto; /* Автоматическая высота для сохранения пропорций */
+    // margin-right: 10px; /* Отступ между изображением и текстом */
+    background-size: contain;
+}
 
-  input {
-    margin-left: 3px;
-  }
+.google-play-button:hover {
+    transform: scale(1.05); /* Увеличиваем кнопку при наведении */
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Увеличиваем тень при наведении */
 }
+
+.google-play-button:active {
+    transform: scale(0.95); /* Уменьшаем кнопку при нажатии */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Возвращаем тень при нажатии */
+}
+
+}
+
+// .footer-checkbox-container {
+//   display: flex;
+//   flex-direction: column;
+
+//   > span {
+//     color: white;
+//     font-weight: bold;
+//     margin-bottom: 4px;
+//   }
+
+//   input {
+//     margin-left: 3px;
+//   }
+// }
+
+
diff --git a/src/components/HoldersList/Holders.scss b/src/components/HoldersList/Holders.scss
@@ -67,6 +67,18 @@
     border-bottom: none; 
   }
 
+  .holders-item:hover {
+    background-color: #ffffff;
+    // box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
+    // outline: 10px solid transparent; 
+    // outline-offset: -5px;
+    transform: scale(1.05);
+    border-radius: 11px;
+    &.holders-item::before {
+      display: none;
+    }
+  }
+
   .holders-list-container {
     // background-color: #f0f0f0;
     background-color: transparent;
@@ -101,7 +113,7 @@
     top: 56px; /* Позиционируем псевдоэлемент по центру высоты элемента */
     left: 56px; /* Отступ слева */
     width: calc(100% - 56px);
-    height: 0.5px;
+    height: 0.2px;
     background-color: #ccc; 
   }