mirror of
https://github.com/lus/pasty.git
synced 2023-08-10 21:13:09 +03:00
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 charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>pasty</title>
|
<title>pasty</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="spinner hidden"></div>
|
frontend
|
||||||
<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>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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
Block a user