Scribd
Upload
223 views10 pages

EXPPOINTER

Uploaded by

mohammed elouadi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
223 views10 pages

EXPPOINTER

Uploaded by

mohammed elouadi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 10

@font-face {

font-family: "Caver";
src: url(/DATA/SRC/FONT/Caver\ Pitalsal.otf);
}
@font-face {
font-family: "Earth";
src: url(/DATA/SRC/FONT/earthorbiter.ttf);
}
@font-face {
font-family: "Blow";
src: url(/DATA/SRC/FONT/Darkblow-qZjeq.otf);
}
@font-face {
font-family: "Fjalla";
src: url(/DATA/SRC/FONT/FjallaOne-Regular.ttf);
}
/* font-family: "Caver Pitalsal", sans-serif; */
/* background-color: rgb(35, 95, 245); */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

:root {
--ExpColor: rgb(63, 146, 121);
--ExpFont_1: "Earth", sans-serif;
--ExpFont_2: "Caver", sans-serif;
--ExpFont_3: "Blow", sans-serif;
--ExpFont_4: "Fjalla", sans-serif;
}
body {
background-color: var(--ExpColor);
}
/****************** EXP DISPLAY *********************/
.open {
width: 350px;
height: 550px;
overflow: hidden;
}
::-webkit-scrollbar {
width: 0;
}
::-webkit-scrollbar-button {
width: 0;
}
header {
margin-top: 50px;
height: 100px;
color: var(--ExpColor);
}
header h1 {
font-family: var(--ExpFont_1);
text-align: center;
letter-spacing: 5px;
font-size: 35px;
color: white;
}
header #tls_log {
font-size: 20px;
text-align: center;
font-family: var(--ExpFont_3);
color: white;
}
#Elogo {
position: absolute;
top: 5px;
left: 150px;
width: 60px;
height: 60px;
}
/*********************** ACTIVATION AREA ***********************/
.hud {
margin-top: 50px;
display: none;
justify-content: center;
align-items: center;
flex-direction: column;
}
.activation_area {
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: calc(100% - 50px);
height: 100px;
}
.activation_area #hud_title {
text-align: center;
font-size: 20px;
letter-spacing: 2px;
font-family: var(--ExpFont_2);
color: white;
}
.activation_area #key_enter {
margin: 2px auto;
width: 280px;
height: 30px;
font-family: var(--ExpFont_2);
font-size: 23px;
text-indent: 3px;
}
.activation_area #error_msg {
margin: 5px;
display: none;
font-family: var(--ExpFont_2);
letter-spacing: 2px;
text-align: center;
font-size: 18px;
color: rgb(254, 0, 0);
}
/********************* PLAY BUBBLES ****************/
.play_celestial {
margin: 10px auto;
display: flex;
justify-content: center;
align-items: center;
width: calc(100% - 50px);
height: 200px;
/* border: 2px solid white; */
}
.star_blackHole {
margin: 10px auto;
display: flex;
justify-content: center;
align-items: center;
width: calc(100% - 100px);
height: calc(100% - 100px);
/* border: 2px solid white; */
animation: spiner 12s infinite linear;
}
.star_blackHole .star,
.black_hole {
margin: 10px;
width: 60px;
height: 60px;
/* border: 1px solid white; */
border-radius: 50%;
box-shadow: 0 0 60px 20px white;
}
.star_blackHole .star {
background-color: white;
}
@keyframes spiner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/****************************************** TELEGRAM CHANNEL
*******************************************/
.tg_contact {
display: flex;
justify-content: space-evenly;
align-items: center;
margin: 0 auto;
width: 100%;
height: 45px;
/* border: 2px solid white; */
}
.tg_contact .tg {
display: flex;
justify-content: start;
align-items: center;
width: 90px;
height: 27px;
border: 2px solid white;
font-family: var(--ExpFont_1);
background-color: white;
font-weight: bold;
border-radius: 100px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.tg:hover {
font-size: 12px;
box-shadow: 0 0 15px 2px white;
}
.tg_contact .notex,
#notex {
border: 1px solid rgb(243, 121, 121);
background-color: rgb(243, 121, 121);
}
.tg_contact img {
margin-right: 2px;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: white;
}

/**************************************************** DIV SELECT NAME


************************************************/
.d1 {
margin: 10px auto;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 50px;
}
.d1 select {
font-size: 22px;
margin: 3px;
font-family: var(--ExpFont_2);
width: 300px;
height: 35px;
}
/********************* D2 ***********************/
.d2 {
margin: 10px auto;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
width: 300px;
height: 50px;
border-radius: 8px;
}

.d2 button {
margin: 10px;
width: 130px;
height: 40px;
font-size: 20px;
border: 3px solid var(--ExpColor);
cursor: pointer;
border-radius: 5px;
background-color: white;
font-family: var(--ExpFont_2);
letter-spacing: 3px;
transition: all 0.3s ease-in-out;
}
.d2 button:hover {
background-color: var(--ExpColor);
color: white;
}

/******************* D3 *********************/
/*** Ref Div ***/
.d3 {
margin: 5px auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: white;
width: 300px;
height: 120px;
border-radius: 8px;
}
.d3 .divRef,
.nav_rest {
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 40px;
}
.d3 .divRef button {
margin: 0;
padding: 0;
width: 65px;
height: 30px;
font-size: 20px;
font-family: var(--ExpFont_2);
background-color: var(--ExpColor);
border: 3px solid var(--ExpColor);
border-radius: 0 6px 6px 0;
color: white;
cursor: pointer;
}
#btnRef {
margin: 0;
padding: 0;
width: 85px;
height: 30px;
font-size: 20px;
font-family: var(--ExpFont_2);
background-color: var(--ExpColor);
border: 3px solid var(--ExpColor);
border-radius: 0 6px 6px 0;
color: white;
cursor: pointer;
}

