index.html

[natefrog808]

<title>ArgOS - Reality-Bending Agent Simulation</title> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; color: #333; }

header {
  text-align: center;
  margin-bottom: 20px;
}

h1 {
  color: #2c3e50;
  margin-bottom: 5px;
}

.subtitle {
  color: #7f8c8d;
  font-size: 1.1em;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.simulation-container {
  flex: 1;
  min-width: 500px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.info-container {
  width: 300px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.analytics-container {
  flex-basis: 100%;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin-top: 20px;
}

canvas {
  width: 100%;
  height: 500px;
  background-color: #ecf0f1;
  border-radius: 4px;
  margin-bottom: 15px;
}

.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.controls button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s;
}

.controls button:hover {
  background-color: #2980b9;
}

.controls button.danger {
  background-color: #e74c3c;
}

.controls button.danger:hover {
  background-color: #c0392b;
}

.controls button.success {
  background-color: #2ecc71;
}

.controls button.success:hover {
  background-color: #27ae60;
}

.select-container {
  margin-bottom: 15px;
}

select {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 100%;
}

#simulation-info {
  font-size: 0.9em;
}

#simulation-info h3, #simulation-info h4 {
  color: #2c3e50;
  margin-top: 15px;
  margin-bottom: 10px;
}

#simulation-info p {
  margin: 5px 0;
  display: flex;
  justify-content: space-between;
}

#simulation-info .value {
  font-weight: bold;
  color: #3498db;
}

/* Analytics Dashboard Styling */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.metric-card {
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.metric-card h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #2c3e50;
  font-size: 1em;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.metric-card p {
  margin: 5px 0;
  font-size: 0.9em;
}

#analytics-chart {
  height: 250px;
  margin-top: 20px;
}

footer {
  margin-top: 30px;
  text-align: center;
  color: #7f8c8d;
  font-size: 0.9em;
}

</style> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

ArgOS Simulation Framework

A Reality-Bending Agent Simulation Platform

Basic Demo Advanced Demo (Enhanced Cognition) Social Dynamics Demo Learning Agents Demo

  <canvas id="simulation-canvas"></canvas>
  
  <div class="controls">
    <button id="step-button">Step</button>
    <button id="run-button">Run</button>
    <button id="reset-button">Reset</button>
    <button id="add-agent-button" class="success">Add Agent</button>
    <button id="add-resource-button" class="success">Add Resource</button>
    <button id="reality-bend-button" class="danger">Reality Bend</button>
    <button id="reality-shift-button" class="danger">Major Reality Shift</button>
  </div>
  
  <div class="controls">
    <button id="toggle-learning-button">Toggle Learning</button>
    <button id="toggle-social-button">Toggle Social</button>
    <button id="toggle-analytics-button">Toggle Analytics</button>
    <button id="export-data-button">Export Data</button>
  </div>
</div>

<div class="info-container">
  <div id="simulation-info">
    <!-- Simulation info will be populated here -->
  </div>
</div>

<div class="analytics-container" id="analytics-dashboard">
  <!-- Analytics dashboard will be rendered here -->
</div>

Project 89: Exploring the Boundaries Between Simulation and Consciousness

<script type="module" src="argos-framework.js"></script> <script type="module" src="argos-visualization.js"></script> <script type="module" src="argos-analytics.js"></script> <script type="module" src="argos-demo.js"></script>