Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
NashAiomos authored May 23, 2024
1 parent b9efc67 commit f3ab0ad
Show file tree
Hide file tree
Showing 6 changed files with 630 additions and 34 deletions.
72 changes: 42 additions & 30 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,21 @@

<header data-animation="fadeIn">
<h1>
<div class="title" data-animation="slideInDown" data-animation-delay="0.75s">
<div class="title" data-animation="slideInDown" data-animation-delay="0.5s">
<b>
👋Social Media,
👋Social Media,
<br>
Back to the People.
</b>
<p>Join a decentralized social network where you control your data and connect freely. Experience a platform built on individual <span>S</span><span>o</span><span>v</span><span>e</span><span>r</span><span>e</span><span>i</span><span>g</span><span>n</span><span>t</span><span>y</span> and community collaboration.</p>
<p>
Join a decentralized social network where you control your data and connect freely.
<br>
Experience a platform built on individual
<span>S</span><span>o</span><span>v</span><span>e</span><span>r</span><span>e</span><span>i</span><span>g</span><span>n</span><span>t</span><span>y</span>
and community collaboration.
</p>
</div>
<div class="subtitle" data-animation="slideInUp" data-animation-delay="1.5s">
<div class="subtitle" data-animation="slideInUp" data-animation-delay="1s">
<div class="app-link">
<a href="https://2f64i-aaaaa-aaaan-qiu4q-cai.icp0.io" target="_blank" rel="noopener noreferer">
Launch APP
Expand All @@ -44,12 +50,15 @@ <h1>
</h1>
</header>

<div class="part1">
<img class="part1-img" src="./img/img1.webp">
<div class="part1-word">
<div class="part1-title">Where Users Reign Supreme in the Digital Realm</div>
<div class="part1" data-animation="fadeIn">
<img class="part1-img" src="./img/img1.webp" data-animation="slideInDown" data-animation-delay="0.5s">
<div class="part1-word" data-animation="slideInUp" data-animation-delay="0.3s">
<div class="part1-title">
Where Users Reign Supreme in the Digital Realm
</div>
<p>
Each user possesses an independent server (<a href="https://internetcomputer.org/how-it-works/canister-lifecycle/" target="_blank" rel="noopener noreferrer">Canister</a>) deployed on a <a href="https://internetcomputer.org" target="_blank" rel="noopener noreferrer">decentralized cloud computing network</a>. Entirely controlled by the user's private key, it securely stores personal information. This ensures exceptional responsiveness and an outstanding user experience.
Each user possesses an independent server (<a href="https://internetcomputer.org/how-it-works/canister-lifecycle/" target="_blank" rel="noopener noreferrer">Canister</a>) deployed on a <a href="https://internetcomputer.org" target="_blank" rel="noopener noreferrer">decentralized cloud computing network</a>.
Entirely controlled by the user's private key, it securely stores personal information. This ensures exceptional responsiveness and an outstanding user experience.
<br>
<br>
Join us in ushering a new era of user-centric social networking.
Expand All @@ -63,16 +72,17 @@ <h1>
</div>
</div>

<div class="part2">
<div class="part2-word">
<div class="part2" data-animation="fadeIn">
<div class="part2-word" data-animation="slideInUp" data-animation-delay="0.3s">
<div class="part2-title">Harnessing Decentralization's Avant-Garde</div>
<p>
By leveraging decentralized cloud computing, we are dedicated to empowering individuals to reclaim control over their data and online presence. We upholds the principles of privacy, security, and autonomy, enabling users to connect and interact without reliance on centralized authorities.
By leveraging decentralized cloud computing, we are dedicated to empowering individuals to reclaim
control over their data and online presence. We upholds the principles of privacy, security, and autonomy, enabling users to connect and interact without reliance on centralized authorities.
<br>
Through this innovative approach, we aim to revolutionize the social networking landscape, fostering a truly democratic and user-centric digital ecosystem.
Through this innovative approach, we aim to revolutionize the social networking landscape, fostering a truly democratic and user-centric digital ecosystem.
</p>
</div>
<img class="part1-img" src="./img/img2.png">
<img class="part1-img" src="./img/img2.png" data-animation="slideInDown" data-animation-delay="0.5s">
</div>

