Aroy/Cyberpunk2020-CharSheet
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add: start content

Browse source
This commit is contained in:
Aroy-Art 2023-10-03 13:17:56 +02:00
parent 72f1723384
commit 8d330cf600
Signed by: Aroy
GPG key ID: 583642324A1D2070
6 changed files with 2454 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,7 @@
{
"cSpell.words": [
"armor",
"Medtechie",
"Netrunner"
]
}

1693
css/cyberpunk-2077.css Normal file
View file

File diff suppressed because one or more lines are too long

409
cyberpunk-test.html Normal file
View file

@ -0,0 +1,409 @@
<!doctype html>
<html>
<head>
<title>Cyberpunk-2077-theme-css</title>
<meta name="description" content="This is a theme in CSS3 to simulate the interfaxes of the game CyberPunk 2077.">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Advent+Pro:wght@400;700&family=VT323&display=swap" rel="stylesheet">
<link href="/css/cyberpunk-2077.css" rel="stylesheet">
</head>
<body>
<header style="background-color: #000; height: 50px;"><a href="https://github.com/gwannon/Cyberpunk-2077-theme-css" style="color: #f9f002; font-size: 2rem;">Github</a></header>
<section class="cyberpunk">
<a class="cyberpunk">Link red_</a>
<button class="cyberpunk green">Button green_</button>
<a class="cyberpunk purple">Link purple_</a>
<button class="cyberpunk blue">Button blue_</button>
</section>
<section class="cyberpunk black both">
<h1 class="cyberpunk">H1 title</h1>
<h1 class="cyberpunk glitched">H1 title glitched</h1>
<h2 class="cyberpunk">H2 title</h2>
<h2 class="cyberpunk glitched">H2 title glitched</h2>
<h3 class="cyberpunk">H3 title</h3>
<h3 class="cyberpunk glitched">H3 title glitched</h3>
<h4 class="cyberpunk">H4 title</h4>
<h4 class="cyberpunk glitched">H4 title glitched</h4>
<hr class="cyberpunk" />
<hr class="cyberpunk glitched" />
</section>
<section class="cyberpunk both">
<form style="max-width: 500px">
<input class="cyberpunk" type="text" />
<input class="cyberpunk" type="date" />
<input class="cyberpunk" type="time" />
<input class="cyberpunk" type="file" />
<input class="cyberpunk" type="phone" />
<input class="cyberpunk" type="number" />
<input class="cyberpunk" type="password" />
<textarea class="cyberpunk"></textarea>
<select class="cyberpunk">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select><br/>
<label class="cyberpunk"><input class="cyberpunk" name="test" type="radio" /> RADIO BUTTON Lorem ipsum sid amet.</label><br/>
<label class="cyberpunk"><input class="cyberpunk" name="test" type="radio" checked="checked" /> RADIO BUTTON Lorem ipsum sid amet.</label><br/>
<label class="cyberpunk"><input class="cyberpunk" type="checkbox" /> CHECKBOX Lorem ipsum sid amet.</label><br/>
<label class="cyberpunk"><input class="cyberpunk" type="checkbox" checked="checked" /> CHECKBOX Lorem ipsum sid amet.</label><br/>
<button type="submit" class="cyberpunk red">Submit_</button>
</form>
</section>
<section class="cyberpunk black">
<img class="cyberpunk" src="https://dummyimage.com/600x400/ff00ff/fff" alt="" />
<img class="cyberpunk dotted" src="https://dummyimage.com/600x400/ff00ff/fff" alt="" />
</section>
<section class="cyberpunk">
<h1 class="cyberpunk">H1 title</h1>
<h1 class="cyberpunk glitched">H1 title glitched</h1>
<h2 class="cyberpunk">H2 title</h2>
<h2 class="cyberpunk glitched">H2 title glitched</h2>
<h3 class="cyberpunk">H3 title</h3>
<h3 class="cyberpunk glitched">H3 title glitched</h3>
<h4 class="cyberpunk">H4 title</h4>
<h4 class="cyberpunk glitched">H4 title glitched</h4>
<hr class="cyberpunk" />
<hr class="cyberpunk glitched" />
</section>
<section class="cyberpunk black">
<p class="cyberpunk">Cyberpunk is a subgenre of science fiction in a dystopian <a href="#">futuristic setting that</a> tends to focus on a "combination of low-life and high tech"[1] featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.[2] Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology, and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</p>
<ul class="cyberpunk">
<li>Cyberpunk is a subgenre of science fiction in a dystopian <a href="#">futuristic setting that</a> tends to focus on a "combination of low-life and high tech"</li>
<li class="glitched">featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.</li>
<li>Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology,</li>
<li>and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</li>
<li>Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"</li>
<li>featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.</li>
<li>Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology,</li>
<li>and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</li>
</ul>
<p class="cyberpunk inverse scannedv">Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"[1] featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.[2] Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology, and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</p>
<p class="cyberpunk inverse dotted scannedh">Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"[1] featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.[2] Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology, and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</p>
<ol class="cyberpunk">
<li>Cyberpunk is a subgenre of science fiction in a dystopian <a href="#">futuristic setting that</a> tends to focus on a "combination of low-life and high tech"</li>
<li>featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.</li>
<li>Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology,</li>
<li class="glitched">and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</li>
<li>Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"</li>
<li>featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.</li>
<li>Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology,</li>
<li>and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</li>
</ol>
</section>
<section class="cyberpunk">
<p class="cyberpunk">Cyberpunk is a subgenre of science fiction in a dystopian <a href="#">futuristic setting that</a> tends to focus on a "combination of low-life and high tech"[1] featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.[2] Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology, and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</p>
<p class="cyberpunk scannedh">Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"[1] featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.[2] Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology, and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</p>
<p class="cyberpunk scannedv">Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"[1] featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.[2] Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology, and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</p>
<ul class="cyberpunk">
<li>Cyberpunk is a subgenre of science fiction in a dystopian <a href="#">futuristic setting that</a> tends to focus on a "combination of low-life and high tech"</li>
<li class="glitched">featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.</li>
<li>Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology,</li>
<li>and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</li>
<li>Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"</li>
<li>featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.</li>
<li>Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology,</li>
<li>and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</li>
</ul>
<p class="cyberpunk inverse">Cyberpunk is a subgenre of science fiction in a dystopian <a href="#">futuristic setting that</a> tends to focus on a "combination of low-life and high tech"[1] featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.[2] Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology, and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</p>
<p class="cyberpunk inverse scannedh">Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"[1] featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.[2] Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology, and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</p>
<p class="cyberpunk inverse scannedv">Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"[1] featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.[2] Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology, and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</p>
<p class="cyberpunk inverse dotted">Cyberpunk is a subgenre of science fiction in a dystopian <a href="#">futuristic setting that</a> tends to focus on a "combination of low-life and high tech"[1] featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.[2] Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology, and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</p>
<ol class="cyberpunk">
<li>Cyberpunk is a subgenre of science fiction in a dystopian <a href="#">futuristic setting that</a> tends to focus on a "combination of low-life and high tech"</li>
<li>featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.</li>
<li >Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology,</li>
<li>and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</li>
<li>Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"</li>
<li class="glitched">featuring advanced technological and scientific achievements, such as artificial intelligence and cybernetics, juxtaposed with a degree of breakdown or radical change in the social order.</li>
<li>Much of cyberpunk is rooted in the New Wave science fiction movement of the 1960s and 1970s, when writers like Philip K. Dick, Roger Zelazny, John Brunner, J. G. Ballard, Philip José Farmer and Harlan Ellison examined the impact of drug culture, technology,</li>
<li>and the sexual revolution while avoiding the utopian tendencies of earlier science fiction.</li>
</ol>
</section>
<section class="cyberpunk black">
<form style="max-width: 500px">
<input class="cyberpunk" type="text" />
<input class="cyberpunk" type="date" />
<input class="cyberpunk" type="time" />
<input class="cyberpunk" type="file" />
<input class="cyberpunk" type="phone" />
<input class="cyberpunk" type="number" />
<input class="cyberpunk" type="password" />
<textarea class="cyberpunk"></textarea>
<select class="cyberpunk">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select><br/>
<label class="cyberpunk"><input class="cyberpunk" name="test2" type="radio" /> RADIO BUTTON Lorem ipsum sid amet.</label><br/>
<label class="cyberpunk"><input class="cyberpunk" name="test2" type="radio" checked="checked" /> RADIO BUTTON Lorem ipsum sid amet.</label><br/>
<label class="cyberpunk"><input class="cyberpunk" type="checkbox" /> CHECKBOX Lorem ipsum sid amet.</label><br/>
<label class="cyberpunk"><input class="cyberpunk" type="checkbox" checked="checked" /> CHECKBOX Lorem ipsum sid amet.</label><br/>
<button type="submit" class="cyberpunk2077 blue">Submit_</button>
</form>
</section>
<section class="cyberpunk">
<img class="cyberpunk" src="https://dummyimage.com/600x400/ff00ff/fff" alt="" />
<img class="cyberpunk dotted" src="https://dummyimage.com/600x400/ff00ff/fff" alt="" />
</section>
<section class="cyberpunk black both">
<div class="boxtree">
<div class="resolved children2 width1">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children2 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children2 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="children1 width3">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width3">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children1 width3">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children1 width3">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children1 width3">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children2 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children1 width3">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width1">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children2 width1">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width1">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children1 width1">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children0 width1">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
</div>
</section>
<section class="cyberpunk both">
<div class="boxtree">
<div class="resolved children2 width1">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children2 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children2 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="children1 width3">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width3">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children1 width3">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children1 width3">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children1 width3">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children2 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children1 width3">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width1">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children2 width1">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width2" style="--resolved-text: '';">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="children1 width2">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="resolved children1 width1" style="--resolved-text: 'FINISHED';">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children1 width1">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
<div class="pending children0 width1" style="--pending-text: 'FORBIDDEN';">
<h2>Lorem ipsum sid amet.</h2>
Cyberpunk is a subgenre of science fiction in a dystopian futuristic setting that tends to focus on a "combination of low-life and high tech"
</div>
</div>
</section>
<section class="cyberpunk black">
<ul class="steps">
<li>Text 1</li>
<li>Text extra extra large 2</li>
<li>Texto 3</li>
<li>Text extra extra large 4 </li>
<li>Text 5<br/>new line<br/>new line</li>
<li>Text large 6</li>
<li class="current">Text 7</li>
<li>Text 8</li>
<li>Text 9</li>
<li>Text 10</li>
</ul>
</section>
<section class="cyberpunk">
<ul class="steps">
<li>Text 1</li>
<li>Text extra extra large 2</li>
<li>Texto 3</li>
<li class="current">Text extra extra large 4 </li>
<li>Text 5<br/>new line<br/>new line</li>
<li>Text large 6</li>
<li>Text 7</li>
<li>Text 8</li>
<li>Text 9</li>
<li>Text 10</li>
</ul>
</section>
<aside class="cyberpunk">
<ul>
<li><a href="#">&#9760; 555 555 555</a></li>
<li><a href="#">&#x2622; Contact us</a></li>
<li><a href="#">&#x267B; Location in the map</a></li>
</ul>
</aside>
<footer style="background-color: #000; height: 50px;"></footer>
</body>
</html>

