Skip to content

Commit

Permalink
Добавил сайты
Browse files Browse the repository at this point in the history
  • Loading branch information
@AnmiTaliDev
AnmiTaliDev committed Dec 20, 2024
1 parent fac9b42 commit 344a1dc
Show file tree
Hide file tree
Showing 2 changed files with 275 additions and 0 deletions.
124 changes: 124 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NurOS DeltaDesign Concept</title>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Comfortaa', cursive;
margin: 0;
padding: 0;
background-color: #121212;
color: #fff;
transition: background-color 0.3s, color 0.3s;
}
header {
background-color: #1E1E1E;
color: #fff;
padding: 1em 0;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.container {
padding: 2em;
max-width: 800px;
margin: 0 auto;
}
.theme {
margin-bottom: 2em;
padding: 1em;
background-color: #1E1E1E;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.theme h2 {
margin-top: 0;
font-size: 1.5em;
}
ul {
padding-left: 1.2em;
}
ul li {
margin-bottom: 0.5em;
}
</style>
</head>
<body>
<header>
<h1>NurOS DeltaDesign Concept</h1>
</header>
<div class="container">
<section id="night-theme" class="theme">
<h2>Night Theme</h2>
<p>The main concept of NurOS Iconpack Night is based on the following principles:</p>
<ul>
<li>Deep minimalism with a focus on comfortable nighttime use</li>
<li>Soft transitions between shades</li>
<li>Reduced contrast to reduce eye strain</li>
<li>Maintaining readability in any lighting</li>
<li>Elegance and modernity in every detail</li>
</ul>
<h3>Primary Palette</h3>
<ul>
<li>Primary Dark: #121212</li>
<li>Secondary Dark: #1E1E1E</li>
<li>Night Blue: #2D5B9E</li>
<li>Night Purple: #6B4BA3</li>
<li>Night Teal: #1C746C</li>
</ul>
<h3>Neutral Shades</h3>
<ul>
<li>Surface Light: #3A3A3A</li>
<li>Surface Mid: #2C2C2C</li>
<li>Surface Dark: #1A1A1A</li>
</ul>
<h3>Color Usage Rules</h3>
<ul>
<li>A maximum of 2-3 colors per icon</li>
<li>The dark background always uses shades from the base palette</li>
<li>Accents are applied with reduced saturation</li>
<li>Gradients are used to create depth in dark tones</li>
</ul>
<h3>Contrast and Accessibility</h3>
<ul>
<li>Optimal contrast between elements: 2.5:1</li>
<li>Contrast of important elements: at least 3.5:1</li>
<li>All icons must be distinguishable at low screen brightness</li>
</ul>
<h3>Stylistic Standards</h3>
<ul>
<li>Main shape: rounded square with a 14px radius</li>
<li>Line thickness: 1.8px for better visibility in the dark</li>
<li>Inner padding: at least 5px from the edge</li>
<li>Grid size: 24x24px base size</li>
</ul>
<h3>Shadows and Volume</h3>
<ul>
<li>Inner shadows: opacity 15%, soft spread</li>
<li>Light glow for accent elements</li>
<li>Use of gradients to create volume</li>
</ul>
<h3>Implementation Recommendations</h3>
<ul>
<li>SVG as the primary format</li>
<li>PNG with transparency preserved</li>
<li>Optimization of files for dark themes</li>
</ul>
<h3>Scalability</h3>
<ul>
<li>Testing in sizes from 16x16px to 512x512px</li>
<li>Maintaining clarity in low light conditions</li>
<li>Optimization for OLED/AMOLED screens</li>
</ul>
<h3>Compatibility</h3>
<ul>
<li>Automatic adaptation to system dark theme</li>
<li>Correct display on different types of screens</li>
<li>Support for various night lighting modes</li>
</ul>
</section>
</div>
</body>
</html>
151 changes: 151 additions & 0 deletions night/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeltaDesign Concept Night Calculator</title>
<style>
body {
background: linear-gradient(135deg, #121212, #1E1E1E);
color: #fff;
font-family: Arial, sans-serif;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}

.calculator {
background: #1A1A1A;
width: 320px;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
padding: 20px;
}

.screen {
background: #2C2C2C;
height: 80px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: flex-end;
align-items: center;
padding: 10px;
color: #fff;
font-size: 24px;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

.btn {
background: #3A3A3A;
color: white;
font-size: 18px;
border: none;
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}

.btn:hover {
background: #6B4BA3;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.7);
}

.btn.highlight {
background: #2D5B9E;
}
</style>
</head>
<body>
<div class="calculator">
<div class="screen" id="screen">0</div>
<div class="buttons">
<button class="btn" onclick="appendNumber('1')">1</button>
<button class="btn" onclick="appendNumber('2')">2</button>
<button class="btn" onclick="appendNumber('3')">3</button>
<button class="btn highlight" onclick="setOperation('+')">+</button>

<button class="btn" onclick="appendNumber('4')">4</button>
<button class="btn" onclick="appendNumber('5')">5</button>
<button class="btn" onclick="appendNumber('6')">6</button>
<button class="btn highlight" onclick="setOperation('-')">-</button>

<button class="btn" onclick="appendNumber('7')">7</button>
<button class="btn" onclick="appendNumber('8')">8</button>
<button class="btn" onclick="appendNumber('9')">9</button>
<button class="btn highlight" onclick="setOperation('*')">*</button>

<button class="btn" onclick="appendNumber('0')">0</button>
<button class="btn" onclick="appendNumber('.')">.</button>
<button class="btn highlight" onclick="calculate()">=</button>
<button class="btn highlight" onclick="setOperation('/')">/</button>
</div>
</div>

<script>
let currentNumber = '';
let previousNumber = '';
let operation = null;

const screen = document.getElementById('screen');

function appendNumber(number) {
if (number === '.' && currentNumber.includes('.')) return;
currentNumber += number;
updateScreen();
}

function setOperation(op) {
if (currentNumber === '') return;
if (previousNumber !== '') {
calculate();
}
operation = op;
previousNumber = currentNumber;
currentNumber = '';
}

function calculate() {
if (operation === null || currentNumber === '' || previousNumber === '') return;
let result;
const prev = parseFloat(previousNumber);
const current = parseFloat(currentNumber);

switch (operation) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
result = current === 0 ? 'Error' : prev / current;
break;
default:
return;
}

currentNumber = result.toString();
operation = null;
previousNumber = '';
updateScreen();
}

function updateScreen() {
screen.textContent = currentNumber || '0';
}
</script>
</body>
</html>

0 comments on commit 344a1dc

Please sign in to comment.