plushie uwu ai codes - plus

NOTE: haiii this crd is a little complicated bc of the css frameworks but if u have any questions u can send me a ccat at crrdcore / send me a dm / a retrospring at soobinzz! also pls credit doiibahi / crrdcore when remaking this carrd it took me a looong time to make lol. also general disclaimer all positions were made to fit my personal devices the best you might have to change the positions to fit your devices better!

--- FONTS ---
<style>
@font-face {
font-family: windows;
src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
}

@font-face {
font-family: Pixelated MS Sans Serif;
src:url(ms_sans_serif.woff) format("woff");
src:url(ms_sans_serif.woff2) format("woff2");
}

@font-face {
font-family: Chemre;
src: url(https://dl.dropbox.com/s/a4vu0khvvhe5lwq/Chemre.ttf);
}

@font-face {
font-family: alstoria;
src: url(https://dl.dropbox.com/s/8mxmroywtsttuc0/Alstoria%20Demo.ttf?);
}

@font-face {
font-family: dreams;
src: url(https://dl.dropbox.com/s/i9lg3nchwvgi6p3/dream.ttf);
}
</style>

--- SOUND ---
<script>

// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code

//** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
//** Call: uniquevar.playclip() to play sound

var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}

function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}

//Initialize two sound clips with 1 fallback file each:

var mouseoversound=createsoundbite("https://cdn.discordapp.com/attachments/916511538410569829/1006909357981712414/mouse_click_fx.mp3")
var clicksound=createsoundbite("https://cdn.discordapp.com/attachments/916511538410569829/1006909357981712414/mouse_click_fx.mp3")

</script>

--> INSERT THIS ON THE ONCLICK SETTING:
clicksound.playclip();

--- TOP ---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="title-bar active" style ="background: #FF9EC1BA;">
<div class="title-bar-text">☆</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<a href="#home" onclick="clicksound.playclip()"><button aria-label="Close"></button></a>
</div>
</div>

--- MENU ---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<ul role="menubar" class="can-hover" style ="background:linear-gradient(180deg, #FF9EC1BA 25%, #D4D4D4 100%);">
<li role="menuitem" tabindex="0" aria-haspopup="true">
File
<ul role="menu">
<li role="menuitem">
<a href="#menubar">
Open <span>Ctrl+O</span>
</a>
</li>
<li role="menuitem">
<a href="#menubar">
Save <span>Ctrl+S</span>
</a>
</li>
<li role="menuitem" class="has-divider">
<a href="#menubar">
Save As... <span>Ctrl+Shift+S</span>
</a>
</li>
<li role="menuitem"><a href="#menubar">Exit</a></li>
</ul>
</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
Edit
<ul role="menu">
<li role="menuitem"><a href="#menubar">Undo</a></li>
<li role="menuitem"><a href="#menubar">Copy</a></li>
<li role="menuitem"><a href="#menubar">Cut</a></li>
<li role="menuitem" class="has-divider"><a href="#menubar">Paste</a></li>
<li role="menuitem"><a href="#menubar">Delete</a></li>
<li role="menuitem"><a href="#menubar">Find...</a></li>
<li role="menuitem"><a href="#menubar">Replace...</a></li>
<li role="menuitem"><a href="#menubar">Go to...</a></li>
</ul>
</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
View
<ul role="menu">
<li role="menuitem" tabindex="0" aria-haspopup="true">
Zoom
<ul role="menu">
<li role="menuitem"><button control-id="ControlID-45">Zoom In</button></li>
<li role="menuitem"><button>Zoom Out</button></li>
</ul>
</li>
<li role="menuitem"><a href="#menubar">Status Bar</a></li>
</ul>
</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
Help
<ul role="menu">
<li role="menuitem"><a href="#menubar">View Help</a></li>
<li role="menuitem"><a href="#menubar">About</a></li>
</ul>
</li>
</ul>

--- MAIN CONTAINER ---
box-shadow: inset -1px -0px #999999, inset 1px 1px #fff, inset -2px -0px grey, inset 2px 2px #dfdfdf;

--- BUBBLE NAME TEXT CHANGES ---
#bubble {
color:#FFB3CE;
font-family: Pixelated MS Sans Serif;
font-size: 2em;
font-weight: bold;
position: absolute;
left: 5.4em;
-webkit-filter: drop-shadow(1px 1px 2.5px #424242);
}

@media only screen and (max-width: 600px) {
#bubble {
font-size: 2.5em;
left: 3.8em;
bottom: 6.9em;
}
}

--- SEARCH ---
<input type="search" placeholder="Search 4 Vioo ☆" control-id="ControlID-55">

<style>
#elementID {
position: absolute;
left: 10.8em;
bottom: 15.6em;
}

@media only screen and (max-width: 600px) {
#elementID {
left: 9.4em;
bottom: 14.4em;
}
}
</style>

--- IMAGE ---
position: absolute;
left: 16.3em;
bottom: -4.5em;
--> MOBILE SETTING:
left: 15.1em;
bottom: -1.7em;

--- ABOUT TEXT ---
font-family: windows;
height: 8em;
padding: 5px;
border: 2px inset;
background: white;
overflow-y: scroll;
--> MOBILE SETTING:
height: 9em;

