OpenVisor-Website/src/views/letzte-gelegenheit.vue

<template>
  <div class="letzte-gelegenheit-container">
    <app-navigation rootClassName="navigation-root-class-name"></app-navigation>
    <h1 class="letzte-gelegenheit-title">
      <span>Letzte Gelegenheit</span>
      <br />
    </h1>
    <span class="letzte-gelegenheit-subtitle">
      <span>Haben Häftlinge Platz im Bunker?</span>
      <br />
    </span>
    <iframe
      src="https://www.youtube-nocookie.com/embed/7cH4QuUSUaU"
      class="letzte-gelegenheit-teaser"
    ></iframe>
    <div class="letzte-gelegenheit-container1 text-body">
      <p>
        <span>
          Plötzlich fällt der Strom aus und eine dichte Nebelwand nähert sich von
          Westen. Sirenen und Notfallsender im Radio führen Wehrpflichtige zu
          Sammelpunkten und Zivilisten in Bunker. So auch das Personal und die
          Häftlinge der Justizvollzugsanstalt Schwarzbach in deren
          Zivilschutzanlage. Zwei Soldaten stossen dazu und stellen mit einem
          militärischen Funkgerät den einzigen Kontakt zur Aussenwelt.
        </span>
        <br />
        <br />
        <span>
          Es ist jetzt (bei In-Time) der 10te Tag seit dem Nebel um 14:00 Uhr und
          noch immer ist ungeklärt, was es mit dem Nebel auf sich hat, und gegen
          was das Militär eigentlich kämpft. Die Bunker-Führung versucht
          krampfhaft den Gefängnisalltag beizubehalten, doch das Benzin, Essen und
          die Medizin gehen aus.
        </span>
        <br />
        <span>
          le Charaktere haben einige Geheimnisse und verdeckte Verknüpfung die
          hier nicht ausgeschrieben sind um die Spielimmersion zu wahren. Dennoch
          sollen die Charakterteaser eine Tendenz aufzeigen, wie sich die
          Charaktere spielen.
        </span>
      </p>
    </div>
    <section class="letzte-gelegenheit-veranstaltungen-kapitel">
      <header class="letzte-gelegenheit-veranstaltungen-titel">
        <h2 class="letzte-gelegenheit-section section-head">Kommende Runs</h2>
      </header>
      <veranstaltungen-liste></veranstaltungen-liste>
    </section>
    <div class="letzte-gelegenheit-container2">
      <a
        href="https://docs.google.com/document/d/1i-cVj809RqJtO-VaXjUsPew67gtylkIzL_3qc6mI_kE/edit?usp=sharing"
        target="_blank"
        rel="noreferrer noopener"
        class="letzte-gelegenheit-link"
      >
        <div class="letzte-gelegenheit-design-dokument button">
          <span class="letzte-gelegenheit-design-dokument1">Design-Dokument</span>
        </div>
      </a>
      <a
        href="https://forms.gle/YL6fFSHqY43TsV4B7"
        target="_blank"
        rel="noreferrer noopener"
        class="letzte-gelegenheit-link1"
      >
        <div class="letzte-gelegenheit-anmeldung button">
          <span class="letzte-gelegenheit-anmeldung1">Anmeldung</span>
        </div>
      </a>
      <a
        href="https://discord.gg/eKFCrEZaQ5"
        target="_blank"
        rel="noreferrer noopener"
        class="letzte-gelegenheit-link2"
      >
        <div class="letzte-gelegenheit-discord button">
          <span class="letzte-gelegenheit-discord1">Discord</span>
        </div>
      </a>
    </div>
    <h2 class="character-title section-head">Charaktere</h2>
    <div class="letzte-gelegenheit-container3 text-body">
      <p>
        <span>
          Die Charaktere sind so geschrieben und verknüpft um intensives,
          dramatisches Spiel zu begünstigen. Alle 12 Spielercharaktere sprechen
          Hochdeutsch und haben einen definierten Nachnamen. Der Vornamen und das
          Geschlecht definiert die spielende Person. Es wird ein paar
          Nichtspielercharaktere geben die von Helfern bespielt werden.
        </span>
        <br />
        <br />
        <span>
          Alle Charaktere haben einige Geheimnisse und verdeckte Verknüpfung die
          hier nicht ausgeschrieben sind um die Spielimmersion zu wahren. Dennoch
          sollen die Charakterteaser eine Tendenz aufzeigen, wie sich die
          Charaktere spielen.
        </span>
        <br />
        <br />
        <span>
          Sobald sich Spielende für alle Spielercharaktere gefunden haben werden
          die vollen Charakterbögen (6 bis 11 A4-Seiten je nach Charakter)
          entsprechend verschickt.
        </span>
        <br />
      </p>
    </div>
    <h2 class="character-group section-head">Gefängnispersonal</h2>
    <app-row1></app-row1>
    <app-row2></app-row2>
    <app-row3></app-row3>
    <h2 class="character-group section-head">Häftlinge</h2>
    <app-row4></app-row4>
    <app-row5></app-row5>
    <h2 class="character-group section-head">Militär</h2>
    <app-row6></app-row6>
    <app-kontakt rootClassName="kontakt-root-class-name2"></app-kontakt>
  </div>
</template>

