ghaymah_dev/codepill-sfu
2
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

[mirotalksfu] - add support us section

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2025-11-10 19:45:06 +01:00
الأصل 8d23a5fd94
التزام dffc992f4b
7 ملفات معدلة مع 298 إضافات و26 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

140
public/css/landing.css
عرض الملف

@@ -2142,3 +2142,143 @@ main {
pointer-events: none;
opacity: 0.5;
}
/*--------------------------------------------------------------
# Support Us Section
--------------------------------------------------------------*/
#supportUs .cta-inner {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 60%, rgba(36, 40, 48, 0.25) 100%);
}
.support-us-content {
text-align: center;
padding: 32px 24px;
}
.support-icon {
margin-bottom: 24px;
}
.support-icon .fa-heart {
font-size: 48px;
color: #ff6b6b;
}
.heartbeat {
animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
0%,
100% {
transform: scale(1);
}
10%,
30% {
transform: scale(1.1);
}
20%,
40% {
transform: scale(1);
}
}
.support-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
max-width: 900px;
margin: 0 auto;
}
.support-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 28px 20px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
min-height: 160px;
}
.support-card:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.support-card-icon svg {
filter: brightness(0) invert(1);
}
.support-card-icon {
margin-bottom: 12px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
transition: all 0.3s ease;
}
.support-card:hover .support-card-icon {
background: rgba(255, 255, 255, 0.15);
transform: scale(1.1);
}
.support-card-title-small {
margin: 0 0 8px 0;
font-size: 18px;
font-weight: 600;
color: #fff;
text-align: center;
}
.support-card-description-small {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
text-align: center;
line-height: 1.5;
}
.support-footer {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 768px) {
.support-options {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
@media (max-width: 480px) {
.support-options {
grid-template-columns: 1fr;
gap: 16px;
}
.support-icon .fa-heart {
font-size: 36px;
}
.support-us-content {
padding: 24px 16px;
}
.support-card {
padding: 24px 16px;
min-height: 140px;
}
}

15
public/js/Brand.js
عرض الملف

@@ -67,6 +67,7 @@ let BRAND = {
poweredBy: true,
sponsors: true,
advertisers: true,
supportUs: true,
footer: true,
},
whoAreYou: {
@@ -191,10 +192,21 @@ async function getBrand() {
// BRAND configurations
function setBrand(data) {
BRAND = data;
BRAND = mergeBrand(BRAND, data);
console.log('Set Brand done');
}
function mergeBrand(current, updated) {
for (const key of Object.keys(updated)) {
if (!current.hasOwnProperty(key) || typeof updated[key] !== 'object') {
current[key] = updated[key];
} else {
mergeBrand(current[key], updated[key]);
}
}
return current;
}
// BRAND check
function checkBrand() {
!BRAND.html.topSponsors && elementDisplay(topSponsors, false);
@@ -204,6 +216,7 @@ function checkBrand() {
!BRAND.html.poweredBy && elementDisplay(poweredBy, false);
!BRAND.html.sponsors && elementDisplay(sponsors, false);
!BRAND.html.advertisers && elementDisplay(advertisers, false);
!BRAND.html.supportUs && elementDisplay(supportUs, false);
!BRAND.html.footer && elementDisplay(footer, false);
}

100
public/views/landing.html
عرض الملف

@@ -675,6 +675,106 @@
</div>
</div>
</section>
<section id="supportUs" class="cta section mt-24 mb-24">
<div class="container">
<div class="cta-inner section-inner br-12 has-animations">
<div class="support-us-content">
<div class="support-icon">
<i class="fas fa-heart heartbeat"></i>
</div>
<h2 class="section-title mt-0">Support MiroTalk SFU</h2>
<p class="section-paragraph mt-16">
MiroTalk SFU is a free, open-source project under AGPLv3 license. Your support helps
us maintain servers, add new features, and keep the service free for everyone. Every
contribution matters!
</p>
<!-- Support Options -->
<div class="support-options mt-24">
<!-- CodeCanyon -->
<a
href="https://codecanyon.net/user/miroslavpejic85"
target="_blank"
class="support-card reveal-from-bottom"
data-reveal-delay="150"
>
<div class="support-card-icon">
<svg height="28" width="28" viewBox="0 0 24 24" fill="#82B541">
<path
d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.5 16.5h-11v-9h11v9z"
/>
</svg>
</div>
<h5 class="support-card-title-small">CodeCanyon</h5>
<p class="support-card-description-small">Buy commercial license</p>
</a>
<!-- PayPal -->
<a
href="https://www.paypal.com/donate/?hosted_button_id=TW833WU7EUPHJ"
target="_blank"
class="support-card reveal-from-bottom"
data-reveal-delay="200"
>
<div class="support-card-icon">
<svg height="28" width="28" viewBox="0 0 24 24" fill="#00457C">
<path
d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.76-4.852a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.746-4.46z"
/>
</svg>
</div>
<h5 class="support-card-title-small">PayPal</h5>
<p class="support-card-description-small">One-time donation</p>
</a>
<!-- Stripe -->
<a
href="https://buy.stripe.com/9B614m93Lg4L4Ag3Eabsc02"
target="_blank"
class="support-card reveal-from-bottom"
data-reveal-delay="250"
>
<div class="support-card-icon">
<svg height="28" width="28" viewBox="0 0 24 24" fill="#635BFF">
<path
d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z"
/>
</svg>
</div>
<h5 class="support-card-title-small">Stripe</h5>
<p class="support-card-description-small">Donate via credit card</p>
</a>
<!-- GitHub Sponsors -->
<a
href="https://github.com/sponsors/miroslavpejic85"
target="_blank"
class="support-card reveal-from-bottom"
data-reveal-delay="300"
>
<div class="support-card-icon">
<svg height="28" width="28" viewBox="0 0 16 16" fill="#ffffff">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
/>
</svg>
</div>
<h5 class="support-card-title-small">GitHub Sponsors</h5>
<p class="support-card-description-small">Monthly recurring donation</p>
</a>
</div>
<div class="support-footer">
<p class="text-sm mb-0">
<strong>Other ways to help:</strong> Star us on GitHub ⭐, spread the word 📢,
or contribute code 💻
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<footer id="footer" class="site-footer">