--- ABOUT TEXT HIGHLIGHT ---
font-family: Chemre;
color: #FF80A6;

--- PROGRESS BAR ---
<div role="progressbar" class="animate">
<div style="width: 75%"></div>
</div>

--- NAVIGATION BUTTONS ---
font-family: Pixelated MS Sans Serif;
border-radius: 3px 3px 0px 0px;
box-shadow: inset -1px -0px #0a0a0a, inset 1px 1px #fff, inset -2px -0px grey, inset 2px 2px #dfdfdf;

--- MUSIC PLAYER CHANGES ---
#glenplayer02 {
position: relative;
bottom: 0;
margin-bottom: 0;
left: -3px;
margin-left: 0.3em;
right: 0;
margin-right: 0em;
display:flex;
background: #C2C2C2;
padding: 1px;
border: 3px solid;
border-style: inset;
width: 150px;
}

@media only screen and (max-width: 600px) {
#glenplayer02 {
width: 140px;
bottom: -0.2em;
}
}

--- VIO FANCLUB CONTAINER ---
width: 30%;
height: 17.2em;
border: 3px inset;
border-radius: 10px;
position: absolute;
left: 6px;
bottom: 3.4em;
--> MOBILE SETTINGS:
height: 17.2em;
bottom: 2.9em;

--- JOIN THE CLUB ---
<link
rel="stylesheet"
href="https://unpkg.com/98.css"
><div class="field-row-stacked" style="width: 100px">
<label for="text22">Email</label>
<input id="text22" type="email" />
</div>
<div class="field-row-stacked" style="width: 100px">
<label for="text23">Username</label>
<input id="text23" type="text" />
</div>
<div class="field-row-stacked" style="width: 100px">
<label for="text24">Password</label>
<input id="text24" type="password" />
</div>

<style>
@media only screen and (max-width: 600px) {
#text22, #text23, #text24 {
width: 90px;
}
}
</style>

--- SUBMIT BUTTON ---
<link rel="stylesheet" href="https://unpkg.com/7.css"><button control-id="ControlID-12" onclick="clicksound.playclip()">Submit</button>

--- TOP1  CONTAINER---
width: 50%;
position: absolute;
right: 5em;
bottom: 21em;
--> MOBILE SETTINGS:
width: 52%;
bottom: 20.4em;

--- TOP EMBED ---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="title-bar active" style ="background: #FF9EC1;">
<div class="title-bar-text">☆☆</div>
<div class="title-bar-controls">
<a href="#home" onclick="clicksound.playclip()">
<button aria-label="Minimize"></button></a>
</div>
</div>

--- BYF INFO CONTAINER ---
width: 50%;
height: 7em;
border-radius: 0 px 0px 3px 3px;
box-shadow: inset -1px -0px #999999, inset 1px 1px #fff, inset -2px -0px grey, inset 2px 2px #dfdfdf;
position: absolute;
right: 5em;
bottom: 14em;
overflow-y: scroll;
--> MOBILE SETTINGS:
width: 52%;
bottom: 13.4em;

--- BYF, DFI, ULTS, LOVES TEXT ---
font-family: windows;
padding: 5px;
border: 2px inset;
background: white;

--- BYF, DFI, ULTS, LOVES BOLD ---
font-family: dreams;
font-size: 1.5em;

--- BYF, DFI, ULTS, LOVES HIGHLIGHT ---
font-family: alstoria;
font-size: 1.3em;
color: #FF80A6;

--- TOP2 CONTAINER ---
width: 50%;
position: absolute;
right: -3em;
bottom: 12.9em;
--> MOBILE SETTINGS:
width: 52%;
bottom: 12.3em;

--- TOP2 EMBED ---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="title-bar active" style ="background: #FF9EC1;">
<div class="title-bar-text">☆☆</div>
<div class="title-bar-controls">
<a href="#home" onclick="clicksound.playclip()">
<button aria-label="Minimize"></button></a>
</div>
</div>

--- DFI INFO CONTAINER ---
width: 50%;
height: 7em;
border-radius: 0px 0px 3px 3px;
box-shadow: inset -1px -0px #999999, inset 1px 1px #fff, inset -2px -0px grey, inset 2px 2px #dfdfdf;
position: absolute;
right: -3em;
bottom: 5.9em;
overflow-y: scroll;
--> MOBILE SETTINGS:
width: 52%;
bottom: 5.3em;

--- HIYYIH IMAGE ---
border-radius: 0px 15px;
position: absolute;
left: 10.8em;
bottom: 5.3em;
--> MOBILE SETTINGS:
left: 9.4em;
bottom: 5.89em;

--- TOP3 CONTAINER ---
width: 50%;
position: absolute;
right: 5em;
bottom: 12.9em;
--> MOBILE SETTINGS:
width: 52%;
bottom: 12.3em;

--- TOP3 EMBED ---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="title-bar active" style ="background: #FF9EC1;">
<div class="title-bar-controls">
<a href="#elementID" onclick="clicksound.playclip()">
<button aria-label="Minimize"></button></a>
</div>
<div class="title-bar-text">☆☆☆</div>
</div>

