mirror of https://github.com/lus/pasty.git
Rework frontend routing and prepare frontend rewrite
This commit is contained in:
Lukas SP
parent
7a77bfe92b
commit
0fc4ada144
|
|
@ -4,46 +4,8 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>pasty</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="spinner hidden"></div>
|
||||
<div class="navigation">
|
||||
<button class="item" id="btn_new" title="Create a new paste (Ctrl + N)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-plus" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<line x1="9" y1="12" x2="15" y2="12" />
|
||||
<line x1="12" y1="9" x2="12" y2="15" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="item" id="btn_save" title="Save the content to a new paste (Ctrl + S)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-floppy" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
|
||||
<circle cx="12" cy="14" r="2" />
|
||||
<polyline points="14 4 14 8 8 8 8 4" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="item" id="btn_delete" title="Delete the current paste (Ctrl + X)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<line x1="4" y1="7" x2="20" y2="7" />
|
||||
<line x1="10" y1="11" x2="10" y2="17" />
|
||||
<line x1="14" y1="11" x2="14" y2="17" />
|
||||
<path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
|
||||
<path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="item" id="btn_copy" title="Copy the paste content to your clipboard (Ctrl + C)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clipboard" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M9 5H7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2V7a2 2 0 0 0 -2 -2h-2" />
|
||||
<rect x="9" y="3" width="6" height="4" rx="2" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="linenos"></div>
|
||||
<div class="content"></div>
|
||||
frontend
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spinner {
|
||||
0% {
|
||||
-webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg);
|
||||
transform: translate3d(-50%, -50%, 0) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate3d(-50%, -50%, 0) rotate(360deg);
|
||||
transform: translate3d(-50%, -50%, 0) rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes spinner {
|
||||
0% {
|
||||
-webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg);
|
||||
transform: translate3d(-50%, -50%, 0) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate3d(-50%, -50%, 0) rotate(360deg);
|
||||
transform: translate3d(-50%, -50%, 0) rotate(360deg);
|
||||
}
|
||||
}
|
||||
.spinner {
|
||||
content: "";
|
||||
-webkit-animation: .75s linear infinite spinner;
|
||||
animation: .75s linear infinite spinner;
|
||||
-webkit-animation-play-state: inherit;
|
||||
animation-play-state: inherit;
|
||||
border: solid 5px #000000;
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 50%;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 100px;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
will-change: transform;
|
||||
}
|
||||
.spinner.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
width: 100vw;
|
||||
height: 60px;
|
||||
background-color: #111111;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.navigation .item {
|
||||
margin-left: 20px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.navigation .item svg {
|
||||
transition: all 250ms;
|
||||
}
|
||||
.navigation .item:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.navigation .item:hover svg {
|
||||
stroke: #c0c0c0;
|
||||
}
|
||||
Loading…
Reference in New Issue