diff options
Diffstat (limited to 'pydis_site/templates/home/index.html')
| -rw-r--r-- | pydis_site/templates/home/index.html | 190 |
1 files changed, 149 insertions, 41 deletions
diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index f31363a4..18f6b77b 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -9,12 +9,63 @@ {% block content %} {% include "base/navbar.html" %} - <section class="section"> + <!-- Mobile-only Notice --> + <section id="mobile-notice" class="message is-primary is-hidden-tablet"> + <div class="message-header"> + <p>100K Member Milestone!</p> + </div> + <div class="message-body"> + Thanks to all our members for helping us create this friendly and helpful community! + <br><br> + As a nice treat, we've created a <a href="{% url 'timeline' %}">Timeline page</a> for people + to discover the events that made our community what it is today. Be sure to check it out! + </div> + </section> + + <!-- Wave Hero --> + <section id="wave-hero" class="section is-hidden-mobile"> + + <div class="container"> + <div class="columns is-variable is-8"> + + {# Embedded Welcome video #} + <div id="wave-hero-centered" class="column is-half"> + <div class="force-aspect-container"> + <iframe + class="force-aspect-content" + src="https://www.youtube.com/embed/ZH26PuX3re0" + srcdoc=" + <style> + *{padding:0;margin:0;overflow:hidden} + html,body{height:100%} + img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto} + span{height:1.5em;text-align:center;font:68px/1.5 sans-serif;color:#FFFFFFEE;text-shadow:0 0 0.1em #00000020} + </style> + <a href=https://www.youtube.com/embed/ZH26PuX3re0?autoplay=1> + <img src='{% static "images/frontpage/welcome.jpg" %}' alt='Welcome to Python Discord'> + <span>▶</span> + </a>" + allow="autoplay; accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" + allowfullscreen + ></iframe> + </div> + </div> + </div> + </div> - {# Who are we? #} - <div class="container is-spaced"> + {# Animated wave elements #} + <span id="front-wave" class="wave"></span> + <span id="back-wave" class="wave"></span> + <span id="bottom-wave" class="wave"></span> + + </section> + + <!-- Main Body --> + <section id="body" class="section"> + + <div class="container"> <h1 class="is-size-1">Who are we?</h1> - <br> + <div class="columns is-desktop"> <div class="column is-half-desktop content"> <p> @@ -31,68 +82,125 @@ </p> <p> You can find help with most Python-related problems in one of our help channels. - Our staff of over 50 dedicated expert Helpers are available around the clock + Our staff of over 100 dedicated expert Helpers are available around the clock in every timezone. Whether you're looking to learn the language or working on a complex project, we've got someone who can help you if you get stuck. </p> </div> - {# Right column container #} - <div class="column is-half-desktop"> - <iframe width="560" height="315" src="https://www.youtube.com/embed/ZH26PuX3re0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> - </div> - </div> + {# Showcase box #} + <section id="showcase" class="column is-half-desktop has-text-centered"> + <article class="box"> + + <header class="title">Interactive timeline</header> - {# Projects #} - <h1 class="is-size-1">Projects</h1> - <br> - <div class="columns is-multiline is-tablet"> - - {# Display projects from HomeView.repos #} - {% for repo in repo_data %} - <div class="column is-one-third-desktop is-half-tablet"> - <div class="card has-equal-height github-card"> - <div class="card-content"> - <div class="repo-headline"> - <i class="fab fa-github"></i> - <a href="https://github.com/{{ repo.repo_name }}"> <strong>{{ repo.repo_name }}</strong></a> - </div> - <div> - {{ repo.description }} - <br><br> - </span><span class="repo-language-dot {{ repo.language | lower }}"></span> {{ repo.language }} - <span id="repo-footer-item"><i class="fas fa-star"></i> {{ repo.stargazers }}</span> - <span id="repo-footer-item"><i class="fas fa-code-branch"></i> {{ repo.forks }}</span> - </div> - </div> + <div class="mini-timeline"> + <i class="fa fa-asterisk"></i> + <i class="fa fa-code"></i> + <i class="fab fa-python"></i> + <i class="fa fa-alien-monster"></i> + <i class="fa fa-duck"></i> + <i class="fa fa-bug"></i> </div> - </div> - {% endfor %} + + <p class="subtitle"> + Discover the history of our community, and learn about the events that made our community what it is today. + </p> + + <div class="buttons are-large is-centered"> + <a href="{% url 'timeline' %}" class="button is-primary"> + <span>Check it out!</span> + <span class="icon"> + <i class="fas fa-arrow-right"></i> + </span> + </a> + </div> + + </article> + </section> </div> </div> </section> - {# Sponsors #} - <section class="section-sp hero is-light"> - <div id="sponsors-hero" class="hero-body"> + <!-- Projects --> + {% if repo_data %} + <section id="projects" class="section"> + <div class="container"> + <h1 class="is-size-1">Projects</h1> + + <div class="columns is-multiline is-tablet"> + + {# Generate project data from HomeView.repos #} + {% for repo in repo_data %} + <div class="column is-one-third-desktop is-half-tablet"> + + <a href="https://github.com/{{ repo.repo_name }}"> + <article class="card"> + + <header class="card-header"> + <span class="card-header-icon"> + <span class="icon"><i class="fab fa-github"></i></span> + </span> + <div class="card-header-title"> + {{ repo.repo_name|cut:"python-discord/" }} + </div> + </header> + + <p class="card-content"> + {{ repo.description }} + </p> + + <footer class="card-footer"> + <div class="card-footer-item"> + <i class="repo-language-dot {{ repo.language | lower }}"></i> + {{ repo.language }} + </div> + <div class="card-footer-item"> + <i class="fas fa-star"></i> + {{ repo.stargazers }} + </div> + <div class="card-footer-item"> + <i class="fas fa-code-branch"></i> + {{ repo.forks }} + </div> + </footer> + + </article> + </a> + + </div> + {% endfor %} + + </div> + + </div> + </section> + {% endif %} + + <!-- Sponsors --> + <section id="sponsors" class="hero is-light"> + <div class="hero-body"> <div class="container"> <h1 class="title is-6 has-text-grey"> Sponsors </h1> <div class="columns is-mobile is-multiline"> - <a href="https://linode.com" class="column is-narrow"> + <a href="https://www.linode.com/?r=3bc18ce876ff43ea31f201b91e8e119c9753f085" class="column is-narrow"> <img src="{% static "images/sponsors/linode.png" %}" alt="Linode"/> </a> <a href="https://jetbrains.com" class="column is-narrow"> <img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains"/> </a> - <a href="https://adafruit.com" class="column is-narrow"> - <img src="{% static "images/sponsors/adafruit.png" %}" alt="Adafruit"/> - </a> <a href="https://sentry.io" class="column is-narrow"> <img src="{% static "images/sponsors/sentry.png" %}" alt="Sentry"/> </a> + <a href="https://notion.so" class="column is-narrow"> + <img src="{% static "images/sponsors/notion.png" %}" alt="Notion"/> + </a> + <a href="https://streamyard.com" class="column is-narrow"> + <img src="{% static "images/sponsors/streamyard.png" %}" alt="StreamYard"/> + </a> </div> </div> </div> |