ChatGPT begeistert mich mal wieder

[Rancher]

Hast Du den Zaubertrick in dem Video gesehen?
Ein roter verschwindet und ein Black Three taucht auf - nicht von mir gewollt.

[Nachtfalke]

Oh… irgendwie cool! Ich musste aber zweimal hingucken bis das bemerkt habe. Echt wie Zauberei

[Tommy Herrmann]

Ich habe mal begonnen, Beispielseiten zur künstlichen Intelligenz zu erstellen.

Zum einen zu "Mobirise AI":

https://www.mobirise-tutorials.com/Mobirise-AI/

… und zum anderen zu externen Anwendungen wie zum Beispiel ChatGPT, Claude.AI oder auch Gemini:

https://www.mobirise-tutorials.com/AI-Beispiele/

In der Menüleiste letzterer Seite "AI-Beispiele" findet ihr unter "KI Generierungen A-Z" eine Auswahl einiger Anwendungen, die ich mit Hilfe der künstlichen Intelligenz ChatGPT entwickelt habe, beziehungsweise mit der Unterstützung von ChatGPT in JavaScript und CSS.

[stobi_de]

Ah, die Sache mit den Hotsports scheint etwas einfacher zu sein, als das, was wir da bisher benutzt haben.
Hast aber viel tolle Fleißarbeit gemacht - Hut ab!

=======
Könnte man mal versuchen, ein Mega-Menu zu bauen, was direkt in Mobi konfiguriert werden kann? Hm....

[Tommy Herrmann]

Moin,

kann ich ChatGPT ja mal mit beschäftigen

[Tommy Herrmann]

Ein Anfang ist gemacht, komme aber gerade nicht dazu damit weiter zu machen.

Das scheint der KI aber ziemlich leicht zu fallen

[stobi_de]

Bin auch daran. Meinem Mr. Chat fällt das nicht so leicht.
Wir haben 20 Runden durch, aber entweder gehts auf dem Handy oder auf dem PC.

[Tommy Herrmann]

Ich finde es für den ersten Versuch, ein Mega-Menü über die KI ChatGPT zu erstellen, gar nicht malm schlecht:

https://www.mobirise-tutorials.com/AI-Mega-Menu/

Man könnte die Submenüs natürlich noch ausbauen und auch Icons einfügen, usw. Ein wenig schwierig ist es das oben zu fixieren, da man dann an die Toolbox zur Bearbeitung mit dem "Code Editor" nicht mehr ran kommt, sicherlich findet man da aber auch eine Lösung.

Ich habe hier den ganz einfache Textblock aus der Rubrik "Article" zum Einbau verwendet. Diesen "Global" zu machen funktioniert nur manchmal - also habe ich es gelassen. Ich habe dann im HTML Editor das <section> Tag mit den <mbr-parameter> stehen lassen und alles andere raus gelöscht und mit der HTML der Menüleiste ersetzt.

Wenn mein Anfang was für Dich ist, dann kannst Du die HTML und CSS auch bei Deinem ChatGPT posten und weiter bearbeiten lassen. Das ist dann viel einfacher für die KI

Hier meine derzeitige HTML im Bereich "HTML Editor":

Code: Alles auswählen

    <!-- Start Mega Menu generated by ChatGPT -->
    <button class="menu-toggle" onclick="toggleMenu()">☰ Menü</button>
    <nav>
      <div class="menu-container">
      
        <ul class="menu" id="mainMenu">
        
          <li><a href="index.html">Startseite</a></li>
          <li><a href="Tutorial.html">Tutorial</a></li>
          <li>
            <a href="#">Mega-Menü&nbsp;🔻</a>
            <div class="mega-menu">
              <div class="column">
                <h3>Seiten</h3>
                <a href="https://www.mobirise-tutorials.com/Forum/" target="_blank">Forum</a>
                <a href="https://www.mobirise-tutorials.com/Formular/" target="_blank">Kontakt</a>
                <a href="https://www.mobirise-tutorials.com/" target="_blank">Mobirise Tutorials</a>
                <a href="https://www.mobirise-tutorials.com/Suchen.php" target="_blank">Suchen</a>
              </div>
              <div class="column">
                <h3>AI generierte Bilder</h3>
                <img style="max-width: 200px;" src="https://www.mobirise-tutorials.com/AI-Mega-Menu/images/Dreimastbark.jpg" alt="Dreimastbark">
                <img style="max-width: 200px;" src="https://www.mobirise-tutorials.com/AI-Mega-Menu/images/Pferd.jpg" alt="Pferd">
              </div>
            </div>
          </li>
          <li><a href="https://www.mobirise-tutorials.com/Formular/" target="_blank">Kontakt</a></li>
          
          <!-- Button nur für Mobilgeräte -->
          <li class="home-button mobile-only">
            <a href="https://www.mobirise-tutorials.com/" target="_blank">Mobirise Tutorials</a>
          </li>
        </ul>
        
        <!-- Button nur für Desktop -->
        <div class="home-button desktop-only">
          <a href="https://www.mobirise-tutorials.com/" target="_blank">Mobirise Tutorials</a>
        </div>
        
      </div>
    </nav>
    <!-- End Mega Menu generated by ChatGPT -->

