mirror/pasty
1
0
Fork 0
mirror of https://github.com/lus/pasty.git synced 2023-08-10 21:13:09 +03:00
Code Issues Projects Releases Wiki Activity

Rework frontend routing and prepare frontend rewrite

Browse Source
This commit is contained in:
Lukas SP 2020-08-23 16:03:56 +02:00
parent 7a77bfe92b
commit 0fc4ada144
2 changed files with 1 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/index.html
View File

@ -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>

72
web/style.css
View File

@ -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;
}