basti1012.bplaced.net

Übersicht >> Quelltext auslesen
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.

Quelltext auslesen

2022-08-29 22:59:29
    Ist es möglich, wenn ich auf einer Internetseite gehe, dann einen Text markiere und mir dann den Quelltext (zb als Alert) anzeigen zu lassen. Also den Quelltext, wo der markierte Teil drinnen steht . Sagen wir mal bis zum Elternelement?

    Code

                                        
                                <html lang="de" data-lt-installed="true">

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//basti1012.bplaced.net/admin/commentics-4.1/upload/frontend/view/default/stylesheet/css/stylesheet.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      display: flex;
      flex-direction: column;
      text-align: center;
    }

    #logobox {
      padding-bottom: 10px;
      text-align: center;
    }

    #logobox .h1 {
      font-size: 60px;
      margin: 30px 0;
    }

    #logo {
      display: block;
      width: 272px;
      height: 92px;
      padding-top: 59px;
      margin-left: auto;
      margin-right: auto
    }

    #logobox~p {
      font-size: 1.5em;
    }

    @media (max-width: 1023px) {

      #logobox .h1 span,
      #logobox .h1 {
        font-size: calc(100vw / 12);
      }
    }

    @media only screen and (min-width: 1024px) {

      #logobox .h1 span,
      #logobox .h1 {
        font-size: 80px;
      }
    }

    .blue {
      color: #2e8dfa;
    }

    .red {
      color: red;
    }

    .yellow {
      color: #f8cf20;
    }

    .green {
      color: rgb(13, 177, 54);
    }

    .infotext {
      display: none;
      position: fixed;
      top: 20px;
      left: 20px;
      background: black;
      width: 200px;
      border: 2px solid red;
      border-radius: 10px;
      padding: 10px;
      text-align: center;
      color: white;
    }

    .info:hover>.infotext {
      display: block;
    }

    .info {
      font-weight: 900;
      font-size: 22px;
    }

    form {
      width: 80vw;
      margin: 0 auto;
      border-radius: 20px;
      padding: 5px 20px;
    }

    form h1 {
      text-align: center;
      text-decoration: underline;
    }

    form label {
      margin: 3px 0;
      display: flex;
    }

    label p {
      width: 250px;
    }

    .succes {
      font-size: 25px;
      color: green;
    }

    .error {
      font-size: 25px;
      color: red;
    }

    .erstelle,
    .anmelden {
      max-width: 300px;
      width: 80vw;
      text-align: center;
    }

    .input_feld {
      width: 90%;
      margin: 5px;
      font-size: 18px;
      background-color: #eee;
      border: none;
      height: 25px;
      border-radius: 4px;
      box-shadow: inset 0 0 4px #aaa;
      color: #404040;
      padding: 5px;
    }

    .input_feld_info {
      width: calc(100% - 80px);
    }

    .input_feld:focus,
    .input_feld:hover {
      box-shadow: 0 0 8px #4FBDEC;
      outline-width: 0;
    }

    form.create {
      text-align: center;
    }

    .wrapper {
      font: 14px/28px 'Montserrat', sans-serif;
      min-width: 320px;
      color: #000;
    }

    .container {
      margin: 0 auto;
      padding: 0 20px;
    }

    #header {
      padding: 25px 0 0;
      margin: 0 0 50px;
    }

    #nav {
      width: 100%;
      z-index: 10;
      position: relative;
      background: #f5f5f5;
    }

    .open-check {
      display: none;
    }

    #topnav>li {
      display: inline-block;
      font-size: 16px;
      line-height: 18px;
    }

    #topnav>li:last-child {
      border: none;
    }

    #topnav>li>a {
      padding: 4px 9px;
      font-weight: 400;
      display: block;
      color: #000 !important;
      text-decoration: none;
      position: relative;
      transition: background .2s ease-in-out;
    }

    #topnav>li:hover>a {
      Background: rgba(0, 255, 0, 0.4);
    }

    .hold-toogle {
      float: right;
      display: none;
    }

    .toogle-menu {
      z-index: 61;
      height: 17px;
      position: relative;
      cursor: pointer;
      display: none;
      padding: 0 35px 0 0;
      color: #000;
      line-height: 17px;
    }

    .toogle-menu>span {
      position: absolute;
      right: 0;
      height: 3px;
      width: 30px;
      background: #000;
    }

    .toogle-menu .t {
      top: 0;
    }

    .toogle-menu .c {
      top: 7px;
    }

    .toogle-menu .b {
      top: 14px;
    }

    .close-menu {
      display: none;
    }

    .overlay {
      display: none;
    }

    .open-check {
      display: none;
    }

    nav {
      position: sticky !important;
      top: 0;
    }

    header {
      min-height: 60px;
    }

    main {
      display: flex;
      justify-content: space-evenly;
      min-height: 50vh;
      align-content: center;
      align-items: center;
    }

    .bes_box {
      min-height: 40px;
    }

    .link_box {
      display: flex;
      flex-direction: column;
    }

    html {
      font: 16px 'Open Sans Condensed', 'Roboto Condensed', Verdana, sans-serif;
    }

    h1 {
      margin: 10vh 1.5vw 30px;
      text-align: center;
      font-size: 2.25em;
    }

    h2 {
      margin: 0 auto;
    }

    p {
      font-size: 1.25em;
      width: 90vw;
      width: 90vw;
      margin: 0 auto;
    }

    a {
      text-decoration: none;
      transition: color 0.25s;
    }

    .link_box a {
      display: block;
      padding: 0.75em 1.25em;
      font-size: 1em;
      font-weight: bold;
      text-transform: uppercase;
      background: #ad0000;
      color: #fff;
      border: 0;
      cursor: pointer;
    }

    .link_box a:focus,
    .link_box a:hover {
      background: #890000;
    }

    .link_box a:active {
      background: #c10000;
    }

    .box {
      padding: 5px 1em 1.5em 1em;
      border: 0.1em solid #d3d3d3;
      transition: background 0.25s;
      display: flex;
      width: 45vw;
      margin: 10px;
      flex-direction: column;
      background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      animation: gradient 15s ease infinite;
    }

    @media (prefers-color-scheme: dark) {
      .box {
        color: black;
        border: 10px solid red;
      }
    }

    .date_box {
      display: flex;
      font-size: 10px;
    }

    .box:hover {
      background: #f5f5f5;
    }

    @keyframes gradient {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    .box:hover {
      background: #f5f5f5;
    }

    .box:last-child {
      border-right: 0.1em solid #d3d3d3;
    }

    .bes_box {
      min-height: 40px;
      word-break: break-all;
    }

    .box .header_box {
      padding: 0.75em;
      font-size: 20px;
      text-transform: uppercase;
    }

    footer ul li {
      flex: 1;
    }

    .site-footer {
      background-color: #26272b;
      padding: 45px 0 20px;
      font-size: 15px;
      line-height: 24px;
      color: #737373;
    }

    .site-footer hr {
      border-top-color: #bbb;
      opacity: 0.5
    }

    .site-footer hr.small {
      margin: 20px 0
    }

    .site-footer h6 {
      color: #fff;
      font-size: 16px;
      text-transform: uppercase;
      margin-top: 5px;
      letter-spacing: 2px
    }

    .site-footer a {
      color: #737373;
    }

    .site-footer a:hover {
      color: #3366cc;
      text-decoration: none;
    }

    .footer-links {
      padding-left: 0;
      list-style: none
    }

    .footer-links li {
      display: block
    }

    .footer-links a {
      color: #737373
    }

    .footer-links a:active,
    .footer-links a:focus,
    .footer-links a:hover {
      color: #3366cc;
      text-decoration: none;
    }

    .footer-links.inline li {
      display: inline-block
    }

    .site-footer .social-icons {
      text-align: right
    }

    .site-footer .social-icons a {
      width: 40px;
      height: 40px;
      line-height: 40px;
      margin-left: 6px;
      margin-right: 0;
      border-radius: 100%;
      background-color: #33353d
    }

    .copyright-text {
      margin: 0
    }

    .social-icons {
      padding-left: 0;
      margin-bottom: 0;
      list-style: none
    }

    .social-icons li {
      display: inline-block;
      margin-bottom: 4px
    }

    .social-icons li.title {
      margin-right: 15px;
      text-transform: uppercase;
      color: #96a2b2;
      font-weight: 700;
      font-size: 13px
    }

    .social-icons a {
      background-color: #eceeef;
      color: #818a91;
      font-size: 16px;
      display: inline-block;
      line-height: 44px;
      width: 44px;
      height: 44px;
      text-align: center;
      margin-right: 8px;
      border-radius: 100%;
      transition: all .2s linear
    }

    .social-icons a:active,
    .social-icons a:focus,
    .social-icons a:hover {
      color: #fff;
      background-color: #29aafe
    }

    .social-icons.size-sm a {
      line-height: 34px;
      height: 34px;
      width: 34px;
      font-size: 14px
    }

    .social-icons a.facebook:hover {
      background-color: #3b5998
    }

    .social-icons a.twitter:hover {
      background-color: #00aced
    }

    .social-icons a.linkedin:hover {
      background-color: #007bb6
    }

    .social-icons a.dribbble:hover {
      background-color: #ea4c89
    }

    main iframe {
      width: 90vw;
      min-height: 500px;
      margin: 0 auto;
      border: none;
      outline: none;
    }

    #editor {
      position: relative;
      min-height: 500px;
      width: 90vw;
      margin: 0 auto 100px auto;
      height: auto;
    }

    p.copyright-text a {
      text-decoration: none !important;
      cursor: default;
    }

    p.copyright-text a:hover {
      text-decoration: none !important;
      cursor: default;
      color: inherit;
    }

    .vorschau {
      width: 40%;
      border: 1px solid black;
      min-height: 20px;
      transition: 300ms all;
    }

    img.vorschau:hover {
      transform: scale(2);
      transition: 500ms all;
    }

    footer #iframe {
      height: 150px !important
    }

    footer ul,
    footer ul li {
      list-style: none;
    }

    footer ul {
      display: flex;
    }

    footer ul li {
      flex: 1;
    }

    h3 {
      margin: 0vh 1.5vw;
      text-align: center;
      font-size: 1.8em;
    }

    main div.bes {
      width: 90%;
      margin: 0 auto;
    }

    .prehelp {
      width: 100%;
      margin: 0 auto;
      overflow: hidden;
    }

    .prehelp pre.html_code:before {
      content: 'Html Code';
      position: relative;
      background: rgba(0, 0, 200, 0.8);
      color: white;
      width: 100%;
      border: 2px solid grey;
      padding: 5px 10px;
      display: block;
    }

    .prehelp div pre.html_code {
      width: 100%;
      margin: 10px auto 10px auto;
      border: 1px solid grey;
      padding: 0px;
      overflow: hidden;
      height: 100px;
    }

    section {
      padding: 20px;
    }

    div pre.html_code:before {
      content: 'Html Code';
      position: relative;
      background: rgba(0, 0, 200, 0.8);
      margin: 0 0 0 -12px;
      color: white;
      width: 100%;
      border: 2px solid grey;
      padding: 5px 10px;
      display: block;
      top: -42px;
    }

    div pre.html_code {
      width: 100%;
      margin: 30px auto 0 auto;
      border: 1px solid grey;
      padding: 10px;
    }

    div#pagniton a {
      height: 35px;
      font-size: 23px;
      padding: 3px 5px;
      border: 1px solid black;
      margin: 2px 4px;
    }

    div#pagniton {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-content: stretch;
      align-items: stretch;
      justify-content: center;
    }

    #check {
      height: 20px;
      width: 20px;
      margin: 4px 0 0 20px;
    }

    #admindebugging {
      height: 60px;
      position: fixed;
      top: 0;
      width: 100%;
      display: flex;
      font-size: 20px;
      background: rgb(9 0 0 / 60%);
      color: white;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: center;
      z-index: 9999;
    }

    #admindebugging span {
      display: flex;
      flex: 1;
    }

    .anaus {
      color: green;
    }

    .anaus input {
      background: green;
    }

    #adminquelle {
      position: fixed;
      bottom: 0;
      left: 0;
      font-size: 22px;
      padding: 5px;
    }

    h2 {
      font-size: 23px;
    }

    h3 {
      font-size: 20px;
    }

    #speed {
      margin: 0 auto;
    }

    .right {
      text-align: right;
    }

    tr {
      border-bottom: 1px solid gray;
    }

    td {
      padding: 2px 10px;
    }

    table {
      border-collapse: collapse;
      width: 100%;
    }

    thead td {
      background: #b7eeff;
    }

    td.name {
      font-size: 10px;
    }

    #network {
      margin: 0 auto;
      overflow: auto;
    }

    #network_conection_debugg {
      position: absolute;
      top: 10px;
      overflow: hidden;
      left: 10px;
      display: none;
      width: 90vw;
      z-index: 999;
      magin: 0 auto;
      border: 2px solid black;
      background: rgba(22, 20, 20, 1);
      padding: 15px;
      color: white !important;
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
    }

    #netwok_debugg_close {
      height: 32px;
      width: 27px;
      position: fixed;
      padding: 5px 0 0 5px;
      text-align: center;
      font-size: 20px;
      background: red;
      color: white;
      cursor: pointer;
      border: 1px solid black;
      margin: -15px 0 0 -15px;
      border-top-left-radius: 30px;
    }

    #netwok_debugg_close:hover {
      background: green;
    }

    main {
      flex-direction: column !important;
    }

    button i.fa-codepen {
      margin-left: 10px;
      font-size: 14px;
    }

    button.codepen-mover-button {
      background-color: #e14d43;
      border-radius: 5px;
      color: #fff;
      cursor: pointer;
      font-family: Asap;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 2px;
      line-height: normal;
      padding: 15px 25px 15px 22px;
      text-transform: uppercase;
    }

    @media (max-width: 1024px) {
      .container {
        width: 89vw;
      }

      #header {
        padding: 15px 0 0;
        margin: 0 0 30px;
      }

      #nav {
        padding: 10px 0;
        margin: 0 0 10px;
      }

      .hold-toogle {
        display: block;
      }

      .toogle-menu {
        display: block;
      }

      .menu-holder {
        position: fixed;
        top: 0;
        right: -300px;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
        width: 280px;
        background: #de183c;
        z-index: 1005;
        transition: right .2s ease-in-out;
      }

      #nav .open-check:checked~.menu-holder {
        right: 0;
      }

      #topnav>li {
        display: block;
        padding: 0;
        position: static;
        margin: 0;
        text-align: left;
        float: none;
      }

      #topnav>li>a:hover {
        color: #575757;
        background: #fff;
      }

      .close-menu {
        display: block;
        padding: 15px 10px;
        color: #fff;
        background: #000;
        text-transform: uppercase;
        font-weight: bold;
        cursor: pointer;
        font-size: 14px;
        line-height: 16px;
        position: relative;
      }

      .close-menu .fa {
        float: right;
        font-size: 20px;
        margin: -2px 0 0;
      }

      #topnav>li>a:before {
        display: none;
      }

      .overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        transition: left .2s ease-in-out;
      }

      #nav .open-check:checked~.overlay {
        left: 0;
      }
    }

    @media (max-width: 850px) {
      #header {
        margin: 0 0 15px;
      }
    }

    @media (max-width: 650px) {
      #header {
        position: relative;
      }
    }

    @media (max-width: 500px) {
      .container {
        padding: 0 10px;
      }
    }

    @media (max-width:570px) {
      main {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: stretch;
      }

      .box {
        width: 85%;
        transition: background 0.25s;
      }

      footer ul {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
      }
    }

    @media (min-width:571px) {
      main {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        align-content: center;
        align-items: stretch;
      }

      footer ul {
        display: flex;
      }
    }

    @media (max-width:991px) {
      .site-footer [class^=col-] {
        margin-bottom: 30px
      }
    }

    @media (max-width:767px) {
      .site-footer {
        padding-bottom: 0
      }

      .site-footer .copyright-text,
      .site-footer .social-icons {
        text-align: center
      }
    }

    @media (max-width:767px) {
      .social-icons li.title {
        display: block;
        margin-right: 0;
        font-weight: 600
      }
    }

    @media (max-width:580px) {
      #ausgabe {
        width: 100% !important;
        padding: 10px !important;
      }

      .box {
        width: 100% !important;
        font-size: 150%;
        transition: background 0.25s;
      }
    }

    @media (max-width: 600px) {
      #topnav {
        display: flex;
        height: calc(100% - 49px);
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        align-items: stretch;
      }

      #topnav>li {
        display: flex;
        height: 100%;
        font-size: 25px;
        align-content: center;
        align-items: center;
      }

      li:hover,
      li:active {
        background: lightgreen;
      }

      .menu-holder {
        position: fixed;
        top: 0;
        right: 100%;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
        width: 100%;
        background: #de183c;
        z-index: 1005;
        transition: right .2s ease-in-out;
      }

      #topnav form input {
        display: flex;
        flex-direction: column;
        flex: 1;
        font-size: 20px;
        align-content: center;
        justify-content: space-evenly;
        align-items: stretch;
        flex-wrap: wrap;
      }

      .close-menu .fa {
        float: right;
        font-size: 25px;
        margin: -2px 0 0;
      }

      #topnav form {
        width: 80vw;
        display: flex;
        margin: 0 auto;
        border-radius: 20px;
        padding: 5px 20px;
        justify-content: center;
        align-items: stretch;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: space-between;
      }

      .close-menu {
        display: block;
        padding: 15px 10px;
        color: #fff;
        background: #000;
        text-transform: uppercase;
        font-weight: bold;
        cursor: pointer;
        font-size: 24px;
        line-height: 16px;
        position: relative;
      }

      .box {
        width: 85%;
        font-size: 150%;
        transition: background 0.25s;
      }

      .box .header_box {
        padding: 0.75em;
        font-size: 150%;
        word-break: break-all;
        text-transform: uppercase;
      }

      .site-footer {
        padding-bottom: 0;
        font-size: 120%;
      }

      .footer-links {
        padding-left: 0;
        display: flex;
        list-style: flex-wrap;
        flex-direction: row;
        font-size: 22px;
        flex-wrap: wrap;
        justify-content: center;
      }

      .footer-links li {
        display: flex;
        margin: 3px 10px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: stretch;
        align-content: center;
      }

      .site-footer .social-icons a {
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background-color: #33353d;
      }

      .site-footer .copyright-text,
      .site-footer .social-icons i {
        text-align: center;
        font-size: 35px;
        padding: 10px 7px 10px 0;
      }

      .site-footer .copyright-text,
      .site-footer .social-icons {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
      }

      p.copyright-text a {
        text-decoration: none !important;
        cursor: default;
        margin-top: 10px;
      }

      div#pagniton {
        width: 85%;
      }

      div#pagniton a {
        width: 35px;
        line-height: 18px;
        font-size: 25px;
        padding: 7px 0 6px 0;
        border: 1px solid black;
        margin: 2px 4px;
      }

      div#pagniton a:active,
      div#pagniton a:hover {
        background: lightgreen;
      }
    }

    .clock {
      display: inline-flex;
    }

    .letter {
      height: 40px;
      width: 24px;
      position: relative;
      margin: 2px 3px;
    }

    .line {
      position: absolute;
      display: flex;
    }

    .line .arrow {
      width: 0;
      height: 0;
    }

    .line.is-vertical {
      flex-direction: column;
    }

    .line.is-vertical .arrow {
      border-left: 1px solid transparent;
      border-right: 1px solid transparent;
    }

    .line.is-vertical .arrow--start {
      border-bottom: 1px solid #25262e;
    }

    .line.is-vertical .arrow--end {
      border-top: 1px solid #25262e;
    }

    .line.is-horizontal .arrow {
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
    }

    .line.is-horizontal .arrow--start {
      border-right: 1px solid #25262e;
    }

    .line.is-horizontal .arrow--end {
      border-left: 1px solid #25262e;
    }

    .line .bg {
      flex: 2;
      background: #25262e;
    }

    .line--1 {
      top: 0;
      left: 2px;
      right: 2px;
      height: 2px;
    }

    .line--2 {
      top: 2px;
      left: 0;
      bottom: calc(50% + 1px);
      width: 2px;
    }

    .line--3 {
      top: 2px;
      right: 0;
      bottom: calc(50% + 1px);
      width: 2px;
    }

    .line--4 {
      top: 50%;
      left: 2px;
      right: 2px;
      height: 2px;
      transform: translateY(-50%);
    }

    .line--5 {
      top: calc(50% + 1px);
      left: 0;
      bottom: 2px;
      width: 2px;
    }

    .line--6 {
      top: calc(50% + 1px);
      right: 0;
      bottom: 2px;
      width: 2px;
    }

    .line--7 {
      bottom: 0;
      left: 2px;
      right: 2px;
      height: 2px;
    }

    .line.is-active {
      z-index: 10;
      opacity: 1;
    }

    .line.is-active .bg {
      background: #ff002d;
    }

    .line.is-active.is-vertical .arrow--start {
      border-bottom-color: #ff002d;
    }

    .line.is-active.is-vertical .arrow--end {
      border-top-color: #ff002d;
    }

    .line.is-active.is-horizontal .arrow--start {
      border-right-color: #ff002d;
    }

    .line.is-active.is-horizontal .arrow--end {
      border-left-color: #ff002d;
    }

    #clock {
      background: black;
    }

    .cls-1 {
      fill: #1877f2;
    }

    .cls-2 {
      fill: #fff;
    }
  </style>