Hier meine derzeitige CSS, die in den Bereich "CSS Editor" gehört:

Code: Alles auswählen

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Jost;
}
nav {
  background-color: #003366;
  padding: 0;
}
.menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 10px;
}
.menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
}
.menu > li {
  position: relative;
}
.menu > li > a {
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0 20px;
  color: white;
  text-decoration: none;
  margin: 5px 0px 5px 0px;
}
.menu > li:hover {
  background-color: #0055aa;
}
.mega-menu {
  position: absolute;
  left: 0;
  top: 100%;
  width: 800px;
  display: none;
  background-color: #e6f0ff;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  flex-wrap: nowrap;
}
.menu > li:hover .mega-menu {
  display: flex;
}
.mega-menu .column {
  flex: 1;
  min-width: 200px;
  padding: 10px;
}
.mega-menu h3 {
  margin-top: 0;
  color: #003366;
}
.mega-menu a {
  display: block;
  color: #003366;
  text-decoration: none;
  padding: 5px 0;
}
.mega-menu a:hover {
  text-decoration: underline;
}
.mega-menu img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 10px 10px 10px 0px;
}
.home-button a {
  background-color: #0055aa;
  color: white;
  border-radius: 30px;
  padding: 10px 20px;
  margin: 10px;
  display: inline-block;
  text-decoration: none;
  transition: background-color 0.3s ease;
  font-size: 1.2rem;
}
.home-button a:hover {
  background-color: #0077cc;
}
.menu-toggle {
  display: none;
  background-color: #003366;
  color: white;
  padding: 15px 20px;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 20px;
}
.desktop-only {
  display: block;
}
.mobile-only {
  display: none;
}
@media (min-width: 992px) and (max-width: 1200px) {
  .mega-menu {
    left: 50%;
    transform: translateX(-40%);
  }
}
@media (max-width: 991px) {
  .menu-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-bottom: 50px;
  }
  .menu.show {
    display: flex;
  }
  .menu > li:hover .mega-menu {
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-shadow: none;
  }
  .mega-menu {
    width: 100%;
    flex-direction: column;
  }
  .menu-toggle {
    display: block;
  }
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: list-item;
    margin: 0;
    padding: 0;
  }
  .mobile-only a {
    display: inline-block;
    margin: 15px 15px 10px 15px;
    background-color: #0055aa;
    color: white;
    border-radius: 30px;
    padding: 10px 20px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    width: 200px;
    text-align: center;
  }
  .mobile-only a:hover {
    background-color: #0077cc;
  }
  .menu > li > a {
    height: 50px;
  }
}

... und noch der JavaScript Code zum Ausklappen des Submenüs. Dieser gehört in den globalen Bereich "Global HTML Insert" der Site-Einstellungen, und zwar unter "Before </body> code":

Code: Alles auswählen

<!-- AI Mega Menu -->
<script>
 function toggleMenu() {
  const menu = document.getElementById("mainMenu");
  menu.classList.toggle("show");
 }
</script>

[stobi_de]

Vielen Dank, der ANsatz sieht besser aus als meiner.
Werde Mr. Chat damit füttern

[Volker]

Ich will ja nicht klugscheißen ...

Aber eleganter und weitergebbar wäre eine .mbrext Datei. Die kann Chat GPT auch ( dauert zwar lange bis GPT das begriffen hat ) aber geht.

megamenue1.png (10.61 KiB) 859 mal betrachtet

1. params.json

Code: Alles auswählen

{
  "name": "mega_menu",
  "minAppVersion": "4",
  "title": "3-Spalten Mega Menü",
  "largeCover": "thumbnail.png",
  "ampCompatible": false,
  "appScript": true,
  "version": 100,
  "components": [
    {
      "path": "block.html",
      "_group": "Mega Menüs",
      "typeCompatible": "type",
      "_tags": ["Menu", "Navigation"],
      "_isSecondary": false
    }
  ],
  "plugins": [],
  "logo": "thumbnail.png",
  "description": "Ein interaktives 3-Spalten-Mega-Menü für Mobirise"
}

