BuLi-Tipp hinzugefügt

src/App.vue

@@ -14,6 +14,8 @@ export default {
 </template>
 
 <style lang="scss">
+
+@use "assets/mobirise/css/additional.scss";
     @import "assets/web/assets/mobirise-icons2/mobirise2.css";
     @import "assets/parallax/jarallax.css";
     @import "assets/bootstrap/css/bootstrap.min.css";
@@ -23,7 +25,6 @@ export default {
     @import "assets/socicon/css/styles.css";
     @import "assets/animatecss/animate.css";
     @import "assets/theme/css/style.css";
-    @import "assets/mobirise/css/additional.scss";
     @import "./assets/css/index.css";
 
     html, body, #app{

src/components/Navbar.vue

@@ -7,6 +7,14 @@ export default {
       type: Array,
       required: false,
     },
+    buttontext: {
+      type: String,
+      required: false,
+    },
+    mainlink: {
+      type: String,
+      required: false,
+    },
   },
   data(){
     return {
@@ -14,13 +22,16 @@ export default {
         { link: "/galerie", title: "Galerie" },
         { link: "/umgebung", title: "Umgebung" },
         { link: "/footer", title: "Kontakt" },
-        { link: "/", title: "BuLi-Tipp" },
+        { link: "/bulitipp", title: "BuLi-Tipp" },
       ],
+      buttontextdata: "Über Ritzenbergen",
+      mainlinkdata: "/willkommen"
     }
   },
   created() {
-    console.log(this.links);
       if(this.links) this.datalinks = this.links;
+      if(this.buttontext) this.buttontextdata = this.buttontext;
+      if(this.mainlink) this.mainlinkdata = this.mainlink;
   },
 };
 </script>
