Spaces:

basit123796
/

playground

No application file

App Files Files Community

basit123796 commited on Jan 29, 2024

Commit

eae5ec5

verified ·

1 Parent(s): 202dda4

Upload 2 files

Browse files

Files changed (2) hide show

index.html +649 -0
style.css +28 -0

index.html ADDED Viewed

	@@ -0,0 +1,649 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script type='text/javascript'>
+    window.smartlook||(function(d) {
+      var o=smartlook=function(){ o.api.push(arguments)},h=d.getElementsByTagName('head')[0];
+      var c=d.createElement('script');o.api=new Array();c.async=true;c.type='text/javascript';
+      c.charset='utf-8';c.src='https://web-sdk.smartlook.com/recorder.js';h.appendChild(c);
+      })(document);
+      smartlook('init', 'ab064cf709cc86cb945d2dfb051a3a1254d7fb19', { region: 'eu' });
+  </script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/katex.min.css">
+  <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100&display=swap" rel="stylesheet" <meta
+    charset="UTF-8">
+  <title>AI Image Creator</title>
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      overflow-x: hidden !important;
+    }
+    body {
+      background-color: #000000;
+      margin: 0;
+    }
+    #main {
+      display: flex;
+      flex-direction: column;
+      margin: 50px;
+      margin: auto;
+    }
+    #cont {
+      background-color: #030303;
+      padding: 0px;
+      border-radius: 12px;
+      box-shadow: 8px 8px 16px #050505, -8px -8px 16px #080808;
+      display: flex;
+      align-items: center;
+      border: 2px solid rgb(247, 6, 187);
+      width: 70%;
+      height: 9vh;
+      margin: auto;
+      margin-top: 5%;
+      margin-bottom: 20px;
+    }
+    #inp {
+      flex-grow: 1;
+      padding: 10px;
+      margin: 10px;
+      background: transparent;
+      border: none;
+      border-radius: 8px;
+      box-shadow: linear-gradient(145deg, rgb(0, 249, 153), #ff002b);
+      color: #fff;
+      outline: none;
+    }
+    #cont button {
+      padding: 2.5vh 4.6vh;
+      margin: 1vh;
+      background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));
+      border: none;
+      border-radius: 8px;
+      color: #fff;
+      cursor: pointer;
+    }
+   #cont button:hover {
+      background: linear-gradient(145deg, #00ffab, #4e00f9, rgb(255, 0, 43));
+    }
+    #as {
+      display: flex;
+      flex-direction: row;
+      width: 70%;
+      margin: auto;
+      justify-content: space-between;
+    }
+    #as button {
+      background-color: #0a0a0a;
+      border: none;
+      padding: 3vh 4.5vh;
+      font-size: 15px;
+      color: #ffffff;
+      cursor: pointer;
+      border-radius: 12px;
+      transition: box-shadow 0.3s ease-in-out;
+    }
+#model{
+  background-color: #181717;
+      border: none;
+      padding: 3vh 4.5vh;
+      font-size: 15px;
+      color: #ffffff;
+      cursor: pointer;
+      border-radius: 12px;
+      transition: box-shadow 0.3s ease-in-out;
+     padding: 0px 0px 0px 20px ;
+}
+    #as button:hover {
+      box-shadow: 15px 15px 30px #0d0d0d, -15px -15px 30px #1a1a1a; /* Adjusted shadow and highlight on hover */
+    }
+    @media only screen and (max-width: 600px) {
+      #cont {
+        width: 90%;
+        margin-bottom: 20px;
+      }
+      #main{
+        width: 90%;
+      }
+      #cont button {
+        padding: 15px 15px; /* Adjust button padding for smaller screens */
+      }
+      #as{
+        width: 88%;
+      }
+      #as button{
+        padding: 15px 20px; /* Adjust button padding for smaller screens */
+      }
+      .mod{
+      }
+    }
+    @media only screen and (max-width: 365px){
+      #cont{
+        width: 94%;
+      }
+      #main{
+        width: 94%;
+      }
+      #as{
+        width: 94%;
+      }
+    }
+dialog{
+  background: rgba(29, 29, 29, 1);
+border-radius: 16px;
+box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+margin-top: 20px;
+border: 1px solid rgba(14, 13, 13, 0.3);
+}
+#sli{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ color: #eeeeee;
+}
+label{
+  font-family: 'Barlow Condensed';
+  font-size: 21px;
+  margin-right: 10px;
+}
+#sli input{
+  border: 1px solid rgb(137, 9, 223);
+  outline: none;
+  border-radius: 5px;
+  padding: 7px 20px;
+  background-color: transparent ;
+  color: white;
+  font-family: 'Barlow Condensed';
+}
+#Apply{
+  background-color: rgb(0, 247, 173);
+  padding: 5px 10px;
+  border: none;
+  color: #000000;
+  font-weight:500;
+  font-family: Arial, Helvetica, sans-serif;
+ font-size: 15px;
+ border-radius: 4px;
+}
+#close{
+  float: right;background-color: rgb(223, 7, 79); padding: 5px 10px;
+  border: none;
+  color: #000000;
+  font-weight:500;
+  font-family: Arial, Helvetica, sans-serif;
+ font-size: 15px;
+ border-radius: 4px;
+}
+#styles{
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+  color: white;
+  font-family: 'Barlow Condensed';
+  font-size: 20px;
+  flex-wrap: wrap;
+}
+#imshow{
+   width: 100.5vh;
+   height: 50vh;
+   display: flex;
+   flex-direction: row;
+   overflow-y: hidden;
+   margin: auto;
+gap: 6px;
+   margin-top: 30px;
+   padding-bottom: 4px;
+   background: linear-gradient(black, black) padding-box,
+                linear-gradient(to right, red, blue) border-box;
+    border-radius: 20px;
+    border: 2.5px solid transparent;
+ }
+ #imshow img{
+width: 49vh;
+height: 48vh;
+margin: auto;
+margin-top: 7px;
+border-radius: 10px;
+ }
+ #imshow p{
+  color: white;font-family: 'Barlow Condensed'; margin: auto; font-size: 3vh;text-align: center;
+}
+@media screen and (min-width: 500px) and (max-width: 720px) {
+  dialog{
+    max-width: 420px;
+  }
+  #imshow{
+    border: 2px solid blue;
+    width: 400px;
+    height: 400px;
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+    margin: auto;
+    background: linear-gradient(black, black) padding-box,
+                linear-gradient(to right, red, blue) border-box;
+    border-radius: 20px;
+    border: 2.5px solid transparent;
+    margin-top: 30px;
+    padding-bottom: 7px;
+    gap: 14px;
+  }
+  #imshow img{
+width: 95%;
+height: 100%;
+margin: auto;
+margin-top: 7px;
+  }
+  #cont{
+  height: 7vh;
+ }
+}
+#styles{
+  align-items: center;
+  justify-content: center;
+}
+@media screen and (max-width: 500px) {
+  dialog {
+    max-width: 300px;
+  }
+  #imshow{
+   border: 2px solid blue;
+   width: 330px;
+   height: 330px;
+   display: flex;
+   flex-direction: column;
+   overflow-y: scroll;
+   margin: auto;
+   margin-top: 30px;
+   padding-bottom: 7px;
+   gap: 14px;
+   background: linear-gradient(black, black) padding-box,
+                linear-gradient(to right, red, blue) border-box;
+    border-radius: 20px;
+    border: 2.5px solid transparent;
+ }
+ #imshow p{
+  width: 80%;
+ }
+ #imshow img{
+width: 95%;
+height: 100%;
+margin: auto;
+ }
+ #imshow p{
+  font-size: 20px;
+ }
+#styles{
+  align-items: center;
+  justify-content: center;
+}
+}
+#jd{
+  margin: 20px;
+  padding: 10px;
+  background-color: transparent;
+  color: #eeeeee;
+  background: linear-gradient(black, black) padding-box,
+                linear-gradient(to right, #00ffdd, blue) border-box;
+    border-radius: 20px;
+    border: 2.5px solid transparent;
+  border-radius: 10px;
+  margin-bottom: 0px;
+}
+#jd:hover{
+  background: linear-gradient(black, black) padding-box,
+                linear-gradient(to right, blue,#00ffdd) border-box;
+    border-radius: 10px;
+    border: 2.5px solid transparent;
+}
+#ow{
+  float: right;
+  margin: 20px;
+  padding: 10px;
+  background-color: transparent;
+  color: #eeeeee;
+  background: linear-gradient(black, black) padding-box,
+                linear-gradient(to right, rgb(0, 255, 149), rgb(174, 0, 255)) border-box;
+    border-radius: 10px;
+    border: 2.5px solid transparent;
+  border-radius: 10px;
+  margin-bottom: 0px;
+}
+#ow:hover{
+  background: linear-gradient(black, black) padding-box,
+                linear-gradient(to right, rgb(174, 0, 255),rgb(0, 255, 149)) border-box;
+    border-radius: 10px;
+    border: 2.5px solid transparent;
+}
+#dvv{
+  width: 94%;
+  margin: auto;
+}
+#model{
+  width: 170px;
+  height: 50px;
+  overflow: visible;
+}
+#model option{
+  white-space: normal;
+}
+  </style>
+</head>
+<body>
+<div id="dvv">
+  <button id="jd">
+    Join discord
+  </button>
+<!--<button id="ow">
+    Donate
+  </button>-->
+</div>
+<div id="main">
+  <div id="cont">
+    <input type="text" name="" id="inp" placeholder=" Enter Prompt here..">
+    <button id="create">Create </button>
+  </div>
+  <div id="as">
+    <select name="" id="model">
+      <option value="ra" class="mod">playground v2</option>
+    </select>
+    <div id="Advance Setting"><button>Setting</button></div>
+  </div>
+</div>
+<dialog id="dialog">
+<p style="font-size: 23px;  font-family: 'Barlow Condensed'; margin: 0px; color: rgb(197, 14, 188);">Styles: </p>
+<div id="styles">
+<p>Fumes AI</p>
+<input type="radio" name="style" value="fumes" id="fumes">
+<p>Realistic</p>
+<input type="radio" name="style" value="real">
+<p>Anime</p>
+<input type="radio" name="style" value="anime">
+<p>Photography</p>
+<input type="radio" name="style" value="photo">
+<p>Cinematic</p>
+<input type="radio" name="style" value="cinema">
+<p>Fantasy</p>
+<input type="radio" name="style" value="fantasy">
+<p>No Style</p>
+<input type="radio" name="style" value="no">
+</div>
+  <div id="sli">
+    <label for="#np" style="margin-bottom: 15px;">Negative Prompt: </label>
+    <input type="text" placeholder="Negative prompt" id="np" style="margin-bottom: 15px;">
+  </div>
+<div id="sli">
+  <label for="#gds">Guidence Scale: </label>
+  <input type="range" id="gds" value="7.5" min="5" max="14" step="1"><p id="gdsp">7.5</p>
+ </div>
+<div id="sli">
+  <label for="#step">Steps:  </label>
+  <input type="range"  id="step" value="50" min="30" max="100" step="1"><p id="stepp">50</p>
+</div>
+<div id="sli">
+  <label for="#gds">Seed: </label>
+<input type="range" id="seed" min="0" value="0" step="1" max="99999"><p id="seedp">0</p>
+ </div>
+ <button id="close">Close</button>
+  </dialog>
+  <div id="imshow">
+<p>Your Generarted Arts Will appear Here</p>
+  </div>
+<script>
+document.getElementById('jd').onclick = ()=>{
+  window.open('https://discord.gg/ju4yQBfQ7p')
+}
+/*document.getElementById('ow').onclick = ()=>{
+  window.open('https://www.buymeacoffee.com/mygx')
+}*/
+document.getElementById('fumes').checked = true
+let dialog = document.getElementById('dialog')
+let openbtn = document.getElementById('Advance Setting')
+let closebtn = document.getElementById('close')
+openbtn.onclick = ()=>{
+  dialog.show()
+  document.getElementById('imshow').style.border = '0px solid black transparent'
+}
+closebtn.onclick= ()=>{
+  dialog.close()
+  document.getElementById('imshow').style.background = 'linear-gradient(black, black) padding-box,linear-gradient(to right, red, blue) border-box'
+}
+let inp = document.getElementById('inp')
+let np = document.getElementById('np')
+let gd = document.getElementById('gds')
+let step = document.getElementById('step')
+let seed = document.getElementById('seed')
+let seedp = document.getElementById('seedp')
+let stepp = document.getElementById('stepp')
+let gdsp = document.getElementById('gdsp')
+let btn = document.getElementById('create')
+gd.addEventListener('input',()=>{
+ gdsp.innerText = gd.value
+})
+step.addEventListener('input',()=>{
+ stepp.innerText = step.value
+})
+seed.addEventListener('input',()=>{
+ seedp.innerText = seed.value
+})
+let prompt = ',RAW photo,dynamic lights, photorealistic, extremely detailed informations, dynamic colors,realistic'
+let nps = ' ,poorly drawn,malformed hands,malformed fingers,malformed faces,malfromed eyes,mutated fingers,malformed body parts,mutated body parts,mutated hands, disfigured,oversaturated,bad anatomy,deformed body features ,cropped, worst quality, low quality, jpeg artifacts, ugly, duplicate, morbid, mutilated, out of frame, extra fingers, mutated hands, poorly drawn hands, poorly drawn face, mutation, deformed, blurry, dehydrated, bad anatomy, bad proportions, extra limbs, cloned face, disfigured, gross proportions, malformed limbs, missing arms, missing legs, extra arms, extra legs, fused fingers, too many fingers, long neck,deformed eyes'
+document.getElementById('styles').onchange = ()=>{
+  const selectedStyle = document.querySelector('input[name="style"]:checked');
+  if(selectedStyle.value =='photo'){
+    prompt = ' ,RAW photo, portrait photo,(high detailed skin:1. 2), 8k uhd, dslr, soft lighting, high quality, film grain, Fujifilm'
+    nps = ' ,deformed fingers,mutated hands,unrealistic hands,extra fingers,less fingers,mutated eyes,malformed hands,malformed fingers,malformed faces,malfromed eyes,malformed body parts,mutated body parts,mutated fingers,mutated hands,(deformed iris, deformed pupils, semi-realistic, cgi, 3d, render, sketch, cartoon, drawing, anime:1.4), text, close up, cropped, out of frame, worst quality, low quality, jpeg artifacts, ugly, duplicate, morbid, mutilated, extra fingers, mutated hands, poorly drawn hands, poorly drawn face, mutation, deformed, blurry, dehydrated, bad anatomy, bad proportions, extra limbs, cloned face, disfigured, gross proportions, malformed limbs, missing arms, missing legs, extra arms, extra legs, fused fingers, too many fingers, long neck'
+  }
+  if(selectedStyle.value == 'cinema'){
+    prompt = ' ,cinematic film still awardwinning photo, highly detailed, high budget, bokeh, cinemascope, moody, epic, gorgeous, film grain, grainy'
+    nps = ' ,deformed fingers,mutated hands,unrealistic hands,extra fingers,less fingers,mutated eyes,malformed hands,malformed fingers,malformed faces,malfromed eyes,malformed body parts,mutated body parts,mutated fingers,mutated hands,(deformed iris, deformed pupils, semi-realistic, cgi, 3d, render, sketch, cartoon, drawing, anime:1.4), text, close up, cropped, out of frame, worst quality, low quality, jpeg artifacts, ugly, duplicate, morbid, mutilated, extra fingers, mutated hands, poorly drawn hands, poorly drawn face, mutation, deformed, blurry, dehydrated, bad anatomy, bad proportions, extra limbs, cloned face, disfigured, gross proportions, malformed limbs, missing arms, missing legs, extra arms, extra legs, fused fingers, too many fingers, long neck'
+  }
+  if(selectedStyle.value == 'real'){
+    prompt = ' ,RAW candid cinema,Modern colors, 16mm, beautiful,attractive,color graded portra 400 film, remarkable color, ultra realistic, textured skin, remarkable detailed pupils, realistic dull skin noise, visible skin detail, skin fuzz, dry skin, shot with cinematic camera, sun soaked colors'
+    nps = ' ,deformed fingers,mutated hands,unrealistic hands,extra fingers,less fingers,mutated eyes,malformed hands,malformed fingers,malformed faces,malfromed eyes,malformed body parts,mutated body parts,mutated fingers,mutated hands,poorly drawn,lowres, disfigured,bad anatomy,deformed body features ,cropped, worst quality, low quality, jpeg artifacts, ugly, duplicate, out of frame, extra fingers, mutated hands, poorly drawn hands, poorly drawn face, mutation, deformed, blurry, dehydrated, bad anatomy, bad proportions, extra limbs, cloned face, disfigured, gross proportions, malformed limbs, missing arms, missing legs, extra arms, extra legs, fused fingers, too many fingers, long neck,deformed eyes'
+  }
+  if(selectedStyle.value == 'fantasy'){
+    prompt = ' ,centered shot, wide angle, full body, dd, fantasy, highly detailed, digital painting, artstation, smooth, sharp focus, digital art'
+    nps = ' ,deformed fingers,mutated hands,unrealistic hands,extra fingers,less fingers,mutated eyes,malformed hands,malformed fingers,malformed faces,malfromed eyes,malformed body parts,mutated body parts,mutated fingers,mutated hands,missing legs, missing feet, worst quality, low quality, jpeg artifacts, signature, logo, watermark, text, realistic, hyper-realistic, ultra-detailed, RAW photo'
+  }
+  if(selectedStyle.value == 'anime'){
+    prompt = ' ,masterpiece,HDR,anime,anime style,beuatiful anime'
+    nps = ' ,malformed hands,malformed fingers,malformed faces,malformed body parts,mutated body parts,malfromed eyes,mutated fingers,mutated hands,realistic,worst quality, low quality, blurry, pixelated, extra limb, extra fingers, bad hand, text, name, letters, out of frame, lowres, text, error, cropped, jpeg artifacts, ugly, duplicate, morbid, mutilated, out of frame, mutated hands, poorly drawn hands, poorly drawn face, mutation, deformed, blurry, dehydrated, bad anatomy, bad proportions, extra limbs, cloned face, disfigured, gross proportions, malformed limbs, missing arms, missing legs, extra arms, extra legs, fused fingers, too many fingers, long neck, username, watermark, signature'
+  }
+  if(selectedStyle.value == 'fumes'){
+    let prompt = ' ,RAW photo,dynamic lights, photorealistic, extremely detailed informations, dynamic colors,realistic,SciFi,award winning photography,film grain,beautiful,attarctive'
+let nps = ' ,deformed fingers,mutated hands,unrealistic hands,extra fingers,less fingers,mutated eyes,poorly drawn,malformed hands,malformed fingers,malformed faces,malformed body parts,mutated body parts,malfromed eyes,mutated fingers,mutated hands, disfigured,oversaturated,bad anatomy,deformed body features ,cropped, worst quality, low quality, jpeg artifacts, ugly, duplicate, morbid, mutilated, out of frame, extra fingers, mutated hands, poorly drawn hands, poorly drawn face, mutation, deformed, blurry, dehydrated, bad anatomy, bad proportions, extra limbs, cloned face, disfigured, gross proportions, malformed limbs, missing arms, missing legs, extra arms, extra legs, fused fingers, too many fingers, long neck,deformed eyes'
+  }
+  if(selectedStyle.value == 'no'){
+    prompt = ''
+    nps = ''
+  }
+}
+btn.onclick = async ()=>{
+let url2 = 'https://api-cmgn.onrender.com/get_prediction'
+let idlist = []
+ url =  'https://flask-hello-world-murex-sigma.vercel.app/playground'
+var selectElement = document.getElementById("model");
+var selectedIndex = selectElement.selectedIndex;
+if (selectedIndex === -1) {
+    console.log("No option is selected.");
+} else {
+    var selectedOption = selectElement.options[selectedIndex];
+    if(selectedOption.value == 'rv6'){
+     url =  'https://flask-hello-world-murex-sigma.vercel.app/proteus'
+    }
+    if(selectedOption.value == 'ds8'){
+      url =  'https://flask-hello-world-murex-sigma.vercel.app/dream'
+      if(step.value>50){
+        step.value = 50
+      }
+    }
+    if(selectedOption.value == 'ra'){
+      url =  'https://flask-hello-world-murex-sigma.vercel.app/playground'
+    }
+    if(selectedOption.value == 'ar'){
+      url =  'https://flask-hello-world-murex-sigma.vercel.app/predict'
+    }
+    if(selectedOption.value == 'er'){
+      url =  'https://flask-hello-world-murex-sigma.vercel.app/pixart'
+    }
+    if(selectedOption.value == 'anything'){
+      url =  'https://flask-hello-world-murex-sigma.vercel.app/anything'
+    }
+    if(selectedOption.value == 'focus'){
+      url =  'https://flask-hello-world-murex-sigma.vercel.app/focus'
+      url2 = 'https://api-cmgn.onrender.com/foocus'
+    }
+}
+negative_prompt = nps
+btn.disabled = true
+const div = document.getElementById('imshow');
+div.innerHTML = '';
+document.getElementById('imshow').innerHTML = ''
+let pi = document.createElement('p')
+pi.innerText = 'Generating Image... generation Usually Complete Within 15 seconds'
+document.getElementById('imshow').append(pi)
+let count = 0;
+seed = seed
+async function generate(){
+    const params = {
+        'prompt': inp.value+prompt,
+        'negative_prompt': np.value+nps,
+        "steps": step.value,
+        'gd': gd.value
+    };
+    try {
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Connection': 'keep-alive',
+            },
+            body: JSON.stringify(params)
+        });
+    /*    console.log(np.value)
+        const imgData = await response.text();
+        const div = document.getElementById('imshow')
+        const img = document.createElement('img');
+        pi.innerHTML = ''
+        pi.innerText = ''
+        img.src = imgData;
+        div.appendChild(img);
+        */
+        const imgData = await response.text();
+        idlist.push(imgData)
+    } catch (error) {
+      btn.disabled = false
+        console.error('An error occurred:', error);
+        pi.innerText = 'An error occurred, try changing your prompt';
+    }
+}
+await Promise.all([generate(), generate()]);
+function final2(){
+  const id = idlist[1].trim().replace(/^"|"$/g, '');
+fetch(url2, {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+        id: id,
+    }),
+})
+.then((response) => response.text())
+.then((data) => {
+  const img = document.createElement('img');
+        pi.innerHTML = ''
+        pi.innerText = ''
+        img.src = data.trim().replace(/^"|"$/g, '');
+        div.appendChild(img);
+        btn.disabled = false
+        console.log(data)
+})
+.catch((error) =>{
+  btn.disabled = false
+        console.error('An error occurred:', error);
+        pi.innerText = 'An error occurred, try changing your prompt';
+});
+}
+function final1(){
+  const id = idlist[0].trim().replace(/^"|"$/g, '');
+fetch(url2, {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+        id: id,
+    }),
+})
+.then((response) => response.text())
+.then((data) => {
+  const img = document.createElement('img');
+        pi.innerHTML = ''
+        pi.innerText = ''
+        img.src = data.trim().replace(/^"|"$/g, '');
+        div.appendChild(img);
+        btn.disabled = false
+        console.log(data)
+})
+.catch((error) => {
+  btn.disabled = false
+        console.error('An error occurred:', error);
+        pi.innerText = 'An error occurred, try changing your prompt';
+});
+}
+final2()
+final1()
+}
+</script>
+</body>

style.css ADDED Viewed

	@@ -0,0 +1,28 @@

+body {
+	padding: 2rem;
+	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+}
+h1 {
+	font-size: 16px;
+	margin-top: 0;
+}
+p {
+	color: rgb(107, 114, 128);
+	font-size: 15px;
+	margin-bottom: 10px;
+	margin-top: 5px;
+}
+.card {
+	max-width: 620px;
+	margin: 0 auto;
+	padding: 16px;
+	border: 1px solid lightgray;
+	border-radius: 16px;
+}
+.card p:last-child {
+	margin-bottom: 0;
+}