Advertisement
ChancellorCeti

Untitled

Feb 9th, 2022
126
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.80 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>FloofChat!</title>
  5.   <script type='text/javascript' src='https://cdn.scaledrone.com/scaledrone.min.js'></script>
  6.   <!--<script type='text/javascript' src='http://0.0.0.0:8080/scaledrone.js'></script>-->
  7.   <meta charset="utf-8">
  8.   <meta name="viewport" content="width=device-width">
  9.   <style>
  10.     body {
  11.       box-sizing: border-box;
  12.       margin: 0;
  13.       padding: 13px;
  14.       display: flex;
  15.       flex-direction: column;
  16.       max-height: 100vh;
  17.       font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  18.     }
  19.     .splash{
  20.       position:fixed;
  21.       top:0;
  22.       left:0;
  23.       width:100%;
  24.       height:100vh;
  25.       background:black;
  26.       z-index:200;
  27.       color:white;
  28.       text-align:center;
  29.       line-height:90vh;
  30.     }
  31.     .splash.display-none{
  32.       position:fixed;
  33.       opacity:0;
  34.       top:0;
  35.       left:0;
  36.       width:100%;
  37.       height:100vh;
  38.       background:black;
  39.       z-index: index -10;;
  40.       color:white;
  41.       text-align:center;
  42.       line-height:90vh;
  43.       transition:all 0.5s;
  44.     }
  45.     @keyframes fadeIn{
  46.       to{
  47.         opacity:1;
  48.  
  49.       }
  50.     }
  51.     .fade-in{
  52.       opacity:1;
  53.       animation:fadeIn 1s ease-in forwards
  54.     }
  55.  
  56.     .members-count,
  57.     .members-list,
  58.     .messages {
  59.       border: 1px solid #e4e4e4;
  60.       padding: 15px;
  61.       margin-bottom: 15px;
  62.     }
  63.  
  64.     .messages {
  65.       flex-shrink: 1;
  66.       overflow: auto;
  67.     }
  68.  
  69.     .message {
  70.       padding: 5px 0;
  71.     }
  72.     .message .member {
  73.       display: inline-block;
  74.     }
  75.  
  76.     .member {
  77.       padding-right: 10px;
  78.       position: relative;
  79.     }
  80.  
  81.     .message-form {
  82.       display: flex;
  83.       flex-shrink: 0;
  84.     }
  85.     .message-form__input {
  86.       flex-grow: 1;
  87.       border: 1px solid #dfdfdf;
  88.       padding: 10px 15px;
  89.       font-size: 16px;
  90.     }
  91.     .message-form__button {
  92.       margin: 10px;
  93.     }
  94.   </style>
  95. </head>
  96. <body>
  97.   <!--<div class="splash">
  98.    <h1 class="fade-in">FloofChat by Kairav Banerjee/Floofy Doggo<br>
  99.    
  100.    </h1>-->
  101.    
  102.   </div>
  103.   <div class="stuff">
  104.     <input class="inputnamefield" name="inputboxstuff/>
  105.     <input type="submit" class="submitbtn">submit</input>
  106.   </div>
  107.   <div class="members-count">-</div>
  108.   <div class="members-list">-</div>
  109.   <div class="messages"></div>
  110.   <form class="message-form" onsubmit="return false;">
  111.     <input class="message-form__input" placeholder="Type a message.." type="text"/>
  112.     <input class="message-form__button" value="Send" type="submit"/>
  113.   </form>
  114.   <div class="credit">
  115.       <h5>Made by Floofy Doggo.<br>
  116.         DM me on discord at Floofy Doggo#2244 or email me at kairavbanerjee@gmail.com for feature requests or anything related to this app.
  117.  
  118.       </h5>
  119.   </div>
  120.   <script src="./script.js"></script>
  121. </body>
  122. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement