Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <div>
- <div id="dropzone">
- <p class="2nd-floor">2ND FLOOR</p>
- <p class="empty-floor-message">This floor is empty. Upload a floor map.</p>
- <div class="Rectangle-Copy-6">
- <div class="outer-circle">
- <div class="Oval-6" id="drag-and-drop">
- <i class="fas fa-arrow-up fa-2x" id="arrow"></i>
- </div>
- </div>
- <div class="Drag-Drop-the-file">
- <h1>Drag & Drop</h1>
- <a class="fileContainer">the file <span class="browse">or browse</span><input type="file"></a>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import * as Dropzone from 'dropzone';
- export default {
- mounted() {
- $("#dropzone").dropzone({
- url: '/upload',
- createImageThumbnails: true,
- });
- }
- }
- </script>
- <style>
- .Sofia-DC-2nd-floor {
- width: 266px;
- height: 29px;
- font-family: ProximaNova;
- font-size: 24px;
- font-weight: 900;
- font-style: normal;
- font-stretch: normal;
- line-height: normal;
- letter-spacing: normal;
- margin: 0 auto;
- color: #000000;
- }
- .Rectangle-Copy-6 {
- width: 388px;
- height: 280px;
- border-radius: 8px;
- border: solid 2px#00a6ce;
- border-style: dashed;
- margin: 0 auto;
- padding: 15px;
- }
- .Drag-Drop-the-file {
- width: 225px;
- height: 56px;
- font-family: OpenSans;
- font-size: 14px;
- font-weight: normal;
- font-style: normal;
- font-stretch: normal;
- line-height: 2;
- letter-spacing: normal;
- color: #000000;
- margin: 0 auto;
- margin-top: 25px;
- }
- .empty-floor-message {
- width: 442px;
- height: 28px;
- font-family: OpenSans;
- font-size: 18px;
- font-weight: bold;
- line-height: 1.56;
- letter-spacing: normal;
- text-align: center;
- }
- a.fileContainer {
- overflow: hidden;
- position: relative;
- display: inline-block;
- }
- a.fileContainer>input[type=file] {
- cursor: inherit;
- filter: alpha(opacity=0);
- opacity: 0;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- text-align: right;
- }
- .browse {
- text-decoration: underline;
- color: #00a6ce;
- font-weight: bold
- }
- a {
- font-size: 24px;
- }
- a:hover {
- cursor: pointer;
- }
- .Oval-6 {
- width: 82px;
- height: 82px;
- border: solid 3px #c8f4ff;
- border-radius: 50%;
- margin: 0 auto;
- }
- h1 {
- text-align: center;
- }
- #arrow {
- margin-left: 23px;
- margin-top: 23px;
- color: #C8F4FF;
- }
- </style>
Add Comment
Please, Sign In to add comment