@Wynle on WumpOS · 16 days ago

4h 32m 9s logged

Devlog #1 WumpOS

Hai! This time i have been working on a cool discord themed WebOS!! :3 Also. Sorry for not posting in a while :c Basically im making a web os… Thats discord??

Dunno what to put here Meow :3

What i am planning to add/have added:

☒ Functional window
☒ Discord
☒ Functional Taskbar
☒ Ability to open/close windows
☐ Fullscreen/minimize functionality
☐ Bypass stinky x-frame options thingy :c
☐ Resizing Windows :a–cat:
☐ More discord related apps :3
☐ Better styling + fun animations
☐ More functionality??
☐ Themes ig
☐ Maybe even discord client modifications? ;3 (im not sure if i’m smart enough for this one )

Quick code summary (2nd try):

~~Ok so… Um… i have. 3 main files… index.html, style.css and script.js…. So um… Yeah no get me outa here~~

Code comments. Yay! (longer summary?):

index.html

<!DOCTYPE html>

<html>
<head>
    <!--Just linking to my styling-->
    <link href="style.css" type="text/css" rel="stylesheet">
</head>

<!--Main body-->
<body>
    <!--A cool barely visible mouse highlight thing. You might see it if you squint really hard!-->
    <div class="mouse-highlight" id="mouse-highlight">
        <img src="/files/gradient.png">
    </div>
    
    <!--The actual discord web embed app-->
    <div class="discord-app" id="discord-app">
        <!--The app header. (With the close/minimize/maximize buttons)-->
        <div class="discord-app-header">
            <!--The discord logo-->
            <div class="app-title">
                <img src="link">
            </div>
            
            <!--Umm... Close buttons and stuff...-->
            <div class="app-quick-actions">
                <!--Stuff-->
            </div>
        </div>
        
         <!--The actual discord embed!-->
        <iframe src="https://discord.com/app" title="Discord" class="discord-app-iframe"></iframe>    </div>

    <!--Toolbar-->
    <div class="app-drawer">
        <div class="stored-apps">
            <div class="discord-app-icon" id="discord-app-icon">
                <svg>
                    <!--Like... Alot of svg :3 -->
                </svg>    
        </div>
        </div>
        <div class="sys-tray">
            <!--Clock-->
            <div class="sys-tray-time" id="sys-tray-time"></div>
        </div>
    </div>

    <!--Link to script-->
    <script src="script.js"></script>
</body>
</html>

If you have any tips or questions. Just contact me and i’ll (hopefully) answer

Sorry, i was unable to fit in ALL the code, because of this new unfun stardance character limit. So this will have to do :3

If you REALLY want to. You can go check out the ENTIRE code comments and stuff here: https://docs.google.com/document/d/1a7nFdd5QzjToKjkDGihG3ucTG-80l20KhZiGFJbNsLA/edit?usp=sharing (if u dont see anything in the document im prob still writing or got lazy…)

mreow

Links

GitHub - https://github.com/noname9ui-lang/WumpOS
Github Pages - https://noname9ui-lang.github.io/WumpOS

Umm… I am making a Discord OS… So it would only be fair to share my discord acc, nah. Sucks to suck. You only get my slack acc ;3
https://hackclub.enterprise.slack.com/team/U0BDP1ADA65

Ok bai. Tysm for reading!

Open comments for this post

@Wynle · about 2 months ago

😭

Open comments for this post

@jam06452 on Cheesing Stardance · 2 months ago

1h 59m 45s logged

https://stardance.hackclub.com/projects/8100

Do you want to know how computers actually work? Do you want to remove the wool placed over your eyes by modern languages? Abstraction breeds ambiguity! Crawssembly is the first step to seeing clearly. The only assembly langiage made for education. (Now as fast as native C!)

Advertaise here at, https://billboard.jam06452.uk

Open comments for this post

@Wynle · 2 months ago

Be sure to check out OUR Brothers project :3

Open comments for this post

@PiCat3 on CatOS · 2 months ago

3h 45m 40s logged

Added movable window, close,open buttons for the welcome screen and personalised the OS. Moving and closing windows works fine, but the Open function still needs some work.

