LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Duke Nukem

This game requires 18.4 megs of free hard drive space to install.

C:\DUKE3D

To install this program, we will need to know what directory on your hard drive that we can copy the game files into.

You may either select one of your own or you may accept the default setting listed above. If you choose to accept this setting, just press [ENTER] otherwise enter your own directory. After you have typed in a directory name, press [ENTER] to continue with the installation process.

We are now installing Duke Nukem 3D to your hard drive.

Please be patient while the files are copied.

Installing from Drive C

Install to Directory C:\Duke3D

Current File: Dn3dsw13.exe

Progress Indicator

DISK :

0
0
Duke Nukem 3D Setup Version 1.3D (c) 1993 3D Realms Entertainment

Main Menu

Current Filename ( duke3d4.cfg )

  • Sound Setup
  • Screen Setup
  • Controller Setup
  • Network Game
  • Modem Game
  • Serial Game
  • TEN Game
  • See The Duke Nukem 3D Help File
  • Change Setup Filename
  • Save and launch Duke Nukem 3D

Sorry: This is still a WIP.

Press any key to continue

You can find my contact details and see more of my work here, and you can download the official Duke Nukem 3D Demo for MS DOS here.

CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

html, body {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: url("http://reneroth.org/projects/codepen/bgs/FF5qM3y.jpg");
  background-size: cover;
}

main {
  cursor: none;
  width: 640px;
  height: 400px;
  overflow: hidden;
  font-family: 'Anonymous Pro';
  font-weight: 700;
  font-size: 15px;
  font-smoothing: never;
  -webkit-font-smoothing: none;
  color: #FFF;
}

section {
  width: 100%;
  height: 100%;
  position: relative;
}