<div class="card-title">
Expand All @@ -91,10 +101,10 @@ <h1>
<a href="./technology/index.html" target="_blank" rel="noopener noreferrer">
<div id="card-button-container">
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">How it works</span>
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">How it works</span>
</button>
</div>
</a>
Expand All @@ -104,17 +114,17 @@ <h1>
<div class="box" data-animation="zoomIn" data-animation-delay="300ms">
<span class="box-icon">📝</span>
<div class="card-header">Community-driven</div>
<div class="card-word">
<div class="card-word">
See our plans for a better social future.
</div>

<a href="./roadmap/index.html" target="_blank" rel="noopener noreferrer">
<div id="card-button-container">
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">Roadmap</span>
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">Roadmap</span>
</button>
</div>
</a>
Expand All @@ -123,7 +133,7 @@ <h1>
<div class="box" data-animation="zoomIn" data-animation-delay="600ms">
<span class="box-icon">👀</span>
<div class="card-header">Stay Tuned</div>
<div class="card-word">
<div class="card-word">
Connect with community that values your voice and privacy.
</div>
<div class="card-button">
Expand All @@ -133,20 +143,22 @@ <h1>
</div>
</a>
<a href="https://x.com/icecubeapp" target="_blank" rel="noopener noreferrer"></a>
<div class="card-button-social">
<img class="card-dc" src="./img/Discord.svg" alt="Discord">
</div>
<div class="card-button-social">
<img class="card-dc" src="./img/Discord.svg" alt="Discord">
</div>
</a>
<a href="https://x.com/icecubeapp" target="_blank" rel="noopener noreferrer"></a>
<div class="card-button-social">
<img src="./img/Openchat.svg" alt="Openchat">
</div>
<div class="card-button-social">
<img src="./img/Openchat.svg" alt="Openchat">
</div>
</a>
</div>
</div>
</div>

<script src="./script.js"></script>
<script src="./instantpage-5.2.0.js"></script>

</body>

</html>
2 changes: 2 additions & 0 deletions instantpage-5.2.0.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 5 additions & 4 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ header .title p {
font-weight: normal;
}

