Skip to content

Commit

Permalink
22-05-2024
Browse files Browse the repository at this point in the history
  • Loading branch information
@ooexiaoo
ooexiaoo committed May 21, 2024
1 parent 8b97aa5 commit c071c42
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 29 deletions.
68 changes: 49 additions & 19 deletions TOHA.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,55 +35,85 @@ <h2 class="mh">MENU</h2>
<li class="nav-list-item"><a href="#" class="nav-link">THREAT</a></li>
<li class="nav-list-item"><a href="#" class="nav-link">NAVIGATION</a></li>
<li class="nav-list-item"><a href="#" class="nav-link">MESSAGES</a></li>
<li class="nav-list-item"><a href="#" class="nav-link">ABOUT</a></li>
</ul>
</nav>
</div>
</div>
</section>
<div class="content">
<h1>TOHA HEAVY INDUSTRIES</h1>
<button class="button">LOGIN</button>
</div>
<div class="max">
<div class="containerm">
<div class="communications">
<h2>COMMUNICATIONS</h2>
<div class="messages">
<h3>Messages</h3>
<!-- <h3>Messages</h3> -->
<ul>
<li>Unread Messages: <span id="unread-messages">0</span></li>
<li>Read Messages: <span id="read-messages">0</span></li>
</ul>
</div>
</div>
<div class="date">
<h2>DATE</h2>
<p id="current-date">Loading...</p>
</div>
<div class="sector">
<h2>SECTOR</h2>
<p>Latitude: <span id="latitude">0.00</span></p>
<p>Longitude: <span id="longitude">0.00</span></p>
<div class="section date-sector">
<h2>DATE & SECTOR</h2>
<div class="date">
<!-- <h3>Current Date</h3> -->
<p id="current-date">Loading...</p>
</div>
<div class="sector">
<!-- <h3>Sector Information</h3> -->
<p>Latitude: <span id="latitude">0.00</span></p>
<p>Longitude: <span id="longitude">0.00</span></p>
</div>
</div>
<div class="threat">
<h2>THREAT</h2>
<ul id="threat-list">
<li>Loading...</li>
</ul>
</div>
<div class="terminal-access">
<h2>TERMINAL ACCESS</h2>
<input type="text" id="command-input" placeholder="Enter command...">
<button id="execute-command">Execute</button>
</div>
<div class="section operations">
<h2>OPERATIONS</h2>
<p>Current Operation: <span id="current-operation">None</span></p>
<p>Operation Status: <span id="operation-status">Idle</span></p>
<button id="start-operation">Start Operation</button>
</div>
<div class="section resources">
<h2>RESOURCES</h2>
<ul>
<li>Material: <span id="material">2530</span></li>
<li>Energy: <span id="energy">9000+</span></li>
<li>Personnel: <span id="personnel">200</span></li>
</ul>
</div>
<div class="section maintenance">
<h2>MAINTENANCE</h2>
<ul>
<li>Systems Check: <span id="systems-check">Passed</span></li>
<li>Last Maintenance: <span id="last-maintenance">Unknown</span></li>
<li>Next Scheduled: <span id="next-scheduled">Pending</span></li>
</ul>
</div>
<div class="section intelligence">
<h2>INTELLIGENCE</h2>
<ul>
<li>Surveillance Reports: <span id="surveillance-reports">18</span></li>
<li>Recon Missions: <span id="recon-missions">5</span></li>
<li>Data Breaches: <span id="data-breaches">0</span></li>
</ul>
</div>
<div class="login">
<button class="button">LOGIN</button>
<button class="button">LOCK</button>
</div>
</div>
</div>
<section class="text">
<h2>WHO ARE WE?</h2>
<p class="para">Toha Heavy Industries is a cutting-edge technology and engineering company<br>
specializing in advanced robotics, cybernetic enhancements, and AI systems.<br>
Renowned for its innovation, the company pioneers solutions in defense,<br>
infrastructure, and medical sectors, enhancing human capabilities and<br>
revolutionizing industry standards globally.</p>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="nav.js"></script>
<script src="toha.js"></script>
Expand Down
55 changes: 55 additions & 0 deletions aboutus.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WHO ARE WE</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="matrix.css">
<link rel="stylesheet" href="general.css">
<link rel="stylesheet" href="navigation.css">
<link rel="stylesheet" href="img-grd.css">
<link rel="stylesheet" href="toha.css">
<link rel="icon" type="image/ico" href="/img/favicon.ico">
</head>
<body>
<section class="main-section">
<div class="hero">
<video autoplay loop muted playsinline class="back-video">
<source src="/img/bw.mp4" type="video/mp4">
</video>
<div class="container">
<nav class="nav-bar">
<div class="toggle-menu">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
<ul class="nav-list">
<h2 class="mh">MENU</h2>
<li class="nav-list-item"><a href="https://ooexiaoo.github.io/Matrix/" class="nav-link">HOME</a></li>
<li class="nav-list-item"><a href="https://ooexiaoo.github.io/Matrix/deck" class="nav-link">DECKS</a></li>
<li class="nav-list-item"><a href="#" class="nav-link">THREAT</a></li>
<li class="nav-list-item"><a href="#" class="nav-link">NAVIGATION</a></li>
<li class="nav-list-item"><a href="#" class="nav-link">MESSAGES</a></li>
<li class="nav-list-item"><a href="#" class="nav-link">ABOUT</a></li>
</ul>
</nav>
</div>
</div>
</section>
<section class="text">
<h2>WHO ARE WE?</h2>
<p class="para">Toha Heavy Industries is a cutting-edge technology and engineering company<br>
specializing in advanced robotics, cybernetic enhancements, and AI systems.<br>
Renowned for its innovation, the company pioneers solutions in defense,<br>
infrastructure, and medical sectors, enhancing human capabilities and<br>
revolutionizing industry standards globally.</p>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="nav.js"></script>
<script src="toha.js"></script>
</body>
</html>
8 changes: 4 additions & 4 deletions matrix.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,9 @@
border: none;
}

