diff --git a/src/components/ExploreContainer.css b/src/components/ExploreContainer.css index b92ea26..0cfddbf 100644 --- a/src/components/ExploreContainer.css +++ b/src/components/ExploreContainer.css @@ -1,19 +1,17 @@ -/* ExploreContainer.css */ #container { display: flex; flex-direction: column; align-items: center; - margin-top: 20px; + justify-content: space-around; /* Распределение элементов с равным отступом */ + height: 100vh; /* Высота на весь экран для центрирования */ + text-align: center; } .peer-id-container { - display: flex; - align-items: center; - margin-bottom: 20px; + margin-bottom: 10px; } .peer-id-text { - margin-right: 10px; font-size: 16px; color: #fff; } @@ -30,8 +28,9 @@ display: flex; align-items: center; justify-content: center; - margin-bottom: 20px; + margin-bottom: 10px; width: 100%; + max-width: 400px; /* Ограничение ширины для компактности */ } .call-info-container { @@ -44,35 +43,40 @@ .call-info-text { font-size: 18px; - margin-bottom: 10px; + margin-bottom: 5px; /* Небольшой отступ снизу для Peer ID */ color: #ffffff; } .call-duration-text { font-size: 18px; - margin-bottom: 20px; + margin-bottom: 15px; /* Отступ снизу для времени */ color: #ffffff; } -.hang-up-button { +.custom-hang-up-button { background: none; border: none; - color: #ff3b30; /* Красная трубка */ - font-size: 24px; + cursor: pointer; + padding: 0; + outline: none; +} + +.custom-hang-up-button svg { + transition: transform 0.2s ease-in-out; +} + +.custom-hang-up-button:hover svg { + transform: scale(1.1); /* Увеличение кнопки при наведении */ } .call-button { - background: none; + background: #007aff; border: none; - color: #007aff; + color: #ffffff; cursor: pointer; font-size: 24px; margin-left: 10px; -} - -.call-button ion-icon { - font-size: 30px; - color: #007aff; + padding: 10px; /* Увеличение кнопки для удобства */ } .panel-optimizer { @@ -81,8 +85,15 @@ justify-content: center; } +.ion-padding { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; /* Центрирование всего контента по высоте экрана */ +} + .drone-gif { - width: 100px; /* Задайте нужный размер */ + width: 300px; /* Задайте нужный размер */ height: auto; margin-bottom: 20px; -} +} \ No newline at end of file diff --git a/src/components/ExploreContainer.tsx b/src/components/ExploreContainer.tsx index ec229be..dd7807b 100644 --- a/src/components/ExploreContainer.tsx +++ b/src/components/ExploreContainer.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react'; import './ExploreContainer.css'; import InputContainer from './Input'; import { - IonButton, IonContent, IonFooter, IonToolbar, IonText, IonModal, IonIcon, IonHeader, IonTitle + IonButton, IonContent, IonFooter, IonToolbar, IonText, IonModal, IonIcon } from '@ionic/react'; import { call as callIcon, close as hangUpIcon } from 'ionicons/icons'; import Peer, { MediaConnection } from 'peerjs'; @@ -132,26 +132,6 @@ const ExploreContainer: React.FC = () => { Ваш Peer ID: {connectionInfo} - - - {/* Модальное окно для звонка */} - - -
- {/* Добавляем гифку */} - Monkey with Drone - Peer ID: {currentCallId} - {Math.floor(callDuration / 60)}:{callDuration % 60} - - - -
-
-
- - - -
{
-
-
+ + + {/* Модальное окно для звонка */} + + +
+ {/* Добавляем гифку */} + Monkey with Drone + Peer ID: {currentCallId} + {Math.floor(callDuration / 60)}:{callDuration % 60} + +
+
+
+ ); }; -export default ExploreContainer; +export default ExploreContainer; \ No newline at end of file