summaryrefslogtreecommitdiff
path: root/layouts/uhttpd/single.html
blob: 13314bd73abac4e5156db9d398cc867b0bf32fdc (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
  {{ $.Scratch.Set "NoCustomCSS" true }}
  {{ partial "header.tmpl" . }}
  <meta name="description" content="µhttpd is a self-contained instant micro web server. You can use it to share files from your local computer with others.">
  <meta name="author" content="Maximilian Möhring">
<style>
  {{readFile "static/font.css" | safeCSS}}
	/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
	html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}a:active,a:hover{outline:0}strong{font-weight:700}img{border:0}code{font-family:monospace,monospace}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}.container{position:relative;width:100%;max-width:960px;margin:0 auto;padding:0 20px;box-sizing:border-box}.column{width:100%;float:left;box-sizing:border-box}.demos{position:relative}.demo{position: relative;max-width: 100%;top:20px;/*margin: 3rem auto -12rem*/}
	@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){.container{width:80%}.column{margin-left:4%}.column:first-child{margin-left:0}.one-third.column{width:30.6666666667%}.one-half.column{width:48%}}html{font-size:62.5%}body{font-size:1.5em;line-height:1.6;font-weight:400;color:#222}h2,h3,h4{margin-top:0;margin-bottom:2rem;font-weight:300}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}

@media (min-width:550px){h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}}p{margin-top:0}a{color:#1EAEDB}a:hover{color:#0FA0CE}.button{display:inline-block;height:38px;padding:0 30px;color:#555;text-align:center;font-size:11px;font-weight:600;line-height:38px;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:transparent;border:1px solid #bbb;cursor:pointer;box-sizing:border-box}.button:focus,.button:hover{color:#333;border-color:#888;outline:0}.button.button-primary{color:#FFF;background-color:#33C3F0;border-color:#33C3F0}.button.button-primary:focus,.button.button-primary:hover{color:#FFF;background-color:#1EAEDB;border-color:#1EAEDB}code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;background:#F1F1F1;border:1px solid #E1E1E1;border-radius:4px}.button{margin-bottom:1rem}p{margin-bottom:2.5rem}.u-max-full-width{max-width:100%;box-sizing:border-box}.container:after,.row:after{content:"";display:table;clear:both}.button{border-radius:100px}.section{padding:8rem 0 7rem;text-align:center}.section-description,.section-heading{margin-bottom:1.2rem}.values{background:#179089;background-image:linear-gradient(to right,#179089,#169f81);color:#fff;padding-bottom:5rem}.value-heading{margin-bottom:.3rem}.value-description{opacity:.8;font-weight:300}.installation{border-bottom:1px solid #ddd}.categories{background:#179089;color:#fff}.categories .section-description{margin-bottom:4rem}@media (min-width:550px){.section{padding:12rem 0 11rem}.hero{padding-bottom:12rem;text-align:left;height:165px}.hero-heading{font-size:2.4rem}.demo{top:-20px}}@media (min-width:750px){.hero{height:190px}.hero-heading{font-size:2.6rem}.section{padding:14rem 0 15rem}.hero{padding:16rem 0 14rem}.section-description{max-width:60%;margin-left:auto;margin-right:auto}.categories{padding:15rem 0 8rem}.demo{top:-120px}}@media (min-width:1000px){.section{padding:20rem 0 19rem}.hero{padding:22rem 0}.hero-heading{font-size:3rem}.categories{background-image:linear-gradient(to right,#179089,#169f81)}.demo{top:-120px;transform:skew(-10deg)}}</style>
  <style>
.navigation {
  border-bottom: 0px solid;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  box-shadow: 0 -3px 10px rgba(0,0,0,.23);
}
nav.primary{
  display: table;
  margin: 0 auto;
}

nav.primary ul, nav.primary ul li {
  margin: 0px;
}

nav.primary select {
  width:  100%;
  height: 40px;
  /*
  margin: 21px 0;
  */
}

nav.primary ul li {
  display: inline;
  /*position: relative;*/
}

nav.primary ul li a {
  display: inline-block;
  line-height: 49px;
  padding:  0 14px;
	  /*
  color: white;
  text-transform: uppercase;
*/
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 0.06em;
  background: ##999999;
}

nav.primary ul li a:hover {
  background-color:#33C3F0;
  color: white;
  cursor: pointer;
}
  </style>
  {{ partial "favicon.tmpl" .}} 

</head>

<body>
<!--Navigation-->
<div class="band navigation">
    <nav class="container primary">
        <div class="sixteen columns">
            <ul>
		<li><a href="{{$.Site.BaseURL}}" title="start page">home</a></li>
                <li><a href="https://www.complicissimus.de/" title="my blog">my blog</a></li>
		<li><a href="{{$.Site.BaseURL}}projects/" title="side projects">projects</a></li>
		<li><a href="{{$.Site.BaseURL}}contact/" title="contact">contact</a></li>
	    </ul>
        </div>
    </nav>
</div>
  <div class="section hero">
    <div class="container">
      <div id="top" class="row">
        <div class="one-half column">
		<h4 class="hero-heading"><strong>µhttpd</strong> is a self-contained instant micro web server.<br>
	  	Use it to share files from your local computer with others.</h4>
          <a class="button button-primary" href="https://downloads.iamfabulous.de/uhttpd/">Download uhttpd</a>
        </div>
        <div class="one-half column demos">
          <!--img class="u-max-full-width" src="/static/demo.png"-->
	  <img class="demo" src="{{$.Site.BaseURL}}img/demo.png">
        </div>
      </div>
    </div>
  </div>

  <div class="section values">
    <div class="container">
      <div id="description" class="row">
        <div class="one-third column value">
          <h2 class="value-heading">It's Simple</h2>
	  <p class="value-description">Run <strong>µhttpd</strong> and it serves the directory content via web server, so you can access it with your web browser.</p>
        </div>
        <div class="one-third column value">
          <h2 class="value-heading">Stream Media</h2>
	  <p class="value-description">Access e.g. your music from your local net on every device. Just open a web browser and point it to a running <strong>µhttpd</strong>.</p>
        </div>
        <div class="one-third column value">
          <h2 class="value-heading">Uploads</h2>
	  <p class="value-description"><strong>µhttpd</strong> is able to recieve uploads from your browser. The target directory is fully customizable.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="section installation">
    <div class="container">
      <h3 id="installation" class="section-heading">Installation</h3>
      <p class="section-description">The installation of <strong>µhttpd</strong> is very straightforward. Download the precompiled binary and run it.</p>
	<p class="section-description">To compile from source you need a working Go environment (with cgo) and flex installed. Clone the repo and run <code>make</code></p>
	<br>
      <a class="button" href="https://git.iamfabulous.de/uhttpd">View source code</a>
    </div>
  </div>

  <div class="section categories">
    <div class="container">
      <h3 id="usage" class="section-heading">Usage</h3>
      <p class="section-description">You can modify <strong>µhttpd</strong> with some simple command line flags. Run '<strong>µhttpd</strong> -h' for more help. </p>
      <p class="section-description"><strong>-dir:</strong> The directory to serve. Defaults to the working directory.<br>
	      <strong>-ip:</strong> The ip <strong>µhttpd</strong> binds to. If not given, it binds to all interfaces µhttpd finds.<br>
      <strong>-port:</strong> The port µhttpd will listen on.<br>
      <strong>-quiet:</strong> When given µhttpd will not log the access. Only error messages will be issued.<br>
      <strong>-disallow-upload:</strong> When given µhttpd does not allow to upload files.<br>
      <strong>-upload-dir:</strong> Specify the directory to save uploaded files. Defaults to the working directory.</p>
      <p class="section-description">To upload open <strong>/upload</strong> with your browser.</p>
    </div>
  </div>

  <div class="section">
    <div class="container">
      <h3 id="credits" class="section-heading">Created By</h3>
	    <p class="section-description">Written by Maximilian Möhring.</p>
	    <a class="button button-primaryy" href="{{$.Site.BaseURL}}">Read Here More</a>
    </div>
  </div>
  {{partial "footer.tmpl"}}