.button{
padding: 10px 20px 10px 20px;
font-size: 26px;
/* .button{
padding: 10px;
font-size: 1.2em;
border: 15px solid transparent;
background-color: rgba(0, 0, 0, 0);
color: white;
Expand All @@ -61,7 +61,7 @@
color: gray;
border: 15px solid #fff;
border-image-source: url(/img/plus.png);
}
} */
.text{
display: flex;
flex-direction: column;
Expand Down
52 changes: 46 additions & 6 deletions toha.css
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,32 @@
.max{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}

.containerm {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(6, 1fr);
gap: 20px;
padding: 20px;
z-index: 0;
max-width: 1920px;
align-items: center;
}

.containerm > div {
background-color: rgba(0, 0, 0, 0.425);
background-color: rgba(0, 0, 0, 0.82);
padding: 20px;
border: 15px solid transparent;
transition: all 0.4s ease-in;
z-index: 0;
max-width: 300px;
height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.containerm > div:hover{
Expand All @@ -21,13 +36,15 @@
}

h2 {
font-size: 1.5em;
font-size: 1.7em;
margin-bottom: 10px;
font-weight: 900;
}

h3 {
font-size: 1.2em;
font-size: 1.4em;
margin-bottom: 10px;
font-weight: 800;
}

ul {
Expand All @@ -36,16 +53,25 @@ ul {
}

li {
font-size: 1.2em;
margin-bottom: 5px;
}

p {
font-size: 1.2em;
}

input[type="text"] {
width: calc(100% - 80px);
padding: 8px;
margin-bottom: 10px;
background-color: transparent;
border: none;
}

#execute-command {
#execute-command,
#start-operation,
.button {
font-size: 15px;
border: 10px solid transparent;
background-color: rgba(0, 0, 0, 0);
Expand All @@ -57,7 +83,9 @@ input[type="text"] {
transition: 0.4s ease-in;
}

#execute-command:hover{
#execute-command:hover,
#start-operation:hover,
.button:hover{
color: gray;
border: 10px solid #fff;
border-image-source: url(/img/plus.png);
Expand All @@ -66,4 +94,16 @@ input[type="text"] {
#threat-list {
max-height: 100px;
overflow-y: auto;
}

@media screen and (max-width: 768px){
.containerm {
grid-template-columns: 1fr;
}
}

@media screen and (max-width: 1000px){
.containerm {
grid-template-columns: repeat(3, 1fr);
}
}

0 comments on commit c071c42

Please sign in to comment.