@@ -75,8 +86,8 @@ export default {
             </li>
           </ul>
           <div class="navbar-buttons mbr-section-btn">
-            <RouterLink class="btn btn-primary display-4" to="/willkommen"
+            <RouterLink class="btn btn-primary display-4" :to="mainlinkdata"
-              >Über Ritzenbergen</RouterLink
+              >{{ buttontextdata }}</RouterLink
             >
           </div>
         </div>

src/router/index.ts

@@ -10,7 +10,9 @@ const routes = [
   { path: '/bild/:ev/:jahr/:bild', component: () => import('../views/Bildschau.vue') },
   { path: '/umgebung', component: () => import('../views/Main.vue') },
   { path: '/footer', component: () => import("../views/Main.vue")},
-  { path: '/willkommen', component: () => import("../views/Main.vue")}
+  { path: '/willkommen', component: () => import("../views/Main.vue")},
+  { path: "/bulitipp", component: () => import("../views/Bulitipp.vue") },
+  { path: "/bulitipp/tippen", component: () => import("../views/Bulitipp.vue") },
 ]
 
 export default createRouter({

src/views/Bulitipp.vue

@@ -0,0 +1,200 @@
+<script lang="ts">
+import Navbar from "../components/Navbar.vue";
+import Footer from "../components/Footer.vue";
+import Modal from "../components/Modal.vue";
+
+export default {
+    components: {
+        Navbar,
+        Footer,
+        Modal
+    },
+    computed: {
+        tippenoffen(){
+            return this.$route.path === "/bulitipp/tippen";
+        },
+        tippenschliessen(){
+            return this.$router.push("/bulitipp");
+        }
+    }
+}
+</script>
+<template>
+    <Navbar buttontext="Tippen" mainlink="/bulitipp/tippen"/>
+
+    <section class="header16 cid-u6k7q0xIhk bulitipp mbr-fullscreen mbr-parallax-background" id="hero-17-u6k7q0xIhk">
+    <div class="mbr-overlay" style="opacity: 0.3; background-color: rgb(0, 0, 0);"></div>
+    <div class="container-fluid">
+      <div class="row">
+        <div class="content-wrap col-12 col-md-10">
+          <h1 class="mbr-section-title mbr-fonts-style mbr-white mb-4 display-1">
+            <strong>Willkommen im Bundesliga Tippspiel</strong>
+          </h1>
+          <p class="mbr-fonts-style mbr-text mbr-white mb-4 display-7">Saison </p>
+          <br><br>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <Modal v-show="tippenoffen" @closemodal="tippenschliessen">
+    <h1>Test</h1>
+  </Modal>
+
+
+
+  <section class="features023 cid-u6k7q0xclF" id="metrics-1-u6k7q0xclF">
+    <div class="container">
+      <div class="row content-row justify-content-center">
+
+        <div class="item features-without-image col-12 col-md-6 col-lg-4 item-mb">
+          <div class="item-wrapper">
+
+          </div>
+        </div>
+        <div class="item features-without-image col-12 col-md-6 col-lg-4 item-mb">
+          <div class="item-wrapper">
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+
+  <section class="uebersicht scroll-x">
+    <table>
+        <tbody>
+      <tr>
+        <td>Kürzel</td>
+        
+      </tr>
+      <tr>
+        <td id="uebersicht-user-<?php echo $user; ?>">
+            <iframe class="iframeRanglisteDetailansicht">Benutzer</iframe>
+            
+          <button>Punkte</button> <!-- Style Rot Grün -->
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </section>
+
+<!-- Rangliste -->
+
+<section class="rangliste" id="rangliste-sektion">
+    <br><br>
+
+    <h2>Rangliste</h2>
+    <table>
+        <tbody>
+      <tr>
+        <td>Platz</td>
+        <td>Name</td>
+        <td>Punkte</td>
+      </tr>
+        <tr>
+          <td></td>
+          <td>
+                  <iframe class="iframeRanglisteDetailansicht"
+                    data-src="">Detailansicht User 1</iframe>
+
+              <span class="as-link">User 1</span>
+          </td>
+          <td></td>
+        </tr>
+        </tbody>
+    </table>
+
+  </section>
+
+  <!-- Paarungsergebnisse -->
+
+  <section class="buli-results scroll-x" id="buliresults-section">
+    <br><br>
+    <h2>Paarungsergebnisse . Spieltag</h2>
+    <table>
+
+        <tbody>
+      <tr>
+        <td>Paarung</td>
+        <td>Ergebnis</td>
+      </tr>
+        <tr>
+
+          <td>
+            <!-- Modal -->
+                  
+                  <iframe frameborder="0"></iframe>
+              <span class="as-link">
+                <span class="teams">
+                  <span class="team">
+                    <img src="" alt="">
+                    <p>Team 1</p>
+                  </span>
+                  <span class="vs"></span>
+                  <span class="team">
+                    <p>Team 2</p>
+                    <img src="" alt="">
+                  </span>
+                </span>
+              </span>
+
+          </td>
+          <td>
+            <p>1 - 0</p>
+          </td>
+
+
+        </tr>
+        </tbody>
+    </table>
+  </section>
+
+
+  <!-- Punktetabelle -->
+  <section class="buli-table" id="buli-table">
+    <br><br>
+
+    <h2>Punktetabelle</h2>
+    <div id="load-table-btn-container">
+      <button id="load-table-btn">Punkte ausrechnen</button>
+    </div>
+    <table>
+
+        <tbody>
+      <tr>
+        <td>Tag</td>
+        <td>User1</td>
+      </tr>
+        <tr>
+
+          <td>123</td>
+
+            <!-- Modal -->
+            
+                <!-- Open BTN -->
+            <td class="as-link">Punkte</td>
+          
+        </tr>
+        
+      <tr>
+        <td>Summe</td>
+        
+          <td>Benutzer</td>
+          
+      </tr>
+      </tbody>
+    </table>
+  </section>
+
+
+  
+  <br>
+  <br>
+  <br>
+
+  <Footer/>
+</template>
+<style scoped>
+    @import "../assets/css/bulitipp2.css";
+</style>