diff --git a/_includes/footer.html b/_includes/footer.html index fda5b4dc..413d76ab 100755 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -54,7 +54,7 @@

Development

  • Read about development
  • Join mailing list
  • Documentation
    • -
  • Chat with us on Matrix
    • +
  • Join the Community
  • Development code
  • Translation Platform
  • Sugar Labs Wiki
    • diff --git a/assets/chat1.png b/assets/chat1.png new file mode 100644 index 00000000..1719a10c Binary files /dev/null and b/assets/chat1.png differ diff --git a/assets/chat2.png b/assets/chat2.png new file mode 100644 index 00000000..a299b9fb Binary files /dev/null and b/assets/chat2.png differ diff --git a/assets/chat3.png b/assets/chat3.png new file mode 100644 index 00000000..97460f60 Binary files /dev/null and b/assets/chat3.png differ diff --git a/assets/chat4.png b/assets/chat4.png new file mode 100644 index 00000000..794d7257 Binary files /dev/null and b/assets/chat4.png differ diff --git a/assets/chat5.png b/assets/chat5.png new file mode 100644 index 00000000..219af5a8 Binary files /dev/null and b/assets/chat5.png differ diff --git a/chat-with-us-on-matrix.html b/chat-with-us-on-matrix.html new file mode 100644 index 00000000..8142773c --- /dev/null +++ b/chat-with-us-on-matrix.html @@ -0,0 +1,94 @@ +--- +layout: default +title: Music Blocks - Sugar Labs +permalink: /chat-with-us-on-matrix/index.html +--- + +
    + Join the Community +
    + + +
    +
    +
    +
    +
    +
    +
    +

    SUGARLABS ON MATRIX ELEMENTS

    +
    +

    Element is a secure messaging and collaboration application built on the Matrix protocol, an open standard for decentralized communication. It offers end-to-end encryption, ensuring that conversations remain private and secure. Element supports features such as group chats, file sharing, voice and video calls, and integrates with various other communication platforms through bridging. It's available as a web application and has desktop versions for Windows, macOS, and Linux, as well as mobile apps for Android and iOS.

    +
    Join us on Matrix +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    SUGARLABS ON DISCORD

    +
    +

    Discord is a popular communication platform that combines the features of chat lobbies, message boards, and VoIP chat systems. It allows users to create and join servers—dedicated spaces for communities or groups—where they can participate in text channels, voice calls, video calls, and share media and files. While Discord provides various privacy settings and safety features, concerns have been raised about data collection and user privacy. The platform collects user data, including messages and IP logs, which are retained for up to two years.

    +
    Join us on Discord +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    + +
    +
    +

    Sugarlabs Community channel on Matrix Elements and Discord.

    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    + +
    +
    +
    +
    \ No newline at end of file diff --git a/css/airspace.css b/css/airspace.css index ef2e1cb8..e18347d3 100755 --- a/css/airspace.css +++ b/css/airspace.css @@ -2778,6 +2778,28 @@ font-size:30px; top:0.1em; color: #fff !important; } +.join-mat { + display:inline-block; + padding:0.7em 1.4em; + margin:0 0.3em 0.3em 0; + border-radius:0.15em; + box-sizing: border-box; + text-decoration:none; + font-family:'Roboto',sans-serif; + text-transform:uppercase; + font-weight:400; + color:#FFFFFF !important; + background-color:#00a40e; + box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17); + text-align:center; + position:relative; + transition: all 0.3s cubic-bezier(.25,.8,.25,1); + font-size: 1.5em; +} +.join-mat:active { + top:0.1em; + color: #fff !important; +} table, th, td { border: 1px solid black; border-collapse: collapse; diff --git a/js/custom.js b/js/custom.js index 2e5ea841..50d932f6 100644 --- a/js/custom.js +++ b/js/custom.js @@ -17,54 +17,48 @@ function toggleAnswer(answerId, element) { // Counter Animation of the home page document.addEventListener('DOMContentLoaded', () => { const counters = document.querySelectorAll('.count'); - // Function to animate the counter function animateCounter(counter) { const target = +counter.getAttribute('data-target'); - const speed = 200; + const speed = 200; const updateCount = () => { - const current = +counter.innerText; - const increment = target / speed; + const current = +counter.innerText.replace(/,/g, ''); + const increment = Math.ceil(target / speed); if (current < target) { - counter.innerText = Math.ceil(current + increment); - setTimeout(updateCount, 10); // Repeat every 10ms + counter.innerText = Math.min(current + increment, target).toLocaleString(); + setTimeout(updateCount, 10); + } else if (target === 170) { + counter.innerText = target.toLocaleString(); } else { - - if (target === 170) { - counter.innerText = `${target}`; - } else { - counter.innerText = `${target}+`; - } - + counter.innerText = target.toLocaleString() + '+'; } }; updateCount(); } - // Use IntersectionObserver to detect when the element comes into view const observerOptions = { - root: null, - threshold: 0.3 + root: null, + threshold: 0.3 }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { - animateCounter(entry.target); // Start animation - observer.unobserve(entry.target); // Stop observing after animation starts + animateCounter(entry.target); + observer.unobserve(entry.target); } }); }, observerOptions); counters.forEach(counter => { - observer.observe(counter); // Observe each counter + observer.observe(counter); }); - }); + //Donation Banner // Ensures that the buttons have loaded correctly before executing code document.addEventListener('DOMContentLoaded', () => {