header .title span:first-child {color: #0633f8;}
header .title span:nth-child(1) {color: #0633f8;}
header .title span:nth-child(2) {color: #0e31f9;}
header .title span:nth-child(3) {color: #312df8;}
header .title span:nth-child(4) {color: #3d26f8;}
Expand All @@ -282,8 +282,9 @@ header .title span:nth-child(6) {color: #611ef9;}
header .title span:nth-child(7) {color: #751af9;}
header .title span:nth-child(8) {color: #8217f9;}
header .title span:nth-child(9) {color: #8b15f9;}
header .title span:nth-child(10) {color: #9e11f9;}
header .title span:nth-child(10) {color: #9e11f8;}
header .title span:nth-child(11) {color: #9a12f9;}
header .title span:nth-child(12) {color: #9606fc;}

.app-link a {
display: flex;
Expand Down Expand Up @@ -453,8 +454,8 @@ button:hover .button-text {
}

.card-button-social {
width: 3.7rem;
height: 3.7rem;
width: 3.5rem;
height: 3.5rem;
margin: 10px;
display: flex;
align-items: center;
Expand Down
125 changes: 125 additions & 0 deletions technology/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Technology</title>
<link rel="icon" href="../favicon.png">
<link rel="stylesheet" href="./style.css">
</head>

<body>

<div class="bouncing-blobs-container">
<div class="bouncing-blobs-glass"></div>
<div class="bouncing-blobs">
<div class="bouncing-blob bouncing-blob--blue"></div>
<div class="bouncing-blob bouncing-blob--blue"></div>
<div class="bouncing-blob bouncing-blob--blue"></div>
<div class="bouncing-blob bouncing-blob--white"></div>
<div class="bouncing-blob bouncing-blob--purple"></div>
<div class="bouncing-blob bouncing-blob--purple"></div>
<div class="bouncing-blob bouncing-blob--pink"></div>
</div>
</div>

<main>
<section>
<h1>Harnessing Decentralization's Avant-Garde</h1>
<p>
ICE CUBE distinguishes itself by granting users control over their own canister to store all information, ensuring no external interference. Users exclusively interact with their own canister, enabling a seamless and rapid experience, unaffected even during high user volumes. ICE CUBE also features an open database, allowing anyone to freely query any data, breaking away from the data silos seen in Web2 applications.
</p>
<p>
On another note, ICE CUBE incorporates a unique incentive mechanism for creators through the Bonding Curve. ICE CUBE tokenizes posts and publicly issues them, providing returns to purchasers.
</p>
<p>
<mark data-author="Financial Rewards"><span>Essentially, every post can be "tokenized," with tokens issued in a manner akin to fungible tokens, where the price of each share gradually increases with the quantity purchased.</span></mark>
</p>
<p>
By offering contributors an expected return on investment, ICE CUBE encourages spontaneous early donations to valuable public goods. The entire process of asset
issuance and returns is governed by smart contracts, ensuring transparency and openness.
</p>
</section>

<section>
<h2 id="introduction-to-technical-architecture">
Introduction to technical architecture
</h2>
<p>
ICE CUBE embraces the Actor model, continuously exploring technologies for decentralized application (DApp) built entirely upon Actor model principles.
</p>
<p>
<mark data-author="Actor Model" style="--hue: 777"><span>The foundational unit of ICE CUBE is the canister, a concept we believe aligns synergistically with the Internet Computer.
DApps constructed upon this architectural paradigm may emerge as the prevailing norm, unlocking myriad possibilities for innovation derived from this powerful concept.</span></mark>
</p>
<h2 id="detailed-description-of-technical-architecture">
Detailed description of technical architecture
</h2>
<p>
ICE CUBE incorporates modular design, an open database, user cloud terminals, and a creator incentive mechanism.
</p>
<ul>
<li>
Modular Design: Categorizes canisters based on functionality, each with its designated role.
</li>
<li>
Public Database: An open database allowing anyone to directly publish and access content.
</li>
<li>
User Cloud Terminals: Each user possesses their small independent server (canister), offering on-chain private services.
</li>
<li>
Creator Incentives: Assigns "tokens" to post, distinguishing outstanding content.
</li>
</ul>
<p>
<mark data-author="Smooth Experience" style="--hue: 280"><span>Its architecture is designed based on the actor model provided by IC.
Decentralized collaboration among canisters facilitates information flow, with users needing only to query canisters for all relevant information.</span></mark>In essence, users interact solely with their own canister at the frontend, leaving subsequent collaboration tasks to be gradually
completed by the canisters.
</p>
<p>
We create a Feed canister for each user to store their personal information flow, serving as their private space. Users can save posts in their own canister (Feed canister), and no one else can delete them besides the user.
</p>
<p>
Interactions between users and the public area are automatically handled by the Feed canister. Users can simply query their Feed canister to obtain the latest information flow from those they follow. Posting, commenting, and liking interactions are also automatically completed by the Feed canister in subsequent operations.
</p>
<p>
<mark data-author="🧊" style="--hue: 175"><span>Overall, ICE CUBE can be divided into four modules: User, Feed, Post, and Fetch.</span></mark>
</p>
<ul>
<li>
User canister: The user zone responsible for recording user information and relationships. It stores user profiles and follower relationships.
</li>
<li>
Post canister: The public zone that stores all publicly posted content. The Root Post canister can create numerous Bucket canisters to store posts.
</li>
<li>
Feed canister: The information stream storing a user's personal information flow. The Root Feed canister creates a Feed canister for each user.
</li>
<li>
Fetch canister: The intermediary station responsible for pushing the latest information flow of a specific user. It records posts, comments, or likes that the user's Feed canister has not fetched.
</li>
</ul>
<p>
Users can also incorporate advanced custom features by deploying an independent Feed canister to
interact with the public zone. For example, sending posts point-to-point to specific Feed canisters to
create private social circles or connecting to AI for automatic posting. Any functionality is
achievable, with the community having the flexibility to develop and expand various features, such as
adding a point-to-point private messaging feature.
</p>
<p>
<mark data-author="Advantage" style="--hue: 77"><span>The advantage of this approach is that users only need to query their Feed canister to access posts from those they follow. It is convenient, swift, and all backend processes are decentralized collaborations between canisters, completely decoupled.</span></mark> The system continues running even if several canisters go offline.
</p>

<hr style="color: black;"/>

<p>
<a href="https://neutronstardao.github.io/constellation.github.io/9.DevelopingDApp/2.DesigningDApp.html">Check out the Docs for more.</a>
</p>
</main>

<script src="./script.js"></script>

</body>

</html>
Loading

0 comments on commit f3ab0ad

Please sign in to comment.