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

feat:完成界面

master
Naccl 4 years ago
parent
539b4e5b0c
commit
637d79f667
2 changed files with 133 additions and 4 deletions
Unified View
  1. 111
      src/main/resources/static/css/base.css
  2. 26
      src/main/resources/templates/index.html

111
src/main/resources/static/css/base.css
Unescape View File

@ -1,5 +1,4 @@
body { body {
box-sizing: border-box;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
@ -13,6 +12,9 @@ body {
); );
background-size: 200% 200%; background-size: 200% 200%;
animation: gradient-move 15s ease alternate infinite; animation: gradient-move 15s ease alternate infinite;
font-family: Roboto;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
} }
@keyframes gradient-move { @keyframes gradient-move {
@ -30,3 +32,110 @@ body {
left: 50%; left: 50%;
transform: translate(-50%, -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;
}

26
src/main/resources/templates/index.html
Unescape View File

@ -7,11 +7,23 @@
</head> </head>
<body> <body>
<div class="box"> <div class="box">
<input type="text" id="long"> <label for="long" class="inp">
<button type="button" id="generate">生成</button> <input type="text" id="long" placeholder="&nbsp;">
<input type="text" id="short"> <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> </div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <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> <script>
$('#generate').click(() => { $('#generate').click(() => {
let longURL = $('#long').val(); let longURL = $('#long').val();
@ -31,6 +43,14 @@
alert('请输入原始链接'); alert('请输入原始链接');
} }
}) })
let clipboard = new ClipboardJS('#copy');
clipboard.on('success', function (e) {
e.clearSelection();
$('#copy').text('Copied!');
setTimeout(() => {
$('#copy').text('Copy');
}, 2000)
});
</script> </script>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save