.d3 .divRef #putRef {


margin: 0;
padding: 0;
width: 55px;
height: 30px;
font-size: 20px;
text-align: center;
font-weight: bolder;
color: var(--ExpColor);
border: 3px solid var(--ExpColor);
border-radius: 6px 0 0 6px;
}
/*** CUSTOMERS DIV ***/
.d3 .divStock,
.days_rest {
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 40px;
}
.d3 .divStock #cusTitle,
#nav_title,
#dates_title {
width: 100px;
text-align: center;
font-family: var(--ExpFont_2);
font-size: 14px;
letter-spacing: 3px;
/* padding: 5px; */
line-height: 25px;
border: 3px solid var(--ExpColor);
border-radius: 5px 0 0 5px;
}
#cusTitle {
cursor: pointer;
}
#cusNum {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
cursor: pointer;
}
#syncon {
background-color: rgb(0, 255, 4);
border: 3px solid white;
text-align: center;
width: 15px;
height: 15px;
font-size: 10px;
border-radius: 50%;
}
.d3 .divStock #cusNum,
#navs,
#dates,
#ip {
width: 40px;
line-height: 30px;
font-size: 20px;
text-align: center;
/* padding: 5px; */
background-color: var(--ExpColor);
color: white;
border-radius: 0 5px 5px 0;
}
/***************** IP AREA ****************/
.ip_area {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 40px;
}

#ip_title {
width: 100px;
text-align: center;
font-family: var(--ExpFont_2);
font-size: 14px;
letter-spacing: 3px;
/* padding: 5px; */
line-height: 25px;
border: 3px solid var(--ExpColor);
border-radius: 5px 0 0 5px;
}
#ip {
width: 190px;
}
/********** DISCONNECT ***********/
.dc {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
bottom: 56px;
right: -182px;
text-align: center;
letter-spacing: 5px;
background-color: white;
height: 30px;
width: 200px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.dc #logout {
width: 40px;
height: 40px;
padding: 3px;
background-color: white;
border-radius: 50px;
}
.dc #dic {
margin-right: 20px;
color: red;
}
.dc:hover {
right: 0;
}
/************************************************* FOOTER
*************************************************/
footer {
display: flex;
justify-content: center;
background-color: white;
align-items: center;
letter-spacing: 5px;
font-family: var(--ExpFont_1);
height: 50px;
}
/************************************************* FORM
****************************************************/
.back img {
position: absolute;
transform: rotate(-90deg);
left: 0;
top: 0;
padding: 5px;
width: 35px;
height: 35px;
cursor: pointer;
}
.form h3 {
text-align: center;
margin-top: 8px;
font-size: 20px;
color: white;
font-family: var(--ExpFont_1);
}
.form {
display: none;
/* justify-content: center; */
align-items: center;
flex-direction: column;
width: 350px;
height: 540px;
}
.form .items_form {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 350px;
height: 230px;
}
.items_form input {
margin: 10px 0 0 0;
width: 300px;
height: 30px;
font-family: var(--ExpFont_4);
text-indent: 3px;
font-size: 18px;
}
.items_form #selCen {
margin-top: 10px;
width: 300px;
height: 30px;
font-size: 18px;
font-family: var(--ExpFont_2);
}
.form .items_form .buttons_Div button {
margin: 15px 5px 0 5px;
width: 144px;
height: 30px;
font-family: var(--ExpFont_2);
font-size: 18px;
border: none;
border-radius: 5px;
letter-spacing: 3px;
transition: all 0.2s ease-in-out;
cursor: pointer;
}
button:hover {
box-shadow: 0 0 10px 2px white;
}
#save {
background-color: white;
color: black;
}
#clear {
background-color: rgb(234, 125, 125);
color: white;
}
.form .accu_stock {
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 35px;
}
.accu_stock #cus_title {
border: 3px solid white;
font-family: var(--ExpFont_2);
text-align: center;
width: 150px;
height: 35px;
line-height: 30px;
letter-spacing: 3px;
border-radius: 5px 0 0 5px;
}
.accu_stock #cus_num {
width: 80px;
height: 35px;
background-color: white;
line-height: 35px;
color: var(--ExpColor);
border-radius: 0 5px 5px 0;
}

/******************* clnt area ***********************/


.store {
margin: 10px 0 0 0;
display: flex;
align-items: center;
flex-direction: column;
width: 350px;
height: 220px;
border-top: 1px solid rgb(96, 96, 96);
background-color: white;
overflow-y: scroll;
}
.clnt {
/* margin-bottom: 1px; */
font-family: var(--ExpFont_4);
display: flex;
width: 350px;
height: 60px;
background-color: var(--ExpColor);
transition: all 0.2s ease-in-out;
border: 0.3px solid rgb(96, 96, 96);
cursor: pointer;
}
.clnt:hover {
background-color: rgb(106, 178, 157);
}
.clnt .clnt_2 {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 60px;
}
.clnt_2 h3 {
display: flex;
margin: 0;
padding: 0;
margin-left: 10px;
text-align: center;
font-family: var(--ExpFont_2);
letter-spacing: 3px;
cursor: pointer;
}
.clnt_2 button {
width: 30px;
height: 60px;
background-color: rgb(232, 132, 132);
color: white;
font-family: var(--ExpFont_2);
letter-spacing: 3px;
border: none;
cursor: pointer;
}
#yes,
#no {
border: 1px solid white;
}
#yes {
background-color: rgb(237, 143, 143);
}
#no {
background-color: rgb(137, 218, 137);
}
.clnt_2 #imgdel {
width: 20px;
height: 20px;
}

You might also like