index.html

---
layout: home
title: Roundcube - Free and Open Source Webmail Software
date: 2020-04-29T21:10:00Z
---
<div id="banner" class="py-3 py-lg-2">
    <div class="container">
        <div class="grid gap-4">
            <div class="logo text-center pt-lg-4 pt-xl-5">
                <img src="/images/logo.png" data-rc-dark="/images/logo-dark.png" width="432" height="112" id="logo" class="img-fluid" alt="Roundcube - open source webmail software">
            </div>
            <div class="image">
                {% assign skin = site.data.screenshots | first | first %}
                {% assign generated = site.data.screenshots[skin]['generated'] %}
                <a href="/screens"><img src="/screens/skins/{{ skin }}/banner.png?g={{ generated }}" {% if site.data.screenshots[skin]['banner-dark'] %}data-rc-dark="/screens/skins/{{ skin }}/banner_dark.png?g={{ generated }}"{% endif %} width="647" height="390" id="bannerimg" class="img-fluid" alt="Welcome Roundcube Webmail"></a>
            </div>
            <div class="download text-center d-flex flex-column justify-content-center justify-content-lg-start align-items-center pt-xl-4">
                <a href="/download" class="btn rc-icon btn-rc-download btn-lg" title="Download now!">Download</a>
                <span class="version text-body-secondary">Version {{ site.data.releases.stable.version }}</span>
            </div>
        </div>
    </div>
</div>

<main class="flex-shrink-0 container pt-4 pb-5">
    {% include announcement.html %}

    <h1>Roundcube webmail...</h1>
    <p class="mb-0">
        ...is a browser-based multilingual IMAP client with an application-like user interface.
        It provides full functionality you expect from an email client, including MIME support,
        address book, folder manipulation, message searching and spell checking.
        <a href="/about" class="rc-icon read-link">More information</a>
    </p>
    <div class="container">
        <div class="row">
            <div class="col-lg-7 px-0">
                <h2>Features</h2>
                <ul>
                    <li>Drag-&amp;-drop message management</li>
                    <li>Full support for MIME and HTML messages</li>
                    <li>Multiple sender identities</li>
                    <li>Full featured address book with groups and LDAP connectors</li>
                    <li>Find-as-you-type address book integration</li>
                    <li>Threaded message listing</li>
                    <li>IDNA and SMTPUTF8 support</li>
                    <li>Spell checking</li>
                    <li>Responsive skin (multi-device support)</li>
                    <li>Shared/global IMAP folders</li>
                    <li>Support for access control lists (ACL)</li>
                    <li>Built-in caching for fast mailbox access</li>
                    <li>Unlimited users and messages</li>
                    <li>Import/export functions</li>
                    <li>Plug-in API for flexible extensions</li>
                    <li>XSS attack protection</li>
                    <li>Support for PGP encryption</li>
                </ul>

                <a href="/about/#features" class="rc-icon read-link">Complete list of features</a>
            </div>
            <div class="col-lg-5 mt-4 px-0">
                <div class="card">
                    <div class="card-header bg-header">
                        <span class="text-white">Latest News</span>
                    </div>
                    <ul class="list-group list-group-flush ul-striped">
                        {% for post in site.posts limit: site.num_related_items %}
                            <li class="list-group-item">
                                <a href="{{ post.url }}" class="newslink">{{ post.title }}</a><br>
                                <span class="postdate text-body-secondary fst-italic small">{{ post.date | date_to_long_string }}</span>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</main>

<script>
    var announcements = document.getElementsByClassName('rc-announcement');
    var currnet_date = new Date();
    var expiry_date, announcement;

    for (var i = 0; i < announcements.length; i++) {
        announcement = announcements[i];

        if (expiry = announcement.getAttribute('data-rc-expiry')) {
            expiry_date = new Date(expiry);

            if (currnet_date < expiry_date) {
                announcement.classList.remove('d-none');
            }
        }
        else if (announcement) {
            announcement.classList.remove('d-none');
        }
    }

    var switch_logo = function() {
        var logo = document.getElementById('logo');
        var banner = document.getElementById('bannerimg');

        if (!logo.hasAttribute('data-rc-light')) {
            logo.setAttribute('data-rc-light', logo.src);

            if (banner.hasAttribute('data-rc-dark')) {
                banner.setAttribute('data-rc-light', banner.src);
            }
        }

        if (document.getElementsByTagName('html')[0].getAttribute('data-bs-theme') == 'dark') {
            logo.src = logo.getAttribute('data-rc-dark');

            if (banner.hasAttribute('data-rc-dark')) {
                banner.src = banner.getAttribute('data-rc-dark');
            }
        }
        else {
            logo.src = logo.getAttribute('data-rc-light');

            if (banner.hasAttribute('data-rc-dark')) {
                banner.src = banner.getAttribute('data-rc-light');
            }
        }
    };

    switch_logo();
    document.addEventListener('switch-color-mode', switch_logo, false);
</script>