AzuraCast/docs/index.html

689 lines
22 KiB
HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>AzuraCast</title>
<link rel="apple-touch-icon" sizes="57x57" href="icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta name="description" content="A turnkey, self-hosted web radio management suite." />
<meta property="og:site_name" content="AzuraCast" />
<meta property="og:title" content="AzuraCast" />
<meta property="og:type" content="article" />
<meta property="og:description" content="A turnkey, self-hosted web radio management suite." />
<meta property="og:url" content="https://azuracast.com" />
<meta property="twitter:card" content="summary_large_image" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,300,300italic,700,700italic" rel="stylesheet"
type="text/css" />
<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul,
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article,
aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output,
ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
-webkit-text-size-adjust: none
}
mark {
background-color: transparent;
color: inherit
}
input::-moz-focus-inner {
border: 0;
padding: 0
}
input[type="text"],
input[type="email"],
select,
textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none
}
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
min-width: 320px;
min-height: 100vh;
line-height: 1.0;
word-wrap: break-word;
overflow-x: hidden;
}
strong {
color: inherit;
font-weight: bolder;
}
em {
font-style: italic;
}
code {
font-family: "Lucida Console", "Courier New", monospace;
font-weight: normal;
text-indent: 0;
letter-spacing: 0;
font-size: 0.9em;
margin: 0 0.25em;
padding: 0.25em 0.5em;
background-color: rgba(144, 144, 144, 0.25);
border-radius: 0.25em;
}
mark {
background-color: rgba(144, 144, 144, 0.25);
}
a {
-moz-transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
-webkit-transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
-ms-transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
color: inherit;
text-decoration: none;
}
s {
text-decoration: line-through;
}
body:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
-moz-pointer-events: none;
-webkit-pointer-events: none;
-ms-pointer-events: none;
pointer-events: none;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
background-image: url('assets/bg.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: scroll;
background-color: #FFF;
}
html {
font-size: 18pt;
}
#wrapper {
-webkit-overflow-scrolling: touch;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
min-height: 100vh;
position: relative;
z-index: 2;
overflow: hidden;
}
#main {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
position: relative;
max-width: 100%;
z-index: 1;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-moz-flex-grow: 0;
-webkit-flex-grow: 0;
-ms-flex-grow: 0;
flex-grow: 0;
-moz-flex-shrink: 0;
-webkit-flex-shrink: 0;
-ms-flex-shrink: 0;
flex-shrink: 0;
text-align: center;
-moz-transition: opacity 1.125s ease 0s, -moz-transform 1.125s ease 0s;
-webkit-transition: opacity 1.125s ease 0s, -webkit-transform 1.125s ease 0s;
-ms-transition: opacity 1.125s ease 0s, -ms-transform 1.125s ease 0s;
transition: opacity 1.125s ease 0s, transform 1.125s ease 0s;
}
#main>.inner {
position: relative;
z-index: 1;
padding: 1.25rem 1rem;
max-width: 100%;
width: 26rem;
background: rgba(0, 0, 0, 0.7);
border-radius: 20px;
}
#main>.inner>* {
margin-top: 0.625rem;
margin-bottom: 0.625rem;
-moz-transition: opacity 1s ease-in-out 0s;
-webkit-transition: opacity 1s ease-in-out 0s;
-ms-transition: opacity 1s ease-in-out 0s;
transition: opacity 1s ease-in-out 0s;
}
#main>.inner> :first-child {
margin-top: 0 !important;
}
#main>.inner> :last-child {
margin-bottom: 0 !important;
}
#main>.inner>.full {
margin-left: calc(-1rem);
width: calc(100% + 2rem + 0.4725px);
max-width: calc(100% + 2rem + 0.4725px);
}
#main>.inner>.full:first-child {
margin-top: -1.25rem !important;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
#main>.inner>.full:last-child {
margin-bottom: -1.25rem !important;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
#main>.inner>.full.screen {
width: 100vw;
max-width: 100vw;
position: relative;
border-radius: 0 !important;
left: 50%;
right: auto;
margin-left: -50vw;
}
#main>.inner> :nth-child(2) {
-moz-transition-delay: 0.125s;
-webkit-transition-delay: 0.125s;
-ms-transition-delay: 0.125s;
transition-delay: 0.125s;
}
#main>.inner> :nth-child(3) {
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
}
#main>.inner> :nth-child(4) {
-moz-transition-delay: 0.375s;
-webkit-transition-delay: 0.375s;
-ms-transition-delay: 0.375s;
transition-delay: 0.375s;
}
#main>.inner> :nth-child(5) {
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
#main>.inner> :nth-child(6) {
-moz-transition-delay: 0.625s;
-webkit-transition-delay: 0.625s;
-ms-transition-delay: 0.625s;
transition-delay: 0.625s;
}
.image {
position: relative;
overflow: hidden;
max-width: 100%;
display: block;
}
.image a,
.image span {
position: relative;
max-width: 100%;
display: inline-block;
vertical-align: top;
}
.image a img,
.image span img {
display: block;
}
.image img {
width: 100%;
max-width: 100%;
display: inline-block;
vertical-align: top;
}
.image.full img {
display: block;
}
.image.full:first-child img {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.image.full:last-child img {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
.image.full a,
.image.full span {
display: block;
}
#image01 img {
width: 9rem;
}
h1 br+br,
h2 br+br,
h3 br+br,
p br+br {
display: block;
content: ' ';
margin-top: 0.825rem;
}
h1 .li,
h2 .li,
h3 .li,
p .li {
display: list-item;
padding-left: 0.5em;
margin: 0.75em 0 0 1em;
}
#title br+br {
margin-top: 0.9rem;
}
#title {
color: #FFFFFF;
letter-spacing: -0.15rem;
line-height: 1.5;
font-weight: 400;
}
#text01 {
font-size: 1.125em;
}
h1,
h2,
h3,
p {
color: rgba(255, 255, 255, 0.71);
font-family: 'Source Sans Pro';
letter-spacing: -0.025rem;
width: 100%;
font-size: 4.25em;
line-height: 1.375;
font-weight: 300;
}
hr {
width: 100%;
position: relative;
padding: 0;
border: 0;
height: 2.125rem;
line-height: 2.125rem;
}
hr:before {
content: '';
display: inline-block;
vertical-align: middle;
width: 100%;
background-color: rgba(255, 255, 255, 0.141);
height: 1px;
}
.icons {
cursor: default;
padding: 0;
letter-spacing: 0;
font-size: 1.5em;
width: calc(100% + 1.125rem);
margin-left: -0.5625rem;
}
.icons li {
display: inline-block;
vertical-align: middle;
margin: 0.5625rem;
}
.icons li a {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
border-radius: 100%;
width: 2em;
height: 2em;
}
.icons li a svg {
display: block;
-moz-transition: fill 0.25s ease;
-webkit-transition: fill 0.25s ease;
-ms-transition: fill 0.25s ease;
transition: fill 0.25s ease;
}
.icons li a .label {
display: none;
}
#icons01 li a svg {
width: 60%;
height: 60%;
}
#icons01 .n01 svg {
fill: rgba(255, 255, 255, 0.561);
}
#icons01 .n01 {
border: solid 1px rgba(255, 255, 255, 0.141);
}
#icons01 .n01:hover {
border-color: #FFFFFF;
}
#icons01 .n01:hover svg {
fill: #FFFFFF;
}
#icons01 .n02 svg {
fill: rgba(255, 255, 255, 0.561);
}
#icons01 .n02 {
border: solid 1px rgba(255, 255, 255, 0.141);
}
#icons01 .n02:hover {
border-color: #FFFFFF;
}
#icons01 .n02:hover svg {
fill: #FFFFFF;
}
@media (max-width: 1680px) {
html {
font-size: 13pt;
}
}
@media (max-width: 1280px) {
html {
font-size: 13pt;
}
}
@media (max-width: 980px) {
html {
font-size: 11pt;
}
}
@media (max-width: 736px) {
html {
font-size: 11pt;
}
#main {
text-align: center;
}
#main h1,
#main h2,
#main h3,
#main p {
text-align: inherit;
}
#main>.inner {
padding: 1.25rem 1rem;
}
#main>.inner>.full {
margin-left: calc(-1rem);
width: calc(100% + 2rem + 0.4725px);
max-width: calc(100% + 2rem + 0.4725px);
}
#main>.inner>.full:first-child {
margin-top: -1.25rem !important;
}
#main>.inner>.full:last-child {
margin-bottom: -1.25rem !important;
}
#main>.inner>.full.screen {
margin-left: -50vw;
}
#image01 img {
width: 9rem;
}
#title {
font-size: 3.5em;
}
#divider01 {
height: 2rem;
line-height: 2rem;
}
}
@media (max-width: 360px) {
#main>.inner {
padding: 0.9375rem 0.75rem;
}
#main>.inner>.full {
margin-left: calc(-0.75rem);
width: calc(100% + 1.5rem + 0.4725px);
max-width: calc(100% + 1.5rem + 0.4725px);
}
#main>.inner>.full:first-child {
margin-top: -0.9375rem !important;
}
#main>.inner>.full:last-child {
margin-bottom: -0.9375rem !important;
}
#main>.inner>.full.screen {
margin-left: -50vw;
}
#icons01 {
width: calc(100% + 0.84375rem);
margin-left: -0.421875rem;
}
#icons01 li {
margin: 0.421875rem;
}
}
</style>
<noscript>
<style>
body {
overflow: auto !important;
}
#main {
opacity: 1.0 !important;
-moz-transform: none !important;
-webkit-transform: none !important;
-ms-transform: none !important;
transform: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-ms-transition: none !important;
transition: none !important;
-moz-filter: none !important;
-webkit-filter: none !important;
-ms-filter: none !important;
filter: none !important;
}
#main>.inner>* {
opacity: 1.0 !important;
-moz-transform: none !important;
-webkit-transform: none !important;
-ms-transform: none !important;
transform: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-ms-transition: none !important;
transition: none !important;
-moz-filter: none !important;
-webkit-filter: none !important;
-ms-filter: none !important;
filter: none !important;
}
</style>
</noscript>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" display="none"
width="0" height="0">
<symbol id="icon-907" viewBox="0 0 40 40">
<path d="M36,20.3c0,3.5-1,6.6-3.1,9.4c-2,2.8-4.7,4.7-7.9,5.8c-0.4,0.1-0.6,0-0.8-0.1c-0.2-0.2-0.3-0.4-0.3-0.6v-4.4 c0-1.3-0.4-2.3-1.1-3c0.8-0.1,1.5-0.2,2.1-0.4c0.6-0.2,1.3-0.4,2-0.8c0.7-0.4,1.2-0.8,1.7-1.4c0.5-0.5,0.8-1.3,1.1-2.2 s0.4-2,0.4-3.1c0-1.7-0.5-3.1-1.6-4.3c0.5-1.3,0.5-2.7-0.2-4.2c-0.4-0.1-1,0-1.7,0.2c-0.7,0.3-1.4,0.6-1.9,0.9L24,12.5 c-1.3-0.4-2.6-0.5-4-0.5s-2.7,0.2-4,0.5c-0.2-0.2-0.5-0.3-0.9-0.6c-0.4-0.2-0.9-0.5-1.7-0.8c-0.8-0.3-1.4-0.4-1.8-0.3 c-0.6,1.6-0.7,3-0.1,4.2c-1.1,1.2-1.6,2.6-1.6,4.3c0,1.2,0.1,2.2,0.4,3.1s0.6,1.6,1.1,2.2s1,1,1.7,1.4c0.7,0.4,1.3,0.6,2,0.8 c0.6,0.2,1.3,0.3,2.1,0.4c-0.6,0.5-0.9,1.2-1,2.1c-0.3,0.1-0.6,0.2-0.9,0.3c-0.3,0.1-0.7,0.1-1.2,0.1c-0.5,0-0.9-0.1-1.4-0.4 c-0.5-0.3-0.8-0.7-1.2-1.3c-0.3-0.4-0.6-0.8-1-1.1c-0.4-0.3-0.8-0.4-1-0.5L9,26.5c-0.3,0-0.5,0-0.6,0.1c-0.1,0.1-0.1,0.1-0.1,0.2 c0,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.2,0.2,0.3,0.2l0.1,0.1c0.3,0.1,0.6,0.4,0.9,0.8s0.5,0.7,0.7,1.1l0.2,0.5c0.2,0.5,0.5,1,0.9,1.3 c0.4,0.3,0.9,0.5,1.4,0.6c0.5,0.1,1,0.1,1.4,0.1c0.5,0,0.9,0,1.2-0.1l0.5-0.1c0,0.5,0,1.1,0,1.9c0,0.7,0,1.1,0,1.1 c0,0.2-0.1,0.5-0.3,0.6c-0.2,0.2-0.5,0.2-0.8,0.1c-3.2-1.1-5.8-3-7.9-5.8S4,23.8,4,20.3c0-2.9,0.7-5.6,2.1-8S9.5,7.8,12,6.4 s5.1-2.1,8-2.1s5.6,0.7,8,2.1s4.4,3.4,5.8,5.8S36,17.4,36,20.3L36,20.3z"
/>
</symbol>
<symbol id="icon-905" viewBox="0 0 40 40">
<path d="M36.3,10.2c-1,1.3-2.1,2.5-3.4,3.5c0,0.2,0,0.4,0,1c0,1.7-0.2,3.6-0.9,5.3c-0.6,1.7-1.2,3.5-2.4,5.1 c-1.1,1.5-2.3,3.1-3.7,4.3c-1.4,1.2-3.3,2.3-5.3,3c-2.1,0.8-4.2,1.2-6.6,1.2c-3.6,0-7-1-10.2-3c0.4,0,1.1,0.1,1.5,0.1 c3.1,0,5.9-1,8.2-2.9c-1.4,0-2.7-0.4-3.8-1.3c-1.2-1-1.9-2-2.2-3.3c0.4,0.1,1,0.1,1.2,0.1c0.6,0,1.2-0.1,1.7-0.2 c-1.4-0.3-2.7-1.1-3.7-2.3s-1.4-2.6-1.4-4.2v-0.1c1,0.6,2,0.9,3,0.9c-1-0.6-1.5-1.3-2.2-2.4c-0.6-1-0.9-2.1-0.9-3.3s0.3-2.3,1-3.4 c1.5,2.1,3.6,3.6,6,4.9s4.9,2,7.6,2.1c-0.1-0.6-0.1-1.1-0.1-1.4c0-1.8,0.8-3.5,2-4.7c1.2-1.2,2.9-2,4.7-2c2,0,3.6,0.8,4.8,2.1 c1.4-0.3,2.9-0.9,4.2-1.5c-0.4,1.5-1.4,2.7-2.9,3.6C33.8,11.2,35.1,10.9,36.3,10.2L36.3,10.2z"
/>
</symbol>
</svg>
<div id="wrapper">
<div id="main">
<div class="inner">
<div class="image" id="image01"><a href="https://github.com/AzuraCast/AzuraCast"><img src="assets/logo.png" alt="" /></a></div>
<h1 id="title"><a href="https://github.com/AzuraCast/AzuraCast">azura<strong>cast</strong></a></h1>
<p id="text01"><span>a turnkey, self-hosted, <strong>free and open source</strong></span><br /> <span>web radio management suite</span></p>
<hr
id="divider01" />
<ul class="icons" id="icons01">
<li>
<a class="n01" href="https://github.com/AzuraCast/AzuraCast">
<svg>
<use xlink:href="#icon-907"></use>
</svg><span class="label">GitHub</span></a>
</li>
<li>
<a class="n02" href="http://twitter.com/AzuraCast">
<svg>
<use xlink:href="#icon-905"></use>
</svg><span class="label">Twitter</span></a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>