Forum - Habe mal eine Frage - Benachrichtigung im Seitenmenü

<style>
/* Anfang Hier beginnt das Seitenmenü */
:root {
  --side-background: linear-gradient(to bottom, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
 
  
}
 
body {
  margin-left:50px;
}
.side_page {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 280px;
  background: var(--side-background);
  z-index: 100;
  transition: all 0.5s ease;
  font-size: 1.025rem;
  font-family: "arial", sans-serif;
  z-index:999999;
}
.side_page.close {
  width: 78px;
}
.side_page .logo-details {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  cursor:pointer;
}
.side_page .logo-details i {
  font-size: 30px;
  color: #fff;
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
}
.side_page .logo-details .logo_name {
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  transition: 0.3s ease;
  transition-delay: 0.1s;
}
.side_page.close .logo-details .logo_name {
  transition-delay: 0s;
  opacity: 0;
  pointer-events: none;
}
.side_page .nav-links {
  height: 100%;
  padding: 0 0 150px 0;
  overflow: auto;
}
.side_page.close .nav-links {
  overflow: visible;
}
.side_page .nav-links::-webkit-scrollbar {
  display: none;
}
.side_page .nav-links li {
  position: relative;
  list-style: none;
  transition: all 0.4s ease;
}
.side_page .nav-links li:hover {
  background: var(--side-background);
}
.side_page .nav-links li .icon-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.side_page.close .nav-links li .icon-link {
  display: block;
}
.side_page .nav-links li i {
  height: 50px;
  min-width: 78px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.side_page .nav-links li.showMenu i.arrow {
  transform: rotate(-180deg);
}
.side_page.close .nav-links i.arrow {
  display: none;
}
.side_page .nav-links li a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.side_page .nav-links li a .link_name {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  transition: all 0.4s ease;
}
.side_page.close .nav-links li a .link_name {
  opacity: 0;
  pointer-events: none;
}
.side_page .nav-links li .sub-menu {
  padding: 3px 6px 6px 45px;
  margin-top: -10px;
  background: var(--side-background);
  display: none;
  color: #fff;    
}
.side_page .nav-links li.showMenu .sub-menu {
  display: block;
}
.side_page .nav-links li .sub-menu a {
  color: #fff;
  font-size: 15px;
  padding: 5px;
  white-space: nowrap;
  opacity: 0.6;
  transition: all 0.3s ease;
}
.side_page .nav-links li .sub-menu a:hover {
  opacity: 1;
}
.side_page.close .nav-links li .sub-menu {
  position: absolute;
  left: 100%;
  top: -10px;
  margin-top: 0;
  padding: 10px 20px;
  border-radius: 0 6px 6px 0;
  opacity: 0;
  display: block;
  pointer-events: none;
  transition: 0s;
}
.side_page.close .nav-links li:hover .sub-menu {
  top: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
}
.side_page .nav-links li .sub-menu .link_name {
  display: none;
}
.side_page.close .nav-links li .sub-menu .link_name {
  font-size: 18px;
  opacity: 1;
  display: block;
}
.side_page .nav-links li .sub-menu.blank {
  opacity: 1;
  pointer-events: auto;
  padding: 3px 20px 6px 16px;
  opacity: 0;
  pointer-events: none;
}
.side_page .nav-links li:hover .sub-menu.blank {
  top: 50%;
  transform: translateY(-50%);
}
.side_page .profile-details {
  position: fixed;
  bottom: 0;
  width: 280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--side-background);
  padding: 12px 0;
  transition: all 0.5s ease;
}
.side_page.close .profile-details {
  background: none;
}
.side_page.close .profile-details {
  width: 78px;
}
.side_page .profile-details .profile-content {
  display: flex;
  align-items: center;
}
.side_page .profile-details img {
  height: 42px;
  width: auto;
  object-fit: cover; 
  border-radius: 16px;
  margin: 0 14px 0 2px;
  background: var(--side-background);
  transition: all 0.5s ease;
  box-shadow: 0px 0px 3px 1px #656565;
}
.side_page.close .profile-details img {
  padding: 10px;
}
.side_page .profile-details .profile_name,
.side_page .profile-details .job {
  color: #000;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
}
.side_page.close .profile-details i,
.side_page.close .profile-details .profile_name,
.side_page.close .profile-details .job {
  display: none;
}
.side_page .profile-details .job {
  font-size: 12px;
}
.home-section {
  position: relative;
  background: #2a407d;
  height: 100vh;
  left: 260px;
  width: calc(100% - 280px);
  transition: all 0.5s ease;
}
.side_page.close ~ .home-section {
  left: 78px;
  width: calc(100% - 78px);
}
.home-section .home-content {
  height: 60px;
  display: flex;
  align-items: center;
}
.home-section .home-content .bx-menu,
.home-section .home-content .text {
  color: 2c21b5;
  font-size: 35px;
}
.home-section .home-content .bx-menu {
  margin: 0 15px;
  cursor: pointer;
}
.home-section .home-content .text {
  font-size: 26px;
  font-weight: 600;
}
@media (max-width: 420px) {
  .side_page.close .nav-links li .sub-menu {
    display: none;
  }
}
 
.side_nav_link-img {
  left: 95px;
  position: fixed;
  width: 2%;
  height: auto;
  border-radius: 50%;
}
 
.nav__count {
  padding: .10rem .4rem;
  border-radius: 48%;
  background-color: red;
  font-size: small;
  color: white;
} 
 /* Anfang Hier beginnt die Spende */
 
 .donation_progress .ppercent {
  max-width: 100%;
  height: 10px;
  background: #a9db80;
  background: -moz-linear-gradient(top, #a9db80 0%, #96c56f 100%);
  background: -webkit-linear-gradient(top, #a9db80 0%,#96c56f 100%);
  background: linear-gradient(to bottom, #a9db80 0%,#96c56f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 );
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px 0;
  max-width: 100% !important;
}
.donation_progress .peuro {
  height: 10px;
  position: absolute;
  display: block;
  width: 100%;
  z-index: 2;
}
 .donation_progress {
  border: 1px solid;
  padding: 10px;
  text-align: center;
  position: relative;
  max-width: 500px;
  height: 10px;
}
 span[title] {
  text-decoration: underline;
}
 
 /* Anfang Hier beginnt der Kalender im Seitenmenü */
 
* {
  padding: 0px;
  margin: 0px;
}    
    
 .container-crew {
  display: flex;
  flex-direction: column;
  color:#222222;
  align-items: center;
  justify-content: center;
  height:auto; 
  margin: 0 auto;
}
.main-crew {
  position: relative;
  border: 1px solid #797979;
  width:  var(--GroesseKalender);
  border-radius: calc(var(--GroesseKalender)/12); 
  padding: 0;
  box-shadow: 0px 0px 13px 3px #777777;
  margin: calc(var(--GroesseKalender)/6) auto;
  background: #e0dcdc;
  color: #222222;
}
.main-crew #date2 {
  font: calc(var(--GroesseKalender)/2.0) Arial, sans-serif;
  letter-spacing: 1px;
  margin-right: auto;
  margin-left:auto;
  margin-top: calc(var(--GroesseKalender)/16); 
  margin-bottom: calc(var(--GroesseKalender)/7.5);
  padding: 0;
}
.main-crew ul {
  display: flex;
  padding: 0;
  margin: 0;
}
.main-crew ul li {
  list-style-type: circle;
  list-style-position: inside;
  width: calc(var(--GroesseKalender)/12);
  height: calc(var(--GroesseKalender)/3);
  border-radius: calc(var(--GroesseKalender)/10); 
  background-image: radial-gradient(white 30%, #000000e3 40%, #aca9a9ad 70%);
  margin-right: calc(var(--GroesseKalender)/8); 
  margin-left: calc(var(--GroesseKalender)/8); 
  display: block;
  position: relative;
  box-shadow: 0px 4px 3px 0px #000;
}
.main-crew .top-crew {
  position: absolute;
  top: calc(var(--GroesseKalender)/-5.3);
}
.main-crew .sub-crew {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border-radius: calc(var(--GroesseKalender)/10) calc(var(--GroesseKalender)/12) 0 0; 
 
  background: #0bb6d9; 
  color: #222222;
}
.main-crew .year-crew {
  font: calc(var(--GroesseKalender)/6.5) Arial, sans-serif;
  letter-spacing: 1px;
  margin-top: calc(var(--GroesseKalender)/7.5);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-crew #year2 {
  font: calc(var(--GroesseKalender)/9.3) Arial, sans-serif;
  letter-spacing: 1px;
}
 
.main-crew .date-crew {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.main-crew #day2 {        
  padding:10px;
  margin: 0;
  position: absolute;
  bottom: -5px;
  font: calc(var(--GroesseKalender)/7.2) Arial, sans-serif;
  letter-spacing: 1px;
}
 
.main-crew {
  /* Groeße Kalender im Portal */
  --GroesseKalender: 55px;      
} 
    
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300);
 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-family: "roboto";
  background-image: linear-gradient(to bottom right, #8281b3, #454471);
  justify-content: space-evenly;
}
 
/* Anfang Hier beginnt James */
.James{
  float:left;
  margin: 30px 20px 10px 20px;
  z-index: 999997;
}
 
#James_sagt{   
  background-color: #333333;
  padding:15px 20px 15px 15px;
  border-radius:5px;
  color: #ffffff;
  
  display: none;
  z-index: 999999;
  max-width: 340px; 
  float:left;
  margin: 20px; 
 
  /* word-break: break-all; */
}
 
#coding {
  background-color: #333333;
  padding:15px 20px 15px 15px;
  border-radius:5px;
  color: #ffffff;
 
  float:left;
  display: table-cell;
  z-index: 999998;
  margin:20px;
}
 
.objro{ 
  display: none; 
}
/* Ende Hier endet James */
 
    
</style>  
  
<!-- Box-Symbol CSS   -->
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
<!-- Ende -->
 
 
<script>
$('.container').append(`
  <div class="side_page close">
    <div class="logo-details">
      <i class='bx bx-menu' title="Hier können sie das Seitenmenü öffnen und schließen!"></i>
      <span class="logo_name">Menü</span>
    </div>
    <ul class="nav-links">
       <!-- Anfang hier beginnt James -->
      <li>
        <div class="icon-link">
        
          <i class='bx bx-info-circle'></i>
          
        </a>
        <i class="bx bxs-chevron-down arrow" title="Menü öffnen"></i>
        </div>
        <ul class="sub-menu">
        <center> Guten Tag {{user_registered==true.start}}{{user_name}}{{user_registered==true.else}}lieber Besucher{{user_registered==true.end}}! <br>James möchte Dir etwas Sagen</center><br></i>
                       <br>
                      <div id="James_sagt"></div>
 
<!-- Figur James erstellen - Anfang -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="160px" height="250px" viewBox="0 0 160 250" enable-background="new 0 0 160 250" xml:space="preserve" class="James">
<g>
	<g>
		<path class="antenna-left objro" d="M76.782,25.942c-0.08-0.815-2.192-20-22.867-21.928l0.137-1.501c21.916,2.044,24.19,23.07,24.21,23.283L76.782,25.942z"/>
	</g>
	<ellipse class="antenna-ball-left objro" fill="#5E5E5E" cx="55.021" cy="3.39" rx="3.344" ry="3.391"/>
</g>
<g>
	<g>
		<path class="antenna-right objro" d="M83.217,25.942c0.08-0.815,2.192-20,22.867-21.928l-0.137-1.501c-21.916,2.044-24.188,23.07-24.209,23.283L83.217,25.942z
			"/>
	</g>
	<ellipse class="antenna-ball-right objro" fill="#5E5E5E" cx="104.979" cy="3.39" rx="3.346" ry="3.391"/>
</g>
<rect class="neck objro" x="59.722" y="72.779" fill="#787878" width="40.557" height="27.564"/>
<path class="top-of-head objro" fill="#787878" d="M96.079,32.57v-8.546c-10.72-3.765-21.437-3.98-32.156,0v8.546H96.079z"/>
<g>
	<g>
		<g>
			<rect class="leg-left objro" x="48.499" y="158.432" fill="#787878" width="12.771" height="81.291"/>
		</g>
		<path class="foot-left objro" fill="#595959" d="M54.885,234.096c-9.526,0-17.244,7.119-17.244,15.903H72.13C72.13,241.215,64.41,234.096,54.885,234.096z"
			/>
		<g>
			<ellipse class="kneecap-left-outside objro" cx="54.885" cy="200.79" rx="9.294" ry="9.423"/>
			<g>
				<path class="kneepcap-left-inside objro" fill="#787878" d="M60.607,203.823c-1.653,3.202-5.553,4.44-8.715,2.768c-3.163-1.677-4.383-5.628-2.73-8.832
					c1.651-3.204,5.556-4.442,8.715-2.771C61.036,196.664,62.258,200.62,60.607,203.823z"/>
			</g>
		</g>
	</g>
	<g>
		<g>
			<rect class="leg-right objro" x="98.729" y="158.432" fill="#787878" width="12.771" height="81.291"/>
		</g>
		<path class="foot-right objro" fill="#595959" d="M105.115,234.096c9.523,0,17.244,7.119,17.244,15.903H87.871
			C87.871,241.215,95.593,234.096,105.115,234.096z"/>
		<g>
			<ellipse class="kneepcap-right-outisde objro" cx="105.113" cy="200.79" rx="9.295" ry="9.423"/>
			<g>
				<path class="kneecap-right-inside objro" fill="#787878" d="M99.395,203.823c1.652,3.202,5.551,4.44,8.713,2.768c3.164-1.677,4.381-5.628,2.729-8.832
					c-1.65-3.204-5.553-4.442-8.711-2.771C98.963,196.664,97.743,200.62,99.395,203.823z"/>
			</g>
		</g>
	</g>
</g>
<g>
	<g>
		<g>
			<path class="arm-left objro" fill="#787878" d="M38.291,95.944c-8.259,4.479-15.268,11.387-20.423,18.846C5.22,133.088,3.41,154.261,7.262,176.253
				l10.418-1.878c-3.338-19.01-2.353-37.016,8.665-53.158c4.23-6.199,9.988-12.042,16.923-15.812L38.291,95.944z"/>
			<path class="hand-left objro" fill="#595959" d="M9.604,166.5c-6.984,1.975-11.067,9.316-9.117,16.398c1.008,3.662,3.439,6.523,6.51,8.172
				c-0.167-0.363-0.315-0.742-0.426-1.141c-1.235-4.484,1.703-9.234,6.562-10.609c4.861-1.377,9.804,1.145,11.037,5.631
				c0.111,0.396,0.18,0.798,0.221,1.197c1.785-3.021,2.399-6.748,1.393-10.407C23.833,168.661,16.589,164.523,9.604,166.5z"/>
			<g>
				<ellipse class="elbox-left-outside objro" cx="13.581" cy="132.93" rx="8.505" ry="8.623"/>
				<g>
					<path class="elbow-left-inside objro" fill="#787878" d="M9.299,135.199c1.237,2.396,4.154,3.322,6.52,2.07c2.364-1.252,3.278-4.211,2.042-6.605
						c-1.236-2.398-4.152-3.324-6.52-2.072C8.978,129.844,8.065,132.803,9.299,135.199z"/>
				</g>
			</g>
		</g>
		<path class="arm-attachment-left objro" d="M42.356,94.049l-8.341-1.248c-5.238,10.201-7.014,20.918-4.697,32.248l8.34,1.248L42.356,94.049z"/>
	</g>
	<g>
		<g>
			<path class="arm-right objro" fill="#787878" d="M121.709,95.944c8.258,4.479,15.268,11.387,20.421,18.846c12.647,18.299,14.458,39.472,10.606,61.464
				l-10.418-1.878c3.339-19.01,2.353-37.017-8.666-53.158c-4.229-6.199-9.987-12.042-16.924-15.812L121.709,95.944z"/>
			<path class="hand-right objro" fill="#595959" d="M150.395,166.5c6.984,1.975,11.067,9.316,9.119,16.398c-1.011,3.662-3.439,6.523-6.511,8.172
				c0.168-0.363,0.313-0.742,0.424-1.141c1.237-4.484-1.702-9.234-6.562-10.609c-4.861-1.377-9.803,1.145-11.035,5.631
				c-0.109,0.396-0.18,0.798-0.223,1.197c-1.784-3.021-2.398-6.748-1.393-10.407C136.166,168.661,143.412,164.523,150.395,166.5z"/>
			<g>
				<ellipse class="elbox-right-outside objro" cx="146.419" cy="132.93" rx="8.505" ry="8.623"/>
				<g>
					<path class="elbow-right-inside objro" fill="#787878" d="M150.7,135.199c-1.235,2.396-4.154,3.322-6.519,2.07c-2.365-1.252-3.279-4.211-2.043-6.605
						c1.235-2.398,4.152-3.324,6.52-2.072C151.023,129.844,151.936,132.803,150.7,135.199z"/>
				</g>
			</g>
		</g>
		<path class="arm-attachment-right" d="M117.645,94.049l8.34-1.248c5.238,10.201,7.015,20.918,4.695,32.248l-8.339,1.248L117.645,94.049z"/>
	</g>
</g>
<path class="head objro" fill="#595959" d="M112.809,28.372H80H47.19c-5.814,18.663-5.499,37.322,0,55.983H80h32.811
	C118.309,65.694,118.625,47.035,112.809,28.372z"/>
<g>
	<g>
		<path class="eyeball-left-outside objro" fill="#FFFFFF" d="M72.116,47.955c0,5.443-4.045,9.853-9.033,9.853h-1.971c-4.988,0-9.032-4.41-9.032-9.853
			s4.044-9.856,9.032-9.856h1.971C68.071,38.099,72.116,42.512,72.116,47.955z"/>
		<path class="eyeball-left-inside" d="M66.614,47.955c0,2.176-1.618,3.942-3.613,3.942h-1.807c-1.994,0-3.612-1.766-3.612-3.942
			c0-2.178,1.618-3.943,3.612-3.943H63C64.996,44.012,66.614,45.777,66.614,47.955z"/>
	</g>
	<g>
		<path class="eyeball-right-outisde objro" fill="#FFFFFF" d="M107.92,47.955c0,5.443-4.045,9.853-9.031,9.853h-1.973c-4.986,0-9.031-4.41-9.031-9.853
			s4.045-9.856,9.031-9.856h1.973C103.875,38.099,107.92,42.512,107.92,47.955z"/>
		<path class="eyeball-right-inside"  d="M102.417,47.955c0,2.176-1.616,3.942-3.612,3.942h-1.807c-1.994,0-3.611-1.766-3.611-3.942
			c0-2.178,1.617-3.943,3.611-3.943h1.807C100.801,44.012,102.417,45.777,102.417,47.955z"/>
	</g>
</g>
<path class="mouth objro" fill="#FFFFFF" d="M103.383,69.778c0,1.381-0.836,2.499-1.871,2.499H58.487c-1.033,0-1.871-1.118-1.871-2.499
	c0-1.378,0.838-2.496,1.871-2.496h43.025C102.547,67.282,103.383,68.4,103.383,69.778z"/>
<g>
	<path class="body objro" fill="#595959" d="M120.098,92.09H80H39.903c-7.105,26.162-6.721,52.325,0,78.488H80h40.098
		C126.82,144.416,127.203,118.252,120.098,92.09z"/>
</g>
</svg>
 
<!-- Figur James erstellen - Ende -->
 
<div style="clear:both;"></div>
 
 
<!-- Forum-Roboter - Anfang ( _  bedeutet Absatz / Zeilenumbruch ) -->
<div id="coding">
 
 

  
 
  Verbinden mit https://www.Daishis-Forum.org _ 
 
 
  // James zieht sein neues outfit an... _ 
  
  var James = new RobotSvg(); _ 
  console.append(James.sagt); _ 
  // Fertig  __ SVG erstellen... **************************** _ _
  
  Erfolgreich erstellt! _ _
  James, sag uns was!!!
 
</div>
<!-- Forum-Roboter - Ende -->
 
<div style="clear:both;"></div>
 
 
 
<!-- Wird benötigt, wenn kein jQuery vorhanden ist --> 
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
      </ul>
 </li>                   
           
                       
     <!-- Anfang hier beginnt Spende mit Hilfe einer kleinen Spende dazu beitragen -->                  
    <li>
        <div class="icon-link">
        
          <i class='bx bxl-paypal'></i>
          
        </a>
        <i class="bx bxs-chevron-down arrow" title="Menü öffnen"></i>
        </div>
        <ul class="sub-menu">
                      <center> Guten Tag {{user_registered==true.start}}{{user_name}}{{user_registered==true.else}}lieber Besucher{{user_registered==true.end}}!</center><br>
                       <center><img height="auto" src="//files.homepagemodules.de/b906480/a_244_6356fb8f.png"></a></center>
                       
         <center>Wenn Du uns dabei unterstützen möchtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.
 
         Deine Spende hilft! <br><br>
                                     {{donation_goal==true.start}}
		<div class="donation_goal">Spendenziel: {{donation_goal}} €</div>
		  <div class="donation_progress"><span class="peuro"title="Hier sehen Sie den fortschritt des Spendenziels! Besten Dank!">{{donation_goal_percent}} %</span><div class="ppercent" style="width:{{donation_goal_percent}}%">&nbsp;</div></div>
		{{donation_goal==true.end}}</center><br>
       <center><a href="/donations.html" title="Wir hoffen, dass Dir unser Forum gefällt und freuen uns, dass Du Dich dazu entschlossen hast, uns zu unterstützen! Besten Dank! "><img height="auto" src="//files.homepagemodules.de/b906480/a_259_e0206fd8.png"></a></center> <br>  <br>
      </ul>
 </li> 
   <!-- Ende hier beginnt Spende mit Hilfe einer kleinen Spende dazu beitragen -->                    
                       
         <!-- Anfang hier beginnt Forum Link - Seiten -->              
      <li>
        <div class="icon-link">
          <a href="" title="">
            <i class="bx bx-home"></i>
            <span class="link_name">Forum Link - Seiten</span>
          </a>
          <i class="bx bxs-chevron-down arrow" title="Menü öffnen"></i>
        </div>
        <ul class="sub-menu">
        <span class="link_name">Forum Link - Seiten</span>
           <br>   
          <li><a href="./portal.php"><i class='bx bx-home'></i>Portal</a></li>
          <li><a href="./forum.php"><i class='bx bx-shape-polygon'></i>Forum Übersicht</a></li>
          <li><a href="./calendar.php"><i class='bx bx-calendar'></i>Kalender</a></li>
          <li><a href="./gallery.php"><i class='bx bx-photo-album'></i>Bildergalerie</a></li>
		  <li><a href="https://daishis-forum.xobor.de/page-916726-5.html"><i class='bx bx-calendar'></i>Präsentationskalender</a></li>
          <li><a href="#"><i class='bx bx-bookmark'></i>?</a></li>
        </ul>
      </li> 
 <!-- Ende hier beginnt Forum Link - Seiten -->
             
 
 

       <!-- Anfang hier beginnt die Hilfe (FAQ) -->                
      <li>
        <div class="icon-link">
          <a href="./faq.php" title="">
            <i class="bx bx-help-circle"></i>
            <span class="link_name">Hilfe (FAQ)</span>
          </a>
          <i class="bx bxs-chevron-down arrow" title="Menü öffnen"></i>
        </div>
        <ul class="sub-menu"> 
       <center> Guten Tag {{user_registered==true.start}}{{user_name}}{{user_registered==true.else}}lieber Besucher{{user_registered==true.end}}! <br> <br>Hier werden Frage zum Forum in der FAQ beantwortet </center><br>
 
          <li><a class="link_name" href="./faq.php" title="Hier werden Frage zum Forum beantwortet">Hilfe (FAQ)</a></li>
          
        </ul>
      </li>
      <!-- Ende hier beginnt die Hilfe (FAQ) --> 
	  
	  <!-- Anfang hier beginnt die Hier können sie sich registrieren, einloggen, sowie ausloggen --> 
    <li>
        <div class="icon-link">
         <i class='bx bx-log-in-circle'></i>
         <span class="link_name"></span>
          </a>
          <i class="bx bxs-chevron-down arrow" title="Menü öffnen"></i>
        </div>
        <ul class="sub-menu">
          <center> Guten Tag {{user_registered==true.start}}{{user_name}}{{user_registered==true.else}}lieber Besucher{{user_registered==true.end}}! <br> <br>Hier können sie sich registrieren, einloggen, sowie ausloggen</center><br>
           <span class="link_name"></span>
           <br>            
          <li><a href="./anmeldung.php"><i class='bx bx-key'></i>Registrieren</a></li>
          <li><a href="./login.php"><i class='bx bx-log-in'></i>Login</a></li>
          <a href="./login.php?option=logout"><i class='bx bx-log-out'></i>Logout</a></li>
        </ul>
      </li>      
        <!-- Ende hier beginnt die Hier können sie sich registrieren, einloggen, sowie ausloggen -->   
		
 
      <!-- Anfang hier beginnt die Xobor Support, Portal, Wiki, Blog, Plugin --> 
      <li>
        <div class="icon-link">
            <i><center><img src="https://files.homepagemodules.de/b906480/a_251_3e7e5f9e.png" alt="" width="18" height="18"></center></i>
            <span class="link_name"></span>
          </a>
          <i class="bx bxs-chevron-down arrow" title="Menü öffnen"></i>
        </div>
        <ul class="sub-menu">
          <span class="link_name">Xobor</span>
          <br>
          <li><a href="https://www.xobor.de/plugin-store.html" target="_blank"><img src="https://files.homepagemodules.de/b906480/a_251_3e7e5f9e.png" alt="" width="15" height="15"> Plugins &nbsp;&nbsp;&nbsp;&nbsp;  <span class="nav__count" title="Xobor Hat im moment 101 Plugins zur Verfügung!">101</span></a></li>
          <li><a href="https://www.hpm-support.de/" target="_blank"><img src="https://files.homepagemodules.de/b906480/a_251_3e7e5f9e.png" alt="" width="15" height="15"> Xobor Support</a></li>
          <li><a href="https://www.hpm-support.de/portal.html" target="_blank"><img src="https://files.homepagemodules.de/b906480/a_251_3e7e5f9e.png" alt="" width="15" height="15"> Xobor Support-Portal</a></li>
          <li><a href="https://www.hpm-support.de/wiki:home" target="_blank"><img src="https://files.homepagemodules.de/b906480/a_251_3e7e5f9e.png" alt="" width="15" height="15"> Xobor Wiki</a></li>
          <li><a href="https://www.hpm-support.de/blog.html" target="_blank"><img src="https://files.homepagemodules.de/b906480/a_251_3e7e5f9e.png" alt="" width="15" height="15"> Xobor Blog </a></li>
        </ul>
      </li>
	        <!-- Ende hier beginnt die Xobor Support, Portal, Wiki, Blog, Plugin -->
			
 
            <!-- Anfang hier beginnt der  Account --> 
      <li>
        {{user_registered==true.start}}
        <div class="icon-link">
        <a href="" target="_blank" title="">
            <i class="bx bxs-user-detail"></i>
            <span class="link_name">Account</span>
          </a>
          <i class="bx bxs-chevron-down arrow" title="Menü öffnen"></i>
        </div>
        <ul class="sub-menu">
        <center> Guten Tag {{user_registered==true.start}}{{user_name}}{{user_registered==true.else}}lieber Besucher{{user_registered==true.end}}</center><br>
    <li><span id="news-headline" style="background: {{global_box_header_background|rgb_lightness(91)}}; cursor:default;"><strong>Account</strong></span></li>
                           
    <li><span><a href="javascript:void(0)" onclick="$('#global-news-box-wrap').hide(); window.location.href='{{link_myratings}}'; return false;"><span style="width:300; padding:2px; height:15px;"><img src="//files.homepagemodules.de/b104774/f46t1197p2704n22_phKvdXmg.png"> Persönliche Bewertungen</span></a></span></li>
 
    <li><span><a href="javascript:void(0)" onclick="$('#global-news-box-wrap').hide(); window.location.href='{{link_myprofile}}'; return false;"><span style="width:300; padding:2px; height:15px;"><img src="//files.homepagemodules.de/b104774/f46t1197p2704n22_phKvdXmg.png"> Eigenes Profil</span></a></span></li>
 
    <li><span><a href="javascript:void(0)" onclick="$('#global-news-box-wrap').hide(); window.location.href='{{link_memberdata}}'; return false;"><span style="width:300; padding:2px; height:15px;"><img src="//files.homepagemodules.de/b2001010/a_1006_3b5a4b20.png"> Profil bearbeiten</span></a></span></li>
 
    <li><span><a href="javascript:void(0)" onclick="$('#global-news-box-wrap').hide();  window.location.href='{{link_myprofile}}#comment';return false;"><span style="width:300; padding:2px; height:15px;"><img src="//img.homepagemodules.de/ds/static/feedicons/gbook.png"> Gästebuch</span></a></span></li>
 	
    <li><span><a href="javascript:void(0)" onclick="$('#global-news-box-wrap').hide();xob_redirect('{{link_mails}}')"><span style="width:300; padding:2px; height:15px;"><img src="//files.homepagemodules.de/b2001010/a_1007_09ecc3fc.png"> Private Nachrichten</span></a></span></li>
        
	<li><span><a href="javascript:void(0)" onclick="$('#global-news-box-wrap').hide(); window.location.href='{{link_config}}'; return false;"><span style="width:300; padding:2px; height:15px;"><img src="//files.homepagemodules.de/b2001010/a_1008_5b0b27e9.png"> Einstellungen</span></a></span></li>
 {{user_registered==true.else}}
         {{user_registered==true.end}} 
    </ul>
      </li> 
      <!-- Ende hier beginnt der  Account -->                  
 
<!-- Anfang hier beginnt der  Hier sehen sie das Team --> 
<li>
        <div class="icon-link">
         <i class='bx bxs-user-badge'></i>
         <span class="link_name"></span>
          </a>
          <i class="bx bxs-chevron-down arrow" title="Menü öffnen"></i>
        </div>
        <ul class="sub-menu">
           <span class="link_name"></span>
                    <center> Guten Tag {{user_registered==true.start}}{{user_name}}{{user_registered==true.else}}lieber Besucher{{user_registered==true.end}}! <br> <br>Hier sehen sie das Team</center><br>
 
          <br>
          <li><a href="https://daishis-forum.xobor.de/u1_Daishi.html" title="zum Profil"><img class="side_nav_link-img" src="https://files.homepagemodules.de/b916726/avatar-90c6f570-1.jpg" alt="" width="25" height="25">&nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp; &nbsp;&nbsp;  <span class="nav__count" title="Christian!">Admin</span></a></li>
        </ul>
      </li>
<!-- Ende hier beginnt der  Hier sehen sie das Team -->
 
<!-- Anfang hier beginnt die  Administration -->
<li>
    {{user_admin==true.start}}
  <a href="">
         
        <i class="bx bx-cog"></i>
          <span class="link_name">Administration</span>
        </a>
       <ul class="sub-menu blank">
         
        <li><a class="link_name" href="./admin/">Administration</a></li>
</ul>
   {{user_admin==true.else}}
 {{user_admin==true.end}}
</li>
<br>
 <br>  
<!-- Ende hier beginnt die  Administration -->
 

  <!-- Anfang hier beginnt der Kalender -->
<li>
<div class="container-crew">
<div class="main-crew">
  <div class="sub-crew">
    <div class="top-crew">
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="year-crew">
      <div id="month2"></div>
      <div id="year2"></div>
    </div>
  </div>
  <div class="date-crew">
    <p id="date2"></p>
    <p id="day2"></p>
  </div>
</div>
</div>
</ul>
      </li> 
<!-- Ende hier beginnt der Kalender -->
       
 
          
                       
                       
 

                       
 
                       
                     
       
   <!-- Anfang hier beginnt der Name mit information und Bild -->                    
      <li>
        <div class="profile-details">
          <div class="profile-content">
            <img src="https://files.homepagemodules.de/b916726/a_16_0b880956.png" alt="profileImg">
          </div>
          <div class="name-job">
            <div class="profile_name"><font color =white>Daishi Bangladesch</font></div>
            <div class="job"><font color =white>Daishi’s-Forum</font></div>
          </div>
         <a href="./login.php?option=logout"><i class='bx bx-log-out'></i></a></li>
        </div>
      </li>
	   <!-- Ende hier beginnt der Name mit information und Bild -->
 
    </ul>
  </div>
`);
</script>
 
<script>
let arrow = document.querySelectorAll(".arrow");
for (var i = 0; i < arrow.length; i++) {
  arrow[i].addEventListener("click", (e)=>{
    let arrowParent = e.target.parentElement.parentElement;//Auswahl des übergeordneten Elements des Pfeils
    arrowParent.classList.toggle("showMenu");
  });
}
 
let sidebar = document.querySelector(".side_page");
let sidebarBtn = document.querySelector(".bx-menu");
console.log(sidebarBtn);
sidebarBtn.addEventListener("click", ()=>{
  sidebar.classList.toggle("close");
}); 
  
const month2 = new Date();
const options = {month: "long" };
const year1 = new Date();
const date1 = new Date();
const day2 = new Date();
const options2 = {weekday: "long" };
 
let year2 = year1.getFullYear();
let date2 = date1.getDate();
 
function myKalender() {
  document.getElementById("year2").innerText = year2;
  document.getElementById("month2").innerText = month2.toLocaleString( "de-Germania", options);
  document.getElementById("date2").innerText = date2;
  document.getElementById("day2").innerText = day2.toLocaleString( "de-Germania", options2);
}
myKalender();
 
//# sourceURL=pen.js
 
  $(function () {
  var coding = $("#coding");
  var text = coding.text();
  coding.text("");
 
  var i = 0;
  var html = "";
  var a = null;
  var interval = setInterval(function () {
    var char = "";
    if (text.split("")[i] != "*" &&
    text.split("")[i] != null &&
    text.split("")[i] != undefined)
    char = text.split("")[i] != "_" ? text.split("")[i] : "<br>";
 
    coding.html(html + char);
    html += char;
    i++;
 
    if (text.split("")[i] == "*")
    a++;
    if (a != null) $(".objro:eq(" + a + ")").css("display", "block");
 
    if (i == text.split("").length)
    {
      tellusSoething();
      clearInterval(interval);
    }
 
  }, 40);
 
 
  var whatDoesJames_sagt = `
 
Herzlich Willkommen auf Daishi’s-Forum!
  
Um das Seitenmenü im Vollem umfang benutzen zu können, müssen sie sich registrieren.
 
Hier Können nur registrierte User diese Funktion nutzen.
 
Für Gäste wird nicht vollständig das Seitenmenü angezeigt.
 
Dies ist eine neue Sicherheitsfunktion im Seitenmenü!
  
Danke!
  
Viel Spaß Euer James
 
`;
 
var lgh = whatDoesJames_sagt.split("").length;
  var bitInt = 0;
  function tellusSoething()
  {
    $("#James_sagt").show().text($("#James_sagt").text() + whatDoesJames_sagt.split("")[bitInt]);
    bitInt++;
    $(".mouth").css("display", bitInt % 8 && $(".mouth").css("display") == "none" ? "block" : "none");
    if (bitInt < lgh)
    setTimeout(function () {tellusSoething();}, 50);
    else
    $(".mouth").css("display", "block");
  }
});
 
//# sourceURL=pen.js
  
 
</script>