Files
nibiru-framework.com/application/view/mockup/template/media.html
stephan 48c839d927 Initial public push: docs cosmos v4 + AI module + framework groundwork
This is the snapshot the production landing site (nibiru-framework.com) is
deployed from. Brings together the recent splash + docs migration to the v4
"Cosmos" design system, the new in-framework AI module, and the framework
groundwork that backs the framework-reference extraction.

What lands:
- docs/: Astro + Starlight site with the v4 dark cosmic palette, GalaxyHero
  canvas constellation, Mission Control chat (wired to /api/oracle →
  api.neuronetz.ai via providers.mjs Ollama), 5-panel MMVC stage
  (Model · AI · Module · Controller · View), translated EN/DE/JA/ES/FR
  content, PWA + sitemap + llms.txt + Umami analytics.
- docs/design-system/: canonical mockup bundle (source/index-v2.html for
  splash, source/docs-system.html + preview/ for docs, SPEC.md, tokens).
- docs/scripts/extraction/framework-reference-v2.md: deep framework
  reference (~1.6k lines, file:line citations, every public factory and
  idiom — basis for the LoRA training corpus.
- application/module/ai/: AI module with chat / embed / RAG / agent
  plugins, plus pdoQuery / httpGet / fileRead tools and Modelfile +
  smoke-test in training/.
- application/module/users/: user / ACL / form-factory traits used as the
  reference plugin pattern for the framework docs.
- application/settings/config/database/: schema + seed migrations
  including the AI module tables (200–203).
- Form factory + autogenerator changes the framework-reference-v2 covers.

Production secrets stay out: docs/.env, settings.production.ini and
ai.production.ini are all gitignored (.example files are in tree).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-08 15:22:18 +02:00

555 lines
21 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Page title -->
<title>VSDocs - most advanced documentation template on ThemeForest</title>
<!-- Page description -->
<meta name="description" content="">
<!-- Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="icon" type="image/png" href="img/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="img/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="img/favicons/favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" sizes="57x57" href="img/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-touch-icon-180x180.png">
<!-- Include StyleSheets -->
<link rel="stylesheet" href="css/style.min.css">
<!-- <link rel="stylesheet" href="css/custom.css"> -->
<script src="js/modernizr.js"></script>
</head>
<body class="">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Preloader: uncomment this if you want to show a smooth preloader while the page is loading. Don't forget to add the 'js-preload-me' class on the <body> tag. -->
<!-- <div class="preloader js-preloader"><div class="preloader-animation"></div></div>
-->
<!-- End of Preloader -->
<div class="page js-page ">
<!-- Header -->
<div class="header header-over large">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
<!-- Logo Image -->
<a href="index.html" class="logo-image logo-animated">
<img src="img/logos/logo.png" alt="logo">
</a>
<!-- End of Logo Image -->
</div>
<div class="col-md-9 col-sm-6 col-xs-6">
<!-- Menu -->
<nav class="right helper">
<ul class="menu sf-menu js-menu">
<li>
<a href="index.html">Home
<span class="menu-label">NEW</span>
</a>
<ul>
<li>
<a href="#">One Page Docs</a>
<ul>
<li>
<a href="home-one-page.html">Static Header</a>
</li>
<li>
<a href="home-one-page-header-fixed.html">Sticky Header</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu</a>
<ul>
<li>
<a href="index-2.html">Left - Off Canvas</a>
</li>
<li>
<a href="index-3.html">Right - Off Canvas</a>
</li>
</ul>
</li>
<li>
<a href="#">Static</a>
<ul>
<li>
<a href="home-subscribe.html">Subscribe</a>
</li>
<li>
<a href="home-web.html">Web App</a>
</li>
<li>
<a href="home-mobile-app.html">Mobile App</a>
</li>
<li>
<a href="home-soft.html">Software</a>
</li>
</ul>
</li>
<li>
<a href="#">Video</a>
<ul>
<li>
<a href="index-5.html">Background</a>
</li>
<li>
<a href="home-video-trigger.html">Trigger Simple</a>
</li>
<li>
<a href="home-web-video-trigger.html">Trigger Web</a>
</li>
<li>
<a href="home-app-video-trigger.html">Trigger App</a>
</li>
<li>
<a href="home-soft-video-trigger.html">Trigger Soft</a>
</li>
</ul>
</li>
<li>
<a href="index-4.html">Text Rotator</a>
</li>
<li>
<a href="home-with-preloader.html">With Preloader</a>
</li>
</ul>
</li>
<li>
<a href="#">Pages</a>
<ul>
<li>
<a href="panels.html">Panels</a>
</li>
<li>
<a href="#">Blog</a>
<ul>
<li>
<a href="blog-grid.html">Blog Grid</a>
</li>
<li>
<a href="blog-list.html">Blog List</a>
</li>
<li>
<a href="article.html">Article</a>
</li>
</ul>
</li>
<li>
<a href="faq.html">Faq</a>
</li>
<li>
<a href="notification.html">Notification</a>
</li>
<li>
<a href="tutorial.html">Tutorial</a>
</li>
<li>
<a href="login.html">Login</a>
</li>
<li>
<a href="register.html">Register</a>
</li>
<li>
<a href="404.html">404 Error</a>
</li>
</ul>
</li>
<li>
<a href="#">Elements</a>
<ul>
<li>
<a href="buttons.html">Buttons</a>
</li>
<li>
<a href="boxes.html">Boxes</a>
</li>
<li>
<a href="code.html">Code</a>
</li>
<li>
<a href="visual-guide.html">Visual guide</a>
</li>
<li>
<a href="notes.html">Notes</a>
</li>
<li>
<a href="files.html">File tree</a>
</li>
<li>
<a href="media.html">Media</a>
</li>
<li>
<a href="book.html">Book</a>
</li>
<li>
<a href="steps.html">Steps & Tabs</a>
</li>
<li>
<a href="misc.html">Misc</a>
</li>
</ul>
</li>
<li>
<a href="#">Layouts</a>
<ul>
<li>
<a href="views.html">Views without sidebar</a>
</li>
<li>
<a href="views-left.html">Views left sidebar</a>
</li>
<li>
<a href="views-right.html">Views right sidebar</a>
</li>
<li>
<a href="#">Full left sidebar</a>
<ul>
<li>
<a href="views-left-full.html">Regular</a>
</li>
<li>
<a href="views-left-full-compact.html">Compact</a>
</li>
</ul>
</li>
<li>
<a href="#">Full right sidebar</a>
<ul>
<li>
<a href="views-right-full.html">Regular</a>
</li>
<li>
<a href="views-right-full-compact.html">Compact</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="changelog.html">Changelog</a>
</li>
<li>
<a href="contacts.html">Contacts</a>
</li>
</ul>
</nav>
<!-- End of Menu -->
</div>
</div>
</div>
</div>
<!-- End of Header -->
<!-- Header Back -->
<div class="header-back header-back-simple header-back-small">
<div class="header-back-container">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Page Info -->
<div class="page-info page-info-simple">
<h1 class="page-title">Media</h1>
<h2 class="page-description">Embedding a video onto a web page becomes as easy as cutting and pasting.</h2>
</div>
<!-- End Page Info -->
</div>
</div>
</div>
</div>
</div>
<!-- End of Header Back -->
<div id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Category Info -->
<div class="category-info helper pt0" id="youtube-responsive-video">
<h3 class="category-title"> YouTube responsive video
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#youtube-responsive-video">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">Here's an example of a YouTube video that is directly embedded into this page. How do you do it? When you locate a video you'd like to add to your page on YouTube, look below the video for a Share button.</h4>
</div>
<!-- End of Caregory Info -->
<!-- Video -->
<iframe class="video js-responsive-video" src="https://www.youtube.com/embed/qfwpEWaJXS4?showinfo=0" style="border:0" allowfullscreen></iframe>
<!-- End of Video -->
<!-- Category Info -->
<div class="category-info " id="vimeo-responsive-video">
<h3 class="category-title"> Vimeo responsive video
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#vimeo-responsive-video">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">Embedding allows you to take your video — or someone else's video — and post it on a web page outside of Vimeo. For example, you can embed a video on your blog and then people can watch your video there without having to visit Vimeo.</h4>
</div>
<!-- End of Caregory Info -->
<!-- Video -->
<iframe class="video js-responsive-video" src="https://player.vimeo.com/video/86821694" width="500" height="281" style="border:0" allowfullscreen></iframe>
<!-- End of Video -->
<!-- Category Info -->
<div class="category-info " id="youtube-playlist">
<h3 class="category-title"> Stream YouTube playlist by its ID
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#youtube-playlist">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">Here's an example of a YouTube video playlist that is directly embedded into this page. In that way you could present a video course. How do you do it? Just copy the id of your playlist that you can find in it's url and the plugin will do the rest.</h4>
</div>
<!-- End of Caregory Info -->
<!-- Video Advanced -->
<div class="video-advanced js-video-advanced" data-api="[enter your api key]" id="advanced-video" data-config='{
"playlist": "PLgGbWId6zgaWZkPFI4Sc9QXDmmOWa1v5F"
}'></div>
<!-- End of Video Advanced -->
<!-- Category Info -->
<div class="category-info " id="custom-video">
<h3 class="category-title"> Custom Video
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#custom-video">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">Videos are fully under your control. Now you can stream videos hosted anywhere.</h4>
</div>
<!-- End of Caregory Info -->
<!-- Custom Video -->
<video class="video-js" controls preload="auto" poster="http://themes.vsart.me/presentation/vsdocs/video/poster.png" data-setup="{}">
<source src="http://themes.vsart.me/presentation/vsdocs/video/video.mp4" type='video/mp4'>
<source src="http://themes.vsart.me/presentation/vsdocs/video/video.ogv" type='video/ogv'>
<source src="http://themes.vsart.me/presentation/vsdocs/video/video.webm" type='video/webm'>
<p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<!-- End of Custom Video -->
<!-- Category Info -->
<div class="category-info " id="custom-video-playlist">
<h3 class="category-title"> Custom Video Playlist
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#custom-video-playlist">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">In case you have an entire course you would like to share with your customers, this component could be the best solution for you.</h4>
</div>
<!-- End of Caregory Info -->
<!-- Custom Video Playlist -->
<video id="video-playlist" data-config='{"continuous": true }' class="js-video-playlist video-js video-playlist-custom" controls preload="metadata" poster="http://themes.vsart.me/presentation/vsdocs/video/playlist/first.jpg" class=" video-js vjs-default-skin">
<source src="http://themes.vsart.me/presentation/vsdocs/video/playlist/first.mp4" type="video/mp4">
<source src="http://themes.vsart.me/presentation/vsdocs/video/playlist/first.webm" type="video/webm">
<source src="http://themes.vsart.me/presentation/vsdocs/video/playlist/first.ogv" type="video/ogv">
</video>
<div id="video-playlist-vjs-playlist" class="vjs-playlist">
<ul>
<li>
<a href="#" class="video-playlist-item-download js-video-playlist-item-download">
<i class="fa fa-download"></i>
</a>
<a class="vjs-track" href="#episode-0" data-index="0" data-src="http://themes.vsart.me/presentation/vsdocs/video/playlist/first"> Animating With Snap.svg.
<span class="video-playlist-item-duration"> 0:39 </span>
</a>
</li>
<li>
<a href="#" class="video-playlist-item-download js-video-playlist-item-download">
<i class="fa fa-download"></i>
</a>
<a class="vjs-track" href="#episode-1" data-index="1" data-src="http://themes.vsart.me/presentation/vsdocs/video/playlist/second"> Optimizing Page Load.
<span class="video-playlist-item-duration"> 0:10 </span>
</a>
</li>
<li>
<a href="#" class="video-playlist-item-download js-video-playlist-item-download">
<i class="fa fa-download"></i>
</a>
<a class="vjs-track" href="#episode-2" data-index="2" data-src="http://themes.vsart.me/presentation/vsdocs/video/playlist/third"> WordPress Admin Customization.
<span class="video-playlist-item-duration"> 0:28 </span>
</a>
</li>
<li>
<a href="#" class="video-playlist-item-download js-video-playlist-item-download">
<i class="fa fa-download"></i>
</a>
<a class="vjs-track" href="#episode-3" data-index="3" data-src="http://themes.vsart.me/presentation/vsdocs/video/playlist/first"> Rules of Great Form Design.
<span class="video-playlist-item-duration"> 0:39 </span>
</a>
</li>
<li>
<a href="#" class="video-playlist-item-download js-video-playlist-item-download">
<i class="fa fa-download"></i>
</a>
<a class="vjs-track" href="#episode-4" data-index="4" data-src="http://themes.vsart.me/presentation/vsdocs/video/playlist/second"> Using SVG Sprites.
<span class="video-playlist-item-duration"> 0:10 </span>
</a>
</li>
<li>
<a href="#" class="video-playlist-item-download js-video-playlist-item-download">
<i class="fa fa-download"></i>
</a>
<a class="vjs-track" href="#episode-5" data-index="5" data-src="http://themes.vsart.me/presentation/vsdocs/video/playlist/third"> Solid HTML Form Structure.
<span class="video-playlist-item-duration"> 0:28 </span>
</a>
</li>
</ul>
</div>
<!-- End of Custom Video Playlist -->
<!-- Category Info -->
<div class="category-info " id="audio">
<h3 class="category-title"> Audio Player
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#audio">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">Share high quality audio files with you audience as well.</h4>
</div>
<!-- End of Caregory Info -->
<div class="row">
<div class="col-md-6">
<audio class="video-js" controls preload="auto" width="600" height="600" poster="http://themes.vsart.me/presentation/vsdocs/audio/1.jpg" data-setup='{}'>
<source src="http://themes.vsart.me/presentation/vsdocs/audio/1.mp3" type='audio/mp3' /> </audio>
</div>
<div class="col-md-6">
<audio class="video-js" controls preload="auto" width="600" height="600" poster="http://themes.vsart.me/presentation/vsdocs/audio/2.jpg" data-setup='{}'>
<source src="http://themes.vsart.me/presentation/vsdocs/audio/2.mp3" type='audio/mp3' /> </audio>
</div>
</div>
<!-- Category Info -->
<div class="category-info " id="gif-player">
<h3 class="category-title"> Gif Player
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#gif-player">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">By watching those short demo-gif you will better understand how the template works. In those demos we share some best practice recommendations to help you optimize your experience.</h4>
</div>
<!-- End of Caregory Info -->
<div class="helper center">
<!-- Gif Player -->
<div class="gif-player">
<img src="http://placehold.it/670x340" class="js-gif-player" alt="gif animation"> </div>
<!-- End of Grid view -->
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="js-footer-is-fixed">
<!-- Footer Default -->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="footer-logo-wrapper">
<!-- Logo Image -->
<a href="index.html" class="logo-image ">
<img src="img/logos/logo.png" alt="logo">
</a>
<!-- End of Logo Image -->
<!-- Slogan -->
<p class="slogan"> Learn.
<br>Create.
<br>Impress. </p>
<!-- End of Slogan -->
</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
<div class="footer-wrapper">
<!-- Scroll top -->
<span class="scroll-top js-scroll-top">
<i class="fa fa-angle-up"></i>
</span>
<!-- End of Scroll top -->
<!-- Version -->
<div class="docs-version js-docs-version">
<span class="docs-current-version js-docs-current-version">v3.5</span>
<ul class="js-docs-version-list">
<li>
<a href="#">1.0</a>
</li>
<li>
<a href="#">1.5</a>
</li>
<li>
<a href="#">2.5</a>
</li>
<li>
<a href="#">3.0</a>
</li>
<li>
<a href="#">3.1</a>
</li>
</ul>
</div>
<!-- End of Version -->
<!-- Footer Menu -->
<ul class="footer-menu helper right">
<li>
<a href="#"> About us </a>
</li>
<li>
<a href="#"> Privacy Policy </a>
</li>
<li>
<a href="#"> Terms & Condotions </a>
</li>
<li>
<a href="#"> My account </a>
</li>
<li>
<a href="#"> Support service </a>
</li>
</ul>
<!-- End of Footer Menu -->
<!-- Copyright -->
<p class="copyright helper right">
<a href="http://vsart.me">VSArt</a>, all rights reserved. 2016 &copy; </p>
<!-- End of Copyright -->
</div>
</div>
</div>
</div>
</div>
<!-- End of Footer Default -->
</footer>
<!-- End of Footer -->
</div>
<script src="js/all.js"></script>
<script src="js/custom.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!--
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
-->
</body>
</html>