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!