2. template.html

Code: Alles auswählen

<section class="menu mega-menu" mbr-name="Mega Menu" mbr-description="Ein interaktives 3-Spalten-Mega-Menü">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#" mbr-text="true">Mein Verein</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#" mbr-text="true">Start</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="menu1" data-toggle="dropdown">Mehr</a>
          <div class="dropdown-menu mega-menu-content">
            <div class="row">
              <div class="col-md-4">
                <h6 mbr-text="true">Spalte 1</h6>
                <a class="dropdown-item" href="#" mbr-text="true">Option 1.1</a>
                <a class="dropdown-item" href="#" mbr-text="true">Option 1.2</a>
              </div>
              <div class="col-md-4">
                <h6 mbr-text="true">Spalte 2</h6>
                <a class="dropdown-item" href="#" mbr-text="true">Option 2.1</a>
                <a class="dropdown-item" href="#" mbr-text="true">Option 2.2</a>
              </div>
              <div class="col-md-4">
                <h6 mbr-text="true">Spalte 3</h6>
                <a class="dropdown-item" href="#" mbr-text="true">Option 3.1</a>
                <a class="dropdown-item" href="#" mbr-text="true">Option 3.2</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</section>

3. script.js

Code: Alles auswählen

// Aktiviert das Mega-Menü-Dropdown für Mobirise (Bootstrap 4)
document.addEventListener('DOMContentLoaded', function() {
  var dropdowns = document.querySelectorAll('.dropdown-toggle');
  dropdowns.forEach(function(dropdown) {
    dropdown.addEventListener('click', function(e) {
      e.preventDefault();
      var parent = dropdown.parentElement;
      var menu = parent.querySelector('.dropdown-menu');
      if(menu.classList.contains('show')) {
        menu.classList.remove('show');
      } else {
        document.querySelectorAll('.dropdown-menu.show').forEach(function(openMenu) {
          openMenu.classList.remove('show');
        });
        menu.classList.add('show');
      }
    });
  });

  // Schließt Mega-Menü wenn außerhalb geklickt wird
  document.addEventListener('click', function(e) {
    if (!e.target.closest('.dropdown')) {
      document.querySelectorAll('.dropdown-menu.show').forEach(function(openMenu) {
        openMenu.classList.remove('show');
      });
    }
  });
});

4. style.less

Code: Alles auswählen

.mega-menu .dropdown-menu {
  width: 100%;
  left: 0;
  right: 0;
  top: 100%;
  padding: 20px;
}

.mega-menu-content {
  display: flex;
}

.mega-menu-content .col-md-4 {
  padding: 10px;
  border-right: 1px solid #ddd;
}

.mega-menu-content .col-md-4:last-child {
  border-right: none;
}

5. thumbnail.png

Anleitung zum Erstellen der .mbrext
Erstelle lokal einen Ordner megamenu.

Füge alle Dateien und Ordner wie oben gezeigt ein.

Packe den Ordner megamenu als ZIP-Datei.

Benenne die ZIP-Datei um zu:
megamenu.mbrext

Importiere diese .mbrext in Mobirise per "Erweiterung hinzufügen".



Ist natürlich noch ausbaufähig, aber sollte so gehen


es muss wirklich style.less heissen und nicht style.css damit mobirise das dauerhaft übernimmt.
Der eigentliche HTML Block muss auch template.html heißen damit das ganze klappt.

[Tommy Herrmann]

Moin,

na ja - das ist ja schon eigene Software basteln und ich hätte mich jetzt nicht getraut damit Mr. Chat zu kommen

Auf meinen Tutorial-Seiten tummeln sich auch sehr viele Besucher, die nicht mit Mobirise arbeiten, sondern andere Software verwenden oder ihre Webseiten manuell erstellen. Diese Nutzer bevorzugen es, normalen HTML-Code zu erhalten, anstatt Mobirise-Dateien.

Ich habe übrigens meinen HTML- und CSS-Code oben aktualisiert, da ich viele Änderungen vorgenommen habe. Der stets aktualisierte Code ist auch auf meiner Tutorial-Seite zu finden, die sich mit der von ChatGPT erstellten Mega-Menüleiste beschäftigt:

https://www.mobirise-tutorials.com/AI-M ... orial.html

[Tommy Herrmann]

Ich habe mich jetzt mit der Erstellung von diesen .mbrext Dateien leider noch überhaupt nicht beschäftigt und daher keine Ahnung davon.

Weißt Du oder hast Du schon mal probiert einen User-Block an einem anderen Computer einzulesen, denn das sollte doch ebenso funktionieren.

Die User-Blöcke liegen ja unter Windows z.B. ungefähr hier:

C:\Users\Admin-Name\AppData\Local\Mobirise.com\Mobirise\E-Mail-Adresse\userblocks\mobirise5

Im Verzeichnis vom Thema "mobirise5", das ich in diesem Fall verwendet habe, gibt es dann für diesen User-Block ein Verzeichnis "content5_9" mit der Datei "userblock.js" und einem Screenshot "thumb.png", die folgenden Inhalt hat.

Eigentlich bräuchte man diese Datei dann doch nur bei sich auch in das Verzeichnis "userblocks" kopieren und in die Datei "list.json" im entsprechenden Verzeichnis eintragen und müsste diese dann auch abrufen können!

Inhalt Datei "userblocks.js" von meinem Mega-Menü:

Code: Alles auswählen

{
	"data": {
		"alias": false,
		"_styles": {
			"padding-top": "(@paddingTop * 1rem)",
			"padding-bottom": "(@paddingBottom * 1rem)",
			"background-color": "@bgColor",
			"*": {
				"box-sizing": "border-box"
			},
			"body": {
				"margin": "0",
				"font-family": "Jost"
			},
			"nav": {
				"background-color": "#003366",
				"padding": "0"
			},
			".menu-container": {
				"display": "flex",
				"justify-content": "space-between",
				"align-items": "center",
				"flex-wrap": "wrap",
				"padding": "0 10px"
			},
			".menu": {
				"display": "flex",
				"flex-wrap": "wrap",
				"list-style": "none",
				"margin": "0",
				"padding": "0"
			},
			".menu > li": {
				"position": "relative"
			},
			".menu > li > a": {
				"display": "block",
				"padding": "15px 20px",
				"color": "white",
				"text-decoration": "none"
			},
			".menu > li:hover": {
				"background-color": "#0055aa"
			},
			".mega-menu": {
				"position": "absolute",
				"left": "0",
				"top": "100%",
				"width": "600px",
				"display": "none",
				"background-color": "#e6f0ff",
				"padding": "20px",
				"box-shadow": "0 2px 10px rgba(0, 0, 0, 0.2)",
				"z-index": "1000",
				"flex-wrap": "nowrap"
			},
			".menu > li:hover .mega-menu": {
				"display": "flex"
			},
			".mega-menu .column": {
				"flex": "1",
				"min-width": "200px",
				"padding": "10px"
			},
			".mega-menu h3": {
				"margin-top": "0",
				"color": "#003366"
			},
			".mega-menu a": {
				"display": "block",
				"color": "#003366",
				"text-decoration": "none",
				"padding": "5px 0"
			},
			".mega-menu a:hover": {
				"text-decoration": "underline"
			},
			".mega-menu img": {
				"width": "100%",
				"height": "auto",
				"border-radius": "8px",
				"margin": "10px"
			},
			".home-button a": {
				"background-color": "#0055aa",
				"color": "white",
				"border-radius": "30px",
				"padding": "10px 20px",
				"margin": "10px",
				"display": "inline-block",
				"text-decoration": "none",
				"transition": "background-color 0.3s ease"
			},
			".home-button a:hover": {
				"background-color": "#0077cc"
			},
			".menu-toggle": {
				"display": "none",
				"background-color": "#003366",
				"color": "white",
				"padding": "15px 20px",
				"border": "none",
				"width": "100%",
				"text-align": "left",
				"font-size": "16px"
			},
			".desktop-only": {
				"display": "block"
			},
			".mobile-only": {
				"display": "none"
			},
			"@media (max-width: 768px)": {
				".menu-container": {
					"flex-direction": "column",
					"align-items": "flex-start"
				},
				".menu": {
					"display": "none",
					"flex-direction": "column",
					"width": "100%"
				},
				".menu.show": {
					"display": "flex"
				},
				".menu > li:hover .mega-menu": {
					"position": "static",
					"display": "flex",
					"flex-direction": "column",
					"width": "100%",
					"box-shadow": "none"
				},
				".mega-menu": {
					"width": "100%",
					"flex-direction": "column"
				},
				".menu-toggle": {
					"display": "block"
				},
				".desktop-only": {
					"display": "none"
				},
				".mobile-only": {
					"display": "list-item",
					"margin": "0",
					"padding": "0"
				},
				".mobile-only a": {
					"display": "inline-block",
					"margin": "15px 15px 10px 15px",
					"background-color": "#0055aa",
					"color": "white",
					"border-radius": "30px",
					"padding": "10px 20px",
					"text-decoration": "none",
					"transition": "background-color 0.3s ease"
				},
				".mobile-only a:hover": {
					"background-color": "#0077cc"
				}
			}
		},
		"_name": "content5",
		"_sourceTheme": "mobirise5",
		"_customHTML": "<section data-bs-version=\"5.1\" class=\"content5\" group=\"Content\">\n    <mbr-parameters>\n        <header>Size</header>\n        <input type=\"checkbox\" title=\"Full Width\" name=\"fullWidth\" checked=\"\">\n        <input type=\"range\" inline=\"\" title=\"Top\" name=\"paddingTop\" min=\"0\" max=\"10\" step=\"1\" value=\"0\">\n        <input type=\"range\" inline=\"\" title=\"Bottom\" name=\"paddingBottom\" min=\"0\" max=\"10\" step=\"1\" value=\"0\">\n        <input type=\"range\" name=\"textWidth\" title=\"Width\" min=\"4\" max=\"12\" value=\"12\" step=\"1\">\n        <header>Show/Hide</header>\n        <input type=\"checkbox\" title=\"Title\" name=\"showTitle\">\n        <input type=\"checkbox\" title=\"Subtitle\" name=\"showSubtitle\" checked=\"\">\n        <header>Background</header>\n        <input type=\"color\" title=\"Color\" name=\"bgColor\" value=\"#003366\">\n    </mbr-parameters>\n\n    <!-- Start Mega Menu generated by ChatGPT -->\n    <button class=\"menu-toggle\" onclick=\"toggleMenu()\">☰ Menü</button>\n    <nav>\n      <div class=\"menu-container\">\n      \n        <ul class=\"menu\" id=\"mainMenu\">\n        \n          <li><a href=\"index.html\">Startseite</a></li>\n          <li><a href=\"Tutorial.html\">Tutorial</a></li>\n          <li>\n            <a href=\"#\">Mega-Menü</a>\n            <div class=\"mega-menu\">\n              <div class=\"column\">\n                <h3>Seiten</h3>\n                <a href=\"https://www.mobirise-tutorials.com/Forum/\" target=\"_blank\">Forum</a>\n                <a href=\"https://www.mobirise-tutorials.com/Formular/\" target=\"_blank\">Kontakt</a>\n                <a href=\"https://www.mobirise-tutorials.com/\" target=\"_blank\">Mobirise Tutorials</a>\n                <a href=\"https://www.mobirise-tutorials.com/Suchen.php\" target=\"_blank\">Suchen</a>\n              </div>\n              <div class=\"column\">\n                <h3>AI generierte Bilder</h3>\n                <img style=\"max-width: 200px;\" src=\"https://www.mobirise-tutorials.com/AI-Mega-Menu/images/Dreimastbark.jpg\" alt=\"Dreimastbark\">\n                <img style=\"max-width: 200px;\" src=\"https://www.mobirise-tutorials.com/AI-Mega-Menu/images/Pferd.jpg\" alt=\"Pferd\">\n              </div>\n            </div>\n          </li>\n          <li><a href=\"https://www.mobirise-tutorials.com/Formular/\" target=\"_blank\">Kontakt</a></li>\n          \n          <!-- Button nur für Mobilgeräte -->\n          <li class=\"home-button mobile-only\">\n            <a href=\"https://www.mobirise-tutorials.com/\" target=\"_blank\">Mobirise Tutorials</a>\n          </li>\n        </ul>\n        \n        <!-- Button nur für Desktop -->\n        <div class=\"home-button desktop-only\">\n          <a href=\"https://www.mobirise-tutorials.com/\" target=\"_blank\">Mobirise Tutorials</a>\n        </div>\n        \n      </div>\n    </nav>\n    <!-- End Mega Menu generated by ChatGPT -->\n                \n</section>",
		"_JSplaceholders": [],
		"_PHPplaceholders": [],
		"_anchor": "Mega-Menu-ChatGPT",
		"_isUserblock": true,
		"_cid": "uRLiCezeEF",
		"_customCSS": "",
		"_protectedParams": [],
		"_alwaysBottom": false,
		"_alwaysTop": false,
		"_global": false,
		"_noDrag": false,
		"_positionAbsolute": false,
		"_once": false,
		"_params": {
			"fullWidth": true,
			"paddingTop": "0",
			"paddingBottom": "0",
			"textWidth": "12",
			"showTitle": false,
			"showSubtitle": true,
			"bgColor": "#003366"
		}
	},
	"themeName": "mobirise5",
	"parent": "content5",
	"blockName": "content5_9",
	"mediaPaths": "[]",
	"isUserblock": "true",
	"customName": "Mega-Menu-ChatGPT"
}

