<!DOCTYPE html>
<html lang="en">
<head>
<script>
if (window !== window.top) {
window.top.location = window.location;
}</script>
<meta http-equiv="Content-Security-Policy" content="frame-ancestors 'none';">
<meta http-equiv="X-Frame-Options" content="DENY">
<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', '3871167a80b985858af5636711a34302effc7033', { region: 'eu' });
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<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">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8419334759638161"
crossorigin="anonymous"></script>
<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;
background: linear-gradient(black, black) padding-box,
linear-gradient(to left, cyan, purple) border-box;
border-radius: 12px;
border: 2.5px solid transparent;
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;
min-height:40px;
}
#cont button {
padding: 2.5vh 4.6vh;
margin: 1vh;
background: linear-gradient(155deg, rgb(0, 149, 249), #9D00FF, rgb(255, 0, 43));
border: none;
border-radius: 8px;
color: #fff;
cursor: pointer;
}
#cont button:hover {
background: linear-gradient(145deg, #00ffab, #, 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);
z-index: 100;
background: "Black";
}
#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: 120vh;
height: 54vh;
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:57vh;
height: 53vh;
margin: auto;
margin-top: 7px;
border-radius: 10px;
margin-left: 0px;
}
#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) {
.ad{
display: flex;
flex-direction: row;
}
dialog {
max-width: 300px;
}
#imshow{
border: 2px solid blue;
width: 330px;
height: 330px;
display: flex;
flex-direction: column;
overflow-y: scroll;
margin-top: 30px;
padding-bottom: 7px;
gap: 14px;
background: linear-gradient(black, black) padding-box,
linear-gradient(to right,#FF0000, #9900FF) border-box;
border-radius: 20px;
border: 2.5px solid transparent;
}
#jd{
font-size: 14px;
}
#imshow p{
width: 80%;
}
#imshow img{
width: 95%;
height: 100%;
margin: auto;
display:block;
margin-bottom: 0px;
margin-top:0px;
}
#imshow p{
font-size: 20px;
}
#styles{
align-items: center;
justify-content: center;
}
}
#jd{
margin: 10px;
padding: 5px;
background-color: transparent;
color: #eeeeee;
margin-right: 0;
margin-left: 0;
background: linear-gradient(black, rgb(0, 0, 0)) padding-box,
linear-gradient(to right, rgb(1, 255, 234),#ff0055) border-box;
border-radius: 20px;
border: 2.5px solid transparent;
border-radius: 7px;
margin-left: 0px;
font-family: 'Barlow Condensed';
font-size: 18px;
color: white;
}
#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: 10px;
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;
margin-right: 0;
margin-left: 0;
border: 2px solid white;
}
#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: 100%;
margin-left: 10px;
}
#model{
width: 170px;
height: 50px;
overflow: visible;
}
#model option{
white-space: normal;
padding: 10px;
font-family: 'Barlow Condensed';
line-height: 1.2;
font-size: 24px;
}
.ad{
display: flex;
flex-direction: row;
}
#grad {
background-image: linear-gradient(45deg, rgb(0, 255, 149),rgb(255, 0, 43), rgb(174, 0, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #000;
margin-left:15px;
font-family: 'Barlow Condensed'
}
#imshow{
margin-bottom: 12px;}
#imshow progress {
margin-left: auto;
margin-right: auto;
display: block; /* Ensure the progress bar is treated as a block-level element */
height: 25px;
width: 250px;
}
#imshow {
text-align: center;
}
#imshow {
display: flex;
justify-content: center; /* Align horizontally */
align-items: center; /* Align vertically */
}
#imshow h5{
display: block;
}
progress::-webkit-progress-bar {
background-color: rgb(0,5,60);
}
progress::-webkit-progress-value {
background-color: rgb(0, 255, 149);
}
progress {
background-color: rgb(0,5,60);
}
progress::-moz-progress-bar {
background-color: rgb(0, 255, 149); }
progress {
background: rgb(0,10,60);
}
#i1{
margin-top: 330px;
padding-top: 330px;
}
#x{
width:300px;
padding:0px;
gap:0px;
}
#aaa{
color: blue;
margin-left: 15px;
font-family: Arial;
letter-spacing: 0.3px;
}
</style>
</head>
<body>
<div id="dvv">
<button id="jd">Discord</button>
<!--<button id="ow">
Donate
</button>-->
</div>
<h3 id="grad">Please like this space ❤️</h3><a href="https://www.buymeacoffee.com/mygX" id="aaa" target=”_blank”>BUY ME COFFE</a>
<p style="color:white;font-family:Barlow Condensed;margin-left:15px">Please open a community discussion if you face any problem or need some assistance</p>
</div>
<div id="main">
<div id="cont">
<input type="text" name="" id="inp" placeholder=" Enter Prompt here.." autocomplete="off">
<button id="create">Create </button>
</div>
<div id="as">
<select name="" id="model">
<option value="p4" class="mod">Leonardo AI</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>Cinematic</p>
<input type="radio" name="style" value="cinema" checked>
<p>Photography</p>
<input type="radio" name="style" value="photo">
<p>FILM<p>
<input type="radio" name="style" value="fumes">
<p>Creative</p>
<input type="radio" name="style" value="fantasy" >
<p>LEONARDO 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="10" min="7" max="20" step="1"><p id="gdsp">7</p>
</div>
<div id="sli">
<label for="#step">Steps: </label>
<input type="range" id="step" value="20" min="10" max="40" step="1"><p id="stepp">20</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 style="width: 220px;">Your Generarted Arts Will appear Here</p>
</div>
<div id="ads" class="ads">
</div>
<script src="main.js"></script>
<script>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/0.6.1/progressbar.min.js"></script>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-analytics.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyDA40xpjwKzWIHmDz5oRu9BircpHfqncuI",
authDomain: "fumesai.firebaseapp.com",
projectId: "fumesai",
storageBucket: "fumesai.appspot.com",
messagingSenderId: "573294764046",
appId: "1:573294764046:web:f98a507a60045cf8a91c5f",
measurementId: "G-CZ2LETVP9K"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
</body>
</html>