<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* ZOEZ STUDIO */
@font-face {
font-family: 'MSSansSerif';
src: url('https://raw.githubusercontent.com/tangrams/tangram-play/master/public/data/fonts/ms-sans-serif/MS%20Sans%20Serif.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
html, body {
background-color: #000000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
font-family: 'MSSansSerif', sans-serif !important;
}
/* Desktop */
.desktop {
width: 100%;
height: calc(100vh - 20px);
background-color: #141414;
position: relative;
overflow: hidden;
}
.desktop-icons {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(auto-fill, minmax(45px, auto));
grid-template-columns: repeat(2, 90px);
gap: 10px;
padding: 15px;
height: calc(100vh - 150px);
position: absolute;
left: 15px;
top: 15px;
overflow: hidden;
}
/* Taskbar */
.taskbar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
background-color: #c0c0c0;
border-top: 2px solid #ffffff;
display: flex;
justify-content: space-between;
z-index: 1000;
}
.start-button {
height: 100%;
width: auto;
display: flex;
align-items: center;
padding: 0 10px;
}
.start-button img {
height: 15px;
}
.start-menu {
position: absolute;
bottom: 20px;
left: 0;
width: 150px;
background: #c0c0c0;
border: 1px solid #000;
z-index: 1001;
}
.start-menu-item {
padding: 5px 10px;
cursor: pointer;
font-size: 11px;
border-bottom: 1px solid #a0a0a0;
}
.start-menu-item:hover {
background: #0078d4;
color: white;
}
.taskbar-status {
height: 100%;
display: flex;
align-items: center;
padding-right: 10px;
}
.taskbar-status img {
height: 10px;
}
/* SMALLER DESKTOP ICONS */
.desktop-icon {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
text-align: center;
}
.icon-img {
width: 32px;
height: 32px;
background-color: ;
border: ;
margin-bottom: 3px;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
}
.icon-text {
color: white;
font-size: 10px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
max-width: 60px;
text-align: center;
word-wrap: break-word;
}
/* Paint Application - REDUCED SIZE */
.paint-container {
width: 80%;
max-width: 800px;
height: 80vh;
max-height: 550px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #333;
border-radius: 0px;
background-color: #141414;
display: flex;
flex-direction: column;
box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
z-index: 100;
display: none;
}
/* Paint title bar */
.paint-title-bar {
height: 22px;
min-height: 24px;
background: linear-gradient(155deg, #000 60%, #ffffff 210%);
border-radius: 0;
display: flex;
align-items: center;
padding: 0 10px;
position: relative;
}
.paint-title-bar-content {
display: flex;
align-items: center;
}
.title-icon {
height: 15px;
width: 15px;
margin-right: 8px;
}
.title-text {
color: #fff;
font-size: 12px;
font-weight: regular;
}
.window-controls {
position: absolute;
right: 10px;
display: flex;
}
.control-btn {
width: 16px;
height: 16px;
background: ;
border: ;
border-radius: 0%;
margin-left: 2px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.minimize::after {
content: "";
width: 8px;
height: 2px;
background: #666666;
}
.maximize::after {
content: "";
width: 10px;
height: 10px;
}
.close::after {
content: ;
color: #666666;
font-size: 12px;
}
/* Menu bar */
.paint-menu-bar {
height: 25px;
min-height: 25px;
background: #141414;
border-bottom: 1px solid #333;
display: flex;
align-items: center;
padding: 0 20px;
}
.paint-menu-item {
color: #fff;
font-family: 'MSSansSerif', sans-serif !important;
font-size: 12px;
margin-right: 20px;
}
.paint-window .control-btn.minimize,
.paint-window .control-btn.maximize {
display: none;
}
.button-bar img,
.chat-area img,
.aim-window img {
max-width: 100%;
height: auto;
}
}
/* Canvas area */
.canvas-area {
flex: 1;
background: #141414;
border-bottom: 1px solid #333;
border-radius: 0px;
overflow: hidden;
margin-bottom: 0px;
display: flex;
min-height: 0;
}
.paint-menu-item span:first-child {
text-decoration: underline;
}
/* Main content area */
.content-area {
display: flex;
flex: 1;
overflow: hidden;
min-height: 0;
position: relative;
}
/* Toolbox */
.toolbox {
width: 80px;
min-width: 55px;
background: #141414;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: -10px;
bottom: 5px;
z-index: 0;
}
/* Sidebar image co/ntainer */
.sidebar-image {
width: 111px;
height: 429px;
display: flex;
justify-content: left;
align-items: top;
overflow: hidden;
}
.sidebar-image img {
width: 90px;
height: 200px;
object-fit: contain;
}
/* Canvas wrapper - to properly align with toolbar */
.canvas-wrapper {
flex: 1;
padding: 5px;
margin-left: 55px;
display: flex;
flex-direction: column;
min-height: 0;
}
/* Scrollable content inside canvas */
.scrollbox {
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: auto;
padding: 0px;
}
.content {
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.image-container {
width: 100%;
height: 100%;
text-align: center;
background-color: #141414;
display: flex;
justify-content: center;
align-items: center;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
.bottom-panel {
height: 30px;
min-height: 50px;
display: flex;
background-color: #141414;
padding: 0;
margin: 0;
width: 100%;
}
.color-palette-container {
height: 40px;
width: 100%;
display: flex;
align-items: center;
padding-left: 5px;
padding-top: 5px;
position: relative;
left: 0;
}
.color-palette-img {
height: auto;
width: 100%;
max-height: 100%;
object-fit: contain;
object-position: left;
}
.paint-status-bar {
height: 24px;
min-height: 24px;
display: flex;
background-color: #000;
border-top: 1px solid #333;
margin-top: 5px;
}
.status-section {
height: 100%;
display: flex;
align-items: center;
padding: 0 10px;
color: #ffffff;
font-size: 12px;
background-color: #141414;
border-right: 1px solid #333;
}
.status-section:first-child {
flex: 3;
}
.status-section:nth-child(2) {
flex: 2;
}
.status-section:last-child {
flex: 1;
border-right: none;
justify-content: flex-end;
}
.time-location {
font-family: 'MSSansSerif', sans-serif !important;
font-size: 11px;
}
/* AIM Chat Window */
.aim-window {
width: 265px;
background: #c0c0c0;
border: 1px solid #333;
font-size: 11px;
font-family: 'MSSansSerif', sans-serif !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
z-index: 200;
display: none;
}
.aim-title-bar {
background: #060099;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 3px;
font-size: 11px;
font-family: 'MSSansSerif', sans-serif !important;
height: 18px;
}
.aim-title img {
height: 1em;
vertical-align: middle;
margin-right: 4px;
}
.aim-title {
margin-left: 2px;
}
.aim-window-controls {
display: flex;
}
.aim-window-controls div {
width: 14px;
height: 14px;
margin-left: 2px;
font-size: 10px;
line-height: 14px;
text-align: center;
font-weight: bold;
cursor: pointer;
}
.aim-menu-bar {
background: #c0c0c0;
padding: 1px 0;
border-bottom: 1px solid #a5a5a5;
display: flex;
}
.aim-menu-item {
padding: 2px 5px;
margin-right: 5px;
font-size: 11px;
font-family: 'MSSansSerif', sans-serif !important;
}
.aim-menu-item span {
text-decoration: underline;
}
.chat-area {
height: 180px;
padding: 5px;
background: #fff;
border: 1px solid #a5a5a5;
margin: 5px;
overflow-y: auto;
font-size: 11px;
font-family: 'MSSansSerif', sans-serif !important;
}
.input-box {
margin: 0 5px 5px 5px;
border: 1px solid #a5a5a5;
background: #fff;
height: 60px;
padding: 3px;
width: calc(100% - 18px);
font-size: 11px;
font-family: 'MSSansSerif', sans-serif !important;
display: block;
vertical-align: top;
resize: none;
}
.button-bar {
display: flex;
padding: 5px;
background: #c0c0c0;
justify-content: center;
align-items: center;
}
.buttons-left {
display: flex;
}
.button {
margin-right: 3px;
width: 22px;
height: 22px;
background: #c0c0c0;
border: 1px solid #a5a5a5;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 0px rgba(255,255,255,0.7), -1px -1px 0px rgba(0,0,0,0.1);
}
.send-button {
cursor: pointer;
}
.away-message {
color: #c00;
font-weight: bold;
}
.message {
margin-bottom: 8px;
}
.message-text {
margin-top: 4px;
}
.user {
color: #0000cc;
font-weight: bold;
}
.aim-status-bar {
background: #c0c0c0;
border-top: 1px solid #a5a5a5;
padding: 3px 5px;
font-size: 11px;
display: flex;
justify-content: space-between;
}
/* Media Queries */
@media (max-width: 768px) {
.aim-title img {
height: 1em;
margin-right: 3px;
}
}
@media (max-width: 900px) and (min-width: 769px) {
.paint-container {
height: 80vh;
width: 85%;
}
.paint-menu-item {
font-size: 11px;
margin-right: 15px;
}
.desktop-icons {
grid-template-columns: repeat(2, 80px);
grid-auto-flow: column;
gap: 8px;
height: calc(100vh - 60px);
}
.icon-img {
width: 28px;
height: 28px;
}
.icon-text {
font-size: 9px;
max-width: 50px;
}
}
@media (max-width: 768px) {
.desktop-icons {
grid-template-columns: repeat(2, 1fr);
width: 130px;
left: 10px;
top: 10px;
gap: 8px;
}
.icon-img {
width: 24px;
height: 24px;
font-size: 8px;
}
.icon-text {
font-size: 8px;
max-width: 40px;
}
.taskbar {
height: 20px;
}
.start-button img, .taskbar-status img {
height: 15x;
}
/* Paint container - mobile version */
.paint-container.mobile {
width: 90%;
height: 85vh;
max-height: 85vh;
margin: 0;
border-radius: 0;
}
/* AIM chat window - mobile version */
.aim-window {
width: 90%;
max-width: 300px;
}
.chat-area {
height: 150px;
}
.input-box {
height: 50px;
}
.paint-menu-item:nth-child(n+4) {
display: none;
}
/* Mobile adjustments */
@media (max-width: 768px) {
body {
align-items: flex-start;
}
.paint-container {
width: 100%;
height: 100vh;
max-height: 100vh;
margin: 0;
border-radius: 0;
}
.content-area {
flex-direction: column;
}
/* Hide toolbox in mobile view */
.toolbox {
display: none;
}
/* Hide bottom panel in mobile view */
.bottom-panel {
display: none;
}
/* Adjust status bar for mobile */
.status-bar {
height: 20px;
min-height: 20px;
}
.status-section {
font-size: 10px;
padding: 0 5px;
}
.canvas-wrapper {
flex: 1;
min-height: 0; /* Critical for scrolling */
padding: 0; /* Remove padding in mobile */
margin-left: 0; /* Reset margin for mobile */
}
.canvas-area {
border-radius: 0;
margin-bottom: 0;
border-left: none;
border-right: none;
}
/* Hide some UI elements on mobile to save space */
.menu-item:nth-child(n+4) {
display: none;
}
}
}
/* Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #000;
}
::-webkit-scrollbar-thumb {
background: #000;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #141414;
}
.aim-window ::-webkit-scrollbar-thumb {
background: #c0c0c0;
}
.aim-window ::-webkit-scrollbar-thumb:hover {
background: #a0a0a0;
}
.taskbar-time-display {
font-family: 'MSSansSerif', sans-serif !important;
font-size: 8px;
font-weight: normal;
background-color: transparent;
border:none;
padding: 1px 8px;
color: #000;
margin-right: 8px;
display: flex;
align-items: center;
height: 12px;
order: 2;
margin-left: 8px;
}
.taskbar-icons {
display: flex;
align-items: center;
order: 1;
margin-right: px;
border: 1px inset #989898;
background-color: #c0c0c0;
padding: 2px 5px;
}
#time-display {
display: none;
}
@media (max-width: 768px) {
.paint-status-bar {
display: none;
}
.aim-window-controls div:not(:last-child) {
display: none;
}
@media (max-width: 768px) {
.paint-container .control-btn.minimize,
.paint-container .control-btn.maximize,
.aim-window-controls div:not(:last-child) {
display: none !important;
}
.taskbar-status {
height: 100%;
display: flex;
align-items: center;
padding-right: 10px;
border: 1px inset #989898;
background-color: #c0c0c0;
margin-right: 5px;
}
#paintWindow {
z-index: 100;
}
#aimWindow {
z-index: 101;
}
.taskbar-tab {
display: inline-flex;
align-items: center;
padding: 2px 8px;
margin: 2px;
background: #c0c0c0;
border: 1px outset #c0c0c0;
cursor: pointer;
font-size: 11px;
}
.taskbar-tab img {
width: 16px;
height: 16px;
margin-right: 4px;
}
.taskbar-tab:hover {
background: #d0d0d0;
}
</style>
</head>
<body>
<div class="desktop">
<!-- Desktop Icons Grid -->
<div class="desktop-icons">
<div class="desktop-icon" id="paintIcon">
<div class="icon-img"><img src="https://64.media.tumblr.com/2ea1a4766e8f72bc92d40034117dfff0/86f093f9c04e7462-11/s540x810/396899e7c8a64adf221cd5f915e0a9fa5d693597.pnj" width="50" height="50"></div>
<div class="icon-text">Paint</div>
</div>
<div class="desktop-icon" id="notepadIcon">
<div class="icon-img"><img src="https://www.dropbox.com/scl/fi/fcth4iy3n9bpdi963muop/notepepad.png?rlkey=r8k8n34fjmc7vh0t8g29s7buc&st=s0661t3q&raw=1" width="50" height="50"></div>
<div class="icon-text">Notepad</div>
</div>
<div class="desktop-icon" id="aimIcon">
<div class="icon-img"><img src="https://www.dropbox.com/scl/fi/lkgyoq1idyqe9og17stnk/aim2.png?rlkey=zaghar5cgpxhvdujfth3fv1a4&st=zvkaprsv&raw=1" width="50" height="50"></div>
<div class="icon-text">AIM</div>
</div>
<div class="desktop-icon">
<div class="icon-img"><img src="https://64.media.tumblr.com/c70c79883574140f0d64f414b230db91/f5067c93b930da29-8b/s400x600/e5ccc02e8ce4334f8f22f24883b74e5195f6fa09.pnj" width="50" height="50"></div>
<div class="icon-text">Documents</div>
</div>
<div class="desktop-icon">
<div class="icon-img"><img src="https://www.dropbox.com/scl/fi/82nzehajzp56rnlx8uwjx/my-com.png?rlkey=3h93lomsvrfsdfeil4idqg9rs&st=n1513fz5&raw=1" width="50" height="50"></div>
<div class="icon-text">Computer</div>
</div>
<div class="desktop-icon">
<div class="icon-img"><img src="https://64.media.tumblr.com/133e54c1a3454ced4ccb352a3cd27d26/f5067c93b930da29-02/s400x600/9e54eb0c2b83c7567371827fbbdfb48269401650.pnj" width="50" height="50"></div>
<div class="icon-text">YouTube</div>
</div>
<div class="desktop-icon">
<div class="icon-img"><img src="https://www.dropbox.com/scl/fi/uzsx9iqbrn1vdmzddfbyj/recyle-bin.png?rlkey=mhy4mgog6qhliehplsbissqtf&st=ghy17dnh&raw=1" width="50" height="50"></div>
<div class="icon-text">Recycle Bin</div>
</div>
<div class="desktop-icon">
<div class="icon-img"><img src="https://www.dropbox.com/scl/fi/ljkyiboyt5hk9qv9fxzkx/int-explorer.png?rlkey=t10ldc2pqeaod6c8z9eh75g12&st=tp7y8w8k&raw=1" width="50" height="50"></div>
<div class="icon-text">Internet</div>
</div>
<div class="desktop-icon">
<div class="icon-img"><img src="https://64.media.tumblr.com/226f053e3cde831b5fc9bb9bdac32bbf/f5067c93b930da29-dc/s400x600/36e8885809f558c15ff9c986a8aeb32483073b72.pnj" width="50px" height="50px"></div>
<div class="icon-text">Windows Media Player</div>
</div>
<div class="desktop-icon">
<div class="icon-img">XL</div>
<div class="icon-text">Minesweeper</div>
</div>
<div class="desktop-icon">
<div class="icon-img"><a href="mailto:itszoez@outlook.com"><img src="https://64.media.tumblr.com/009e1747ef5ed2ca787951eb70a9747e/b0e57707dd2b0dc2-cc/s540x810/36a1c35045fee97d0aad41da0ca91d79ad276922.pnj" width="50px" height="50px"></a></div>
<div class="icon-text">Outlook</div>
</div>
<div class="desktop-icon">
<div class="icon-img"><img src="https://64.media.tumblr.com/3e46a71a42442b553ab6db527215a4d5/f5067c93b930da29-65/s400x600/7a3007a07c2e398e0ba8defecffe0989ae91eb11.pnj" width="50" height="50"></div>
<div class="icon-text">Limewire</div>
</div>
</div>
<!-- Paint Application -->
<div class="paint-container" id="paintWindow">
<!-- Title Bar -->
<div class="paint-title-bar">
<div class="paint-title-bar-content">
<img src="/api/placeholder/20/20" alt="App Icon" class="title-icon" id="title-icon">
<div class="title-text" id="title-text">Zoez Studio.jpeg - Paint</div>
</div>
<div class="window-controls">
<div class="control-btn minimize" id="paintMinimize"><img src="https://64.media.tumblr.com/7feb69d166fe93c1926fe08076b6b4c1/63ca125b685903fb-93/s540x810/90440e54ee4f1cd567ad7c77562b7201d8658bc1.pnj" width="16px" height="14px"></div>
<div class="control-btn maximize" id="paintMaximize"><img src="https://64.media.tumblr.com/d4759f3f1645b003367026c18330a112/63ca125b685903fb-bc/s540x810/c6beafff858bef363cc65f08a6331987f349c504.pnj" width="16px" height="14px"></div>
<div class="control-btn close" id="paintClose"><img src="https://64.media.tumblr.com/bcb01a18c78a6ec67762acefe16ad305/63ca125b685903fb-5c/s540x810/c3940ffa0e1971e7fd5567eb66f4f0e33da3ea33.pnj" width="16px" height="14px"></div>
</div>
</div>
<!-- Menu Bar -->
<div class="paint-menu-bar">
<div class="paint-menu-item"><span>F</span>ile</div>
<div class="paint-menu-item"><span>E</span>dit</div>
<div class="paint-menu-item"><span>V</span>iew</div>
<div class="paint-menu-item"><span>I</span>mage</div>
<div class="paint-menu-item"><span>C</span>olors</div>
<div class="paint-menu-item"><span>H</span>elp</div>
<div class="paint-menu-item"><span>E</span>xtras</div>
</div>
<!-- Main Content Area -->
<div class="content-area">
<!-- Toolbox with image replacing the button grid -->
<div class="toolbox">
<div class="sidebar-image">
<!-- Replace with your actual image URL -->
<img src="https://64.media.tumblr.com/4c57e8194797b0ca8575520fa5a9aa72/ce4dd6e127d0ddd6-a7/s540x810/2112dc573fb6743dda8aef96b5ab3f3b5c1e2792.jpg">
</div>
</div>
<!-- Canvas Area -->
<div class="canvas-wrapper">
<div class="canvas-area">
<div class="scrollbox">
<div class="content">
<!-- Single image that fills the canvas -->
<div class="image-container">
<img src="https://64.media.tumblr.com/9809fe9b979f23ccc4cb1fbfb217c0b3/034dd138859ac05f-42/s1280x1920/23d3bb9327098a049957a000571986984acea099.jpg" alt="Image" id="paintImage">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Panel with Color Palette -->
<div class="bottom-panel">
<div class="color-palette-container">
<img src="https://64.media.tumblr.com/3a2f7cc950b34364aa5fdd544f013a43/ce4dd6e127d0ddd6-7a/s640x960/7d43b671c58942b7c4a5ccf97d33a50708bef906.jpg" alt="Color Palette" class="color-palette-img">
</div>
</div>
<!-- Status Bar -->
<div class="paint-status-bar">
<div class="status-section">Draws using an airbrush of the selected size.</div>
<div class="status-section">Second section content</div>
<div class="status-section time-location"> Chicago, IL est. 2023
<span id="location-display"></span>
<span id="time-display"></span>
</div>
</div>
</div>
<!-- AIM Chat Window -->
<div class="aim-window" id="aimWindow">
<!-- Title Bar -->
<div class="aim-title-bar">
<div class="aim-title"><img src="https://64.media.tumblr.com/aa594d6c6b65de86217969e7789b72cc/b0e57707dd2b0dc2-33/s75x75_c1/b655416904a56a6a0eebe0438f4bcf5c03b4d7a1.pnj" width:"2px" height="2px"> InstantChat - x.R4Yz.g0t.b4nDz.x</div>
<div class="aim-window-controls">
<div style="background: transparent" id="aimMinimize"><img src="https://64.media.tumblr.com/b28a0e40a01ef23e6eb2634439998829/63ca125b685903fb-34/s540x810/5e945aa3fe593c297a3c8bf0defefbb3899d6da0.pnj"></div>
<div style="background: transparent;" id="aimMaximize"><img src="https://64.media.tumblr.com/d788b0b8dd8dbfe04881144e15d1c74f/63ca125b685903fb-71/s540x810/f2dece90a421df02bc6e275724a65a229b41a0f8.pnj"></div>
<div style="background: transparent" id="aimClose"><img src="https://64.media.tumblr.com/df184f9d0ae815e7e891ddca589f98db/63ca125b685903fb-00/s540x810/d5779d4963420e446827de95a53507a22aa0e2f1.pnj"></div>
</div>
</div>
<!-- Menu Bar -->
<div class="aim-menu-bar">
<div class="aim-menu-item"><span>F</span>ile</div>
<div class="aim-menu-item"><span>E</span>dit</div>
<div class="aim-menu-item"><span>V</span>iew</div>
<div class="aim-menu-item"><span>P</span>eople</div>
</div>
<!-- Chat Area -->
<div class="chat-area" id="chatArea">
<!-- Messages will appear here -->
</div>
<div class="button-bar">
<center>
<img src="https://64.media.tumblr.com/9630fd4cea2a7f08be06a4d3b2e1be70/189d2b26502c1241-65/s400x600/aa2bb5f53f8056b9566a939c5bb0cfdd3787eeac.pnj">
</center>
</div>
<!-- Input Box -->
<form id="aimForm">
<textarea id="userMessage" class="input-box" placeholder="A contact box for business inquiries or sweet msgs. If you would like a reply, leave a name and email. If direct email is more convenient, you can msg itszoez@outlook.com. Thanks for being here <3
(click the send button to send :])"></textarea>
</form>
<!-- Button Bar -->
<div class="button-bar">
<img src="https://64.media.tumblr.com/cdc0b670cfc8e46113b85321377d1bb8/238d7953a876f328-7b/s250x400/ca682cfe1ad14a40f179d1b8b21066a46285e7a1.pnj">
<div class="send-button" id="sendButton">
<img src="https://64.media.tumblr.com/b17f7a294952aae22b2fa7c93882a888/238d7953a876f328-9f/s75x75_c1/ebd9e28aaed6bcbfa81d3752d782c75c632609b8.pnj">
</div>
</div>
<!-- Status Bar -->
<div class="aim-status-bar">
<div>Warning Level: 0%</div>
<div>Online</div>
</div>
</div>
<audio id="aimOpenSound" preload="auto">
<source src="https://www.dropbox.com/scl/fi/sfx2s00jcyu8tv341qp0e/dooropen.wav?rlkey=qkbe03t6o1ltvha8chdradgqd&st=bpjtd8zy&raw=1" type="audio/wav">
</audio>
<audio id="aimCloseSound" preload="auto">
<source src="https://www.dropbox.com/scl/fi/ejz21x3fq430133kjblwf/doorslam.wav?rlkey=42ff8rlssfujv7wyc4rp8rgbl&st=nmd7jo3r&raw=1" type="audio/wav">
</audio>
<audio id="messageSendSound" preload="auto">
<source src="https://www.dropbox.com/scl/fi/a1vdkum14lxw2diqd2277/imsend.wav?rlkey=r4xgq44tt5bkwr1eenjf693y1&st=lf26x3yb&raw=1">
</audio>
<audio id="messageReceiveSound" preload="auto">
<source src="https://www.dropbox.com/scl/fi/8l2bk5182il6mm3ic40ux/imrcv.wav?rlkey=mymr0lmxd3r2nebph6fkr8h3e&st=wwwjcrey&raw=1">
</audio>
<!-- Taskbar -->
<div class="taskbar">
<div class="start-button">
<img src="https://www.dropbox.com/scl/fi/dr1kpgufv8xqsbpgqvm71/start-button.png?rlkey=2qpmj6q67vlps2cts5q5ft2hw&st=m0ixutm6&raw=1" alt="Start Button" height="12px">
<div class="start-menu" id="startMenu" style="display: none;">
</div>
</div>
<div class="taskbar-status">
<div class="taskbar-time-display">
<span id="time-display">12:00 PM</span>
</div>
</div>
<div class="taskbar-status">
<div class="taskbar-icons">
<img src="https://64.media.tumblr.com/2992e3d0e77a88ac067d75fc938f35d6/f7c09f8ffaea550c-13/s75x75_c1/4162fe3ecfc10c75d84d45ba60258a1862a4c437.pnj">
<div id="taskbar-time" class="taskbar-time-display">
</div></div>
</div>
</div>
<div id="paintTaskbarTab" class="taskbar-tab" style="display: none;">
<img src="https://64.media.tumblr.com/687283713f9c31bc49a7c4bf9b5409d4/f7c09f8ffaea550c-c4/s75x75_c1/2107406921a6e12e1ef9b548675a8c76c5b3a106.pnj" alt="Paint">
<span>Paint</span>
</div>
<div id="aimTaskbarTab" class="taskbar-tab" style="display: none;">
<img src="https://64.media.tumblr.com/8f2c7f35a09a2dfc2ef8f2264d7cc057/b0e57707dd2b0dc2-ae/s75x75_c1/1210c04a28de63c4a00469b97bbe58beca48fc39.pnj" alt="AIM">
<span>AIM</span>
</div>
</div>
<script>
// Function to update time display
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('time-display').textContent = timeString;
}
// Update time every second
setInterval(updateTime, 1000);
updateTime(); // Initialize
// Check if mobile
function isMobile() {
return window.innerWidth <= 768;
}
// Desktop icons functionality
document.getElementById('paintIcon').addEventListener('click', function() {
// Only open paint on desktop
if (!isMobile()) {
document.getElementById('paintWindow').style.display = 'flex';
bringToFront(document.getElementById('paintWindow'));
}
});
// Notepad icon opens paint app on mobile only
document.getElementById('notepadIcon').addEventListener('click', function() {
// Only open paint on mobile
if (isMobile()) {
document.getElementById('paintWindow').style.display = 'flex';
document.getElementById('paintWindow').classList.add('mobile');
document.getElementById('aimWindow').style.display = 'none';
}
});
document.getElementById('aimIcon').addEventListener('click', function() {
playSound('aimOpenSound');
document.getElementById('aimWindow').style.display = 'block';
bringToFront(document.getElementById('aimWindow'));
});
// Paint window controls
document.getElementById('paintClose').addEventListener('click', function() {
document.getElementById('paintWindow').style.display = 'none';
});
document.getElementById('paintMinimize').addEventListener('click', function() {
document.getElementById('paintWindow').style.display = 'none';
});
// AIM window controls
document.getElementById('aimClose').addEventListener('click', function() {
playSound('aimCloseSound');
document.getElementById('aimWindow').style.display = 'none';
});
document.getElementById('aimMinimize').addEventListener('click', function() {
document.getElementById('aimWindow').style.display = 'none';
});
// AIM chat functionality
document.getElementById('sendButton').addEventListener('click', function() {
sendMessage();
});
function sendMessage() {
const messageInput = document.getElementById('userMessage');
const message = messageInput.value.trim();
if (message) {
const chatArea = document.getElementById('chatArea');
const messageElement = document.createElement('div');
messageElement.className = 'message';
const timestamp = new Date().toLocaleTimeString();
messageElement.innerHTML = `<span class="user">0N3_F0RTY_B0SS_93</span> ${message}`;
chatArea.appendChild(messageElement);
playSound('messageSendSound');
chatArea.scrollTop = chatArea.scrollHeight;
// Clear input field
messageInput.value = '';
// Bot response
setTimeout(function() {
const botMessage = document.createElement('div');
botMessage.className = 'message';
const botTimestamp = new Date().toLocaleTimeString();
botMessage.innerHTML = `<span class="user" style="color: #c00; font-weight: bold;"">AwayBot:</span> EmMa’S mOm CaUgHt uS h0tBoXinG tHe WrAnGLER lAST NiGHT <br><br>s0 N0W i*M gR0uNdEd<br><br>leaVE 1 :]`;
chatArea.appendChild(botMessage);
playSound('messageReceiveSound');
chatArea.scrollTop = chatArea.scrollHeight;
}, 1000);
}
}
// Handle resize events
window.addEventListener('resize', function() {
// Add or remove mobile class based on screen size
if (isMobile()) {
document.getElementById('paintWindow').classList.add('mobile');
} else {
document.getElementById('paintWindow').classList.remove('mobile');
}
});
// Initialize on load
if (isMobile()) {
document.getElementById('paintWindow').classList.add('mobile');
}
// Check if mobile view and change title and icon
function checkMobileView() {
const titleText = document.getElementById('title-text');
const titleIcon = document.getElementById('title-icon');
if (window.innerWidth <= 768) {
titleText.textContent = "Zoez Studio.txt - Notepad";
titleIcon.src = "https://64.media.tumblr.com/8f2c7f35a09a2dfc2ef8f2264d7cc057/b0e57707dd2b0dc2-ae/s75x75_c1/1210c04a28de63c4a00469b97bbe58beca48fc39.pnj"; // Change icon for mobile
} else {
titleText.textContent = "Zoez Studio.jpeg - Paint";
titleIcon.src = "https://64.media.tumblr.com/687283713f9c31bc49a7c4bf9b5409d4/f7c09f8ffaea550c-c4/s75x75_c1/2107406921a6e12e1ef9b548675a8c76c5b3a106.pnj"; // Default icon
}
}
// Call checkMobileView initially and whenever window is resized
checkMobileView();
window.addEventListener('resize', checkMobileView);
// Function to update time display
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('time-display').textContent = timeString;
// Update the taskbar time display
const taskbarTime = document.getElementById('taskbar-time');
if (taskbarTime) {
taskbarTime.textContent = timeString;
}
}
// Update time every second
setInterval(updateTime, 1000);
updateTime(); // Initialize
// Paint app scrolling setup
document.getElementById('paintIcon').addEventListener('click', function() {
// Only open paint on desktop
if (!isMobile()) {
document.getElementById('paintWindow').style.display = 'flex';
// Enable scrolling for paint canvas
setTimeout(() => {
const scrollbox = document.querySelector('.scrollbox');
const canvasArea = document.querySelector('.canvas-area');
if (scrollbox) {
scrollbox.style.overflowY = 'auto';
scrollbox.style.overflowX = 'auto';
}
if (canvasArea) {
canvasArea.style.overflow = 'auto';
}
}, 100);
}
});
document.getElementById('notepadIcon').addEventListener('click', function() {
// Only open paint on mobile
if (isMobile()) {
document.getElementById('paintWindow').style.display = 'flex';
document.getElementById('paintWindow').classList.add('mobile');
document.getElementById('aimWindow').style.display = 'none';
// Enable scrolling for paint canvas
setTimeout(() => {
const scrollbox = document.querySelector('.scrollbox');
const canvasArea = document.querySelector('.canvas-area');
if (scrollbox) {
scrollbox.style.overflowY = 'auto';
scrollbox.style.overflowX = 'auto';
}
if (canvasArea) {
canvasArea.style.overflow = 'auto';
}
}, 100);
}
});
function makeDraggable(windowElement, handleElement) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
handleElement.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
windowElement.style.top = (windowElement.offsetTop - pos2) + "px";
windowElement.style.left = (windowElement.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
// Initialize dragging for existing windows
makeDraggable(document.getElementById('paintWindow'), document.querySelector('.paint-title-bar'));
makeDraggable(document.getElementById('aimWindow'), document.querySelector('.aim-title-bar'));
function focusWindow(windowId) {
const window = document.getElementById(windowId);
if (window) {
window.style.display = 'flex';
window.style.zIndex = 1000;
}
}
function playSound(soundId) {
const audio = document.getElementById(soundId);
if (audio) {
audio.currentTime = 0;
audio.play().catch(e => console.log('Sound play failed:', e));
}
}
function bringToFront(windowElement) {
const allWindows = document.querySelectorAll('[id$="Window"]');
let maxZ = 100;
allWindows.forEach(win => {
const z = parseInt(window.getComputedStyle(win).zIndex) || 100;
if (z > maxZ) maxZ = z;
});
windowElement.style.zIndex = maxZ + 1;
}
// Add click listeners to bring windows to front
document.getElementById('paintWindow').addEventListener('click', function() {
bringToFront(this);
});
document.getElementById('aimWindow').addEventListener('click', function() {
bringToFront(this);
});
lerfkd </script>
</body>
</html>