BIN
img/Screenshot_20231002_172959.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

345
index.html Normal file
View file

@ -0,0 +1,345 @@
<!DOCTYPE html>
<html>
<head>
<!-- style sheets -->
<link rel="stylesheet" href="/lib/bootstrap/bootstrap.min.css">
<!-- <link rel="stylesheet" href="/css/cyberpunk-2077.css"> -->
<!-- Local style sheet relative to workspace folder -->
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=VT323&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Advent+Pro:wght@200;300;500;600;700&amp;display=swap"">
<!-- Local style sheet relative to this file -->
<!-- <link rel="stylesheet" href="style.css"> -->
<!-- Embedded style sheet -->
<style>
body {
font-family: "Advent Pro", Arial, Helvetica, sans-serif;
font-weight: 600;
background-color: #e6e6e6;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
}
table {
//width: 100%;
}
th, td {
padding: 0 2px;
text-align: center;
border: 1px solid black;
vertical-align: middle;
}
td {
font-size: 0.8em;
font-weight: 700;
}
td > input {
border: none;
background-color: #0000;
}
table > tbody > tr > th {
border-spacing: 10px 10px;
border-collapse: separate;
}
th {
color: #fff;
background-color: black;
padding: 8px;
/* border-right: px solid transparent; /* Add a transparent border to the bottom of the header cells */
}
#handle {
display: flex;
align-items: center;
gap: 10px;
}
#HANDLE {
/*padding: 4px 0;*/
width: 100%;
box-sizing: border-box;
flex-grow: 1;
}
/* #armor {
display: flex;
align-items: center;
gap: 5px;
} */
.bb {
font-weight: 700;
color: white;
background-color: black;
padding: 4px;
}
.input-brack {
display: inline-block;
}
.input-brack::before {
content: "[";
}
.input-brack::after {
content: "]";
}
#sec-stats.my-1 input{
border: 0;
width: 1.2em;
background-color: #0000;
}
.right-align {
text-align: right;
}
.input-short {
width: 3em;
}
</style>
</head>
<body>
<header></header>
<div class="content container-fluid">
<div class="row">
<div class="col my-2">
<div class="my-1" id="handle">
<label class="bb" for="HANDLE">HANDLE</label>
<input type="text" name="" id="HANDLE">
</div>
<div class="my-1" id="role">
<span class="bb">ROLE</span>
<input type="checkbox" name="" id="RSolo">
<label for="RSolo">Solo</label>
<input type="checkbox" name="" id="RRocker">
<label for="RRocker">Rocker</label>
<input type="checkbox" name="" id="RNetrunner">
<label for="RNetrunner">Netrunner</label>
<input type="checkbox" name="" id="RMedia">
<label for="RMedia">Media</label>
<input type="checkbox" name="" id="RNomad">
<label for="RNomad">Nomad</label>
<input type="checkbox" name="" id="RFixer">
<label for="RFixer">Fixer</label>
<input type="checkbox" name="" id="RCop">
<label for="RCop">Cop</label>
<input type="checkbox" name="" id="RCorp">
<label for="RCorp">Corp</label>
<input type="checkbox" name="" id="RTechie">
<label for="RTechie">Techie</label>
<input type="checkbox" name="" id="RMedtechie">
<label for="RMedtechie">Medtechie</label>
</div>
<div class="my-1" id="sec-char-point">
<span class="bb">CHARACTER POINTS</span>
<input type="number" name="" id="CHAR" style="width: 3em;">
</div>
<div class="my-1" id="sec-stats">
<span class="bb">STATS</span>
<br>
<label for="SINT">INT</label>
<div class="input-brack">
<input type="number" name="" id="SINT">
</div>
<label for="SREF">REF</label>
<div class="input-brack" id="SREF">
<input type="number" name="" id="SREF1">
<span>/</span>
<input type="number" name="" id="SREF2">
</div>
<label for="STECH">TECH</label>
<div class="input-brack">
<input type="number" name="" id="STECH">
</div>
<label for="SCOOL">COOL</label>
<div class="input-brack">
<input type="number" name="" id="SCOOL">
</div>
<label for="SATTR">ATTR</label>
<div class="input-brack">
<input type="number" name="" id="SATTR">
</div>
<label for="SLUCK">LUCK</label>
<div class="input-brack">
<input type="number" name="" id="SLUCK">
</div>
<label for="SMA">MA</label>
<div class="input-brack">
<input type="number" name="" id="SMA">
</div>
<label for="SBODY">BODY</label>
<div class="input-brack">
<input type="number" name="" id="SBODY">
</div>
<label for="SEMP">EMP</label>
<div class="input-brack">
<input type="number" name="" id="SEMP">
</div>
<label for="SRun">Run</label>
<div class="input-brack">
<input type="number" name="" id="SRun">
</div>
<label for="SLeap">Leap</label>
<div class="input-brack">
<input type="number" name="" id="SLeap">
</div>
<label for="SLift">Lift</label>
<div class="input-brack">
<input type="number" name="" id="SLift">
</div>
</div>
<div class="my-1">
<style type="text/css">
#armor thead,#armor tbody{
display:inline-block;
}
</style>
<table id="armor">
<thead style="margin: 0 0px 0 0;">
<tr style="border-bottom: 2px #fff solid;">
<th colspan="3">Location</th>
</tr>
<tr>
<th colspan="3">Armor SP</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Head <br> 1
</td>
<td>
Torso <br> 2-4
</td>
<td>
R.Arm <br> 5
</td>
<td>
L.Arm <br> 6
</td>
<td>
R.Leg <br> 7-8
</td>
<td>
L.Leg <br> 9-0
</td>
</tr>
<tr>
<td>
<input type="number" name="" id="ASPHead" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPTorso" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPRArm" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPLArm" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPRLeg" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPLLeg" class="input-short">
</td>
</tr>
</tbody>
</table>
<table id="armor1">
<tbody>
<tr>
<th style="border-bottom: 2px #fff solid;">Location</th>
<td>
Head <br> 1
</td>
<td>
Torso <br> 2-4
</td>
<td>
R.Arm <br> 5
</td>
<td>
L.Arm <br> 6
</td>
<td>
R.Leg <br> 7-8
</td>
<td>
L.Leg <br> 9-0
</td>
</tr>
<tr>
<th>Armor SP</th>
<td>
<input type="number" name="" id="ASPHead" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPTorso" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPRArm" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPLArm" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPRLeg" class="input-short">
</td>
<td>
<input type="number" name="" id="ASPLLeg" class="input-short">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col my-2">
<div class="row my-1" id="sec-cyberpunk-logo">
<img src="/img/Screenshot_20231002_172959.png" alt="Cyberpunk Logo">
</div>
<div class="row my-1">
<span class="right-align">DRAWING OF CHARACTER</span>
</div>
</div>
</div>
<div>
</div>
</div>
<!--
<div class="container external internal" id="content">
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
</div> -->
</body>
</html>

0
style.css Normal file
View file