.start {
  background: #000;
}
.start header {
  font-family: "Press Start 2P";
  text-transform: uppercase;
  font-size: 70px;
  letter-spacing: 10px;
  font-weight: 400;
  line-height: 80px;
  color: #000;
  position: absolute;
  top: 0;
  left: 0;
  text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 2px 2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, -2px -2px 0 #000, 4px 4px 0 #fff, 4px -4px 0 #fff, -4px 4px 0 #fff, -4px -4px 0 #fff;
}
.start header::after {
  content: attr(data-text);
  position: absolute;
  top: -5px;
  left: -3px;
  line-height: 80px;
  color: #ffff55;
  text-shadow: none;
}
.start aside {
  font-family: "Press Start 2P";
  color: #ff5555;
  text-shadow: none;
  font-size: 90px;
  font-weight: 700;
  position: absolute;
  right: 0px;
  top: 75px;
}
.start aside span {
  color: #555555;
  font-size: 12px;
  position: relative;
  top: -15px;
  left: -3px;
}
.start .copyright {
  position: absolute;
  right: 60px;
}
.start .copyright p {
  color: #555555;
}
.start .copyright p:nth-child(1) {
  color: #FFF;
  padding-bottom: 15px;
}
.start .install {
  position: absolute;
  width: 100%;
  top: 200px;
  text-align: center;
}
.start .install.one p {
  margin-bottom: 15px;
  padding: 0 50px;
}
.start .install.one p:last-child {
  padding: 0;
}
.start .install.one .input {
  display: inline-block;
  text-align: left;
  margin-bottom: 15px;
  width: 520px;
  background: #0000aa;
  color: #4be2f5;
  border: none;
  padding: 0 15px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'Anonymous Pro';
  font-size: 17px;
  outline: none;
}
.start .install.one .input::after {
  content: '_';
  -webkit-animation: 2s blink infinite linear;
          animation: 2s blink infinite linear;
}
.start .install.two {
  display: none;
}
.start .install.two p {
  color: #555555;
}
.start .install.two .box {
  background: #0000aa;
  width: 600px;
  height: 120px;
  margin: 20px auto;
  position: relative;
}
.start .install.two .box p {
  font-size: 18px;
  color: #4be2f5;
  text-transform: uppercase;
  text-align: left;
  padding-left: 30px;
  position: relative;
}
.start .install.two .box p:first-child {
  padding-top: 15px;
}
.start .install.two .box p:nth-child(4)::after, .start .install.two .box p:nth-child(4)::before {
  position: absolute;
  left: 215px;
  display: inline-block;
  -webkit-animation: 1s blink infinite linear;
          animation: 1s blink infinite linear;
}
.start .install.two .box p:nth-child(4)::after {
  content: '/';
}
.start .install.two .box p:nth-child(4)::before {
  content: '\\';
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.start .install.two .box p:nth-child(5) {
  margin-left: 110px;
}
.start .install.two .box p:nth-child(5)::after, .start .install.two .box p:nth-child(5)::before {
  position: absolute;
  left: 105px;
  display: inline-block;
  -webkit-animation: 1s blink infinite linear;
          animation: 1s blink infinite linear;
}
.start .install.two .box p:nth-child(5)::after {
  content: '-';
}
.start .install.two .box p:nth-child(5)::before {
  content: '|';
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.start .install.two .box .loadingbox {
  position: absolute;
  right: 30px;
  height: 17px;
  width: 300px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAAFUlEQVQIW2NgYFjl/egrBDFAKbAQAK4CDiE8wugqAAAAAElFTkSuQmCC) repeat;
  top: 70px;
}
.start .install.two .box .loadingbox:last-child {
  top: 86px;
}
.start .install.two .box .loadingbox span {
  color: #4be2f5;
  position: absolute;
  left: -35px;
  width: 30px;
  top: 1px;
  text-align: right;
}
.start .install.two .box .loadingbox span::after {
  content: '%';
}
.start .install.two .box .loadingbox div {
  background: #4be2f5;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
}
.start .install.two .box::after {
  content: '';
  width: 578px;
  height: 104px;
  position: absolute;
  top: 7px;
  left: 10px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
}

.dosprompt {
  display: none;
  background: #000000;
  color: #acaaac;
}

.setupexe {
  display: none;
  font-size: 15px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAAAAABawyK/AAAAEklEQVQIW2MQDgkJYQgJEQ4BAApfAh8SFp3lAAAAAElFTkSuQmCC) repeat;
}
.setupexe header, .setupexe footer {
  background: #aaaaaa;
  padding-top: 1px;
  height: 17px;
  width: 100%;
  color: #000;
}
.setupexe header span:first-child, .setupexe footer span:first-child {
  padding-left: 5px;
  float: left;
}
.setupexe header span:last-child, .setupexe footer span:last-child {
  padding-right: 5px;
  float: right;
}
.setupexe footer {
  position: absolute;
  bottom: 0;
}
.setupexe .errorwin {
  display: none;
  z-index: 2;
  position: absolute;
  background: #aa0000;
  width: 250px;
  height: 70px;
  top: 150px;
  left: 195px;
  box-shadow: 15px 17px 0 black;
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  border-left: 2px solid #aaaaaa;
  border-right: 2px solid #aaaaaa;
}
.setupexe .errorwin::after {
  content: '';
  display: block;
  position: absolute;
  width: 254px;
  height: 72px;
  top: -9px;
  left: -7px;
  border-top: 8px solid #aa0000;
  border-bottom: 8px solid #aa0000;
  border-left: 5px solid #aa0000;
  border-right: 5px solid #aa0000;
}
.setupexe .errorwin p {
  padding: 10px;
  padding-top: 13px;
  padding-bottom: 0;
  text-align: center;
}
.setupexe .errorwin p:last-child {
  color: #aaaaaa;
}
.setupexe .mainwin {
  box-shadow: 15px 17px 0 rgba(0, 0, 0, 0.5);
  z-index: 1;
  background: #0100aa;
  width: 294px;
  height: 274px;
  margin: 0 auto;
  margin-top: 36px;
  border-top: 1px solid #55ffff;
  border-bottom: 1px solid #55ffff;
  border-left: 2px solid #55ffff;
  border-right: 2px solid #55ffff;
}
.setupexe .mainwin::after {
  content: '';
  display: block;
  position: absolute;
  top: 45px;
  left: 166px;
  width: 298px;
  height: 277px;
  border-top: 8px solid #0100aa;
  border-bottom: 8px solid #0100aa;
  border-left: 5px solid #0100aa;
  border-right: 5px solid #0100aa;
}
.setupexe .mainwin h1 {
  color: #55ffff;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid #55ffff;
}
.setupexe .mainwin h2 {
  text-align: center;
  color: #55fc57;
  padding: 10px 0;
  border-bottom: 1px solid #55ffff;
}
.setupexe .mainwin h2 span {
  text-transform: uppercase;
}
.setupexe .mainwin ul {
  padding: 10px;
}
.setupexe .mainwin ul li::after {
  content: attr(data-tip);
  position: absolute;
  text-align: center;
  color: #000;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18px;
  z-index: 10;
  display: none;
}
.setupexe .mainwin ul li.active {
  color: #0100aa;
  background: #FFF;
}
.setupexe .mainwin ul li.active::after {
  display: initial;
}
.setupexe .mainwin nav {
  width: 100%;
  text-align: center;
  color: #55ffff;
  border-top: 1px solid #55ffff;
  padding-top: 7px;
}
.setupexe .mainwin nav span {
  position: relative;
}
.setupexe .mainwin nav span:nth-child(2) {
  padding: 0 40px;
}
.setupexe .mainwin nav span:nth-child(2)::before {
  content: '';
  display: inline-block;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAAbElEQVR42oWSMQoAIQwETa+2gj7gXnS/9xVX2XkRNrDNYjEgu4xgYnr3PjTnAw0Zk6PHOZ3wcZazwUJmJFbqa4gTATPjZlCoKyEOp1PRkdlNDKKgTIuyAOLiu2jqKTcxq+HJcQNT65ILBvKD/AyOexyRTlLXAAAAAElFTkSuQmCC) no-repeat;
  width: 14px;
  height: 10px;
  position: absolute;
  left: 18px;
  top: 2px;
}
.setupexe .mainwin nav span:nth-child(3)::before {
  content: '';
  display: inline-block;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAANCAYAAABGkiVgAAAAh0lEQVR42q3TPQ6CQBBAYWOpy4YOA2utHohbewISO4LSkQ2xHR7V0Eh24xRfN3mZ7M+hFbHiEFd7QyccM6Iegp8DN7zQZESLvWiFLwSlRbTCB4IZ7t+oBoGYGYVGA+4YIRsTPGpcEzy20Q4aVD0ueGJIFPG23DSgwNnwTJXh7SvDd6oMf5RaAEHUvHbjIrBBAAAAAElFTkSuQmCC) no-repeat;
  width: 21px;
  height: 13px;
  position: absolute;
  left: -35px;
  top: 2px;
}

