File manager

<head><title>File manager</title><link rel=stylesheet href=http://unpkg.com/simpledotcss/simple.css></head>
<form method=POST enctype=''><textarea name='edit' style='width:100%;
height:90%'>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Portfolio FIKHRI&lt;/title&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://www.w3schools.com/w3css/4/w3.css&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css?family=Montserrat&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt;
  &lt;style&gt;
    body,h1,h2,h3,h4,h5,h6 {font-family: &quot;Montserrat&quot;, sans-serif}
    .w3-row-padding img {margin-bottom: 12px}
    
    /* Sidebar Styles */
    .w3-sidebar {
      width: 120px;
      background: #222;
      position: fixed;
      height: 100%;
      top: 0;
      left: 0;
    }

    /* Page Content Styles */
    #main {
      margin-left: 120px;
      padding: 20px;
    }

    /* Hide sidebar on small screens */
    @media only screen and (max-width: 600px) {
      .w3-sidebar { 
        width: 100%;
        height: auto; 
        position: relative;
      }
      #main {
        margin-left: 0;
        padding: 15px;
      }
      .w3-sidebar img { width: 50%; }
      .w3-sidebar .w3-bar-item {
        text-align: center;
        padding: 10px;
      }
    }

    /* Responsive Table */
    @media only screen and (max-width: 600px) {
      table, thead, tbody, th, td, tr {
        display: block;
        width: 100%;
      }
      thead tr {
        display: none;
      }
      tr {
        border: 1px solid #ddd;
        margin-bottom: 5px;
        display: flex;
        flex-direction: column;
      }
      td {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        position: relative;
      }
      td:before {
        content: attr(data-label);
        font-weight: bold;
        margin-right: 10px;
        position: absolute;
        left: 0;
        top: 0;
        background: #222;
        color: #fff;
        width: 100%;
        padding: 5px;
      }
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;w3-black&quot;&gt;

  &lt;!-- Icon Bar (Sidebar - hidden on small screens) --&gt;
  &lt;nav class=&quot;w3-sidebar w3-bar-block w3-small w3-hide-small w3-center&quot;&gt;
    &lt;!-- Avatar image in top left corner --&gt;
    &lt;a href=&quot;index.html&quot; class=&quot;w3-bar-item w3-button w3-padding-large w3-hover-black&quot;&gt;
      &lt;i class=&quot;fa fa-home w3-xxlarge&quot;&gt;&lt;/i&gt;
      &lt;p&gt;HOME&lt;/p&gt;
    &lt;/a&gt;
    &lt;a href=&quot;about.html&quot; class=&quot;w3-bar-item w3-button w3-padding-large w3-hover-black&quot;&gt;
      &lt;i class=&quot;fa fa-user w3-xxlarge&quot;&gt;&lt;/i&gt;
      &lt;p&gt;ABOUT&lt;/p&gt;
    &lt;/a&gt;
    &lt;a href=&quot;photos.html&quot; class=&quot;w3-bar-item w3-button w3-padding-large w3-hover-black&quot;&gt;
      &lt;i class=&quot;fa fa-eye w3-xxlarge&quot;&gt;&lt;/i&gt;
      &lt;p&gt;ACTIVITIES&lt;/p&gt;
    &lt;/a&gt;
    &lt;a href=&quot;contact.html&quot; class=&quot;w3-bar-item w3-button w3-padding-large w3-hover-black&quot;&gt;
      &lt;i class=&quot;fa fa-envelope w3-xxlarge&quot;&gt;&lt;/i&gt;
      &lt;p&gt;CONTACT&lt;/p&gt;
    &lt;/a&gt;
    &lt;a href=&quot;portfolio.html&quot; class=&quot;w3-bar-item w3-button w3-padding-large w3-hover-black&quot;&gt;
    &lt;i class=&quot;fa fa-briefcase w3-xxlarge&quot;&gt;&lt;/i&gt;
    &lt;p&gt;PORTFOLIO&lt;/p&gt;
  &lt;/a&gt;
  &lt;/nav&gt;

  &lt;!-- Navbar on small screens (Hidden on medium and large screens) --&gt;
  &lt;div class=&quot;w3-top w3-hide-large w3-hide-medium&quot; id=&quot;myNavbar&quot;&gt;
  &lt;div class=&quot;w3-bar w3-black w3-opacity w3-hover-opacity-off w3-center w3-small&quot;&gt;
    &lt;a href=&quot;index.html&quot; class=&quot;w3-bar-item w3-button&quot; style=&quot;width:15% !important&quot;&gt;HOME&lt;/a&gt;
    &lt;a href=&quot;about.html&quot; class=&quot;w3-bar-item w3-button&quot; style=&quot;width:16% !important&quot;&gt;ABOUT&lt;/a&gt;
    &lt;a href=&quot;photos.html&quot; class=&quot;w3-bar-item w3-button&quot; style=&quot;width:23% !important&quot;&gt;ACTIVITIES&lt;/a&gt;
    &lt;a href=&quot;contact.html&quot; class=&quot;w3-bar-item w3-button&quot; style=&quot;width:20% !important&quot;&gt;CONTACT&lt;/a&gt;
    &lt;a href=&quot;portfolio.html&quot; class=&quot;w3-bar-item w3-button&quot; style=&quot;width:23% !important&quot;&gt;PORTFOLIO&lt;/a&gt;
  &lt;/div&gt; 
&lt;/div&gt;

  &lt;div class=&quot;w3-content w3-justify w3-text-grey w3-padding-64&quot; id=&quot;about&quot;&gt;
    &lt;h2 class=&quot;w3-text-light-grey&quot;&gt;Biodata&lt;/h2&gt;
    &lt;hr style=&quot;width:13%&quot; class=&quot;w3-opacity&quot;&gt;

    &lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td data-label=&quot;NAME&quot;&gt;&lt;b class=&quot;w3-text-light-grey&quot;&gt;NAME &lt;/b&gt;&lt;/td&gt;
          &lt;td&gt;: AHMAD FIKHRI BIN ZAINUDIN.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td data-label=&quot;SIBLINGS&quot;&gt;&lt;b class=&quot;w3-text-light-grey&quot;&gt;SIBLINGS &lt;/b&gt;&lt;/td&gt;
          &lt;td&gt;: 4 Siblings and the 4th Son.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td data-label=&quot;ACADEMIC&quot;&gt;&lt;b class=&quot;w3-text-light-grey&quot;&gt;ACADEMIC &lt;/b&gt;&lt;/td&gt;
          &lt;td&gt;: Bachelor Degree in Computer Science (Internet Computing) with Honors.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td data-label=&quot;ACADEMIC&quot;&gt;&lt;/td&gt;
          &lt;td&gt;: Diploma in Information Technology (Digital Technology).&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td data-label=&quot;STUDIES&quot;&gt;&lt;b class=&quot;w3-text-light-grey&quot;&gt;STUDIES &lt;/b&gt;&lt;/td&gt;
          &lt;td&gt;: Universiti Sultan Zainal Abidin (Degree).&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td data-label=&quot;STUDIES&quot;&gt;&lt;/td&gt;
          &lt;td&gt;: Politeknik Metro Tasek Gelugor (Diploma).&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td data-label=&quot;HOBBY&quot;&gt;&lt;b class=&quot;w3-text-light-grey&quot;&gt;HOBBY &lt;/b&gt;&lt;/td&gt;
          &lt;td&gt;: Badminton, Hiking, Traveling.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td data-label=&quot;STATE&quot;&gt;&lt;b class=&quot;w3-text-light-grey&quot;&gt;STATE &lt;/b&gt;&lt;/td&gt;
          &lt;td&gt;: Seremban, Negeri Sembilan.&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;

    &lt;br&gt;

    &lt;h3 class=&quot;w3-padding-16 w3-text-light-grey&quot;&gt;My Hobbies&lt;/h3&gt;
    &lt;hr style=&quot;width:15%&quot; class=&quot;w3-opacity&quot;&gt;&lt;br&gt;
    &lt;p class=&quot;w3-wide&quot;&gt;Photography&lt;/p&gt;&lt;br&gt;
    &lt;div class=&quot;w3-white&quot;&gt;
      &lt;div class=&quot;w3-dark-grey&quot; style=&quot;height:28px;width:50%&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;&lt;br&gt;
    &lt;p class=&quot;w3-wide&quot;&gt;Web Design&lt;/p&gt;&lt;br&gt;
    &lt;div class=&quot;w3-white&quot;&gt;
      &lt;div class=&quot;w3-dark-grey&quot; style=&quot;height:28px;width:65%&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;&lt;br&gt;
    &lt;p class=&quot;w3-wide&quot;&gt;Sportmanship&lt;/p&gt;&lt;br&gt;
    &lt;div class=&quot;w3-white&quot;&gt;
      &lt;div class=&quot;w3-dark-grey&quot; style=&quot;height:28px;width:80%&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;&lt;br&gt;
    &lt;p class=&quot;w3-wide&quot;&gt;Travel&lt;/p&gt;&lt;br&gt;
    &lt;div class=&quot;w3-white&quot;&gt;
      &lt;div class=&quot;w3-dark-grey&quot; style=&quot;height:28px;width:75%&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;&lt;br&gt;
  &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</textarea><input type='submit' name='save' value='Save' style=''/></form>