Loki/dwz
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat:完成界面

Browse Source
This commit is contained in:
Naccl
2021-03-26 17:24:59 +08:00
parent 539b4e5b0c
commit 637d79f667
2 changed files with 133 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/base.css
+110 -1
View File
@@ -1,5 +1,4 @@
body {
box-sizing: border-box;
width: 100vw;
height: 100vh;
margin: 0;
@@ -13,6 +12,9 @@ body {
);
background-size: 200% 200%;
animation: gradient-move 15s ease alternate infinite;
font-family: Roboto;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
@keyframes gradient-move {
@@ -30,3 +32,110 @@ body {
left: 50%;
transform: translate(-50%, -50%);
}
button {
width: 100%;
background-color: #3498db;
border: 0;
padding: 10px 0;
margin: 10px 0;
color: #fff;
text-align: center;
font-weight: bold;
}
.inp * {
box-sizing: border-box;
}
.inp {
display: grid;
position: relative;
margin: auto;
width: 800px;
border-radius: 3px;
overflow: hidden;
}
.inp.short {
display: block;
width: 300px;
}
.inp .label {
position: absolute;
top: 20px;
left: 12px;
font-size: 16px;
color: rgba(0, 0, 0, 0.5);
font-weight: 500;
transform-origin: 0 0;
transform: translate3d(0, 0, 0);
transition: all 0.2s ease;
pointer-events: none;
}
.inp .focus-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.05);
z-index: -1;
transform: scaleX(0);
transform-origin: left;
}
.inp input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
border: 0;
font-family: inherit;
padding: 16px 12px 0 12px;
height: 56px;
font-size: 16px;
font-weight: 400;
background: rgba(0, 0, 0, 0.02);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
color: #000;
transition: all 0.15s ease;
}
.inp input:hover {
background: rgba(0, 0, 0, 0.04);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.inp input:not(:-moz-placeholder-shown) + .label {
color: rgba(0, 0, 0, 0.5);
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:not(:-ms-input-placeholder) + .label {
color: rgba(0, 0, 0, 0.5);
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:not(:placeholder-shown) + .label {
color: rgba(0, 0, 0, 0.5);
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:focus {
background: rgba(0, 0, 0, 0.05);
outline: none;
box-shadow: inset 0 -2px 0 #0077FF;
}
.inp input:focus + .label {
color: #0077FF;
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:focus + .label + .focus-bg {
transform: scaleX(1);
transition: all 0.1s ease;
}
src/main/resources/templates/index.html
+23 -3
View File
@@ -7,11 +7,23 @@
</head>
<body>
<div class="box">
<input type="text" id="long">
<button type="button" id="generate">生成</button>
<input type="text" id="short">
<label for="long" class="inp">
<input type="text" id="long" placeholder="&nbsp;">
<span class="label">长链接</span>
<span class="focus-bg"></span>
</label>
<button type="button" id="generate">生成短链接</button>
<div style="text-align: center;">
<label for="short" class="inp short">
<input type="text" id="short" placeholder="&nbsp;">
<span class="label">短链接</span>
<span class="focus-bg"></span>
</label>
<button type="button" id="copy" style="width:100px;" data-clipboard-action="copy" data-clipboard-target="#short">Copy</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
<script>
$('#generate').click(() => {
let longURL = $('#long').val();
@@ -31,6 +43,14 @@
alert('请输入原始链接');
}
})
let clipboard = new ClipboardJS('#copy');
clipboard.on('success', function (e) {
e.clearSelection();
$('#copy').text('Copied!');
setTimeout(() => {
$('#copy').text('Copy');
}, 2000)
});
</script>
</body>
</html>