templates/homepage/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Hello HomepageController!{% endblock %}
  5. {% set modalId = 'main-alert' %}
  7. {% block body %}
  8.     <div id="front-page">
  9.         <h1>Welcome to AppyTimes</h1>
  11.         <div class="alert alert-warning alert-dismissible fade show" role="alert">
  12.             Please excuse the (temporary) poor design on this page, <strong>AppyTimes</strong> has been launched prematurely due to the events happening in Ukraine.
  13.             <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#{{ modalId }}">Learn more</button>
  14.             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  15.         </div>
  17.         <section data-aos="fade-up" data-aos-delay="100">
  18.             <h2 class="section-title"><span>Who and what is AppyTimes?</span></h2>
  19.             <p>My name is Kilian Klein and I am a software engineer with a very large imagination, a great (yet sometimes questionable) sense of humor, and an intense passion for people and for improving things.
  20.                 <br><strong>AppyTimes</strong> a dream to make a great impact on the world while bringing smiles out on the way.
  21.                 <br><strong>And how do I plan to do so?</strong> A YouTube channel on which each video shows a concept of a community application to make the world a better place to live in.
  22.                 With each of these videos, a working prototype would actually be available for people to try.
  23.                 <br>We harvest the power of social media, the internet and the kindness of people in general, all of it sprinkled with a little bit of entertainment.
  25.                 <br>Join us to make that dream a reality!
  26.             </p>
  27.         </section>
  29.         <section data-aos="fade-up" data-aos-delay="100">
  30.             <h2 class="section-title"><span>AppyTimes on Social Media</span></h2>
  31.             <div id="appy-social-links">
  32.                 {% include 'social_media_links.html.twig' %}
  33.             </div>
  34.         </section>
  37.         <section data-aos="fade-up" data-aos-delay="100">
  38.             <h2 class="section-title"><span>Supporting us</span></h2>
  39.             <p>
  40.                 The first step in supporting us is to follow us and subscribe on all of our social media. There is power in numbers and it is essentially true on these platforms.
  41.                 <br><strong>Plus... It's free of charge!</strong>
  42.             </p>
  43.         </section>
  46.         <section data-aos="fade-up" data-aos-delay="100">
  47.             <h2 class="section-title"><span>Our current projects</span></h2>
  48.             <div id="appy-projects">
  49.                 <div class="row">
  50.                 {% for project in projects %}
  51.                     <div class="col-3">
  52.                         <div class="appy-project">
  53. {#                            {% if project.thumbnail %}#}
  54.                             {% if false %}
  55.                                 <img src="{{ project.thumbnail }}" class="card-img-top" alt="{{ project.url }}">
  56.                             {% else %}
  57.                                 <svg class="bd-placeholder-img card-img-top" width="100%" height="180"
  58.                                      xmlns="http://www.w3.org/2000/svg" role="img"
  59.                                      aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice"
  60.                                      focusable="false">
  61.                                     <title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect>
  62.                                     <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
  63.                                 </svg>
  64.                             {% endif %}
  66.                             <div class="card-body">
  67.                                 <h5 class="card-title"><a href="{{ project.url }}">{{ project.name | raw }}</a></h5>
  68.                                 <p class="card-text">{{ project.shortDescription | raw }}</p>
  69.                                 <a href="{{ project.url }}" class="btn btn-primary">Check it out</a>
  70.                             </div>
  71.                         </div>
  72.                     </div>
  73.                 {% endfor %}
  74.                 </div>
  75.             </div>
  76.         </section>
  77.     </div>
  79.     {% set modalUkraineBody %}
  80.         <div class="alert alert-warning">
  81.             <p>
  82.                 As much as <a href="https://appytimes.org">AppyTimes</a> tries to remain politically neutral at all times, this situation is fundamentally different: we strongly support the defense of human rights and therefore, stand with the Ukrainian people <strong>fighting for their life, freedom and overall, for democracy</strong>.
  83.             </p>
  84.             <p>
  85.                 In order to do our part in helping during these difficult times, we are concentrating our efforts on providing help to the refugees who had the time and opportunity to leave Ukraine. We hope that by this action, we can not only help those that are out of the country, but also those who remained by providing them with a little bit of relief that their loved ones are safe and taken care of.
  86.             </p>
  87.             <p>
  88.                 <em>We are also very aware that the events currently happening in Ukraine are not isolated and that other refugees in other countries need help and support.
  89.                     <br> We promise you that the design of this application takes this in consideration so that <a href="https://ukraid.appytimes.org">ukraid.appytimes.org</a> would be easily extendable to be used everywhere else in the future.</em>
  90.             </p>
  91.             <p>
  92.                 <strong>
  93.                     As for every one of our projects, AppyTimes needs your help spreading the message! Please share the <a href="https://ukraid.appytimes.org">URL to the app</a>, subscribe to our <a href="https://www.youtube.com/channel/UCuOa8aT9uniQqC5UhNNItKg">YouTube channel</a> and share the corresponding video, join the <a href="https://www.twitch.tv/appy_times">livestreams on Twitch</a> to brainstorm with us on the different functionality that could be useful in this specific context.
  94.                 </strong>
  95.             </p>
  96.         </div>
  97.     {% endset %}
  98.     {% include 'bootstrap/modal.html.twig' with {modalId: modalId, modalBody: modalUkraineBody} %}
  99. {% endblock %}