Skip to content

Latest commit

 

History

History
96 lines (65 loc) · 4.26 KB

README.md

File metadata and controls

96 lines (65 loc) · 4.26 KB
Raw


Computer Logo
Web Based Windows

Web-Based-Windows is a stupid website that imitates the look and feel of early Windows operating systems.
It was created to experiment with draggable and resizable divs, as well as brutalist website design.

Key Features • How to Use • Contributing • Credits • Authors • License

screenshot

Key Features

For a live preview, visit qjack001.github.io/Web-Based-Windows/.

Resize windows:

screenshot

Move windows:

screenshot

Close and hide windows:

screenshot

How to Use

To use these windows in your own project, either fork this repository, or download the required files (draggable.js and style.css) individually.

Add the required files to the <head> element of the HTML file, and place any additional scripts or style sheets below:

<head>
  ...
  <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
  <link href="style.css" rel="stylesheet" type="text/css">
  <script src="draggable.js" type="text/javascript"></script>
</head>

To create a window, set up a new div in the <body>. Replace ADD_CUSTOM_ID with a new unique ID, and make sure that the div below it has the exact same ID, with header added to the end.

<div class="window" id="ADD_CUSTOM_ID"> 
  <div class="window-header" id="ADD_CUSTOM_IDheader"> 
    TITLE_OF_WINDOW 
    <button onclick="this.parentNode.parentNode.style.display = 'none';">X</button> 
    <button onclick="this.parentNode.parentNode.style.display = 'none';">_</button> 
  </div> 
  CONTENTS_OF_WINDOW 
</div> 
<script>dragElement(document.getElementById("ADD_CUSTOM_ID"));</script>

Custom window styles can be achieved by importing a separate stylesheet, below the required ones, and appending a newly styled class to the main window's classes. For reference, an example.html file has been included in the project.

Contributing

If you notice a bug or have a feature request, please submit an issue. If you would like to contribute to the development of the project, please create a new pull request.

Credits

Authors

Jack Guinane - Programming, designing, and maintaining.

License

This project is licensed under the MIT License - see the LICENSE file for details.