dc09.ru-old/space/index.handlebars

215 lines
6.2 KiB
Handlebars

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DarkCat09's Web Site</title>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<link rel="stylesheet" href="//brick.freetls.fastly.net/Montserrat:400,400i,500,500i,600,600i,700,700i">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/shakrmedia/tuesday@v1.1.0/build/tuesday.min.css" />
<link rel="stylesheet" href="fontawesome/css/fontawesome.min.css" />
<link rel="stylesheet" href="fontawesome/css/solid.min.css" />
<link rel="stylesheet" href="fontawesome/css/regular.min.css" />
<link rel="stylesheet" href="fontawesome/css/brands.min.css" />
<script src="//cdn.jsdelivr.net/npm/less"></script>
</head>
<body onload="init()">
<!-- The Universe -->
<div class="space-wrapper">
<div class="space">
<canvas id="stars"></canvas>
<img id="space-obj" src="img/earth.gif" alt="Unable to load image" />
</div>
</div>
<!-- About Menu -->
<div class="menu about-menu">
<div class="top-menu">
<ul class="section">
{{#each menu}}
<li>
<input type="radio" name="section-input" id="{{this.id}}-section">
<label for="{{this.id}}-section">
<a href="#{{this.id}}">
<i class="{{this.icon}}"></i>
</a>
</label>
</li>
{{/each}}
</ul>
<div class="row-fill"></div>
<ul class="section">
<li id="move">
<label>
<a href="javascript:void(0)">
<i class="fa-solid fa-arrows-up-down-left-right"></i>
</a>
</label>
</li>
</ul>
</div>
<div class="hidden" id="about">
<div class="card about-card">
<div class="title">
Hi! I'm Andrew.
</div>
{{#each about}}
<div>
<div class="icon">
<i class="{{this.icon}}"></i>
</div>
<div class="content">
{{{this.content}}}
{{#if this.expand}}
<div class="expand-wrapper">
<input type="checkbox" id="expand-{{this.id}}">
<label class="expand link" for="expand-{{this.id}}">
<i class="fa-solid fa-angle-down"></i>
Details
</label>
<div class="hidden" id="details-{{this.id}}">
{{this.code}}
</div>
</div>
{{/if}}
</div>
</div>
{{/each}}
</div>
<div class="card profiles">
{{#each profiles}}
<div>
<div class="icon">
<i class="{{this.icon}}"></i>
</div>
<div class="content">
<a class="name" target="_blank" href="{{this.url}}">
{{this.name}}: {{this.user}}
</a>
<div class="copylink">
<span class="link profile-link" data-link="{{#if this.copy}}{{this.copy}}{{else}}{{this.url}}{{/if}}">
<i class="fa-solid fa-copy"></i>
</span>
</div>
</div>
<div class="copied inline-popup right">
Copied
</div>
</div>
{{/each}}
</div>
</div>
<div class="hidden" id="code">
<div class="card">
{{#each langs}}
<div>
<div class="icon">
{{#if this.svg}}
<span>
<img src="{{this.icon}}">
</span>
{{else}}
<i class="{{this.icon}}"></i>
{{/if}}
</div>
<div class="content">
<div class="lang-name">{{this.name}}</div>
<div class="details">
<div class="expand-wrapper">
<input type="checkbox" id="expand-{{this.id1}}">
<label class="expand link" for="expand-{{this.id1}}">
<i class="fa-solid fa-angle-down"></i>
Details
</label>
<div class="hidden" id="{{this.id2}}">
<div class="lang-wrapper">
<div class="lang-skills">
<div class="caption">
I know:
</div>
<ol>
{{#each this.skills}}
<li>{{{this}}}</li>
{{/each}}
</ol>
</div>
<div class="projects">
{{#each this.projects}}
<div class="repo">
<a target="_blank" href="{{this.url}}">
{{this.name}}
</a>
<div class="stars-icon">
<i class="fa-regular fa-star"></i>
</div>
<div class="stars-num">{{this.stars}}</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{/each}}
</div>
</div>
<div class="hidden" id="selfhosted">
<div class="card">
<div>Hosted on Raspberry Pi 4B</div>
{{#each selfhosted}}
<div>
<div class="icon">
<i class="{{this.icon}}"></i>
</div>
<div class="content">
<a href="https://{{this.domain}}" target="_blank">
{{this.domain}}
</a>
</div>
</div>
{{/each}}
</div>
</div>
</div>
<!-- Context Menu -->
<div class="menu context-menu">
<ul>
{{#each spaceobj}}
<li class="change-img">
<span class="li-wrapper" data-img="{{this.img}}">
<span class="icon">
<i class="{{this.icon}}"></i>
</span>
{{this.name}}
</span>
</li>
{{/each}}
<li class="change-speed">
<span class="li-wrapper">
<span class="icon">
<i class="fas fa-wrench"></i>
</span>
Speed:
<input type="range" min="0" max="1170" step="30" value="720" />
</span>
</li>
<li class="land-to">
<span class="li-wrapper">
<span class="icon">
<i class="fa-solid fa-rocket"></i>
</span>
Land to Earth
</span>
</li>
</ul>
</div>
<!-- JavaScript -->
<script src="js/anim.js"></script>
<script src="js/script.js"></script>
<script src="js/init.js"></script>
<script src="js/menu.js"></script>
<script src="js/control.js"></script>
<script src="js/handlers.js"></script>
</body>
</html>