fixed
هذا الالتزام موجود في:
Your Name
@@ -1,205 +1,318 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<!-- Title and Icon -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CodePill - 404 Page Not Found</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600,700">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
<title id="title">CodePill - 404 Page not found.</title>
|
||||
<link id="icon" rel="shortcut icon" href="../images/logo.svg" />
|
||||
<link id="appleTouchIcon" rel="apple-touch-icon" href="../images/logo.svg" />
|
||||
body {
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
background: linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);
|
||||
color: #333;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
<!-- Meta Information -->
|
||||
.container {
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
.logo {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
<meta
|
||||
id="description"
|
||||
name="description"
|
||||
content="CodePill powered by WebRTC and mediasoup, Real-time Simple Secure Fast video calls, messaging and screen sharing capabilities in the browser."
|
||||
/>
|
||||
<meta
|
||||
id="keywords"
|
||||
name="keywords"
|
||||
content="webrtc, miro, mediasoup, mediasoup-client, self hosted, voip, sip, real-time communications, chat, messaging, meet, webrtc stun, webrtc turn, webrtc p2p, webrtc sfu, video meeting, video chat, video conference, multi video chat, multi video conference, peer to peer, p2p, sfu, rtc, alternative to, zoom, microsoft teams, google meet, jitsi, meeting"
|
||||
/>
|
||||
.logo img {
|
||||
height: 50px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
<!-- StyleSheet -->
|
||||
.error-code {
|
||||
font-size: 150px;
|
||||
font-weight: 700;
|
||||
color: #e53935;
|
||||
line-height: 1;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 5px 5px 0 rgba(229, 57, 53, 0.1);
|
||||
}
|
||||
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/landing.css" />
|
||||
.error-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
<!-- Js scripts -->
|
||||
.error-description {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
margin-bottom: 40px;
|
||||
max-width: 500px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
<script defer src="../js/Brand.js"></script>
|
||||
<script async src="../js/Umami.js"></script>
|
||||
.error-graphic {
|
||||
margin: 40px 0;
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
<script src="https://unpkg.com/animejs@3.0.1/lib/anime.min.js"></script>
|
||||
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
|
||||
</head>
|
||||
<body class="is-boxed has-animations">
|
||||
<div class="body-wrap">
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<div class="site-header-inner">
|
||||
<div class="brand header-brand">
|
||||
<h1 class="m-0">
|
||||
<a href="/">
|
||||
<img
|
||||
class="header-logo-image"
|
||||
src="../images/logo.svg"
|
||||
alt="mirotalksfu-webrtc-logo"
|
||||
/>
|
||||
<!-- <img
|
||||
class="header-logo-image reveal-from-left"
|
||||
src="../images/mirotalk-mc.png"
|
||||
alt="mirotalksfu-webrtc-logo"
|
||||
width="96"
|
||||
height="auto"
|
||||
/> -->
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
.pill {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 80px;
|
||||
border-radius: 40px;
|
||||
background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 10px 20px rgba(229, 57, 53, 0.3);
|
||||
}
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-inner">
|
||||
<div class="hero-copy">
|
||||
<h1 class="hero-title mt-0">
|
||||
Oops! <br />
|
||||
404 - PAGE NOT FOUND
|
||||
</h1>
|
||||
<p class="hero-paragraph" id="message"></p>
|
||||
<p class="hero-paragraph">This page you are looking not exist.</p>
|
||||
<div class="hero-cta">
|
||||
<a class="button button-primary pulse" onclick="window.location.href = '/';"
|
||||
>GO TO HOMEPAGE</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-figure anime-element">
|
||||
<svg class="placeholder" width="528" height="396" viewBox="0 0 528 396">
|
||||
<rect width="528" height="396" style="fill: transparent" />
|
||||
</svg>
|
||||
<div class="hero-figure-box hero-figure-box-01" data-rotation="45deg"></div>
|
||||
<div class="hero-figure-box hero-figure-box-02" data-rotation="-45deg"></div>
|
||||
<div class="hero-figure-box hero-figure-box-03" data-rotation="0deg"></div>
|
||||
<div class="hero-figure-box hero-figure-box-04" data-rotation="-135deg"></div>
|
||||
<div class="hero-figure-box hero-figure-box-05"></div>
|
||||
<div class="hero-figure-box hero-figure-box-06"></div>
|
||||
<div class="hero-figure-box hero-figure-box-07"></div>
|
||||
<div class="hero-figure-box hero-figure-box-08" data-rotation="-22deg"></div>
|
||||
<div class="hero-figure-box hero-figure-box-09" data-rotation="-52deg"></div>
|
||||
<div class="hero-figure-box hero-figure-box-10" data-rotation="-50deg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
.pill::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
height: 60px;
|
||||
border-radius: 30px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
<footer id="footer" class="site-footer">
|
||||
<div class="container">
|
||||
<div class="site-footer-inner">
|
||||
<div class="brand footer-brand">
|
||||
<a href="/">
|
||||
<img class="header-logo-image" src="../images/logo.svg" alt="Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<ul class="footer-links list-reset">
|
||||
<li>
|
||||
<a href="/about">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://sfu.mirotalk.com/api/v1/docs/">Rest API</a>
|
||||
</li>
|
||||
<li>
|
||||
Contact:
|
||||
<a target="_blank" href="https://www.linkedin.com/in/miroslav-pejic-976a07101/"
|
||||
>Miroslav Pejic</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="footer-social-links list-reset">
|
||||
<li class="footer-social-icon">
|
||||
<a target="_blank" href="https://discord.gg/rgGYfeYW3N">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Forum</title>
|
||||
<path
|
||||
d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"
|
||||
fill="#0270D7"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-social-icon">
|
||||
<a target="_blank" href="https://www.facebook.com/mirotalk">
|
||||
<span class="screen-reader-text">Facebook</span>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M6.023 16L6 9H3V6h3V4c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V6H13l-1 3H9.28v7H6.023z"
|
||||
fill="#0270D7"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-social-icon">
|
||||
<a target="_blank" href="https://www.youtube.com/watch?v=_IVn2aINYww">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M21.582,6.186c-0.23-0.86-0.908-1.538-1.768-1.768C18.254,4,12,4,12,4S5.746,4,4.186,4.418 c-0.86,0.23-1.538,0.908-1.768,1.768C2,7.746,2,12,2,12s0,4.254,0.418,5.814c0.23,0.86,0.908,1.538,1.768,1.768 C5.746,20,12,20,12,20s6.254,0,7.814-0.418c0.861-0.23,1.538-0.908,1.768-1.768C22,16.254,22,12,22,12S22,7.746,21.582,6.186z M10,15.464V8.536L16,12L10,15.464z"
|
||||
fill="#0270D7"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-social-icon">
|
||||
<a target="_blank" href="mailto:miroslav.pejic.85@gmail.com">
|
||||
<span class="screen-reader-text">Google</span>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M7.9 7v2.4H12c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C11.5 1.7 9.9 1 8 1 4.1 1 1 4.1 1 8s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H7.9z"
|
||||
fill="#0270D7"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="github-button"
|
||||
href="https://github.com/sponsors/miroslavpejic85"
|
||||
data-color-scheme="no-preference: light; light: light; dark: dark;"
|
||||
data-icon="octicon-heart"
|
||||
data-size="large"
|
||||
aria-label="Sponsor @miroslavpejic85 on GitHub"
|
||||
>Sponsor</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="github-button"
|
||||
href="https://github.com/miroslavpejic85/mirotalksfu"
|
||||
data-color-scheme="no-preference: light; light: light; dark: dark;"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Star miroslavpejic85/mirotalk on GitHub"
|
||||
>Star</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="footer-copyright">© 2025 CodePill, all rights reserved</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
.broken-pieces {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.piece {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 40px;
|
||||
background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
|
||||
box-shadow: 0 5px 15px rgba(229, 57, 53, 0.3);
|
||||
}
|
||||
|
||||
.piece-1 {
|
||||
top: 20px;
|
||||
left: 30px;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
|
||||
.piece-2 {
|
||||
bottom: 20px;
|
||||
right: 30px;
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 4px solid rgba(229, 57, 53, 0.3);
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.search-icon::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 4px;
|
||||
background-color: rgba(229, 57, 53, 0.3);
|
||||
bottom: -25px;
|
||||
right: -15px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 14px 30px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(229, 57, 53, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(229, 57, 53, 0.5);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: #e53935;
|
||||
border: 2px solid #e53935;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(229, 57, 53, 0.05);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 60px;
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translate(-50%, -50%); }
|
||||
50% { transform: translate(-50%, -55%); }
|
||||
}
|
||||
|
||||
.floating {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
25% { transform: translate(-50%, -50%) rotate(-5deg); }
|
||||
75% { transform: translate(-50%, -50%) rotate(5deg); }
|
||||
}
|
||||
|
||||
.shaking {
|
||||
animation: shake 0.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.error-code {
|
||||
font-size: 120px;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.error-description {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.error-graphic {
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.pill {
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.piece {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 25px;
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<!-- Logo placeholder - replace with actual CodePill logo -->
|
||||
<div style="font-size: 28px; font-weight: 700; color: #e53935;">CODEPILL</div>
|
||||
</div>
|
||||
|
||||
<script defer src="../js/Landing.js"></script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<div class="error-code">404</div>
|
||||
|
||||
<h1 class="error-title">Page Not Found</h1>
|
||||
|
||||
<p class="error-description">
|
||||
The page you're looking for seems to have disappeared. It might have been moved, deleted,
|
||||
or perhaps you entered the wrong URL.
|
||||
</p>
|
||||
|
||||
<div class="error-graphic">
|
||||
<div class="pill floating"></div>
|
||||
<div class="broken-pieces">
|
||||
<div class="piece piece-1"></div>
|
||||
<div class="piece piece-2"></div>
|
||||
</div>
|
||||
<div class="search-icon shaking"></div>
|
||||
</div>
|
||||
|
||||
<div class="error-actions">
|
||||
<a href="/" class="btn btn-primary">Go to Homepage</a>
|
||||
<a href="javascript:history.back()" class="btn btn-secondary">Go Back</a>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 CodePill. All rights reserved.</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add interactive hover effects
|
||||
const pieces = document.querySelectorAll('.piece');
|
||||
|
||||
pieces.forEach(piece => {
|
||||
piece.addEventListener('mouseenter', function() {
|
||||
this.style.transform = this.style.transform + ' scale(1.2)';
|
||||
});
|
||||
|
||||
piece.addEventListener('mouseleave', function() {
|
||||
this.style.transform = this.style.transform.replace(' scale(1.2)', '');
|
||||
});
|
||||
});
|
||||
|
||||
// Add click effect to the pill
|
||||
const pill = document.querySelector('.pill');
|
||||
pill.addEventListener('click', function() {
|
||||
this.classList.add('shaking');
|
||||
setTimeout(() => {
|
||||
this.classList.remove('shaking');
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
المرجع في مشكلة جديدة
حظر مستخدم