Rowdy013/Image-generator
1
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">7 8 <script type='text/javascript'>9 window.smartlook||(function(d) {10 var o=smartlook=function(){ o.api.push(arguments)},h=d.getElementsByTagName('head')[0];11 var c=d.createElement('script');o.api=new Array();c.async=true;c.type='text/javascript';12 c.charset='utf-8';c.src='https://web-sdk.smartlook.com/recorder.js';h.appendChild(c);13 })(document);14 smartlook('init', 'ab064cf709cc86cb945d2dfb051a3a1254d7fb19', { region: 'eu' });15 </script>16 <link rel="preconnect" href="https://fonts.googleapis.com">17 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>18 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/katex.min.css">19 <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100&display=swap" rel="stylesheet" <meta20 charset="UTF-8">21 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8419334759638161"22 crossorigin="anonymous"></script>23 <title>AI Image Creator</title>24 <style>25 html, body {26 margin: 0;27 padding: 0;28 box-sizing: border-box;29 overflow-x: hidden !important;30 }31 body {32 background-color: #000000;33 margin: 0;34 }35 #main {36 display: flex;37 flex-direction: column;38 margin: 50px;39 margin: auto;40 }41 #cont {42 background-color: #030303;43 padding: 0px;44 border-radius: 12px;45 box-shadow: 8px 8px 16px #050505, -8px -8px 16px #080808;46 display: flex;47 align-items: center;48 border: 2px solid rgb(247, 6, 187);49 width: 70%;50 height: 9vh;51 margin: auto;52 margin-top: 5%;53 margin-bottom: 20px;54 }55 #inp {56 flex-grow: 1;57 padding: 10px;58 margin: 10px;59 background: transparent;60 border: none;61 border-radius: 8px;62 box-shadow: linear-gradient(145deg, rgb(0, 249, 153), #ff002b);63 color: #fff;64 outline: none;65 }66 #cont button {67 padding: 2.5vh 4.6vh;68 margin: 1vh;69 background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));70 border: none;71 border-radius: 8px;72 color: #fff;73 cursor: pointer;74 }75 #cont button:hover {76 background: linear-gradient(145deg, #00ffab, #4e00f9, rgb(255, 0, 43));77 }78 #as {79 display: flex;80 flex-direction: row;81 width: 70%;82 margin: auto;83 justify-content: space-between; 84 }85 #as button {86 background-color: #0a0a0a; 87 border: none;88 padding: 3vh 4.5vh;89 font-size: 15px;90 color: #ffffff; 91 cursor: pointer;92 border-radius: 12px;93 transition: box-shadow 0.3s ease-in-out;94 }95#model{96 background-color: #181717; 97 border: none;98 padding: 3vh 4.5vh;99 font-size: 15px;100 color: #ffffff; 101 cursor: pointer;102 border-radius: 12px;103 transition: box-shadow 0.3s ease-in-out;104 105 padding: 0px 0px 0px 20px ;106}107 #as button:hover {108 box-shadow: 15px 15px 30px #0d0d0d, -15px -15px 30px #1a1a1a; /* Adjusted shadow and highlight on hover */109 }110 @media only screen and (max-width: 600px) {111 #cont {112 width: 90%;113 margin-bottom: 20px;114 }115 #main{116 width: 90%;117 }118 #cont button {119 padding: 15px 15px; /* Adjust button padding for smaller screens */120 }121 #as{122 width: 88%;123 }124 #as button{125 126 padding: 15px 20px; /* Adjust button padding for smaller screens */127 }128 .mod{129 130 }131 }132 @media only screen and (max-width: 365px){133 #cont{134 width: 94%;135 }136 #main{137 width: 94%;138 }139 #as{140 width: 94%;141 }142 }143dialog{144 background: rgba(29, 29, 29, 1);145border-radius: 16px;146box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);147margin-top: 20px;148border: 1px solid rgba(14, 13, 13, 0.3);149}150#sli{151 display: flex;152 flex-direction: row;153 align-items: center;154 color: #eeeeee;155}156label{157 font-family: 'Barlow Condensed';158 159 font-size: 21px;160 margin-right: 10px;161}162#sli input{163 border: 1px solid rgb(137, 9, 223);164 outline: none;165 border-radius: 5px;166 padding: 7px 20px;167 background-color: transparent ;168 color: white;169 font-family: 'Barlow Condensed';170}171#Apply{172 background-color: rgb(0, 247, 173);173 padding: 5px 10px;174 border: none;175 color: #000000;176 font-weight:500;177 font-family: Arial, Helvetica, sans-serif;178 font-size: 15px;179 border-radius: 4px;180}181#close{182 float: right;background-color: rgb(223, 7, 79); padding: 5px 10px;183 border: none;184 color: #000000;185 font-weight:500;186 font-family: Arial, Helvetica, sans-serif;187 font-size: 15px;188 border-radius: 4px;189}190#styles{191 display: flex;192 flex-direction: row;193 gap: 6px;194 color: white;195 font-family: 'Barlow Condensed';196 font-size: 20px;197 flex-wrap: wrap;198 199}200#imshow{201 202 width: 56vh;203 height: 54vh;204 display: flex;205 flex-direction: row;206 overflow-y: hidden;207 margin: auto;208gap: 6px;209 margin-top: 30px;210 padding-bottom: 4px;211 background: linear-gradient(black, black) padding-box,212 linear-gradient(to right, red, blue) border-box;213 border-radius: 20px;214 border: 2.5px solid transparent;215 216 }217 #imshow img{218width: 54vh;219height: 53vh;220margin: auto; 221margin-top: 7px;222border-radius: 10px;223margin-left: 0px;224 }225 #imshow p{226 color: white;font-family: 'Barlow Condensed'; margin: auto; font-size: 3vh;text-align: center;227}228@media screen and (min-width: 500px) and (max-width: 720px) {229 dialog{230 231 max-width: 420px;232 }233 #imshow{234 235 border: 2px solid blue;236 width: 400px;237 height: 400px;238 display: flex;239 flex-direction: column;240 overflow-y: scroll;241 margin: auto;242 background: linear-gradient(black, black) padding-box,243 linear-gradient(to right, red, blue) border-box;244 border-radius: 20px;245 border: 2.5px solid transparent;246 margin-top: 30px;247 padding-bottom: 7px;248 gap: 14px;249 }250 #imshow img{251width: 95%;252height: 100%;253margin: auto;254margin-top: 7px;255 }256 #cont{257 height: 7vh;258 }259}260#styles{261 align-items: center;262 justify-content: center;263}264@media screen and (max-width: 500px) {265 .ad{266 display: flex;267 flex-direction: row;268}269 dialog {270 max-width: 300px;271 }272 #imshow{273 274 border: 2px solid blue;275 width: 330px;276 height: 330px;277 display: flex;278 flex-direction: column;279 overflow-y: scroll;280 margin: auto;281 margin-top: 30px;282 padding-bottom: 7px;283 gap: 14px;284 background: linear-gradient(black, black) padding-box,285 linear-gradient(to right, red, blue) border-box;286 border-radius: 20px;287 border: 2.5px solid transparent;288 }289 #jd{290 font-size: 14px;291 }292 #imshow p{293 width: 80%;294 }295 #imshow img{296width: 95%;297height: 100%;298margin: auto;299 }300 #imshow p{301 font-size: 20px;302 }303#styles{304 align-items: center;305 justify-content: center;306}307}308#jd{309 margin: 10px;310 padding: 5px;311 background-color: transparent; 312 color: #eeeeee;313 margin-right: 0;314 margin-left: 0;315 background: linear-gradient(black, rgb(0, 0, 0)) padding-box,316 linear-gradient(to right, rgb(1, 255, 234),#ff0055) border-box;317 border-radius: 20px;318 border: 2.5px solid transparent;319 border-radius: 7px;320 margin-left: 0px;321 font-family: 'Barlow Condensed';322 font-size: 18px;323 color: white;324}325#jd:hover{326 background: linear-gradient(black, black) padding-box,327 linear-gradient(to right, blue,#00ffdd) border-box;328 border-radius: 10px;329 border: 2.5px solid transparent;330}331#ow{332 float: right;333 margin: 10px;334 padding: 10px;335 background-color: transparent;336 color: #eeeeee;337 background: linear-gradient(black, black) padding-box,338 linear-gradient(to right, rgb(0, 255, 149), rgb(174, 0, 255)) border-box;339 border-radius: 10px;340 border: 2.5px solid transparent;341 border-radius: 10px;342 margin-bottom: 0px;343 margin-right: 0;344 margin-left: 0;345 border: 2px solid white;346}347#ow:hover{348 background: linear-gradient(black, black) padding-box,349 linear-gradient(to right, rgb(174, 0, 255),rgb(0, 255, 149)) border-box;350 border-radius: 10px;351 border: 2.5px solid transparent;352}353#dvv{354 width: 100%;355 margin-left: 10px;356}357#model{358 width: 170px;359 height: 50px;360 overflow: visible;361}362#model option{363 white-space: normal;364}365.ad{366 display: flex;367 flex-direction: row;368}369 </style>370</head>371<body>372<div id="dvv">373<button id="jd">Discord</button>374 375<!--<button id="ow">376 Donate377 </button>-->378</div>379 380 381 382</div>383<div id="main">384 <div id="cont">385 <input type="text" name="" id="inp" placeholder=" Enter Prompt here..">386 <button id="create">Create </button>387 </div>388 389 <div id="as">390 <select name="" id="model">391 <option value="rv6" class="mod" selected>Proteus v0.2</option>392 393 <option value="ar" class="mod">SDXL</option>394 <option value="focus" class="mod">Fooocus(Best)</option>395 396 <option value="ds8" class="mod">Dreamshaper xl turbo</option>397 <option value="er" class="mod">pixart alpha</option>398 399 <option value="ra" class="mod">playground v2</option>400 <option value="anything" class="mod">Anything v4 (Anime)</option>401 402 </select>403 <div id="Advance Setting"><button>Setting</button></div>404 </div>405 406</div>407 408 409 410 411 412<dialog id="dialog">413 414<p style="font-size: 23px; font-family: 'Barlow Condensed'; margin: 0px; color: rgb(197, 14, 188);">Styles: </p>415<div id="styles">416 417<p>AI Generarted (FumesAI)<p>418<input type="radio" name="style" value="fumes" id="fumes">419<p>Realistic</p>420<input type="radio" name="style" value="real">421<p>Anime</p>422<input type="radio" name="style" value="anime">423<p>Photography</p>424<input type="radio" name="style" value="photo">425<p>Cinematic</p>426<input type="radio" name="style" value="cinema">427<p>Fantasy</p>428<input type="radio" name="style" value="fantasy">429<p>No Style</p>430<input type="radio" name="style" value="no">431</div>432 433 <div id="sli">434 <label for="#np" style="margin-bottom: 15px;">Negative Prompt: </label>435 <input type="text" placeholder="Negative prompt" id="np" style="margin-bottom: 15px;">436 </div>437<div id="sli">438 <label for="#gds">Guidence Scale: </label>439 <input type="range" id="gds" value="7" min="5" max="20" step="1"><p id="gdsp">7</p>440 </div>441<div id="sli">442 <label for="#step">Steps: </label>443 <input type="range" id="step" value="50" min="30" max="100" step="1"><p id="stepp">50</p>444</div>445<div id="sli">446 <label for="#gds">Seed: </label>447<input type="range" id="seed" min="0" value="0" step="1" max="99999"><p id="seedp">0</p>448 </div>449 450 <button id="close">Close</button>451 </dialog>452 453 <div id="imshow">454<p style="width: 220px;">Your Generarted Arts Will appear Here</p>455 456 457 </div>458 459 <div class="ad">460 <script async="async" data-cfasync="false" src="//positionavailreproach.com/4251d796061922e1ec58ec80d347c8a6/invoke.js"></script>461 <div id="container-4251d796061922e1ec58ec80d347c8a6"></div>462<script src="script.js"></script>463<script type="text/javascript">464 atOptions = {465 'key' : '95d42ead888d636b7ebf8c76de53ca8d',466 'format' : 'iframe',467 'height' : 600,468 'width' : 160,469 'params' : {}470 };471 document.write('<scr' + 'ipt type="text/javascript" src="//positionavailreproach.com/95d42ead888d636b7ebf8c76de53ca8d/invoke.js"></scr' + 'ipt>');472</script>473<script type="text/javascript">474 atOptions = {475 'key' : '95d42ead888d636b7ebf8c76de53ca8d',476 'format' : 'iframe',477 'height' : 600,478 'width' : 160,479 'params' : {}480 };481 document.write('<scr' + 'ipt type="text/javascript" src="//positionavailreproach.com/95d42ead888d636b7ebf8c76de53ca8d/invoke.js"></scr' + 'ipt>');482</script>483 <script type="text/javascript">484 atOptions = {485 'key' : '95d42ead888d636b7ebf8c76de53ca8d',486 'format' : 'iframe',487 'height' : 600,488 'width' : 160,489 'params' : {}490 };491 document.write('<scr' + 'ipt type="text/javascript" src="//positionavailreproach.com/95d42ead888d636b7ebf8c76de53ca8d/invoke.js"></scr' + 'ipt>');492</script>493</script>494<script type="text/javascript">495atOptions = {496 'key' : '95d42ead888d636b7ebf8c76de53ca8d',497 'format' : 'iframe',498 'height' : 600,499 'width' : 160,500 'params' : {}501};502document.write('<scr' + 'ipt type="text/javascript" src="//positionavailreproach.com/95d42ead888d636b7ebf8c76de53ca8d/invoke.js"></scr' + 'ipt>');503</script>504</script>505<script type="text/javascript">506atOptions = {507 'key' : '95d42ead888d636b7ebf8c76de53ca8d',508 'format' : 'iframe',509 'height' : 600,510 'width' : 160,511 'params' : {}512};513document.write('<scr' + 'ipt type="text/javascript" src="//positionavailreproach.com/95d42ead888d636b7ebf8c76de53ca8d/invoke.js"></scr' + 'ipt>');514</script>515</script>516<script type="text/javascript">517atOptions = {518 'key' : '95d42ead888d636b7ebf8c76de53ca8d',519 'format' : 'iframe',520 'height' : 600,521 'width' : 160,522 'params' : {}523};524document.write('<scr' + 'ipt type="text/javascript" src="//positionavailreproach.com/95d42ead888d636b7ebf8c76de53ca8d/invoke.js"></scr' + 'ipt>');525</script>526</script>527<script type="text/javascript">528atOptions = {529 'key' : '95d42ead888d636b7ebf8c76de53ca8d',530 'format' : 'iframe',531 'height' : 600,532 'width' : 160,533 'params' : {}534};535document.write('<scr' + 'ipt type="text/javascript" src="//positionavailreproach.com/95d42ead888d636b7ebf8c76de53ca8d/invoke.js"></scr' + 'ipt>');536</script>537</script>538<script type="text/javascript">539atOptions = {540 'key' : '95d42ead888d636b7ebf8c76de53ca8d',541 'format' : 'iframe',542 'height' : 600,543 'width' : 160,544 'params' : {}545};546document.write('<scr' + 'ipt type="text/javascript" src="//positionavailreproach.com/95d42ead888d636b7ebf8c76de53ca8d/invoke.js"></scr' + 'ipt>');547</script>548</script>549 550<script type="module">551 // Import the functions you need from the SDKs you need552 import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";553 import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-analytics.js";554 // TODO: Add SDKs for Firebase products that you want to use555 // https://firebase.google.com/docs/web/setup#available-libraries556 557 // Your web app's Firebase configuration558 // For Firebase JS SDK v7.20.0 and later, measurementId is optional559 const firebaseConfig = {560 apiKey: "AIzaSyDA40xpjwKzWIHmDz5oRu9BircpHfqncuI",561 authDomain: "fumesai.firebaseapp.com",562 projectId: "fumesai",563 storageBucket: "fumesai.appspot.com",564 messagingSenderId: "573294764046",565 appId: "1:573294764046:web:f98a507a60045cf8a91c5f",566 measurementId: "G-CZ2LETVP9K"567 };568 569 // Initialize Firebase570 const app = initializeApp(firebaseConfig);571 const analytics = getAnalytics(app);572</script>573</body>574</html>