.thanks {
  display: none;
  font-smoothing: initial;
  -webkit-font-smoothing: initial;
  cursor: initial;
  font-weight: 400;
  display: block;
  padding-top: 100px;
  font-size: 32px;
  line-height: 48px;
  color: #FFF;
}
.thanks a {
  text-decoration: none;
  color: #4be2f5;
}
.thanks a:hover {
  border-bottom: 1px dotted #4be2f5;
}

.shutdown {
  -webkit-transition: 0.5s all;
  transition: 0.5s all;
  -webkit-transform: scaleX(1.2) scaleY(0);
          transform: scaleX(1.2) scaleY(0);
  opacity: 0.25;
}

@-webkit-keyframes blink {
  0% {
    visibility: visible;
  }
  49% {
    visibility: visible;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: hidden;
  }
}

@keyframes blink {
  0% {
    visibility: visible;
  }
  49% {
    visibility: visible;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: hidden;
  }
}
JS
var installfiles = ['catalog.exe', 'commit.exe', 'defs.con', 'demo1.dmo', 'demo2.dmo', 'demo3.dmo', 'dn3dhelp.exe', 'duke.rts', 'duke3d.exe', 'duke3d.grp', 'game.con', 'license.doc', 'modem.pck', 'order.frm', 'readme.doc', 'setmain.exe', 'setup.exe', 'swcbbs.exe', 'ultramid.ini', 'user.con'];
var extractmsgs = [' ','PKSFX (R) FAST! Self Extract Utility Version 2.04g','Copr. 1989-1993 PKWARE Inc. All Rights Reserved. Registered version','PKSFX Reg. U.S. Pat. and Tm. Off.',' ','Searching EXE: DN3DSW13.EXE'];
var installfilesnum = installfiles.length;
var installingIterator=0;
var activewindow=$('.mainwin');

//fake input fields
$('.input').each(function() {
    var fakeinput = $(this);
    var newinput = $('', {
        type: 'text',
        style: 'top:-100px;position:absolute;',
        value: fakeinput.html(),
        id: fakeinput.attr('data-input')
    });
    newinput.appendTo('body');
    newinput.on('input', function() {
        fakeinput.html($(this).val());
    });
    fakeinput.click(function() {
        newinput.val('');
        newinput.focus();
        newinput.val(fakeinput.html());
    });
});
var setuptarget="";
$('#setupstart').on('keydown', function(e) {
    if (e.which === 13) {
        e.preventDefault();
				setuptarget=escapeHtml($(this).val());
        $('#setuptargetdir').html(setuptarget);
        $(this).remove();
        $('.install.one').css('display', 'none');
        $('.install.two').css('display', 'initial');
        runinstall();
    }
});