[Volker]

Hatten wir hier :

viewtopic.php?p=14191&hilit=bl%C3%B6cke ... ben#p14191

[Tommy Herrmann]

Moin Frank,

sage mal, mich würde schon interessieren, wie sich deine Versuche mit der Mega-Navi über ChatGPT entwickelt haben. Hast du meine Codes in HTML, CSS und JavaScript als Grundlage verwendet? Das sollte eigentlich helfen.

Ich habe jetzt auch noch eine Lightbox zur Anzeige der Bilder im Submenü eingebaut - das aber nicht über die KI:

https://www.mobirise-tutorials.com/AI-M ... orial.html

Außerdem hat mir die KI ChatGPT nachträglich mein Logo eingefügt, weshalb meine Menüleiste nun etwas von den bereitgestellten Codes abweicht.

Weiterhin habe ich nun die Bootstrap class="sticky-top" zu meinem <section> Tag hinzugefügt, wodurch ich eine feststehende Menüleiste erhalten habe.

[Tommy Herrmann]

Jetzt habe ich das mit "Mobirise AI" über den "Custom Block" ausprobiert und das Ergebnis ist beeindruckend. Es fehlen allerdings noch alle Eigenschaften einer Menüleiste.

Meine Eingabe war auf Deutsch mit folgendem Text:

Kannst Du ein Mega-Menü für meine Website erstellen. Das Menü soll auch ein Submenü als Beispiel haben. Es sollen einige Bilder im Menü eingebaut sein.

Ich habe jetzt ganz bewusst gar nicht geändert. Ich habe lediglich die Bilder getauscht:

https://www.mobirise-tutorials.com/AI-M ... -AI-Custom


P.S.:

Um daraus eine Menüleiste zu machen, habe ich es nachträglich mit der "Block AI" versucht, das hat aber bisher noch nicht funktioniert, denn es hat sich nichts geändert. Die "Block AI" von Mobirise ist bisher noch nicht in der Lage diesen Block zu einer Menüleiste zu machen.

Eingabe in die "Block AI":

Dieser Block soll eine Mega-Menüleiste werden, die ein ausklappbares Submenü enthält, in dem sich zwei Bilder befinden. Alle Menüpunkte müssen als Links dargestellt werden. Bitte passe den Block entsprechend an.

[stobi_de]

Bin dran!

https://www.afripix.de/megamenu-chat


Die Sache klappt nicht auf einem Handy.
Man kann nicht das Menü scrollen, wenn es nach unten aus dem Sichtbereich geht.
Mr. Chat verheddert sich an der Stelle immer wieder.

[Tommy Herrmann]

Das ist doch bereits ein riesen Erfolg

… und doch - das geht am Handy. Da das Menü so ewig lang ist, muss man am Handy nur eine ganze Weile scrollen (beobachte den Scrollbalken).

Wenn Mr. Chat sich verschluckt, spuckt er zwar immer das Verständnis dessen was gemacht werden soll korrekt aus, nur passiert nichts. Da hakt es dann bei der KI, dann muss der Prompt anders geschrieben werden.

[stobi_de]

Bei mir wiederholt er immer das, was ich ihm gesagt habe in Tabellarischer Form.
Dann gibt es immer die Version "100% lauffähig und getestet", aber das funktioniert oft nicht im Geringsten.
DIese Sonderbarkeit hat er sich irgendwie angewöhnt

[Tommy Herrmann]

Ja - das ist bei mir ebenso. ChatGPT muss auch lernen und ist noch ein "Baby". Wir helfen ja gerade dabei

… dennoch ist diese Ressource von unschätzbarem Wert. Ohne ChatGPT wären viele Dinge nicht möglich, insbesondere wenn man gerade keinen Fachmann für den speziellen Bereich zur Verfügung hat.

[stobi_de]

Was ebenfalls mal wirklich sinnvoll wäre: ein einstellbarer Breakpoint fürs Menü.
Habe eben mal angefangen, aber noch nichts Zeigbares.