CSS Old Computer

Developer
Andy Pagès
Size
9,210 Kb
Views
34,408
  1. CSS Old Computer Previews
  2. CSS Old Computer HTML Codes
  3. CSS Old Computer CSS Codes
  4. CSS Old Computer JS Codes

How do I make an css old computer?

What is a css old computer? How do you make a css old computer? This script and codes were developed by Andy Pagès on 10 November 2022, Thursday.

CSS Old Computer Previews
IQ Test

CSS Old Computer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Old Computer </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="center"> <div class="screenBackground"> <div class="behind"></div> </div> <div class="screenBox"> <div class="frame"> <div class="screenBox2"> <div class="screenBox3"> <div class="screen"> <div class="output"> </div> </div> </div> </div> <div class="bottomFrame"> <div class="fan"> </div> <img class="logo" src="http://www.icone-png.com/png/52/51692.png"/> <div class="powerButton"> <div class="powerIcon"> </div> </div> <div class="powerLight lightOff"> </div> </div> </div> </div> <div class="screenFoot"></div> <div class="computer"> <div class="computerFrame"> <div class="computerFan1"></div> <div class="computerFan2"></div> <div class="screw1"></div> <div class="screw2"></div> <div class="computerFrame2"> <div class="floppy"> <div class="fingerGrip"></div> <div class="slot"></div> </div> <div class="socket1"></div> <div class="socket2"></div> </div> <div class="screw3"></div> <div class="screw4"></div> <div class="screw5"></div> <div class="powerButton"> <div class="buttonSlide"> <div class="computerButton computerButtonOff"></div> </div> <div class="offIndicator"></div> <div class="onIndicator"></div> </div> <div class="powerLight lightOff"> </div> </div> <p>Play with power buttons!</p>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Old Computer - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=VT323);
body { background-color: #222222;
}
.center { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; max-width: 350px; max-height: 390px;
}
.screenBox { position: relative; width: 300px; height: 270px; background-color: #e3e3e3; border-radius: 1%; left: 25px;
}
p { position: absolute; top: 70px; left: 100px; color: white; font-family: 'VT323';
}
.behind { position: absolute; width: 316px; height: 200px; top: 10px; left: 16.5px; background-color: #7a7a7a; border-radius: 2% / 50%;
}
.frame { position: absolute; width: 284px; height: 254px; background-color: #e3e3e3; left: 6px; top: 6px; border: 2px #888888 solid; border-radius: 1%;
}
.screenBox2 { position: absolute; width: 100%; height: 214px; background-color: #999999; border-bottom: 2px #888888 solid;
}
.screenBox3 { position: absolute; left: 8px; top: 8px; width: 268px; height: 198px; background-color: #7a7a7a; border-radius: 30% / 2%;
}
.screenEffect { background: repeating-linear-gradient(to bottom, #171717, #171717 1px, #121212 1px, #121212 2px);
}
.screen { position: absolute; left: 6px; top: 6px; width: 256px; height: 186px; background-color: #171717; border-radius: 50% / 8%; -webkit-box-shadow: inset 0px 10px 6px 0px #111111; cursor: text;
}
.bottomFrame { position: absolute; background-color: #e3e3e3; width: 100%; height: 32px; bottom: 0px; border-top: 2px #888888 solid;
}
.fan { position: absolute; background: repeating-linear-gradient(to right, white, white 3px, #333333 3px, #333333 6px); width: 72px; height: 100%;
}
.logo { position: absolute; top: 8px; left: 130px; width: 40px;
}
.screenBox .powerButton { position: absolute; top: 5px; left: 250px; width: 20px; height: 20px; background-color: #999999; border: 1px #7a7a7a solid; cursor: pointer;
}
.powerIcon { position: absolute; border: 1px #555555 solid; top: 4.5px; left: 4px; width: 10px; height: 10px; border-radius: 50%;
}
.screenBox .powerLight { position: absolute; width: 6px; height: 6px; top: 13px; left: 230px; border-radius: 50%;
}
.lightOn { background-color: #1BCF60; -webkit-box-shadow: 0px 1px 5px 0px #1BCF60;
}
.lightOff { background-color: #FA4646; -webkit-box-shadow: 0px 1px 5px 0px #FA4646;
}
.screenFoot { position: relative; width: 275px; height: 15px; left: 37px; background-color: #7a7a7a; -webkit-box-shadow: inset 0px 10px 6px 0px #222222;
}
.computer { position: relative; width: 100%; height: 80px; background-color: #e3e3e3; border-radius: 3px;
}
.computerFrame { position: absolute; left: 6px; top: 6px; width: 334px; height: 64px; border: 2px #888888 solid; border-radius: 3px;
}
.computerFan1, .computerFan2 { position: absolute; background: repeating-linear-gradient(to right, white, white 3px, #333333 3px, #333333 6px); height: 21.5px; width: 80px; top: 7px; left: 5px;
}
.computerFan2 { top: 35.5px;
}
div[class^='screw'] { position: absolute; width: 8px; height: 8px; background-color: #222222; border-radius: 50%;
}
.screw1 { left: 95px; top: 12px;
}
.screw2 { left: 95px; top: 42px;
}
.computerFrame2 { position: absolute; width: 130px; height: 46px; background-color: #999999; border: 2px #888888 solid; left: 115px; top: 7px; border-radius: 3px;
}
.floppy { position: absolute; width: 124px; height: 25px; left: 3px; top: 3px; background-color: #222222;
}
.fingerGrip { position: absolute; width: 30px; height: 23px; background-color: #0d0d0d; top: 1px; left: 47px; border-radius: 3px;
}
.slot { position: absolute; width: 95%; height: 5px; left: 2.5%; top: 9px; border-radius: 3px; background-color: black;
}
div[class^='socket'] { position: absolute; width: 60.5px; height: 12px; background-color: black;
}
.socket1 { top: 31px; left: 3px;
}
.socket2 { top: 31px; left: 66.5px;
}
.screw3 { left: 265px; top: 12px;
}
.screw4 { left: 288px; top: 12px;
}
.screw5 { left: 313px; top: 12px;
}
.computer .powerButton { position: absolute; width: 35px; height: 26px; left: 265px; background-color: #333333; top: 30px;
}
.buttonSlide { position: absolute; width: 90%; height: 12px; left: 5%; top: 2px; background-color: #111111; border-radius: 1px;
}
.computerButton { position: absolute; width: 45%; height: 8px; top: 2px; background-color: #FA4646; cursor: pointer;
}
.computerButtonOff { left: 8%;
}
.computerButtonOn { left: 48%;
}
.offIndicator { position: absolute; width: 4px; height: 4px; top: 16px; left: 5px; border-radius: 50%; border: 1px white solid;
}
.onIndicator { position: absolute; width: 0px; height: 6px; top: 16px; left: 28px; border-right: 1px white solid;
}
.computer .powerLight { position: absolute; width: 6px; height: 6px; border-radius: 50%; left: 315px; top: 38px;
}
.output { position: absolute; width: 95%; height: 80%; top: 20px; left: 10px; color: #33ff66; font-size: 10px; display: none; font-family: 'VT323'; overflow: auto;
}
@keyframes popup { 0% { opacity: 1; } 50% { opacity: 0; }
}
.popup { position: absolute; width: 80px; height: 30px; left: 0; right: 0; bottom: 0; top: 0; margin: auto; border: 1px #33ff66 solid; border-top: 5px #33ff66 solid; text-align: center; vertical-align: middle; line-height: 30px; display: block; animation-name: popup; animation-duration: 1s; animation-iteration-count: infinite;
}
::-webkit-scrollbar { display: none;
}
.terminalInput { background: none; outline: none; border: none; height: 10px; font-family: 'VT323'; color: #33ff66; width: 60%;
}

CSS Old Computer - Script Codes JS Codes

'use strict';
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/* JS only used for computer interactions (power on, input..) */
var Hardware = function () { function Hardware(light) { _classCallCheck(this, Hardware); this.light = light; this.state = 'off'; } Hardware.prototype.on = function on() { this.state = 'on'; this.light.removeClass("lightOff"); this.light.addClass("lightOn"); }; Hardware.prototype.off = function off() { this.state = 'off'; this.light.removeClass("lightOn"); this.light.addClass("lightOff"); }; Hardware.prototype.isOn = function isOn() { return this.state == 'on'; }; Hardware.prototype.power = function power() { if (this.isOn()) { this.off(); } else { this.on(); } }; return Hardware;
}();
var Screen = function (_Hardware) { _inherits(Screen, _Hardware); function Screen(output, light) { _classCallCheck(this, Screen); var _this = _possibleConstructorReturn(this, _Hardware.call(this, light)); _this.output = output; _this.output.hide(); _this.output.parent().removeClass("screenEffect"); _this.noSignalMode = false;; return _this; } Screen.prototype.write = function write(text, leftOffset) { if (leftOffset) { var $span = $(document.createElement("span")); $span.append(text + "<br/>"); $span.css("padding-left", leftOffset + "px"); this.output.append($span); } else { this.output.append(text + "<br/>"); } this.scroll(); }; Screen.prototype.scroll = function scroll() { this.output.animate({ scrollTop: $(".output").height() }, 0); }; Screen.prototype.newLine = function newLine() { this.output.append("<br/>"); }; Screen.prototype.clear = function clear() { this.output.empty(); }; Screen.prototype.input = function input(centralUnit) { this.output.append("A> "); var $input = $(document.createElement("input")); $input.addClass("terminalInput"); this.output.append($input); this.output.append("<br/>"); $input.focus(); var screen = this; $input.on("keypress", function (event) { if (event.which == 13) { centralUnit.command(screen, $input.val()); $input.prop("disabled", true); screen.input(centralUnit); } }); }; Screen.prototype.on = function on(callback) { _Hardware.prototype.on.call(this); var screen = this; this.output.parent().addClass("screenEffect"); this.output.show(); this.output.delay(1000).queue(function (next) { next(); screen.write("Checking connections..."); screen.output.delay(2000).queue(function (next) { next(); callback(); }); }); }; Screen.prototype.off = function off() { _Hardware.prototype.off.call(this); var screen = this; if (this.noSignalMode) { this.signal(); } this.write("Disconnecting..."); this.output.delay(2000).queue(function (next) { next(); screen.output.hide(); screen.output.parent().removeClass("screenEffect"); }); }; Screen.prototype.signal = function signal() { this.output.find("#noSignal").remove(); }; Screen.prototype.power = function power(centralUnit, callback) { if (this.isOn()) { this.off(); callback(true); } else { var screen = this; var connection = false; this.on(function () { if (!centralUnit.isOn()) { screen.noSignal(); callback(connection); } else { if (centralUnit.isBoot()) { centralUnit.terminal(screen); } connection = true; callback(connection); } }); } }; Screen.prototype.connect = function connect(callback) { var screen = this; this.output.delay(1000).queue(function (next) { next(); if (screen.noSignalMode) { screen.noSignalMode = false; screen.signal(); } screen.write("EGA connector initialized"); callback(); }); }; Screen.prototype.noSignal = function noSignal() { this.noSignalMode = true; var $popup = $(document.createElement("div")); $popup.addClass("popup"); $popup.addClass("screenEffect"); $popup.attr("id", "noSignal"); $popup.text("NO SIGNAL"); this.output.append($popup); }; return Screen;
}(Hardware);
var CentralUnit = function (_Hardware2) { _inherits(CentralUnit, _Hardware2); function CentralUnit(button, light) { _classCallCheck(this, CentralUnit); var _this2 = _possibleConstructorReturn(this, _Hardware2.call(this, light)); _this2.button = button; _this2.bootStatus = false; return _this2; } CentralUnit.prototype.on = function on(screen, callback) { _Hardware2.prototype.on.call(this); this.button.removeClass("computerButtonOff"); this.button.addClass("computerButtonOn"); screen.connect(function () { callback(); }); }; CentralUnit.prototype.off = function off(screen) { _Hardware2.prototype.off.call(this); this.button.removeClass("computerButtonOn"); this.button.addClass("computerButtonOff"); this.bootStatus = false; screen.clear(); }; CentralUnit.prototype.power = function power(screen) { if (this.isOn()) { this.off(screen); if (screen.isOn()) { screen.output.delay(1000).queue(function (next) { next(); screen.noSignal(); }); } } else { var centralUnit = this; this.on(screen, function () { centralUnit.boot(screen); }); } }; CentralUnit.prototype.date = function date() { var date = new Date(); var dayNumbers = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"); return dayNumbers[date.getDay()] + " " + (date.getMonth() + 1) + "-" + date.getDate() + "-" + date.getFullYear(); }; CentralUnit.prototype.terminal = function terminal(screen) { screen.newLine(); screen.input(this); screen.scroll(); }; CentralUnit.prototype.command = function command(screen, _command) { if (_command != "") { screen.write("Command not supported yet."); } }; CentralUnit.prototype.isBoot = function isBoot() { return this.bootStatus; }; CentralUnit.prototype.boot = function boot(screen) { var centralUnit = this; screen.output.delay(1000).queue(function (next) { next(); screen.write("Booting up..."); screen.output.delay(200).queue(function (next) { next(); screen.newLine(); screen.write("Hard Disk System Configuration:"); screen.output.delay(200).queue(function (next) { next(); screen.newLine(); screen.write("A: Hard Disk, 4.8 Mbytes", 20); screen.output.delay(200).queue(function (next) { next(); screen.write("B: Hard Disk, Floppy Size", 20); screen.output.delay(200).queue(function (next) { next(); screen.write("C: Floppy Disk", 20); screen.output.delay(200).queue(function (next) { next(); screen.newLine(); screen.write("Current date is " + centralUnit.date()); screen.output.delay(200).queue(function (next) { next(); screen.newLine(); screen.write("IBM Personnal Computer"); screen.output.delay(200).queue(function (next) { next(); screen.write("Version 1.23 Copyright IBM Corp 1984"); screen.output.delay(200).queue(function (next) { next(); centralUnit.terminal(screen); centralUnit.bootStatus = true; }); }); }); }); }); }); }); }); }); }; return CentralUnit;
}(Hardware);
var Computer = function () { function Computer(centralUnit, screen) { _classCallCheck(this, Computer); this.centralUnit = centralUnit; this.screen = screen; this.connection = false; } Computer.prototype.startScreen = function startScreen() { var computer = this; this.screen.power(this.centralUnit, function (connection) { computer.connection = connection; }); }; Computer.prototype.startCentralUnit = function startCentralUnit() { this.centralUnit.power(this.screen); }; return Computer;
}();
var screen = new Screen($(".output"), $(".screenBox").find(".powerLight"));
var centralUnit = new CentralUnit($(".computerButton"), $(".computer").find(".powerLight"));
var computer = new Computer(centralUnit, screen);
$(".screenBox").find(".powerButton").on("click", function () { computer.startScreen();
});
$(".computerButton").on("click", function () { computer.startCentralUnit();
});
computer.startScreen();
computer.centralUnit.button.delay(2000).queue(function (next) { computer.startCentralUnit();
});
CSS Old Computer - Script Codes
CSS Old Computer - Script Codes
Home Page Home
Developer Andy Pagès
Username andyNroses
Uploaded November 10, 2022
Rating 3.5
Size 9,210 Kb
Views 34,408
Do you need developer help for CSS Old Computer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Pagès (andyNroses) Script Codes
Name
Fancy Animated Input Field
Mr. Robot Animation
React Carousel
Batman Joker Morphing
Fancy Rotate Menu - CSS Only
CSS Only Homer Simpson
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!