rikkix/drive.html

## drive.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drive</title>
    <style>
        @font-face{
            font-family: 'icomoon';
            src : url("data:application/x-font-woff;charset=utf-8;base64,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") format('woff');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        [class^="icon-"], [class*=" icon-"] {
            font-family: 'icomoon' !important;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .icon-home:before {
            content: "\e900";
        }
        .icon-folder-open:before {
            content: "\e930";
        }
        .icon-file-text2:before {
            content: "\e926";
        }
        .icon-arrow-left2:before {
            content: "\ea40";
        }
        body {
            background-color: rgb(247, 247, 249);
        }
        h1 {
            text-align: center;
            color: rgb(51, 51, 51);
            font-size: 28px;
            letter-spacing: 2px;
            line-height: 64px;
        }
        a {
            text-decoration: none;
            color: black;
        }
        a:hover {
            text-decoration: underline;
        }
        th {
            font-weight: normal;
        }
        .list-wrapper {
            width: 80%;
            margin: 0 auto;
            margin-bottom: 40px;
            position: relative;
            box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.1);
        }
        .list-header-container {
            margin: 0;
            border: 0 none;
            padding: 15px 50px;
            text-align: left;
            font-weight: 400;
            color: #000000;
            background-color: #f7f7f9;
        }
        .list-title th {
            font-weight: bold;
        }
        .list-body-container {
            position: relative;
            left: 0;
            overflow-x: hidden;
            overflow-y: auto;
            box-sizing: border-box;
            background: white;
        }
        .list-table {
            width: 100%;
            padding: 20px;
            border-spacing: 0;
        }
        .list-table tr th{
            text-align: center;
        }
        .list-table tr th:first-child {
            text-align: left;
            padding: 5px 0;
        }
        .list-table tr td{
            text-align: center;
        }
        .list-table tr td:first-child {
            text-align: left;
            padding: 5px 0;
        }
        .item:hover {
            font-weight: 200;
            background-color: gainsboro;
        }
        #back{
            position: absolute;
            top: 35px;
            left: 35px;
        }
    </style>
</head>
<body>
    <h1>
        <a href="/"><span>MSGraph-Drive</span></a>
    </h1>
    <div class="list-wrapper">
      <div class="list-container">
        <div class="list-header-container" style="height: 2.5em;">
            {{ $current := .Current }}
            {{ if and (ne $current "") (ne $current "/") }}
            <a href="{{- .Parent -}}"><span id="back" class="icon-arrow-left2"></span></a>
            {{ end }}
        </div>
        <div class="list-body-container">
          <table class="list-table">
              <thead class="list-title">
              <tr>
                <th>File</th>
                <th>Date</th>
                <th>Size</th>
              </tr>
              </thead>
              <tbody>
              {{ range $item := .Items }}
                  <tr>
              {{ if $item.IsFolder }}
                  <td><a href="{{- $item.Name -}}/"><span class="icon-folder-open"> {{ $item.Name }}</span></a></td>
              {{ else }}
                  <td><a href="{{- $item.Name -}}"><span class="icon-file-text2"> {{ $item.Name }}</span></a></td>
              {{end}}
                      <td><span class="time" title="{{- $item.Date -}}">{{- $item.ReadableDate -}}</span></td>
                      <td>{{ $item.ReadableSize }}</td>
                  </tr>
              {{ end }}
              </tbody>
          </table>
        </div>
      </div>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Drive</title>
	<style>
	@font-face{
	font-family: 'icomoon';
	src : url("data:application/x-font-woff;charset=utf-8;base64,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") format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
	}
	[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}
	.icon-home:before {
	content: "\e900";
	}
	.icon-folder-open:before {
	content: "\e930";
	}
	.icon-file-text2:before {
	content: "\e926";
	}
	.icon-arrow-left2:before {
	content: "\ea40";
	}
	body {
	background-color: rgb(247, 247, 249);
	}
	h1 {
	text-align: center;
	color: rgb(51, 51, 51);
	font-size: 28px;
	letter-spacing: 2px;
	line-height: 64px;
	}
	a {
	text-decoration: none;
	color: black;
	}
	a:hover {
	text-decoration: underline;
	}
	th {
	font-weight: normal;
	}
	.list-wrapper {
	width: 80%;
	margin: 0 auto;
	margin-bottom: 40px;
	position: relative;
	box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.1);
	}
	.list-header-container {
	margin: 0;
	border: 0 none;
	padding: 15px 50px;
	text-align: left;
	font-weight: 400;
	color: #000000;
	background-color: #f7f7f9;
	}
	.list-title th {
	font-weight: bold;
	}
	.list-body-container {
	position: relative;
	left: 0;
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
	background: white;
	}
	.list-table {
	width: 100%;
	padding: 20px;
	border-spacing: 0;
	}
	.list-table tr th{
	text-align: center;
	}
	.list-table tr th:first-child {
	text-align: left;
	padding: 5px 0;
	}
	.list-table tr td{
	text-align: center;
	}
	.list-table tr td:first-child {
	text-align: left;
	padding: 5px 0;
	}
	.item:hover {
	font-weight: 200;
	background-color: gainsboro;
	}
	#back{
	position: absolute;
	top: 35px;
	left: 35px;
	}
	</style>
	</head>
	<body>
	<h1>
	<a href="/"><span>MSGraph-Drive</span></a>
	</h1>
	<div class="list-wrapper">
	<div class="list-container">
	<div class="list-header-container" style="height: 2.5em;">
	{{ $current := .Current }}
	{{ if and (ne $current "") (ne $current "/") }}
	<a href="{{- .Parent -}}"><span id="back" class="icon-arrow-left2"></span></a>
	{{ end }}
	</div>
	<div class="list-body-container">
	<table class="list-table">
	<thead class="list-title">
	<tr>
	<th>File</th>
	<th>Date</th>
	<th>Size</th>
	</tr>
	</thead>
	<tbody>
	{{ range $item := .Items }}
	<tr>
	{{ if $item.IsFolder }}
	<td><a href="{{- $item.Name -}}/"><span class="icon-folder-open"> {{ $item.Name }}</span></a></td>
	{{ else }}
	<td><a href="{{- $item.Name -}}"><span class="icon-file-text2"> {{ $item.Name }}</span></a></td>
	{{end}}
	<td><span class="time" title="{{- $item.Date -}}">{{- $item.ReadableDate -}}</span></td>
	<td>{{ $item.ReadableSize }}</td>
	</tr>
	{{ end }}
	</tbody>
	</table>
	</div>
	</div>
	</div>
	</body>
	</html>