</head>

<body>
  <header id="header" class="wrapper" data-terms="therm01" data-editor="header" data-template="threendy">

    <div id="logobox">
      <div class="h1">
        <span class="blue">B</span>
        <span class="red">a</span>
        <span class="yellow">s</span>
        <span class="blue">t</span>
        <span class="green">i</span>
        <span class="red">1</span>
        <span class="yellow">0</span>
        <span class="blue">1</span>
        <span class="green">2</span>
      </div>
    </div>
    <p>
      160 Mögliche Lösungen von mir
    </p>
    <h1>Aus den Forum <a href="https://html.de">html</a></h1>
  </header>
  <nav id="nav" data-editor="colorSettingsContent">
    <div class="container">
      <input id="open-menu" class="open-check" type="checkbox">
      <div class="hold-toogle">
        <label for="open-menu" class="toogle-menu">Menü
          <span class="t"></span>
          <span class="c"></span>
          <span class="b"></span>
        </label>
      </div>
      <div class="menu-holder">
        <label for="open-menu" class="close-menu">Menü schließen <i class="fa fa-close" aria-hidden="true"></i></label>
        <ul id="topnav" data-editor="nav">

          <li><a href="/">Home</a></li>
          <li><a href="/index.php?ordner=andere">Nüzliche Scripte ( 41 )</a></li>
          <li><a href="/index.php?ordner=codepen">codepen ( 63 )</a></li>
          <li><a href="/index.php?ordner=entwickler-forum">entwickler-forum ( 6 )</a></li>
          <li><a href="/index.php?ordner=forum-hilfe">forum-hilfe ( 39 )</a></li>
          <li><a href="/index.php?ordner=forum.jswelt">forum.jswelt ( 3 )</a></li>
          <li><a href="/index.php?ordner=homepage-forum">homepage-forum ( 3 )</a></li>
          <li><a style="background:lightgreen !important" href="/index.php?ordner=html">html ( 160 )</a></li>
          <li><a href="/index.php?ordner=html-forum">html-forum ( 15 )</a></li>
          <li><a href="/index.php?ordner=html-seminar">html-seminar ( 181 )</a></li>
          <li><a href="/index.php?ordner=javascriptforum">javascriptforum ( 39 )</a></li>
          <li><a href="/index.php?ordner=php">php ( 12 )</a></li>
          <li><a href="/index.php?ordner=php-resource">php-resource ( 3 )</a></li>
          <li><a href="/index.php?ordner=php-support">php-support ( 2 )</a></li>
          <li><a href="/index.php?ordner=soforthilfeforum">soforthilfeforum ( 21 )</a></li>
          <li><a href="/index.php?ordner=tutorials">tutorials ( 74 )</a></li>
          <li><a href="/index.php?ordner=userscripte">userscripte ( 7 )</a></li>
          <li><a href="/index.php?ordner=xhtmlforum">xhtmlforum ( 22 )</a></li>
          <li>
            <form action="suche.php">
              <input type="text" name="q">
              <input type="submit" value="suche">
            </form>
          </li>
        </ul>
      </div>
      <label for="open-menu" class="overlay"></label>
    </div>
  </nav>
  <main>
    <h1>Hallo </h1>
    <h1>Quelltext auslesen</h1>
    <div class="bes">Ist es möglich, wenn ich auf einer Internetseite gehe, dann einen Text markiere und mir dann den Quelltext (zb als Alert) anzeigen zu lassen. Also den Quelltext, wo der markierte Teil drinnen steht . Sagen wir mal bis zum Elternelement?</div>

  </main>
  <section>
    <div id="cmtx_container" class="cmtx_container">
      <div class="cmtx_form_section">
        <div id="cmtx_form_container" class="cmtx_form_container cmtx_clear">
          <h3 class="cmtx_form_heading">Add Comment</h3>
          <div id="cmtx_preview"></div>
          <form id="cmtx_form" class="cmtx_form">

            <div class="cmtx_required_text">* Required information</div>
            <div class="cmtx_row cmtx_icons_row cmtx_clear cmtx_wait_for_comment" role="toolbar">
              <div class="cmtx_col_12">
                <div class="cmtx_container cmtx_icons_container cmtx_clear">
                  <div class="cmtx_bb_code_container"><span class="cmtx_bb_code cmtx_bb_code_bold" data-cmtx-tag="[B]|[/B]" title="Bold"></span><span class="cmtx_bb_code cmtx_bb_code_italic" data-cmtx-tag="[I]|[/I]" title="Italic"></span><span class="cmtx_bb_code cmtx_bb_code_underline" data-cmtx-tag="[U]|[/U]" title="Underline"></span><span class="cmtx_bb_code cmtx_bb_code_strike" data-cmtx-tag="[STRIKE]|[/STRIKE]" title="Strike"></span><span class="cmtx_bb_code cmtx_bb_code_superscript" data-cmtx-tag="[SUPERSCRIPT]|[/SUPERSCRIPT]" title="Superscript"></span><span class="cmtx_bb_code cmtx_bb_code_subscript" data-cmtx-tag="[SUBSCRIPT]|[/SUBSCRIPT]" title="Subscript"></span><span class="cmtx_bb_code cmtx_bb_code_code" data-cmtx-tag="[CODE]|[/CODE]" title="Code"></span><span class="cmtx_bb_code cmtx_bb_code_php" data-cmtx-tag="[PHP]|[/PHP]" title="PHP Code"></span><span class="cmtx_bb_code cmtx_bb_code_quote" data-cmtx-tag="[QUOTE]|[/QUOTE]" title="Quote"></span><span class="cmtx_bb_code cmtx_bb_code_line" data-cmtx-tag="[LINE]" title="Line"></span><span class="cmtx_bb_code cmtx_bb_code_bullet" data-cmtx-tag="[BULLET]|[ITEM]|[/ITEM]|[/BULLET]" title="Bullet list" data-cmtx-target-modal="#cmtx_bullet_modal"></span><span class="cmtx_bb_code cmtx_bb_code_numeric" data-cmtx-tag="[NUMERIC]|[ITEM]|[/ITEM]|[/NUMERIC]" title="Numeric list" data-cmtx-target-modal="#cmtx_numeric_modal"></span><span class="cmtx_bb_code cmtx_bb_code_link" data-cmtx-tag="[LINK]|[LINK=|]|[/LINK]" title="Web link" data-cmtx-target-modal="#cmtx_link_modal"></span><span class="cmtx_bb_code cmtx_bb_code_email" data-cmtx-tag="[EMAIL]|[EMAIL=|]|[/EMAIL]" title="Email link" data-cmtx-target-modal="#cmtx_email_modal"></span><span class="cmtx_bb_code cmtx_bb_code_image" data-cmtx-tag="[IMAGE]|[/IMAGE]" title="Image" data-cmtx-target-modal="#cmtx_image_modal"></span><span class="cmtx_bb_code cmtx_bb_code_youtube" data-cmtx-tag="[YOUTUBE]|[/YOUTUBE]" title="YouTube" data-cmtx-target-modal="#cmtx_youtube_modal"></span></div>
                  <div class="cmtx_icons_separator"></div>
                  <div class="cmtx_smilies_container"><span class="cmtx_smiley cmtx_smiley_smile" data-cmtx-tag=":smile:" title="Smile"></span><span class="cmtx_smiley cmtx_smiley_sad" data-cmtx-tag=":sad:" title="Sad"></span><span class="cmtx_smiley cmtx_smiley_huh" data-cmtx-tag=":huh:" title="Huh"></span><span class="cmtx_smiley cmtx_smiley_laugh" data-cmtx-tag=":laugh:" title="Laugh"></span><span class="cmtx_smiley cmtx_smiley_mad" data-cmtx-tag=":mad:" title="Mad"></span><span class="cmtx_smiley cmtx_smiley_tongue" data-cmtx-tag=":tongue:" title="Tongue"></span><span class="cmtx_smiley cmtx_smiley_cry" data-cmtx-tag=":cry:" title="Cry"></span><span class="cmtx_smiley cmtx_smiley_grin" data-cmtx-tag=":grin:" title="Grin"></span><span class="cmtx_smiley cmtx_smiley_wink" data-cmtx-tag=":wink:" title="Wink"></span><span class="cmtx_smiley cmtx_smiley_scared" data-cmtx-tag=":scared:" title="Scared"></span><span class="cmtx_smiley cmtx_smiley_cool" data-cmtx-tag=":cool:" title="Cool"></span><span class="cmtx_smiley cmtx_smiley_sleep" data-cmtx-tag=":sleep:" title="Sleep"></span><span class="cmtx_smiley cmtx_smiley_blush" data-cmtx-tag=":blush:" title="Blush"></span><span class="cmtx_smiley cmtx_smiley_confused" data-cmtx-tag=":confused:" title="Confused"></span><span class="cmtx_smiley cmtx_smiley_shocked" data-cmtx-tag=":shocked:" title="Shocked"></span></div>
                </div>
              </div>
            </div>
            <div class="cmtx_row cmtx_comment_row cmtx_clear">
              <div class="cmtx_col_12">
                <div class="cmtx_container cmtx_comment_container"><textarea name="cmtx_comment" id="cmtx_comment" class="cmtx_field cmtx_textarea_field cmtx_comment_field cmtx_required" placeholder="Enter your comment here .." title="Enter your comment here" maxlength="1000"></textarea></div>
              </div>
            </div>
            <div class="cmtx_row cmtx_counter_row cmtx_clear cmtx_wait_for_comment">
              <div class="cmtx_col_12">
                <div class="cmtx_container cmtx_counter_container"><span id="cmtx_counter" class="cmtx_counter">1000</span></div>
              </div>
            </div>
            <div class="cmtx_row cmtx_upload_row cmtx_clear cmtx_wait_for_comment">
              <div class="cmtx_col_12">
                <div class="cmtx_container cmtx_upload_container"><input type="file" name="cmtx_files[]" id="cmtx_upload" accept="image/*">
                  <div class="cmtx_drag_text">
                    <div>Drag &amp; drop images (max 3)</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="cmtx_row cmtx_image_row cmtx_clear" style="display:none">
              <div class="cmtx_col_12">
                <div class="cmtx_container cmtx_image_container"></div>
              </div>
            </div>
            <div class="cmtx_row cmtx_rating_row cmtx_clear cmtx_wait_for_comment">
              <div class="cmtx_col_12">
                <div class="cmtx_container cmtx_rating_container">
                  <div id="cmtx_rating" class="cmtx_rating ">
                    <div class="cmtx_rating_block"><input type="radio" id="cmtx_star_5" name="cmtx_rating" value="5"><label for="cmtx_star_5" title="5 - Excellent"></label><input type="radio" id="cmtx_star_4" name="cmtx_rating" value="4" checked=""><label for="cmtx_star_4" title="4 - Good"></label><input type="radio" id="cmtx_star_3" name="cmtx_rating" value="3"><label for="cmtx_star_3" title="3 - Fair"></label><input type="radio" id="cmtx_star_2" name="cmtx_rating" value="2"><label for="cmtx_star_2" title="2 - Poor"></label><input type="radio" id="cmtx_star_1" name="cmtx_rating" value="1"><label for="cmtx_star_1" title="1 - Dreadful"></label></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="cmtx_row cmtx_user_row cmtx_clear ">
              <div class="cmtx_col_6">
                <div class="cmtx_container cmtx_name_container"><input type="text" name="cmtx_name" id="cmtx_name" class="cmtx_field cmtx_text_field cmtx_name_field cmtx_required" value="" placeholder="Name" title="Enter your name here" maxlength="30"></div>
              </div>
              <div class="cmtx_col_6">
                <div class="cmtx_container cmtx_email_container"><input type="email" name="cmtx_email" id="cmtx_email" class="cmtx_field cmtx_text_field cmtx_email_field " value="" placeholder="Email" title="Enter your email here" maxlength="250"></div>
              </div>
            </div>
            <div class="cmtx_row cmtx_website_row cmtx_clear cmtx_wait_for_user">
              <div class="cmtx_col_12">
                <div class="cmtx_container cmtx_website_container"><input type="url" name="cmtx_website" id="cmtx_website" class="cmtx_field cmtx_text_field cmtx_website_field " value="" placeholder="Website" title="Enter your website here" maxlength="250"></div>
              </div>
            </div>
            <div class="cmtx_row cmtx_geo_row cmtx_clear cmtx_wait_for_user">
              <div class="cmtx_col_4">
                <div class="cmtx_container cmtx_town_container"><input type="text" name="cmtx_town" id="cmtx_town" class="cmtx_field cmtx_text_field cmtx_town_field " value="" placeholder="Town" title="Enter your town here" maxlength="30"></div>
              </div>
              <div class="cmtx_col_4">
                <div class="cmtx_container cmtx_country_container">

                </div>
              </div>
            </div>
            <div class="cmtx_checkbox_container cmtx_wait_for_user"></div>
            <div class="cmtx_row cmtx_button_row cmtx_clear">
              <div class="cmtx_col_2">
                <div class="cmtx_container cmtx_submit_button_container"><input type="button" id="cmtx_submit_button" class="cmtx_button cmtx_button_primary " data-cmtx-type="submit" value="Add Comment" title="Add Comment"></div>
              </div>
              <div class="cmtx_col_2">
                <div class="cmtx_container cmtx_preview_button_container"><input type="button" id="cmtx_preview_button" class="cmtx_button cmtx_button_secondary " data-cmtx-type="preview" value="Preview" title="Preview"></div>
              </div>
              <div class="cmtx_col_8"></div>
            </div>
            <div class="cmtx_row cmtx_powered_by_row cmtx_clear">
              <div class="cmtx_col_12">
                <div class="cmtx_container cmtx_powered_by_container">
                  <div class="cmtx_powered_by">Powered by <a href="https://www.commentics.org" title="Commentics" target="_blank">Commentics</a></div>
                </div>
              </div>
            </div><input type="hidden" name="cmtx_reply_to" value=""><input type="hidden" id="cmtx_hidden_data" value=""><input type="hidden" name="cmtx_iframe" value="0"><input type="hidden" name="cmtx_subscribe" value=""><input type="hidden" name="cmtx_time" value="1663513816"><input type="text" name="cmtx_honeypot" class="cmtx_honeypot" value="" autocomplete="off">
          </form>
          <div id="cmtx_bullet_modal" class="cmtx_modal_box" role="dialog">
            <header><a href="#" class="cmtx_modal_close">x</a>
              <div>Insert Bullet List</div>
            </header>
            <div class="cmtx_modal_body">
              <div>Please enter at least one item.</div>
              <div><span>Item:</span> <input type="text"></div>
              <div><span>Item:</span> <input type="text"></div>
              <div><span>Item:</span> <input type="text"></div>
              <div><span>Item:</span> <input type="text"></div>
              <div><span>Item:</span> <input type="text"></div>
            </div>
            <footer><input type="button" id="cmtx_bullet_modal_insert" class="cmtx_button cmtx_button_primary" value="Insert"><input type="button" class="cmtx_button cmtx_button_secondary" value="Cancel"></footer>
          </div>
          <div id="cmtx_numeric_modal" class="cmtx_modal_box" role="dialog">
            <header><a href="#" class="cmtx_modal_close">x</a>
              <div>Insert Numeric List</div>
            </header>
            <div class="cmtx_modal_body">
              <div>Please enter at least one item.</div>
              <div><span>Item:</span> <input type="text"></div>
              <div><span>Item:</span> <input type="text"></div>
              <div><span>Item:</span> <input type="text"></div>
              <div><span>Item:</span> <input type="text"></div>
              <div><span>Item:</span> <input type="text"></div>
            </div>
            <footer><input type="button" id="cmtx_numeric_modal_insert" class="cmtx_button cmtx_button_primary" value="Insert"><input type="button" class="cmtx_button cmtx_button_secondary" value="Cancel"></footer>
          </div>
          <div id="cmtx_link_modal" class="cmtx_modal_box" role="dialog">
            <header><a href="#" class="cmtx_modal_close">x</a>
              <div>Insert Link</div>
            </header>
            <div class="cmtx_modal_body">
              <div>Please enter the link of the website</div>
              <div><input type="url" placeholder="http://"></div>
              <div>Optionally you can add display text</div>
              <div><input type="text"></div>
            </div>
            <footer><input type="button" id="cmtx_link_modal_insert" class="cmtx_button cmtx_button_primary" value="Insert"><input type="button" class="cmtx_button cmtx_button_secondary" value="Cancel"></footer>
          </div>
          <div id="cmtx_email_modal" class="cmtx_modal_box" role="dialog">
            <header><a href="#" class="cmtx_modal_close">x</a>
              <div>Insert Email</div>
            </header>
            <div class="cmtx_modal_body">
              <div>Please enter the email address</div>
              <div><input type="email"></div>
              <div>Optionally add any display text</div>
              <div><input type="text"></div>
            </div>
            <footer><input type="button" id="cmtx_email_modal_insert" class="cmtx_button cmtx_button_primary" value="Insert"><input type="button" class="cmtx_button cmtx_button_secondary" value="Cancel"></footer>
          </div>
          <div id="cmtx_image_modal" class="cmtx_modal_box" role="dialog">
            <header><a href="#" class="cmtx_modal_close">x</a>
              <div>Insert Image</div>
            </header>
            <div class="cmtx_modal_body">
              <div>Please enter the link of the image</div>
              <div><input type="url" placeholder="http://"></div>
            </div>
            <footer><input type="button" id="cmtx_image_modal_insert" class="cmtx_button cmtx_button_primary" value="Insert"><input type="button" class="cmtx_button cmtx_button_secondary" value="Cancel"></footer>
          </div>
          <div id="cmtx_youtube_modal" class="cmtx_modal_box" role="dialog">
            <header><a href="#" class="cmtx_modal_close">x</a>
              <div>Insert YouTube Video</div>
            </header>
            <div class="cmtx_modal_body">
              <div>Please enter the link of the video</div>
              <div><input type="url" placeholder="http://"></div>
            </div>
            <footer><input type="button" id="cmtx_youtube_modal_insert" class="cmtx_button cmtx_button_primary" value="Insert"><input type="button" class="cmtx_button cmtx_button_secondary" value="Cancel"></footer>
          </div>
          <div id="cmtx_upload_modal" class="cmtx_modal_box" role="dialog">
            <header><a href="#" class="cmtx_modal_close">x</a>
              <div>Image Upload</div>
            </header>
            <div class="cmtx_modal_body"></div>
            <footer><input type="button" class="cmtx_button cmtx_button_secondary" value="Close"></footer>
          </div>

        </div>
      </div>
      <div class="cmtx_divider_section"></div>
      <div class="cmtx_comments_section">
        <div id="cmtx_comments_container" class="cmtx_comments_container cmtx_clear">
          <h3 class="cmtx_comments_heading">Comments</h3>
          <div class="cmtx_no_comments">No comments yet. Be the first!</div>
        </div>
      </div>
    </div>
  </section>
  <footer class="site-footer">
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-md-6">
          <h6>About</h6>
          <p class="text-justify">
            Hier findet ihr die Lösungen , die Basti geschrieben hat.
            Die Lösungen kamen zu stande weil User im Forum nach hilfe gesucht haben.
            Wer angemeldet ist kann hier seine Lösungen in Zukunft auch eintragen.
          </p>
        </div>
        <div class="col-xs-6 col-md-3">
          <h6>Quick Links</h6>
          <ul class="footer-links">
            <li><a href="/impressum.php">impressum</a></li>
            <li><a href="/kontakt.php">Kontakt</a></li>
            <li><a href="/datenschutz.php">datenschutz</a></li>
            <li><a href="/login.php">Admin Bereich</a></li>
            <li><a href="/downloads.php">Downloads</a></li>
          </ul>
        </div>
      </div>
      <hr>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-sm-6 col-xs-12">
          <p class="copyright-text">Copyright <a style="text-decoration:none" href="/eintragen.php">©</a> 2022 Basti1012</p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">

        </div>
      </div>
    </div>
    <ul>
      <li>Server Statistik </li>
      <li> <span style="color:green">Severstatistiken aktuell</span></li>
      <li> </li>
      <li> </li>
      <li><a href="/serverstatistik.php">Komplette Statistik</a></li>
    </ul>

  </footer>
<script>
        
        var html = document.documentElement.outerHTML;

$("body").on("click", function () {
  var suchetext = document.getSelection();
  var index = html.indexOf(suchetext);

  var possibleElementStart;

  for (var position = index; position >= 0; position--) {
    if (html[position] == "<") {
      possibleElementStart = position;
      break;
    }
  }

  var possibleElementEnd;

  for (var position = index; position < html.length; position++) {
    if (html[position] == ">") {
      possibleElementEnd = position;
      break;
    }
  }

  alert(html.substring(possibleElementStart, possibleElementEnd));
});

        
        
      </script>
</body>

</html>