//$('.start .install.one .input').trigger('click');
$('body').click(function(e) {
    if (installingIterator==0) {
        var temp = $('#setupstart').val();
        $('#setupstart').focus();
        $('#setupstart').val(temp);
    }
});

function escapeHtml(text) { //thx stackoverflow
    var map = {
        '&': '&',
        '<': '<',
        '>': '>',
        '"': '"',
        "'": '''
    };
    return text.replace(/[&<>"']/g, function(m) {
        return map[m];
		});
}
/*
 * 40 = down
 * 38 = up
 * 37 = left
 * 39 = right
 * 13 = enter
 * 32 = space
*/
function keyHandler(e) {
	if(activewindow.length == 0) {
		return;
	}
	if($(activewindow).hasClass('errorwin')) {
		$(activewindow).css('display','none');
		activewindow=$('.mainwin');
		return;
	}
	var index = $('li',activewindow).index($('li.active',activewindow));
	if(index==-1) {
		return;
	}
	switch(e.keyCode) {
		case 40: //down
			index+=1;
			if(index>$('li',activewindow).length-1) {
					index=0;
				}
			$('li',activewindow).removeClass('active');
			$('li:eq('+index+')',activewindow).addClass('active');
			break;
		case 38: //up
			index-=1;
			if(index<0) {
					index=$('li',activewindow).length-1;
				}
			$('li',activewindow).removeClass('active');
			$('li:eq('+index+')',activewindow).addClass('active');
			break;
		case 27: //esc
			if($('h1',activewindow).html()=="Main Menu") {
				activewindow='undefined';
				$('.setupexe').addClass('shutdown');
				setTimeout(function(){$('.setupexe').css('display','none');},2000);
				setTimeout(function(){$('.thanks').fadeIn();},5000);
			}
			break;
		case 13: //enter
			if($('h1',activewindow).html()=="Main Menu") {
				activewindow=$('.errorwin');
				$('.errorwin').css('display','block');
			}
			break;
	}
}

function runSetupExe() {
	$('.dosprompt').css('display','none');
	$('.setupexe').css('display','block');
	$('.mainwin').focus();
	$('body').on('keydown',keyHandler);
}

function runextractsecond() {
	if (installingIterator >= installfiles.length) {
		$('.dosprompt p:first-child').remove();
		$('.dosprompt p:first-child').remove();
		$('.dosprompt p:first-child').remove();
		$('.dosprompt').append('

 

Authentic files Verified! # ECW832

3D REALMS ENTERTAINMENT

'); setTimeout(function(){ $('.dosprompt p:first-child').remove(); $('.dosprompt').append('

> SETUP.EXE

'); },1000); setTimeout(runSetupExe,5000); return; } $('.dosprompt').append('

Inflating: '+installfiles[installingIterator].toUpperCase()+' -AV

'); installingIterator++; if($('.dosprompt > p').length >= 25) { $('.dosprompt p:first-child').remove(); } setTimeout(runextractsecond,250+Math.random()*750); } function runextractfirst() { if (installingIterator >= extractmsgs.length) { installingIterator=0; runextractsecond(); return; } $('.dosprompt').append('

'+extractmsgs[installingIterator]+'

'); installingIterator++; setTimeout(runextractfirst,250+Math.random(750)); } function runinstall() { if (installingIterator >= installfiles.length) { installingIterator=0; $('.start').css('display','none'); $('.dosprompt').css('display','block'); $('.dosprompt').append('

'+setuptarget+'>3drealms.exe 1

'); runextractfirst(); return; } $('#setupcurrentfile').html(installfiles[installingIterator]); installingIterator++; $('.loadingbox:first-of-type div').css('width', '0').animate({ width: '100%' },{ duration:500 + Math.random() * 2500, easing: 'linear', complete: runinstall, progress: function(a,p,c) { p=Math.ceil(p*100); $('.loadingbox:first-of-type span').html(p); var totalP=Math.ceil(((installingIterator-1)/installfilesnum)*100+1/installfilesnum*p); $('.loadingbox:last-of-type span').html(totalP); $('.loadingbox:last-of-type div').css('width',totalP+'%'); } }); }

Description

I really wanted to recreate one of those old school MS Dos Setup screens, done with CSS+JS only.
Thu, 11/30/2017 - 09:49

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv