reverted to old web configuration on main branch
This commit is contained in:
115
home/static/home/css/components/carousel.css
Normal file
115
home/static/home/css/components/carousel.css
Normal file
@@ -0,0 +1,115 @@
|
||||
.carousel{
|
||||
display: none !important; /*TEMP TURNED OFF*/
|
||||
|
||||
height: 25em;
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.carousel-inner{
|
||||
height: 100%;
|
||||
/* min-width: 400%; */
|
||||
display: flex;
|
||||
transition: all ease .5s;
|
||||
}
|
||||
|
||||
.carousel-item{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.carousel-item h1{
|
||||
position: relative;
|
||||
color: white;
|
||||
bottom: 1.5em;
|
||||
}
|
||||
.carousel-controls .prev{
|
||||
display: inline-block;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-image: url('/static/home/img/carousel/prev.svg');
|
||||
background-position: center;
|
||||
background-size: auto 100%;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.carousel-controls .next{
|
||||
display: inline-block;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-image: url('/static/home/img/carousel/next.svg');
|
||||
background-position: center;
|
||||
background-size: auto 100%;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.prev:hover, .next:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.carousel-indicators{
|
||||
position: absolute;
|
||||
bottom: 4em;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.carousel-indicators span{
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
width: 30px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
opacity: .5;
|
||||
cursor: pointer;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.carousel-indicators span.active{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/*ODKAZY NA FOTKY JSOU PŘÍMO V HTML PROTOŽE CHCI PARSNOUT STATIC TAG */
|
||||
|
||||
|
||||
@media only screen and (min-width: 991px){
|
||||
.prev, .next{
|
||||
height: 1.5em !important;
|
||||
width: 1.5em !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 990px){
|
||||
.carousel{
|
||||
height: 100vh;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
88
home/static/home/css/components/demo/chat.css
Normal file
88
home/static/home/css/components/demo/chat.css
Normal file
@@ -0,0 +1,88 @@
|
||||
.chat {
|
||||
background-color: var(--c-boxes);
|
||||
color: var(--c-text);
|
||||
padding: 1em;
|
||||
height: 28em;
|
||||
border-radius: 1em;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.chat .title-bar {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.chat .messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
max-height: 19.5em;
|
||||
}
|
||||
|
||||
.chat .messages div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chat .messages div sub {
|
||||
font-size: 0.8em;
|
||||
color: rgb(176, 176, 176);
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.chat .messages div p {
|
||||
padding: 0.5em;
|
||||
width: 95%;
|
||||
margin-bottom: 0.5em;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
color: black;
|
||||
background-color: rgb(156, 156, 156);
|
||||
}
|
||||
|
||||
.messages::-webkit-scrollbar {
|
||||
background-color: var(--c-boxes);
|
||||
width: 0.2em;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
.messages::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 5px var(--c-lines);
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
.messages::-webkit-scrollbar-thumb {
|
||||
background: var(--c-text);
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
.messages::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--c-background-light);
|
||||
}
|
||||
|
||||
.chat .send-box {
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.chat .send-box button {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 1.5em;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
.chat .send-box input{
|
||||
padding: 0.5em;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 990px) {
|
||||
.chat {
|
||||
margin: 0;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
63
home/static/home/css/components/demo/direct-voice-chat.css
Normal file
63
home/static/home/css/components/demo/direct-voice-chat.css
Normal file
@@ -0,0 +1,63 @@
|
||||
.direct-voice-chat{
|
||||
background-color: var(--c-boxes);
|
||||
color: var(--c-text);
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.direct-voice-chat .title-bar{
|
||||
font-size: 2em;
|
||||
}
|
||||
.direct-voice-chat .info{
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.direct-voice-chat .connection{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 1em;
|
||||
}
|
||||
.direct-voice-chat .connection input{
|
||||
padding: 0.5em;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
.direct-voice-chat .connection button{
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 1.5em;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
.direct-voice-chat .incoming-call-container{
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.incoming-call-container #direct-accept-call-btn{
|
||||
color: white;
|
||||
background-color: green;
|
||||
clip-path: circle(50% at 50% 50%);
|
||||
padding: 1em;
|
||||
}
|
||||
.incoming-call-container #direct-deny-call-btn{
|
||||
color: white;
|
||||
background-color: rgb(148, 0, 0);
|
||||
clip-path: circle(50% at 50% 50%);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.direct-voice-chat .window .window-body:first-child{
|
||||
margin-top: 1em;
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 990px) {
|
||||
|
||||
}
|
||||
104
home/static/home/css/components/demo/global-voice-chat.css
Normal file
104
home/static/home/css/components/demo/global-voice-chat.css
Normal file
@@ -0,0 +1,104 @@
|
||||
.global-voice-chat {
|
||||
position: relative;
|
||||
background-color: var(--c-boxes);
|
||||
color: var(--c-text);
|
||||
padding: 1em;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.global-voice-chat .title-bar {
|
||||
margin: auto;
|
||||
font-size: 2em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.global-voice-chat .fa-circle {
|
||||
color: #ddd;
|
||||
text-shadow: 0 0 4px black;
|
||||
}
|
||||
.global-voice-chat .info{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.info div:nth-child(2) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7em;
|
||||
}
|
||||
.info button{
|
||||
margin: 0.5em auto;
|
||||
padding: 0.5em;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
font: initial;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.info i{
|
||||
font-size: 1.8em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.global-voice-chat .controls{
|
||||
margin-top: 1em;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
.controls button{
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
|
||||
padding: 0.5em 0.55em;
|
||||
font: initial;
|
||||
font-size: 1.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#global-disconnect-btn{
|
||||
padding: 0.5em 0.4em;
|
||||
}
|
||||
|
||||
.active-call::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transform: scale(1.2) translateZ(0);
|
||||
filter: blur(15px);
|
||||
background: rgb(33, 105, 42);
|
||||
background: -moz-linear-gradient(90deg, rgba(33, 105, 42, 1) 0%, rgba(120, 253, 29, 1) 50%, rgba(69, 252, 155, 1) 100%);
|
||||
background: -webkit-linear-gradient(90deg, rgba(33, 105, 42, 1) 0%, rgba(120, 253, 29, 1) 50%, rgba(69, 252, 155, 1) 100%);
|
||||
background: linear-gradient(90deg, rgba(33, 105, 42, 1) 0%, rgba(120, 253, 29, 1) 50%, rgba(69, 252, 155, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#21692a", endColorstr="#45fc9b", GradientType=1);
|
||||
background-size: 100% 100%;
|
||||
animation: animateGlow 1.25s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes animateGlow {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 200% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.global-voice-chat .online {
|
||||
color: #a9f634 !important;
|
||||
}
|
||||
|
||||
.global-voice-chat .fa-phone {
|
||||
color: #008000;
|
||||
}
|
||||
|
||||
.global-voice-chat .fa-phone-slash {
|
||||
color: #a80000;
|
||||
}
|
||||
103
home/static/home/css/components/drone.css
Normal file
103
home/static/home/css/components/drone.css
Normal file
@@ -0,0 +1,103 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
|
||||
|
||||
|
||||
|
||||
|
||||
.drone{
|
||||
margin-top: -4em;
|
||||
font-style: normal;
|
||||
|
||||
width: 100%;
|
||||
position: relative;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.drone .video-background {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
object-fit: cover;
|
||||
z-index: -1;
|
||||
|
||||
clip-path: polygon(0 3%, 15% 0, 30% 7%, 42% 3%, 61% 1%, 82% 5%, 100% 1%, 100% 94%, 82% 100%, 65% 96%, 47% 99%, 30% 90%, 14% 98%, 0 94%);
|
||||
}
|
||||
|
||||
|
||||
.drone article{
|
||||
padding: 5em;
|
||||
|
||||
display: flex;
|
||||
|
||||
border-radius: 2em;
|
||||
padding: 3em;
|
||||
gap: 2em;
|
||||
|
||||
position: relative;
|
||||
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.drone article header h1{
|
||||
font-size: 4em;
|
||||
|
||||
font-weight: 300;
|
||||
}
|
||||
.drone article header{
|
||||
flex: 1;
|
||||
}
|
||||
.drone article main{
|
||||
width: 90%;
|
||||
display: flex;
|
||||
font-size: 1em;
|
||||
/* width: 60%; */
|
||||
flex: 2;
|
||||
flex-direction: row;
|
||||
|
||||
font-weight: 400;
|
||||
|
||||
gap: 2em;
|
||||
/* flex-wrap: wrap; */
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.drone a{
|
||||
color: white;
|
||||
}
|
||||
.drone article div{
|
||||
display: flex;
|
||||
flex: 1;
|
||||
font-size: 1.25em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 990px) {
|
||||
.drone article header h1{
|
||||
font-size: 2.3em;
|
||||
|
||||
font-weight: 200;
|
||||
}
|
||||
.drone article header{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.drone article main{
|
||||
flex-direction: column;
|
||||
font-size: 1em;
|
||||
}
|
||||
.drone article{
|
||||
height: auto;
|
||||
}
|
||||
.drone article div{
|
||||
margin: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
.drone video{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
140
home/static/home/css/components/global/contact-me.css
Normal file
140
home/static/home/css/components/global/contact-me.css
Normal file
@@ -0,0 +1,140 @@
|
||||
.contact-me {
|
||||
margin: 5em auto;
|
||||
position: relative;
|
||||
|
||||
aspect-ratio: 16 / 9;
|
||||
|
||||
background-color: #c8c8c8;
|
||||
max-width: 100vw;
|
||||
}
|
||||
.contact-me + .mail-box{
|
||||
|
||||
}
|
||||
|
||||
.contact-me .opening {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
z-index: 2;
|
||||
transform-origin: top;
|
||||
|
||||
padding-top: 4em;
|
||||
|
||||
clip-path: polygon(0 0, 100% 0, 50% 50%);
|
||||
background-color: #d2d2d2;
|
||||
|
||||
transition: all 1s ease;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
.rotate-opening{
|
||||
background-color: #c8c8c8;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.contact-me .content {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
transition: all 1s ease-out;
|
||||
}
|
||||
.content-moveup{
|
||||
transform: translateY(-70%);
|
||||
}
|
||||
.content-moveup-index {
|
||||
z-index: 2 !important;
|
||||
}
|
||||
|
||||
.contact-me .content form{
|
||||
width: 80%;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
background-color: #deefff;
|
||||
padding: 1em;
|
||||
border: 0.5em dashed #88d4ed;
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
.contact-me .content form div{
|
||||
width: -webkit-fill-available;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.contact-me .content form input[type=submit]{
|
||||
margin: auto;
|
||||
border: none;
|
||||
background: #4ca4d5;
|
||||
color: #ffffff;
|
||||
padding: 1em 1.5em;
|
||||
cursor: pointer;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.contact-me .content form input[type=text],
|
||||
.contact-me .content form input[type=email],
|
||||
.contact-me .content form textarea{
|
||||
background-color: #bfe8ff;
|
||||
border: none;
|
||||
border-bottom: 0.15em solid #064c7d;
|
||||
padding: 0.5em;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.contact-me .cover {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%);
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.contact-me .triangle{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
clip-path: polygon(100% 0, 0 100%, 100% 100%);
|
||||
background-color: rgb(255 255 255);
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% { transform: translateX(0); }
|
||||
25% { transform: translateX(-2px) rotate(-8deg); }
|
||||
50% { transform: translateX(2px) rotate(4deg); }
|
||||
75% { transform: translateX(-1px) rotate(-2deg); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
|
||||
.contact-me .opening i {
|
||||
color: #797979;
|
||||
font-size: 5em;
|
||||
display: inline-block;
|
||||
animation: 0.4s ease-in-out 2s infinite normal none running shake;
|
||||
animation-delay: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: 990px){
|
||||
.contact-me{
|
||||
aspect-ratio: unset;
|
||||
margin-top: 7ch;
|
||||
}
|
||||
}
|
||||
192
home/static/home/css/components/introduction.css
Normal file
192
home/static/home/css/components/introduction.css
Normal file
@@ -0,0 +1,192 @@
|
||||
.introduction {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--c-text);
|
||||
|
||||
padding-bottom: 10em;
|
||||
margin-top: 6em;
|
||||
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top:0;
|
||||
|
||||
/* gap: 4em;*/
|
||||
}
|
||||
.introduction h1{
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.introduction article {
|
||||
/*background-color: cadetblue;*/
|
||||
|
||||
padding: 2em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.introduction article header {}
|
||||
|
||||
.introduction article:nth-child(1) {
|
||||
width: 100%;
|
||||
/* transform: rotate(5deg); */
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
}
|
||||
/*
|
||||
.introduction article:nth-child(2) {
|
||||
width: 50%;
|
||||
transform: rotate(3deg);
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.introduction article:nth-child(3) {
|
||||
width: 50%;
|
||||
transform: rotate(-2deg);
|
||||
align-self: flex-start;
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
|
||||
.animation-introduction{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.animation-introduction ul{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*overflow: hidden; ZAPNOUT KDYŽ NECHCEŠ ANIMACI PŘECHÁZET DO OSTATNÍCH DIVŮ*/
|
||||
}
|
||||
|
||||
.animation-introduction ul li{
|
||||
position: absolute;
|
||||
display: block;
|
||||
list-style: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: rgba(255, 255, 255, 35%);
|
||||
animation: animate 4s linear infinite;
|
||||
bottom: -150px;
|
||||
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(1){
|
||||
left: 25%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
|
||||
.animation-introduction ul li:nth-child(2){
|
||||
left: 10%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 2s;
|
||||
animation-duration: 12s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(3){
|
||||
left: 70%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(4){
|
||||
left: 40%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
animation-delay: 0s;
|
||||
animation-duration: 18s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(5){
|
||||
left: 65%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(6){
|
||||
left: 75%;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(7){
|
||||
left: 35%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
animation-delay: 7s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(8){
|
||||
left: 50%;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
animation-delay: 15s;
|
||||
animation-duration: 45s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(9){
|
||||
left: 20%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
animation-delay: 2s;
|
||||
animation-duration: 35s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(10){
|
||||
left: 85%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
animation-delay: 0s;
|
||||
animation-duration: 11s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes animate {
|
||||
|
||||
0%{
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 1;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
100%{
|
||||
transform: translateY(-1000px) rotate(720deg);
|
||||
opacity: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 990px) {
|
||||
.animation-introduction ul li:nth-child(6){
|
||||
left: 67%;
|
||||
}
|
||||
.animation-introduction ul li:nth-child(10) {
|
||||
left: 60%;
|
||||
}
|
||||
.introduction {
|
||||
margin: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.introduction article {
|
||||
width: auto !important;
|
||||
transform: none !important;
|
||||
align-self: none !important;
|
||||
}
|
||||
}
|
||||
155
home/static/home/css/components/portfolio.css
Normal file
155
home/static/home/css/components/portfolio.css
Normal file
@@ -0,0 +1,155 @@
|
||||
.portfolio {
|
||||
margin: auto;
|
||||
margin-top: 10em;
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.portfolio div .door {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #c2a67d;
|
||||
|
||||
border-radius: 1em;
|
||||
|
||||
transform-origin: bottom;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
|
||||
z-index: 3;
|
||||
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% { transform: translateX(0); }
|
||||
25% { transform: translateX(-2px) rotate(-8deg); }
|
||||
50% { transform: translateX(2px) rotate(4deg); }
|
||||
75% { transform: translateX(-1px) rotate(-2deg); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
.door i{
|
||||
color: #5e5747;
|
||||
font-size: 5em;
|
||||
display: inline-block;
|
||||
animation: shake 0.4s ease-in-out infinite;
|
||||
animation-delay: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.portfolio .door-open{
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.portfolio>header {
|
||||
width: fit-content;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: -4.7em;
|
||||
left: 0;
|
||||
padding: 1em 3em;
|
||||
padding-bottom: 0;
|
||||
background-color: #cdc19c;
|
||||
color: #5e5747;
|
||||
border-top-left-radius: 1em;
|
||||
border-top-right-radius: 1em;
|
||||
}
|
||||
|
||||
.portfolio>header h1 {
|
||||
font-size: 2.5em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.portfolio>header i {
|
||||
font-size: 6em;
|
||||
}
|
||||
|
||||
.portfolio article{
|
||||
position: relative;
|
||||
}
|
||||
.portfolio article::after{
|
||||
clip-path: polygon(0% 0%, 11% 12.5%, 0% 25%, 11% 37.5%, 0% 50%, 11% 62.5%, 0% 75%, 11% 87.5%, 0% 100%, 100% 100%, 84% 87.5%, 98% 75%, 86% 62.5%, 100% 50%, 86% 37.5%, 100% 25%, 93% 12.5%, 100% 0%);
|
||||
content: "";
|
||||
bottom: 0;
|
||||
right: -2em;
|
||||
|
||||
height: 2em;
|
||||
width: 6em;
|
||||
transform: rotate(-45deg);
|
||||
|
||||
position: absolute;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.portfolio article::before{
|
||||
clip-path: polygon(0% 0%, 11% 12.5%, 0% 25%, 11% 37.5%, 0% 50%, 11% 62.5%, 0% 75%, 11% 87.5%, 0% 100%, 100% 100%, 84% 87.5%, 98% 75%, 86% 62.5%, 100% 50%, 86% 37.5%, 100% 25%, 93% 12.5%, 100% 0%);
|
||||
content: "";
|
||||
top: 0;
|
||||
left: -2em;
|
||||
|
||||
height: 2em;
|
||||
width: 6em;
|
||||
transform: rotate(-45deg);
|
||||
|
||||
position: absolute;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.portfolio article header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.portfolio div {
|
||||
padding: 3em;
|
||||
background-color: #cdc19c;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
gap: 5em;
|
||||
|
||||
border-radius: 1em;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.portfolio div article {
|
||||
display: flex;
|
||||
border-radius: 0em;
|
||||
background-color: #9c885c;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portfolio div article header a img {
|
||||
padding: 2em 0;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: 990px) {
|
||||
.portfolio div{
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.portfolio div article{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
78
home/static/home/css/components/services.css
Normal file
78
home/static/home/css/components/services.css
Normal file
@@ -0,0 +1,78 @@
|
||||
.services {
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
.services article {
|
||||
margin: 2rem auto;
|
||||
padding: 2em;
|
||||
width: 30%;
|
||||
|
||||
|
||||
border: 1px solid #d0d7de;
|
||||
/* Jemná šedá barva */
|
||||
border-radius: 6px;
|
||||
/* Kulaté rohy */
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
/* Decentní stín */
|
||||
padding: 16px;
|
||||
/* Vnitřní odsazení */
|
||||
background-color: #f6f8fa;
|
||||
/* Bílé pozadí */
|
||||
}
|
||||
|
||||
.services>header {
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.services>header h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
.services>header i {
|
||||
font-size: 6em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.services article header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.services article header h1 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.services article header i {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.services div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.services div article main {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: 990px) {
|
||||
.services article{
|
||||
margin: 2em auto;
|
||||
width: 80%;
|
||||
}
|
||||
.services div{
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
196
home/static/home/css/index.css
Normal file
196
home/static/home/css/index.css
Normal file
@@ -0,0 +1,196 @@
|
||||
:root{
|
||||
--c-background: #031D44; /*background*/
|
||||
--c-background-light: #04395E; /*background-highlight*/
|
||||
--c-boxes: #24719f;; /*boxes*/
|
||||
--c-lines: #87a9da; /*lines*/
|
||||
--c-text: #CAF0F8; /*text*/
|
||||
--c-other: #70A288; /*other*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
body{
|
||||
overflow-x: hidden;
|
||||
|
||||
background: rgb(0,0,0);
|
||||
background: -moz-linear-gradient(145deg, var(--c-background) 0%, var(--c-background-light) 100%);
|
||||
background: -webkit-linear-gradient(145deg, var(--c-background) 0%, var(--c-background-light) 100%);
|
||||
background: linear-gradient(145deg, var(--c-background) 0%, var(--c-background-light) 100%);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
body .between h1{
|
||||
margin-top: 2em;
|
||||
text-align: center;
|
||||
color: var(--c-text);
|
||||
text-decoration: underline;
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
.hidden{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.apps-group{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.apps-group div{
|
||||
border-radius: 1em;
|
||||
}
|
||||
.apps-container{
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 3em;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
.apps-container .chat,
|
||||
.apps-container .apps-group{
|
||||
|
||||
}
|
||||
|
||||
|
||||
.nav-drone{
|
||||
margin-top: 0em !important;
|
||||
margin-bottom: -9em;
|
||||
height: 20em;
|
||||
position: relative;
|
||||
}
|
||||
.nav-drone .video-background{
|
||||
height: 55vh;
|
||||
clip-path: polygon(0 0%, 15% 0, 30% 0%, 42% 0%, 61% 0%, 82% 0%, 100% 0%, 100% 94%, 82% 100%, 65% 96%, 47% 99%, 30% 90%, 14% 98%, 0 94%) !important;
|
||||
}
|
||||
#nav-drone-background-css:has(nav) nav{ /*TOHLE PATŘÍ NAVIGACI VYŘEŠIT*/
|
||||
margin-bottom: 8em;
|
||||
}
|
||||
|
||||
.spark-cursor{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
transform: translate(-20px, -20px);
|
||||
}
|
||||
.spark-cursor *{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.spark-cursor span{
|
||||
position:absolute;
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
pointer-events: none;
|
||||
transform-origin: bottom;
|
||||
overflow: hidden;
|
||||
|
||||
filter: drop-shadow(0 0 0.5em #0f0) drop-shadow(0 0 1em #0f0);
|
||||
}
|
||||
.spark-cursor span.animate::before{
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0f0;
|
||||
animation: animate-spark 1s ease-in-out forwards;
|
||||
}
|
||||
@keyframes animate-spark{
|
||||
0%{
|
||||
transform: translateY(100%);
|
||||
}
|
||||
100%{
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.success-form-alert{
|
||||
display: none;
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
padding: 10px;
|
||||
border: 1px solid #c3e6cb;
|
||||
border-radius: 5px;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.success-form-alert .close{
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 990px) {
|
||||
.apps-container{
|
||||
display: flex;
|
||||
margin: auto;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
gap: 1em;
|
||||
}
|
||||
.nav-drone{
|
||||
display: none;
|
||||
}
|
||||
.apps-container .apps-group {
|
||||
font-size: 0.9em;
|
||||
gap: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#reconnect{
|
||||
border-radius: 1em;
|
||||
color: white;
|
||||
padding: 4em;
|
||||
background-color: rgb(195 20 20);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
border: #7b0000 dashed 0.5em;
|
||||
}
|
||||
#reconnect img{
|
||||
width: 10em;
|
||||
}
|
||||
#reconnect button{
|
||||
position: relative;
|
||||
color: white;
|
||||
margin: auto 1em;
|
||||
padding: 1em;
|
||||
font: initial;
|
||||
font-size: 2em;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover{
|
||||
animation: shake 0.4s ease-in-out infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes shake {
|
||||
0% { transform: translateX(0); }
|
||||
25% { transform: translateX(-2px) rotate(-8deg); }
|
||||
50% { transform: translateX(2px) rotate(4deg); }
|
||||
75% { transform: translateX(-1px) rotate(-2deg); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
BIN
home/static/home/img/carousel/content/camera.jpg
Normal file
BIN
home/static/home/img/carousel/content/camera.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
home/static/home/img/carousel/content/italy.png
Normal file
BIN
home/static/home/img/carousel/content/italy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
BIN
home/static/home/img/carousel/content/programing.jpg
Normal file
BIN
home/static/home/img/carousel/content/programing.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 MiB |
1
home/static/home/img/carousel/next.svg
Normal file
1
home/static/home/img/carousel/next.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 18 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M0.759,31.748l-0.507,-0.507c-0.336,-0.336 -0.336,-0.881 0,-1.218l14.023,-14.023l-14.023,-14.023c-0.336,-0.337 -0.336,-0.882 0,-1.218l0.507,-0.507c0.336,-0.336 0.881,-0.336 1.218,0l15.139,15.139c0.336,0.336 0.336,0.881 -0,1.218l-15.139,15.139c-0.337,0.336 -0.882,0.336 -1.218,-0Z" style="fill:#fff;fill-rule:nonzero;"/></svg>
|
||||
|
After Width: | Height: | Size: 773 B |
1
home/static/home/img/carousel/prev.svg
Normal file
1
home/static/home/img/carousel/prev.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 18 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M16.609,31.748l0.507,-0.507c0.336,-0.336 0.336,-0.881 -0,-1.218l-14.023,-14.023l14.023,-14.023c0.336,-0.337 0.336,-0.882 -0,-1.218l-0.507,-0.507c-0.336,-0.336 -0.881,-0.336 -1.218,0l-15.139,15.139c-0.336,0.336 -0.336,0.881 0,1.218l15.139,15.139c0.337,0.336 0.882,0.336 1.218,-0Z" style="fill:#fff;fill-rule:nonzero;"/></svg>
|
||||
|
After Width: | Height: | Size: 773 B |
BIN
home/static/home/img/portfolio/DAVO_logo_2024_bile.png
Normal file
BIN
home/static/home/img/portfolio/DAVO_logo_2024_bile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
24
home/static/home/img/portfolio/logo_epinger.svg
Normal file
24
home/static/home/img/portfolio/logo_epinger.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
BIN
home/static/home/img/portfolio/perlica-3.webp
Normal file
BIN
home/static/home/img/portfolio/perlica-3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
129
home/static/home/js/anon-chat.js
Normal file
129
home/static/home/js/anon-chat.js
Normal file
@@ -0,0 +1,129 @@
|
||||
$(document).ready(function () {
|
||||
console.log(Intl.DateTimeFormat().resolvedOptions().timeZone)
|
||||
|
||||
// Initialize WebSocket connection
|
||||
var ws_url = "";
|
||||
const ws_path = '/ws/anonChat/';
|
||||
|
||||
if(window.location.protocol === 'https:'){
|
||||
ws_url = 'wss://' + window.location.host + ws_path;
|
||||
}else{
|
||||
ws_url = 'ws://' + window.location.host + ws_path;
|
||||
}
|
||||
|
||||
console.log({'websocket_url': ws_url});
|
||||
|
||||
let socket = new WebSocket(ws_url);
|
||||
|
||||
// Select elements
|
||||
const $messageInput = $('#anon-message');
|
||||
const $sendButton = $('#send-anon-message');
|
||||
const $messagesContainer = $('.chat .messages');
|
||||
|
||||
const $reconnectButton = $('#reconnect button');
|
||||
|
||||
$('#reconnect').hide();
|
||||
|
||||
// Event: Connection opened
|
||||
socket.onopen = function () {
|
||||
console.log('WebSocket connection established.');
|
||||
};
|
||||
|
||||
// Event: Message received from the server
|
||||
socket.onmessage = function (event) {
|
||||
console.log('Message received:', event.data);
|
||||
|
||||
// Parse the JSON data
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
// Extract the message and display it
|
||||
if (data.message) {
|
||||
var time_formated = data.time;
|
||||
time_formated.replace(' pm', 'p.m.').replace(' am', 'a.m.');
|
||||
|
||||
/*
|
||||
<div>
|
||||
<sub>{{message.time}}</sub>
|
||||
<p>{{message.text}}</p>
|
||||
</div>
|
||||
*/
|
||||
|
||||
const $message = $('<div>').append($('<sub>').text(time_formated)).append($('<p>').text(data.message));
|
||||
|
||||
$messagesContainer.append($message);
|
||||
} else {
|
||||
console.warn('Invalid message format received:', data);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
// Event: Connection closed
|
||||
socket.onclose = function () {
|
||||
console.warn('WebSocket connection closed.');
|
||||
|
||||
$('#reconnect').show();
|
||||
};
|
||||
|
||||
// Event: Error occurred
|
||||
socket.onerror = function (error) {
|
||||
console.error('WebSocket error:', error);
|
||||
|
||||
$('#reconnect').show();
|
||||
};
|
||||
|
||||
$reconnectButton.on('click', function(){
|
||||
console.log("reconnecting!");
|
||||
|
||||
socket = new WebSocket(ws_url);
|
||||
});
|
||||
|
||||
// Send message to the server when the button is clicked
|
||||
$sendButton.on('click', function () {
|
||||
|
||||
const message = $messageInput.val().trim();
|
||||
|
||||
if (message) {
|
||||
socket.send(JSON.stringify({ message: message })); // Send the message to the server
|
||||
console.log('Message sent:', message);
|
||||
|
||||
var time = new Date();
|
||||
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||
const timeWithoutSeconds = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false }); // `hour12: false` forces 24-hour format
|
||||
|
||||
// Format as "Nov. 25, 2024, 14:55"
|
||||
var time_output = `${monthNames[time.getMonth()]}. ${time.getDate()}, ${time.getFullYear()}, ${timeWithoutSeconds}`;
|
||||
|
||||
|
||||
const $sentMessage = $('<div>').append($('<sub>').text(time_output)).append($('<p>').text(message));
|
||||
|
||||
$messagesContainer.append($sentMessage);
|
||||
|
||||
// Clear the input field
|
||||
$messageInput.val('');
|
||||
|
||||
scroll_chat_to_bottom();
|
||||
|
||||
} else if((socket.readyState === WebSocket.OPEN) == false) {
|
||||
console.log("socket.readyState === WebSocket.OPEN: " + String(socket.readyState === WebSocket.OPEN));
|
||||
|
||||
$('#reconnect').show();
|
||||
} else {
|
||||
console.warn('Cannot send message. WebSocket is not open or message is empty.');
|
||||
|
||||
$('#reconnect').show();
|
||||
}
|
||||
});
|
||||
|
||||
// Allow pressing Enter to send the message
|
||||
$messageInput.on('keypress', function (event) {
|
||||
if (event.key === 'Enter') {
|
||||
$sendButton.click(); // Trigger the click event on the button
|
||||
}
|
||||
});
|
||||
|
||||
function scroll_chat_to_bottom(){
|
||||
// Animate scroll to bottom (500 miliseconds)
|
||||
$messagesContainer.animate({ scrollTop: $messagesContainer[0].scrollHeight }, 500);
|
||||
}
|
||||
});
|
||||
188
home/static/home/js/anon-direct-voice-chat.js
Normal file
188
home/static/home/js/anon-direct-voice-chat.js
Normal file
@@ -0,0 +1,188 @@
|
||||
$(document).ready(function () {
|
||||
const localAudio = $('#direct-localAudio')[0];
|
||||
const remoteAudio = $('#direct-remoteAudio')[0];
|
||||
|
||||
const peerIdInput = $('#direct-peer-id-input');
|
||||
const connectBtn = $('#direct-connect-btn');
|
||||
const muteBtn = $('#direct-mute-btn');
|
||||
const disconnectBtn = $('#direct-disconnect-btn');
|
||||
|
||||
const acceptCallBtn = $('#direct-accept-call-btn');
|
||||
const denyCallBtn = $('#direct-deny-call-btn');
|
||||
|
||||
const copyIDButton = $(".direct-voice-chat .info");
|
||||
|
||||
let localStream = null;
|
||||
let currentCall = null;
|
||||
let incomingCall = null;
|
||||
let isMuted = false;
|
||||
|
||||
$('#incoming-call-container').hide();
|
||||
disconnectBtn.hide(); // Skryj disconnect tlačítko na začátku
|
||||
|
||||
const direct_peer = new Peer();
|
||||
|
||||
/*
|
||||
const direct_peer = new Peer(undefined, {
|
||||
host: 'peerjs.vontor.com',
|
||||
port: 443, // Use 443 for HTTPS
|
||||
path: '/app', // Ensure this matches the path configured on your server
|
||||
secure: true, // Enable TLS/SSL
|
||||
});
|
||||
*/
|
||||
|
||||
// Display your Peer ID
|
||||
direct_peer.on('open', (id) => {
|
||||
$('#direct-peer-id').text(id);
|
||||
});
|
||||
|
||||
// Get audio stream
|
||||
async function getAudioStream() {
|
||||
if (!localStream) {
|
||||
localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
localAudio.srcObject = localStream;
|
||||
}
|
||||
return localStream;
|
||||
}
|
||||
|
||||
// Handle incoming call
|
||||
direct_peer.on('call', async (call) => {
|
||||
console.log("Incoming call...");
|
||||
incomingCall = call;
|
||||
connectBtn.prop('disabled', true);
|
||||
|
||||
$('#incoming-call-container').show(); // Zobraz příchozí hovor
|
||||
});
|
||||
|
||||
// Deny the incoming call
|
||||
denyCallBtn.on('click', async () => {
|
||||
if (incomingCall) {
|
||||
const conn = direct_peer.connect(incomingCall.peer);
|
||||
conn.on('open', () => {
|
||||
conn.send({ type: 'call-denied' });
|
||||
});
|
||||
incomingCall = null;
|
||||
}
|
||||
|
||||
$('#incoming-call-container').hide(); // Skryj kontejner
|
||||
connectBtn.prop('disabled', false); // Povolit connect tlačítko
|
||||
});
|
||||
|
||||
// Accept the incoming call
|
||||
acceptCallBtn.on('click', async () => {
|
||||
if (!incomingCall) {
|
||||
alert('No incoming call to accept.');
|
||||
return;
|
||||
}
|
||||
|
||||
const localStream = await getAudioStream();
|
||||
localAudio.srcObject = localStream;
|
||||
|
||||
incomingCall.answer(localStream);
|
||||
currentCall = incomingCall;
|
||||
incomingCall = null;
|
||||
|
||||
const conn = direct_peer.connect(currentCall.peer);
|
||||
conn.on('open', () => {
|
||||
conn.send({ type: 'call-accepted' });
|
||||
});
|
||||
|
||||
currentCall.on('stream', (remoteStream) => {
|
||||
remoteAudio.srcObject = remoteStream;
|
||||
});
|
||||
console.log("Incoming call accepted!");
|
||||
|
||||
$('#incoming-call-container').hide(); // Skryj kontejner
|
||||
peerIdInput.prop('disabled', true); // Disable input
|
||||
connectBtn.hide(); // Skryj connect tlačítko
|
||||
disconnectBtn.show(); // Zobraz disconnect tlačítko
|
||||
});
|
||||
|
||||
// Connect and make a call
|
||||
connectBtn.on('click', async () => {
|
||||
const peerId = peerIdInput.val();
|
||||
|
||||
if (!peerId) {
|
||||
alert('Please enter an ID to connect to.');
|
||||
return;
|
||||
} else if (peerId === $('#direct-peer-id').text()) {
|
||||
alert('Dont use own ID to connect!');
|
||||
return;
|
||||
}
|
||||
|
||||
const localStream = await getAudioStream();
|
||||
localAudio.srcObject = localStream;
|
||||
|
||||
const conn = direct_peer.connect(peerId);
|
||||
conn.on('data', (data) => {
|
||||
if (data.type === 'call-accepted') {
|
||||
console.log('The other user has accepted the call!');
|
||||
} else if (data.type === 'call-denied') {
|
||||
console.log('The other user has denied the call!');
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
const call = direct_peer.call(peerId, localStream);
|
||||
currentCall = call;
|
||||
|
||||
call.on('stream', (remoteStream) => {
|
||||
remoteAudio.srcObject = remoteStream;
|
||||
});
|
||||
|
||||
peerIdInput.prop('disabled', true); // Disable input
|
||||
connectBtn.hide(); // Skryj connect tlačítko
|
||||
disconnectBtn.show(); // Zobraz disconnect tlačítko
|
||||
console.log("Call started!");
|
||||
});
|
||||
|
||||
// Disconnect functionality
|
||||
disconnectBtn.on('click', () => {
|
||||
handleDisconnect();
|
||||
});
|
||||
|
||||
function handleDisconnect() {
|
||||
if (currentCall) {
|
||||
currentCall.close();
|
||||
currentCall = null;
|
||||
}
|
||||
|
||||
if (localStream) {
|
||||
localStream.getTracks().forEach(track => track.stop());
|
||||
localStream = null;
|
||||
}
|
||||
remoteAudio.srcObject = null;
|
||||
localAudio.srcObject = null;
|
||||
|
||||
disconnectBtn.hide(); // Skryj disconnect tlačítko
|
||||
connectBtn.show(); // Zobraz connect tlačítko
|
||||
peerIdInput.prop('disabled', false); // Enable input
|
||||
|
||||
console.log('Disconnected.');
|
||||
}
|
||||
|
||||
// Mute/Unmute functionality
|
||||
muteBtn.on('click', () => {
|
||||
if (!localStream) {
|
||||
alert('No audio stream available.');
|
||||
return;
|
||||
}
|
||||
|
||||
isMuted = !isMuted;
|
||||
|
||||
localStream.getAudioTracks().forEach(track => {
|
||||
track.enabled = !isMuted;
|
||||
});
|
||||
|
||||
muteBtn.text(isMuted ? 'Unmute' : 'Mute');
|
||||
});
|
||||
|
||||
copyIDButton.on('click', () => {
|
||||
console.log("copied!");
|
||||
// Get the text field
|
||||
var copyText = $('#direct-peer-id').text();
|
||||
|
||||
// Copy the text inside the text field
|
||||
navigator.clipboard.writeText(copyText);
|
||||
});
|
||||
});
|
||||
160
home/static/home/js/anon-voice-chat.js
Normal file
160
home/static/home/js/anon-voice-chat.js
Normal file
@@ -0,0 +1,160 @@
|
||||
$(document).ready(function () {
|
||||
let peer;
|
||||
let socket;
|
||||
let currentCall;
|
||||
|
||||
var state;
|
||||
|
||||
// Setup WebSocket
|
||||
const ws_path = "/ws/AnonVoice/";
|
||||
var ws_url = "";
|
||||
|
||||
if (window.location.protocol === 'https:') {
|
||||
ws_url = 'wss://' + window.location.host + ws_path;
|
||||
} else {
|
||||
ws_url = 'ws://' + window.location.host + ws_path;
|
||||
}
|
||||
|
||||
// Initialize PeerJS
|
||||
/*peer = new Peer({
|
||||
host: 'peerjs.vontor.cz',
|
||||
port: 443,
|
||||
secure: true,
|
||||
key: 'publicAllowed'
|
||||
});*/
|
||||
|
||||
socket = new WebSocket(ws_url);
|
||||
|
||||
socket.onopen = function (event) {
|
||||
console.log("Connected to: Global voice room.");
|
||||
|
||||
socket.send(JSON.stringify({ type: "request_user_count" }));
|
||||
};
|
||||
|
||||
socket.onmessage = function (event) {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
if (data.type === "user_count_message") {
|
||||
$('#connected-people').text(data.users_count);
|
||||
} else if (data.type === "peer_id_message") {
|
||||
// Start call with received peer ID
|
||||
startCall(data.peer_id);
|
||||
}
|
||||
};
|
||||
|
||||
socket.onclose = function (event) {
|
||||
$("#my-status").removeClass('online');
|
||||
|
||||
if (state !== false) {
|
||||
socket.send(JSON.stringify({ type: "disconnecting_user" }));
|
||||
}
|
||||
console.log("Disconnected from the voice room.");
|
||||
$("#global-connect-btn").removeClass('hidden');
|
||||
$("#global-disconnect-btn").addClass('hidden');
|
||||
};
|
||||
|
||||
socket.onerror = function (error) {
|
||||
$("#my-status").removeClass('online');
|
||||
console.log("WebSocket Error: ", error);
|
||||
};
|
||||
|
||||
//button connect
|
||||
function connect() {
|
||||
$("#my-status").addClass('online');
|
||||
state = true;
|
||||
|
||||
peer = new Peer();
|
||||
|
||||
/*
|
||||
peer = new Peer(undefined, {
|
||||
host: 'peerjs.vontor.com',
|
||||
port: 443, // Use 443 for HTTPS
|
||||
path: '/app', // Ensure this matches the path configured on your server
|
||||
secure: true, // Enable TLS/SSL
|
||||
});
|
||||
*/
|
||||
|
||||
peer.on('open', function (id) {
|
||||
console.log('My peer ID is: ' + id);
|
||||
|
||||
socket.send(JSON.stringify({ type: "connected_user", peer_id: id }));
|
||||
});
|
||||
|
||||
peer.on('call', function (call) {
|
||||
navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
|
||||
call.answer(stream);
|
||||
currentCall = call;
|
||||
|
||||
call.on('stream', function (remoteStream) {
|
||||
playAudio(remoteStream);
|
||||
});
|
||||
}).catch(function (err) {
|
||||
console.error('Failed to get local stream', err);
|
||||
});
|
||||
});
|
||||
|
||||
$("#global-connect-btn").addClass('hidden');
|
||||
$("#global-disconnect-btn").removeClass('hidden');
|
||||
|
||||
$(".global-voice-chat").removeClass('active-call');
|
||||
}
|
||||
|
||||
//connecting to peer
|
||||
function startCall(remotePeerId) {
|
||||
//getting mic
|
||||
navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
|
||||
const call = peer.call(remotePeerId, stream);
|
||||
currentCall = call;
|
||||
|
||||
call.on('stream', function (remoteStream) {
|
||||
playAudio(remoteStream);
|
||||
});
|
||||
|
||||
call.on('error', function (err) {
|
||||
console.error('Call failed:', err);
|
||||
});
|
||||
|
||||
}).catch(function (err) {
|
||||
console.error('Failed to get local stream', err);
|
||||
});
|
||||
}
|
||||
|
||||
//button disconnect
|
||||
function disconnect() {
|
||||
state = false;
|
||||
|
||||
if (currentCall) {
|
||||
currentCall.close();
|
||||
console.log("Call closed.");
|
||||
}
|
||||
if (peer) {
|
||||
peer.disconnect();
|
||||
console.log("Peer disconnected.");
|
||||
}
|
||||
if (socket) {
|
||||
socket.send(JSON.stringify({ type: "disconnecting_user" }));
|
||||
}
|
||||
|
||||
$("#global-connect-btn").removeClass('hidden');
|
||||
$("#global-disconnect-btn").addClass('hidden');
|
||||
|
||||
$("#my-status").removeClass('online');
|
||||
|
||||
}
|
||||
|
||||
function playAudio(stream) {
|
||||
const audio = $('#global-remoteAudio')[0];
|
||||
audio.srcObject = stream;
|
||||
audio.play();
|
||||
}
|
||||
|
||||
window.onbeforeunload = function () {
|
||||
if (socket && state !== false) {
|
||||
socket.send(JSON.stringify({ type: "disconnecting_user" }));
|
||||
}
|
||||
};
|
||||
|
||||
// Example usage
|
||||
$('#global-connect-btn').click(connect);
|
||||
$('#global-disconnect-btn').click(disconnect);
|
||||
});
|
||||
149
home/static/home/js/carousel.js
Normal file
149
home/static/home/js/carousel.js
Normal file
@@ -0,0 +1,149 @@
|
||||
$(document).ready(function() {
|
||||
let carousel = $('.carousel');
|
||||
let carouselInner = $('.carousel-inner');
|
||||
let prev = $('.carousel-controls .prev');
|
||||
let next = $('.carousel-controls .next');
|
||||
let totalSlides = $('.carousel-inner .carousel-item').length;
|
||||
let step = 100 / totalSlides;
|
||||
let activeSlide = 0;
|
||||
let activeIndicator = 0;
|
||||
let direction = -1;
|
||||
let jump = 1;
|
||||
let interval = 3000;
|
||||
let time;
|
||||
|
||||
// Init carousel
|
||||
carouselInner.css('minWidth', totalSlides * 100 + '%');
|
||||
loadIndicators();
|
||||
loop(true);
|
||||
|
||||
// Carousel events
|
||||
next.on('click', function() {
|
||||
console.log("next");
|
||||
slideToNext();
|
||||
});
|
||||
|
||||
prev.on('click', function() {
|
||||
console.log("prev");
|
||||
slideToPrev();
|
||||
});
|
||||
|
||||
carouselInner.on('transitionend', function() {
|
||||
if (direction === -1) {
|
||||
if (jump > 1) {
|
||||
for (let i = 0; i < jump; i++) {
|
||||
activeSlide++;
|
||||
carouselInner.append(carouselInner.children().first());
|
||||
}
|
||||
} else {
|
||||
activeSlide++;
|
||||
carouselInner.append(carouselInner.children().first());
|
||||
}
|
||||
} else if (direction === 1) {
|
||||
if (jump > 1) {
|
||||
for (let i = 0; i < jump; i++) {
|
||||
activeSlide--;
|
||||
carouselInner.prepend(carouselInner.children().last());
|
||||
}
|
||||
} else {
|
||||
activeSlide--;
|
||||
carouselInner.prepend(carouselInner.children().last());
|
||||
}
|
||||
}
|
||||
|
||||
carouselInner.css({
|
||||
transition: 'none',
|
||||
transform: 'translateX(0%)'
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
jump = 1;
|
||||
carouselInner.css('transition', 'all ease 1.5s');
|
||||
});
|
||||
updateIndicators();
|
||||
});
|
||||
|
||||
$(document).on('click', '.carousel-indicators span', function() {
|
||||
let slideTo = parseInt($(this).data('slide-to'));
|
||||
let indicators = $('.carousel-indicators span');
|
||||
indicators.each(function(index) {
|
||||
if ($(this).hasClass('active')) {
|
||||
activeIndicator = index;
|
||||
}
|
||||
});
|
||||
|
||||
if (slideTo - activeIndicator > 1) {
|
||||
jump = slideTo - activeIndicator;
|
||||
step = jump * step;
|
||||
slideToNext();
|
||||
} else if (slideTo - activeIndicator === 1) {
|
||||
slideToNext();
|
||||
} else if (slideTo - activeIndicator < 0) {
|
||||
if (Math.abs(slideTo - activeIndicator) > 1) {
|
||||
jump = Math.abs(slideTo - activeIndicator);
|
||||
step = jump * step;
|
||||
slideToPrev();
|
||||
}
|
||||
slideToPrev();
|
||||
}
|
||||
step = 100 / totalSlides;
|
||||
});
|
||||
|
||||
carousel.on('mouseover', function() {
|
||||
loop(false);
|
||||
});
|
||||
|
||||
carousel.on('mouseout', function() {
|
||||
loop(true);
|
||||
});
|
||||
|
||||
// Carousel functions
|
||||
function loadIndicators() {
|
||||
for (let index = 0; index < totalSlides; index++) {
|
||||
if (index === 0) {
|
||||
$('.carousel-indicators').append('<span data-slide-to="' + index + '" class="active"></span>');
|
||||
} else {
|
||||
$('.carousel-indicators').append('<span data-slide-to="' + index + '"></span>');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateIndicators() {
|
||||
if (activeSlide > (totalSlides - 1)) {
|
||||
activeSlide = 0;
|
||||
} else if (activeSlide < 0) {
|
||||
activeSlide = totalSlides - 1;
|
||||
}
|
||||
$('.carousel-indicators span.active').removeClass('active');
|
||||
$('.carousel-indicators span').eq(activeSlide).addClass('active');
|
||||
}
|
||||
|
||||
function slideToNext() {
|
||||
if (direction === 1) {
|
||||
direction = -1;
|
||||
carouselInner.prepend(carouselInner.children().last());
|
||||
}
|
||||
|
||||
carousel.css('justifyContent', 'flex-start');
|
||||
carouselInner.css('transform', 'translateX(-' + step + '%)');
|
||||
}
|
||||
|
||||
function slideToPrev() {
|
||||
if (direction === -1) {
|
||||
direction = 1;
|
||||
carouselInner.append(carouselInner.children().first());
|
||||
}
|
||||
carousel.css('justifyContent', 'flex-end');
|
||||
carouselInner.css('transform', 'translateX(' + step + '%)');
|
||||
}
|
||||
|
||||
function loop(status) {
|
||||
if (status === true) {
|
||||
time = setInterval(function() {
|
||||
slideToNext();
|
||||
}, interval);
|
||||
} else {
|
||||
clearInterval(time);
|
||||
}
|
||||
}
|
||||
});
|
||||
33
home/static/home/js/drone.js
Normal file
33
home/static/home/js/drone.js
Normal file
@@ -0,0 +1,33 @@
|
||||
$(document).ready(function () {
|
||||
function setVideoDroneQuality() {
|
||||
$sourceElement = $("#video-source");
|
||||
|
||||
const videoSources = {
|
||||
fullHD: 'static/home/video/drone-background-video-1080p.mp4', // For desktops (1920x1080)
|
||||
hd: 'static/home/video/drone-background-video-720p.mp4', // For tablets/smaller screens (1280x720)
|
||||
lowRes: 'static/home/video/drone-background-video-480p.mp4' // For mobile devices or low performance (854x480)
|
||||
};
|
||||
|
||||
const screenWidth = $(window).width(); // Get screen width
|
||||
|
||||
// Determine the appropriate video source
|
||||
if (screenWidth >= 1920) {
|
||||
$sourceElement.attr('src', "https://vontor-cz.s3.eu-central-1.amazonaws.com/" + videoSources.fullHD);
|
||||
} else if (screenWidth >= 1280) {
|
||||
$sourceElement.attr('src', "https://vontor-cz.s3.eu-central-1.amazonaws.com/" + videoSources.hd);
|
||||
} else {
|
||||
$sourceElement.attr('src', "https://vontor-cz.s3.eu-central-1.amazonaws.com/" + videoSources.lowRes);
|
||||
}
|
||||
|
||||
// Reload the video
|
||||
$('#drone-video')[0].load();
|
||||
|
||||
console.log("video set!");
|
||||
|
||||
}
|
||||
|
||||
setTimeout(1000);
|
||||
|
||||
setVideoDroneQuality();
|
||||
//$("#debug-drone").click(setVideoDroneQuality);
|
||||
});
|
||||
72
home/static/home/js/global/contact-me.js
Normal file
72
home/static/home/js/global/contact-me.js
Normal file
@@ -0,0 +1,72 @@
|
||||
$(document).ready(function () {
|
||||
$("#contactme-form").submit(function (event) {
|
||||
event.preventDefault(); // Prevent normal form submission
|
||||
|
||||
$.ajax({
|
||||
url: "/submit-contactme/", // URL of the Django view
|
||||
type: "POST",
|
||||
data: $(this).serialize(), // Serialize form data
|
||||
success: function (response) {
|
||||
if (response.success) {
|
||||
close_contact();
|
||||
|
||||
$("#contactme-form .success-form-alert").fadeIn();
|
||||
$("#contactme-form")[0].reset(); // Clear the form
|
||||
|
||||
alert("Zpráva odeslaná!")
|
||||
}
|
||||
},
|
||||
error: function (response) {
|
||||
alert("Zpráva nebyla odeslaná, zkontrolujte si připojení k internetu nebo naskytl u nás problém :(")
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$("#contactme-form .success-form .close").click(function () {
|
||||
$("#contactme-form .success-form-alert").fadeOut();
|
||||
});
|
||||
|
||||
var opened_contact = false;
|
||||
|
||||
$(document).on("click", ".contact-me .opening", function () {
|
||||
console.log("toggle mail");
|
||||
|
||||
const opening = $(".contact-me .opening");
|
||||
|
||||
|
||||
|
||||
|
||||
// Check if we're opening or closing
|
||||
if (opened_contact === false) {
|
||||
// Toggle rotation
|
||||
opening.toggleClass('rotate-opening');
|
||||
|
||||
// Wait for the rotation to finish
|
||||
setTimeout(function() {
|
||||
$(".contact-me .content").addClass('content-moveup-index');
|
||||
}, 500);
|
||||
|
||||
setTimeout(function() {
|
||||
$(".contact-me .content")[0].offsetHeight;
|
||||
|
||||
$(".contact-me .content").addClass('content-moveup');
|
||||
}, 1000); // Small delay to trigger transition
|
||||
|
||||
opened_contact = true;
|
||||
} else {
|
||||
close_contact();
|
||||
}
|
||||
});
|
||||
|
||||
function close_contact(){
|
||||
$(".contact-me .content").removeClass('content-moveup');
|
||||
|
||||
setTimeout(function() {
|
||||
$(".contact-me .content").toggleClass('content-moveup-index');
|
||||
$(".contact-me .opening").toggleClass('rotate-opening');
|
||||
}, 700);
|
||||
|
||||
opened_contact = false;
|
||||
}
|
||||
});
|
||||
29
home/static/home/js/index.js
Normal file
29
home/static/home/js/index.js
Normal file
@@ -0,0 +1,29 @@
|
||||
$(document).ready(function () {
|
||||
|
||||
$("body").click(function(event){
|
||||
var randomId = "spark-" + Math.floor(Math.random() * 100000);
|
||||
var $spark = $("<div>").addClass("spark-cursor").attr("id", randomId);
|
||||
$("body").append($spark);
|
||||
|
||||
// Nastavení pozice
|
||||
$spark.css({
|
||||
"top": event.pageY + "px",
|
||||
"left": event.pageX + "px",
|
||||
"filter": "hue-rotate(" + Math.random() * 360 + "deg)"
|
||||
});
|
||||
|
||||
for (let index = 0; index < 8; index++) {
|
||||
let $span = $("<span>");
|
||||
$span.css("transform", 'rotate(' + (index * 45) +"deg)" );
|
||||
$spark.append($span);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
$spark.find("span").addClass("animate");
|
||||
}, 10);
|
||||
|
||||
setTimeout(function(){
|
||||
$("#" + randomId).remove();
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
13
home/static/home/js/portfolio.js
Normal file
13
home/static/home/js/portfolio.js
Normal file
@@ -0,0 +1,13 @@
|
||||
$(document).ready(function () {
|
||||
var doorOpen= false;
|
||||
|
||||
$(".door").click(function(){
|
||||
doorOpen = !doorOpen;//převrátí hodnotu
|
||||
|
||||
if ($(".door").hasClass('door-open')){
|
||||
$(".door").removeClass('door-open');
|
||||
}else{
|
||||
$(".door").addClass('door-open');
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user