Open comments for this post

@Wynle on OUROS · 2 months ago

3h 4m 8s logged

OUROS Devlog #2

Hai!! Again :3 Soo. Devlog 2!!!! <3
‎

What I added:

Another app!!!
style.css file to store my styling
Z-Index handling
The Manifesto :3
Um icon tapping… idk.
‎
‎

What I changed:

I moved my styling to style.css!!! yayay 🎉
Alr that’s all lol :3
(I genuinely was talking to myself writing this >_<)
‎

What I want to add:

More apps
Open windows show in the top bar
Minimize windows
Better art…🎨
‎

## Code summary:
index.html displays the things and makes the site not look like this: . ‎ script.js is just scripts… Makes the site better basically… style.css is just styling for index.html to make it work .
Yeah, I’m not cut out for this
‎

Quick Longer code comments

index.html

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <!--Here we have the welcome window (the leftmost window in the pic ^-^)-->
    <div id="welcome">
        <!--Ok! So this is the drag bar/title bar code. The image is the window close button-->
        <div id="welcomeheader"><img id="welcomeclose"     src="./pictures\OUROS-HAMMER-AND-SICKLE.png"
                     alt="OUROS Icon"></div>
        [welcome window stuff]
    </div>
        <!--Here we have the manifesto window code-->
    <div id="manifesto">
        <!--Same as the welcome window top bar/drag bar-->
        <div id="manifestoheader"><img id="manifestoclose" src="./pictures\OUROS-HAMMER-AND-SICKLE.png" alt="OUROS Icon"></div>
        <!--This code just gets the PDF and puts it in the window-->
        <object data="Documents\Manifesto.pdf" type="application/pdf" width="100%" height="100%">
            <a href="Manifesto.pdf">Open Manifesto PDF</a>
        </object>    </div>    <!--just the topbar in the pic -_- -->
    <div class="topbar">
        [stuff]
    </div>

    <!--Connects to the script.js file and the style.css file :3 -->
    <script src="script.js"></script>

</body>

</html>‎

script.js (I’m sorry the code here was so messy😭)

//Updates the time in the top left of the pic
function updateTime() {
    [stuff]
}

//calls the update time function every second
updateTime();
setInterval(updateTime, 1000);

//A few event listeners...
welcomeScreenClose.addEventListener("click", function() {
    closeWindow(welcomeScreen);
});
...

//Checks if a window has been clicked for zIndex stuff
function addWindowTapHandling(element) {
      element.addEventListener("mousedown", () =>
            handleWindowTap(element)
      )
}

addWindowTapHandling(welcomeScreen) 
addWindowTapHandling(manifestoWindow) 

//A few functions I don't care to explain...
[stuff]
//Makes the windows draggable
[more stuff -_-]‎

style.css

/* A lot of styling. */
[styling]

Sorry I slacked on that last one ._.
‎

Go check out the full code on GitHub + my demo!!

GitHub Repo
Github Demo
‎

Very random quote from Google:

When I give food to the poor, they call me a saint. When I ask why the poor have no food, they call me a Communist.

Open comments for this post

@Wynle on OUROS · 2 months ago

4h 1m 4s logged

Hai! :3 Sooo I made a webOS… Im not sure what to say here lol. But isnt it cool? ^-^ Wellll i had a fun time making this. Also I’m making my own art soon!
If you have any tips or sugestions comment it on this post or dm me ^-^
Also making this + the idea was kinda hilarious and the execution was probably VERY exaggerated

alsoooo heres my code :3 (more specifically the index.html)

https://docs.google.com/document/d/1xAwce50SdfhfpsL4h7owi5bCY5SORQMmgKwwx9IiHwc/edit?usp=sharing

Quick code summary:

<html>

<!-- The first part is the styling. Contained in the style -->thingy: 
<style>
    [stuff]
</style>

<!-- The rest is just page html and stuff contained here: -->
<body>
    [stuff]

    <!-- Also here we have the JavaScript connection-->
    <script src="script.js"></script>
</body>

</html>

Bad summary lol :3
Also sorry for no code comments.