<script>
import AppNavigation from '../components/navigation'
import VeranstaltungenListe from '../components/veranstaltungen-liste'
import AppRow1 from '../components/row1'
import AppRow2 from '../components/row2'
import AppRow3 from '../components/row3'
import AppRow4 from '../components/row4'
import AppRow5 from '../components/row5'
import AppRow6 from '../components/row6'
import AppKontakt from '../components/kontakt'

export default {
  name: 'LetzteGelegenheit',
  components: {
    AppNavigation,
    VeranstaltungenListe,
    AppRow1,
    AppRow2,
    AppRow3,
    AppRow4,
    AppRow5,
    AppRow6,
    AppKontakt,
  },
  metaInfo: {
    title: 'OpenVisor - Letzte Gelegenheit',
    meta: [
      {
        name: 'description',
        content:
          'Nachdem vor 63 Tagen die Sirenen häulten suchte das Gefängnis Schwarzbach Zuflucht im Bunker. Langsam gehen die Ressourcen aus und die Lage verschärft sich.',
      },
      {
        property: 'og:title',
        content: 'OpenVisor - Letzte Gelegenheit',
      },
      {
        property: 'og:description',
        content:
          'Nachdem vor 63 Tagen die Sirenen häulten suchte das Gefängnis Schwarzbach Zuflucht im Bunker. Man versucht den Alltag beizubehalten, doch langsam gehen die Ressourcen aus und die Lage verschärft sich.',
      },
      {
        property: 'og:image',
        content:
          'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/f7f91f87-097b-4cfb-a31b-ef768130e437/c97eb9ef-8ad2-484c-ac83-73a36202b4f3?org_if_sml=1',
      },
    ],
  },
}
</script>

<style scoped>
.letzte-gelegenheit-container {
  width: 100%;
  display: flex;
  z-index: 100;
  overflow: auto;
  box-shadow: 5px 5px 10px 0px #d4d4d4;
  min-height: 100vh;
  overflow-x: hidden;
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-image: url("/forest-background-luca-dross-1500w.jpg");
  background-position: top left;
}
.letzte-gelegenheit-title {
  color: rgb(255, 255, 255);
  font-size: 64px;
  font-style: normal;
  text-align: center;
  font-family: Poppins;
  font-weight: 500;
}
.letzte-gelegenheit-subtitle {
  color: rgb(255, 255, 255);
  font-size: 20px;
  text-align: center;
  font-family: Poppins;
  line-height: 30px;
}
.letzte-gelegenheit-teaser {
  width: 640px;
  height: 360px;
  margin-top: 20px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: -40px;
}
.letzte-gelegenheit-container1 {
  width: 95%;
  margin-top: 10%;
}
.letzte-gelegenheit-veranstaltungen-kapitel {
  gap: var(--dl-space-space-halfunit);
  flex: 1;
  width: 100%;
  display: flex;
  margin-top: var(--dl-space-space-sixunits);
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.letzte-gelegenheit-veranstaltungen-titel {
  gap: var(--dl-space-space-oneandhalfunits);
  width: 100%;
  display: flex;
  max-width: 1200px;
  align-items: center;
  flex-direction: column;
  padding-bottom: var(--dl-space-space-oneandhalfunits);
  justify-content: center;
}
.letzte-gelegenheit-section {
  color: rgb(255, 255, 255);
  font-size: 36px;
}
.letzte-gelegenheit-container2 {
  gap: 10%;
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.letzte-gelegenheit-link {
  display: contents;
}
.letzte-gelegenheit-design-dokument {
  width: 260px;
  text-decoration: none;
}
.letzte-gelegenheit-design-dokument1 {
  color: rgb(12, 16, 12);
  font-size: 20px;
  font-style: normal;
  font-family: Poppins;
  font-weight: 500;
  line-height: 24px;
}
.letzte-gelegenheit-link1 {
  display: contents;
}
.letzte-gelegenheit-anmeldung {
  width: 180px;
}
.letzte-gelegenheit-anmeldung1 {
  color: rgb(12, 16, 12);
  font-size: 20px;
  font-style: normal;
  font-family: Poppins;
  font-weight: 500;
  line-height: 24px;
}
.letzte-gelegenheit-link2 {
  display: contents;
}
.letzte-gelegenheit-discord {
  width: 200px;
}
.letzte-gelegenheit-discord1 {
  color: rgb(12, 16, 12);
  font-size: 20px;
  font-style: normal;
  font-family: Poppins;
  font-weight: 500;
  line-height: 24px;
}
.letzte-gelegenheit-container3 {
  width: 95%;
}
@media(max-width: 767px) {
  .letzte-gelegenheit-title {
    font-size: 40px;
  }
  .letzte-gelegenheit-subtitle {
    font-size: 16px;
    line-height: 24px;
  }
  .letzte-gelegenheit-veranstaltungen-kapitel {
    border-color: transparent;
  }
}
@media(max-width: 479px) {
  .letzte-gelegenheit-title {
    max-width: 280px;
  }
  .letzte-gelegenheit-veranstaltungen-titel {
    width: auto;
    height: auto;
    max-width: auto;
    padding-top: 0px;
  }
  .letzte-gelegenheit-section {
    height: auto;
    line-height: 36px;
  }
}
</style>