--- LOVES INFO CONTAINER ---
width: 50%;
height: 7em;
border-radius: 0px 0px 3px 3px;
box-shadow: inset -1px -0px #999999, inset 1px 1px #fff, inset -2px -0px grey, inset 2px 2px #dfdfdf;
position: absolute;
right: 5em;
bottom: 5.9em;
overflow-y: scroll;
--> MOBILE SETTINGS:
width: 52%;
bottom: 5.3em;

--- TOP4 CONTAINER ---
width: 50%;
position: absolute;
right: -3em;
bottom: 21em;
--> MOBILE SETTINGS:
width: 52%;
bottom: 20.4em;

--- TOP4 EMBED ---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="title-bar active" style ="background: #FF9EC1;">
<div class="title-bar-text">☆☆☆</div>
<div class="title-bar-controls">
<a href="#elementID" onclick="clicksound.playclip()">
<button aria-label="Minimize"></button></a>
</div>
</div>

--- ULTS INFO CONTAINER ---
width: 50%;
height: 7em;
border-radius: 0px 0px 3px 3px;
box-shadow: inset -1px -0px #999999, inset 1px 1px #fff, inset -2px -0px grey, inset 2px 2px #dfdfdf;
position: absolute;
right: -3em;
bottom: 14em;
overflow-y: scroll;
--> MOBILE SETTINGS:
width: 52%;
bottom: 13.4em;

--- HYUKA IMAGE ---
border-radius: 15px 0px;
position: absolute;
left: 28.8em;
bottom: 5.3em;
--> MOBILE SETTINGS:
left: 24.3em;
bottom: 5.9em;

---TOP5 CONTAINER ---
width: 70%;
position: absolute;
right: -1.5em;
bottom: 16em;

--- TOP5 EMBED ---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="title-bar active" style ="background: #FF9EC1;">
<div class="title-bar-text">☆☆☆☆</div>
<div class="title-bar-controls">
<a href="#home" onclick="clicksound.playclip()">
<button aria-label="Minimize"></button></a>
</div>
</div>

--- RATE INFO CONTAINER ---
width: 70%;
height: 9em;
border-radius: 0px 0px 3px 3px;
box-shadow: inset -1px -0px #999999, inset 1px 1px #fff, inset -2px -0px grey, inset 2px 2px #dfdfdf;
position: absolute;
right: -1.5em;
bottom: 7em;
overflow-y: scroll;
--> MOBILE SETTINGS:
padding-right: 1px;

--- RATE TEXT ---
font-family: windows;
height: 15.5em;
padding: 5px;
border: 2px inset;
background: white;
--> MOBILE SETTINGS:
height: 16.5em;

--- RATE BOLD ---
font-family: dreams;

--- RATE LINK ---
color: #4F4F4F;

--- RATE HIGHLIGHT ---
font-family: Chemre;
font-size: 1.2em;
color: #FF80A6;

--- RATE OPTION ---
<select control-id="ControlID-33">
<option>5 - Incredible!</option>
<option>4 - Great!</option>
<option selected="">3 - Pretty good</option>
<option>2 - Not so great</option>
<option>1 - Unfortunate</option>
</select>

<style>
#elementID {
position: absolute;
left: 1em;
bottom: 8.4em;
}
</style>

--- BOTTOM ---
border-radius: 0px 0px 5px 5px;

--- CREDIT BUTTON ---
font-family: windows;
text-align: left;
border: 2.5px inset;

--- VOLUME SLIDER ---
<div class="field-row" style="width: 200px">
<label for="range25">Volume:</label>
<label for="range26">Low</label>
<input id="range26" type="range" min="1" max="11" value="5" />
<label for="range27">High</label>
</div>

--- DRAGGABLE ---
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$( function() {
$( "#elementID" ).draggable();
} );
$( function() {
$( "#elementID" ).draggable();
} );
</script>

--- ANI1 ---
<style>
#elementID, #elementID, #elementID, #elementID, #elementID, #elementID {
-webkit-animation: fade-in 1.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
animation: fade-in 1.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}

/* ----------------------------------------------
* Generated by Animista on 2023-3-26 20:52:17
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation fade-in
* ----------------------------------------
*/
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

--- ANI2 ---
<style>
#elementID, #elementID, #elementID, #elementID {
-webkit-animation: fade-in 1.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
animation: fade-in 1.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
}

/* ----------------------------------------------
* Generated by Animista on 2023-3-26 20:53:21
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation fade-in
* ----------------------------------------
*/
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

--- IMAGE ANI ---
<style>
#elementID, #elementID {
-webkit-animation: fade-in 1.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1.5s both;
animation: fade-in 1.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1.5s both;
}

/* ----------------------------------------------
* Generated by Animista on 2023-3-26 20:55:26
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation fade-in
* ----------------------------------------
*/
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

--- CUSTOM HIGHLIGHT ---
<style>
::-moz-selection { /* EDIT THIS ONE TOO */
color: #4F4F4F;
background: #FF80A6;
}

::selection {
color: #4F4F4F;
background: #FF80A6;
}
</style>